Designing craft style grunge web templates
10 Chain link
10 Chain link

The chain link is part of the lace necklace. It adds visual play to the theme and is great as a separator in the body copy. The original scan was a bit shorter than required, so it was elongated with repeated copy and pasting as well as the Clone Stamp. The colours were then adjusted to an earthy green tone to fit in with the rest of the piece.
11 Fonts

A calligraphic font called Porcelain was chosen for the menu, and a rather stylish, feminine font called Eurofurence Light for content headings. The body copy is a quiet Arial in grey. The most important role of the fonts here is not to compete with the rest of the design since it is already highly visual in nature.
12 Photo

The frame and slight hazy effect were applied by double-clicking on the Photo layer to bring up Layer Styles, and modifying the Stroke and Inner Glow tab. Now the photo is softer and more attuned to the theme. Finally, a Drop Shadow was applied from the Layer Styles to give it a bit of depth.
13 Menu 1

The menu was created by scanning a notebook. To remove the background, a shape was traced around the book with the Pen tool in Photoshop, and then converted into a selection under the Paths window. Then the inverse area was selected with Ctrl+Shift+I and deleted.
14 Menu 2

The original notebook scan was a bit dark so the colours, levels and saturation were adjusted to make it a more subdued and earthy toned. A slight Drop Shadow is applied to add a finishing touch. Now it looks the part and is a good match for the other textures and graphics.

















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?
Trackbacks
What's your opinion?