In this world of gradients, logo reflections, horizontal stripes and rounded edges, the web has become bloated with sites obsessed with looking Web 2.0, when in fact the term is meaningless when applied to pure aesthetics. Fighting back against the gleaming white websites and their uninspired shine is the so-called “grunge” look; an aesthetic more interested in dirty, worn, scratched and jagged textures. It’s a muddy Doc Martens boot in the face of Web 2.0 neatness. However, achieving an authentic look isn’t easy, and many get lost along the way with how to “mess up” a site that has a decent, solid structure at the foundation of its design. Well read on!
I have two words for you: dirt and decay. These arethe key components of the grunge aesthetic, and they’re all around us, given that the very nature of most real-world objects is to degrade over time. It’s the malfunctioning quality of decay that really sets this look apart from designs that smack of sterile cleanliness.
And that’s the task this issue: making a clean website design in Photoshop 'grunge', putting some icing on the cake along the way. Or should that be mud?
1. Photoshop grunge
Get started by creating a new Photoshop document with a width of 910 pixels and a height of 700 pixels. Add some vertical guides (View > New Guide) at 50 and 860 pixels, so that there’s an inner width of 810.
2. Create three columns
Add some more new guides, this time at 320 and 590 pixels. This gives us three central columns, all of equal width (270 pixels). This is reminiscent of older newspapers and different from the more standard web layout of unequally wide columns.
3. The content area
Open a new layer and call it “wrapper”. With the Marquee tool, make a selection that spans the height of the document from the first vertical guide at 50 to the last at 860. Fill it with a flat colour. This central column should span the width of the mini columns.
4. Plant a tree
Open ‘tree.jpg’ and drag it onto your document. Rename the layer “tree”. Use Free Transform (Ctrl/Cmd+T) until the image is slightly narrower than the canvas. Go to Image > Adjustments and from here set the Brightness to +10, Contrast to +80 and Hue to -1555.
5. Grunge fonts
Add a horizontal guide at 270 pixels. Move the tree so the ground sits on the guide. Type “The Dead Designers”. Move the type layer to the top-left. Change the font – I used Eduardo Recife’s Nasty and Shortcut fonts – or drag the layers in from ‘logo.psd’.
6. Navigation text
Using the Shortcut font in a dark red, write “news”, “gigs”, “music”, “info” and “contact”, each on a separate line. Create a layer named “lines”. Using the Brush tool and varying radiuses, draw scratchy lines from the top-right of the canvas to the tree, underlining the text.
7. Add texture
Open ‘mountains.jpg’ and drag it onto the canvas. Rename it “mountains” and move it to the top of the layer stack. Change its Blend mode to Multiply from the drop-down menu in the Layers palette, and you’ll see how it gives everything underneath it a great texture.
8. Write page titles
Open ‘promoBanner.psd’ and drag all of the layers onto your document. Move the ‘mountains’ layer so that it sits between “buy the album” and “white line”. Write “buy the album” on a new layer and place it in the left column. Add more page titles for later.
9. Tidy up the logo
Using the little arrow in the top-right of the Layers palette, rasterise the text layers, merge them, and give the merged layer a 1-pixel stroke using the layer effects invoked by double-clicking on the layer. Give the navigation text a stroke as well to help it to stand out.
10. Increase the canvas
Select Image > Canvas Size and change the canvas size to 1,400x920. Make sure you click on the top-centre arrow to ensure the canvas is increased from that registration point.
11. Grunge textures
Open ‘background.psd’ from your tutorial files, flatten the image and drag it over to your main document. Name the layer “bg textures” and place it at the bottom of the layer stack. Delete the default white background that was there.
12. Uneven sides
Open ‘sides.psd’ and drag the textures to the top of the layer stack. These add an uneven border to the side of our content container. As they’re semi-transparent, you’ll be able to see the background through the spaces. When scrolling, this will be a cool effect!
13. Save for web
Your file should now resemble ‘complete.psd’ on your source files. Hide all of the layers in the PSD, except for the background image. Go to File > Save For Web and choose JPEG from the drop-down menu. Save it at High quality and call it “body.jpg”.
14. Without styling
In a text editor, open ‘step14.html’ in the ‘site’ folder. If you preview this in a browser, you’ll see that the content is there but there’s no styling. Take note of the markup and pay attention to how I’ve structured the document.
15. With styling
Open ‘step15.html’ and you’ll see that I’ve added basic styling. The default browser styles have been reset and a basic layout has been established. The main content will sit in three columns. Preview the file in a browser to see where we’ve got to so far.
16. View my changes
Open ‘step16.html’. The z-indexes were necessary to position elements above others. I’ve moved the packshot image outside of the containing element via negative positioning, and the footer graphic’s scratchy borders mirror those in the masthead background.
Open ‘step17.html’ and notice the styling. The h2 and h3 elements have been replaced by images. The text within the h1 element was already in the masthead background image, so I didn’t need to declare a background there. Instead, I shifted the text offscreen and specified the width/height to match the logo in the masthead image
18. The navigation
Open ‘step18.html’ in a text editor and browser. Look at the CSS I added: the navigation text is replaced by an image, and the image’s background position shifts according to link state – you see a different part of the image when the link is hovered over.
19. Job done!
Open ‘complete.html’ and you’ll see that some subtle margins, padding, and a few well-placed borders have also helped add clarity to the individual sections of the page. Finally, the skull images have been floated for a more desirable and varied look.
