Designing craft style grunge web templates
15 Menu ribbon
15 Menu ribbon
A ribbon is especially fitting because it keeps to the overall vintage theme, and is also a great decorative item. Here, a ribbon was scanned, background removed and colours adjusted to a pale mauve. A little bit of highlighting with the Dodge tool set at seven per cent adds a slight sheen.
16 Side strip
The strip of fabric on the right acts as an anchor for the menu; otherwise it would be floating. Like the lace trim, it was scanned, the background removed, colours tinted to a pale blue and the contrast slightly increased to make it brighter. Finally, it was copy and pasted repeatedly to run along the entire page.
17 Ad space
The area below the menu is great for secondary content like ad space. It was created by duplicating the scanned pages for the main menu and changing its hue to a light mint colour. This is done to appear visually different from the main menu but still retain the function as a sidebar.
18 Green lace
The green lace trim from the header graphic is copied and pasted as the footer graphic. The size is slightly decreased so that it is not the exact duplicate and acts as a reminder of the header graphic. This is a fitting purpose since it is a footer graphic to the page.
19 Wallpaper
The wallpaper footer is brighter than the main wallpaper and also has a watercolour texture applied for additional variation. This was done by selecting the bottom section of the wallpaper layer and copy and pasting it on a new layer. Then the watercolour texture layer was duplicated and placed on top at 100 per cent Multiply.
20 Emblem
In Illustrator, the crest portion of the emblem was duplicated and colours changed so that it acts as a secondary version to the original. Then it was copied and pasted into Photoshop at 45 per cent Multiply, and placed under the footer as an ending graphic to remind the viewer of the website identity.
to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
I loved this tutorial! I love the crafts style websites I am seeing online and would like to design a few of these sites myself. My question is – how do you write the code for this design? Do you slice it and place the design in a tables layout or do you have one big background image and write css to display the different elements of the design?
Youre so cool! I dont suppose Ive learn something like this before. So nice to seek out somebody with some original ideas on this subject. realy thank you for beginning this up. this web site is one thing that’s needed on the net, somebody with a little originality. useful job for bringing one thing new to the web!