Designing craft style grunge web templates
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.
(Originally appeared in Web Designer Issue 154 – Author: Wendy Ding)
You can download the tutorial files here
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The same headings from the main menu are repeated along the footer as plain links to give the viewer an additional option to easily change navigation. Here, the font is a simple Arial to be more functional and secondary to the original fancier font of Porcelain in the main menu.
Now it’s time to fine-tune the alignment and neatness with a few handy guides. Turn on the rulers with Ctrl+R and drag out a vertical guide to align the main content along the left side of the page. Add another horizontal guide to align the top line of the graphics for the body content. You’re nearly done now!
When nearing the end of the design, look over the final product for quality assurance. Are all the elements in tact? Are the graphics stellar? Contrast and colours all right? Sizes and placement is optimal? Spelling is perfect? Make sure to check every component and correct accordingly until you are satisfied.