Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
29th May 2009

Designing craft style grunge web templates

10 Chain link

10 Chain link
Designing craft style grunge web templates
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
Designing craft style grunge web templates
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
Designing craft style grunge web templates
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
Designing craft style grunge web templates
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
Designing craft style grunge web templates
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.

Pages: 1 2 3 4

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.

    2 Comments »

    • Toni said:

      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?

    Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

    Be nice. Keep it clean. Stay on topic. No spam.