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

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

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

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

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

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

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

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

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

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