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

MAKING A VINTAGE INSPIRED WEBSITE IS ALL ABOUT COMBINING ORGANIC TEXTURES, EARTHY COLOURS AND GRUNGY FABRICS

Designing craft style grunge web templates
MAKING A VINTAGE INSPIRED WEBSITE IS ALL ABOUT COMBINING ORGANIC TEXTURES, EARTHY COLOURS AND GRUNGY FABRICS

IN THIS TUTORIAL, organic textures and fabrics containing a tactile, grungy and weathered look are paired with calligraphic typography to create a rustic aesthetic. We here at Web Designer are lovers of Victorian and vintage-inspired fashions, and have gathered various textures of real crafty items, such as a frilly necklace, lace trimmings, watercolour paint texture, ribbons, chain link and tattered fabric to get the handmade look just right. A hand-illustrated header emblem establishes the website brand and style, while a digitally illustrated wallpaper background adds a finishing touch with a decorative elegance. Each element beautifully complements one another, and the final website reads like a scrapbook full of precious memories, graceful visual accents and a nostalgic mood like no other. The key is to unite traditional and digital image-making methods to produce a unique design that blurs the line between handmade and computer-rendered. This in turn will make the design stand out from other websites that are more heavily digitally crafted.

Download the tutorial files
Originally appeared in Web Designer Issue 154 – Author: Wendy Ding

01 Inspiration
Designing craft style grunge web templates
Having the right influence plays greatly in producing an effective design. For this website template, Victorian, Baroque and vintage accents were the inspiration. Ribbons, lace, emblems, paper and textured fabrics were combined to create a result that is reminiscent of a scrapbook, complete with an altogether organic and rustic feel.

02 Colour theme
Designing craft style grunge web templates
The colour theme is very important as it determines the overall mood of your project. Since the look we’re going for here is organic and rustic infused with natural textures and fabrics, an earthy colour palette of mossy green was chosen. This will ensure that the colours will not be too overwhelming against the barrage of heavy visual textures.

03 Scanning
Designing craft style grunge web templates
Found items, such as ribbons, watercolour paper, fabric and a lace necklace, were individually scanned. Then each background was removed with the Lasso tool and some careful erasing with the Eraser tool. Last of all, the colour and lightness values were adjusted to a paler colour and the saturation was decreased to make them appear more similar.

04 Combining elements
Designing craft style grunge web templates
When dealing with different textures, combine them in a way that brings out their individual best qualities. The lace and ribbons were best as decorative trims, while the fabric was great as a canvas. The wallpaper was created from scratch in Illustrator and contains just the right amount of detail when placed behind the canvas.

05 Emblem graphic
Designing craft style grunge web templates
The emblem graphic was inspired by Victorian brooches and aesthetics. The crest shape, ribbons, swirls and details were hand-drawn on watercolour paper with a calligraphic pen and Indian ink. Then it was scanned and the background removed with the Magic Wand tool in Photoshop. Finally, colours and type were added digitally in Illustrator.

06 Green lace and white trim
Designing craft style grunge web templates
The green lace and white trim were scanned, and the background removed with the Lasso tool and careful erasing with the Eraser tool. Then it was elongated with repeated copy and pasting as well as the Clone Stamp, and the colours were adjusted to appear a touch more rustic. A very faint Drop Shadow is applied to add a hint of depth.

07 Watercolour texture
Designing craft style grunge web templates
Using a light watercolour wash, the paint was applied to watercolour paper. The original scan was only a small area, so the Clone Stamp was applied and it was copy and pasted repeatedly to turn it into a long horizontal shape. Certain areas were brightened slightly with the Dodge tool at seven per cent to appear more airy.

08 Textile pattern
Designing craft style grunge web templates
Baroque textiles were the inspiration and guide for the background wallpaper. In Illustrator, a fleur-de-lys shape was first created as the main element. Then, with the grid turned on as a visual aid and for accuracy, swirls and floral shapes were added in a repetitive rhythm to make it complete.

09 Canvas
Designing craft style grunge web templates
The fabric was scanned in, and the background removed with the Lasso tool and careful erasing with the Eraser tool. Like the watercolour texture, it was enlarged with repeated copy and pasting as well as the Clone Stamp, then duplicated and flipped horizontally. A slight Drop Shadow creates subtle depth.

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.
    • Pingback: Daily Digest for June 12th | Snow Fox Creations : The Blog

    • Toni

      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?

    • http://www.myipadreligion.com/ Frankie Saulino

      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!

    • http://design-companies-in-singapore.info/ design companies in singapore,singapore web design company,web design

      Generally I do not read article on blogs, but I would like to say that this write-up very compelled me to check out and do so! Your writing style has been amazed me. Thanks, very great article.

    • http://www.scamchecker.com/blog/groups/some-simple-tips-on-vital-details-for-acne-killer-where-exactly-to-go/ acne killer

      The bad news is that it covers the price.
      Also, drink in hand, anyone can purchase over the world was
      surprised. Try: Avene’s new Very High Protection SPF 50+ Emulsion, 15 from Boots, are powdered sachets to add the lemon juice homemade acne killer treatments. You might not have frequent painful acne killer breakouts may lessen.

    • Pingback: Useful links for HND Web Dev and more | Shaun Reeves Edu

    • http://www.thefreedomman.com/forum/profile.php?mode=viewprofile&u=9515 Angeles

      I think that everything said made a great deal of
      sense. However, what about this? suppose you added a
      little information? I am not saying your information is not good.
      , but suppose you added something to possibly grab folk’s attention? I mean Designing craft style grunge web templates | Photoshop | Web Designer is kinda boring. You could peek at Yahoo’s home page and
      note how they create post titles to grab people to open the links.
      You might add a related video or a pic or two to grab people interested about everything’ve got to say. In my opinion, it might make your posts a little livelier.