The Ultimate Grunge Design Tutorial
Great news! I’ve finally completed the tutorial that you’ve all been waiting for. This tutorial will discuss how to create a fantastic grunge layout in Photoshop. It uses some techniques that are fairly common, and a couple that I’ve not seen discussed elsewhere before.
To give you an idea of what we’ll be creating here is the finished product. Click on the image to see the full sized version.
Now, on with the lesson…
Step 1: Open up photoshop and create a new image roughly 1000px wide. Create a background layer and fill it with a dull urban looking color. Create a new layer and fade a darker color from the top of the layout as a gradient.
Step 2: Find an image of concrete or a similar surface. Some tutorials will tell you to create these textures from scratch, but I feel that you achieve the best effect and attention to detail by using a photo.
Step 3: Reduce this new layer to around 10% opacity.
Step 4: Use the lasso tool to make a shape like rays of light. Fill this selection with a gradient from white to transparent (using the radial gradient tool) and then reduce the finished layer to around 10% opacity. You now have some cool light rays in you background.
Step 5: Find a photo of a scrap piece of paper for your main content area. Cut out the paper using the magic wand or lasso selection tool. Reduce the opacity of this layer to around 70% so that it’s not too bright for your grungy layout. Give the layer a subtle black outer glow (size: 5, opacity: 20%).
Step 6: This is the tricky part of any grunge layout. You want to fill your background with ‘random’ grungy/urban images, such as badges, doodles, post it notes, graffiti etc… the trick to creating a good end result is balance. You need to make sure that all of these elements go well together, and more importantly fit with your background. To do this play around with opacities and hue/saturation until the effect is right. I could have added a lot more to this background, but I added just a few elements to give you an idea.
Step 7: Now I want to add a sidebar, so I find another photo of some scrap paper. I put this on a layer below the main content area, because I want it to appear to be behind this section. There is a problem because the main content area is 70% opacity, so the sidebar shows through. To get rid of this I use the magic wand to select the main content area, then go on the sidebar image layer and just delete this part of the image. To let the sidebar image blend in with the layout I reduce the saturation considerably and reduce the opacity to around 60%
Step 8: Now, I want to start adding some cool details to my content area/ side bar. The paper image for my content area isn’t lined, but I want to create some of my own. To do this I create a 1px high line, and then just erase parts of it using a grunge brush eraser. I then reduce the opacity of this layer and copy the layer many times to create a cool lined effect. I also want to add a coffee stain to this area to give it a realistic ‘desktop paper’ effect. I choose a photo of a coffee mug stain, select the stain using the magic want tool. Then I simply reduce the saturation by around 60% and opacity to around 20%. I position it on the edge of the paper to give the impression that this paper is above the sidebar paper, it’s all about depth.
Step 9: Now I want to add a menu. I use the font ‘Academy Engraved LET’ as it has an old, grungy look. This looks good, but I want it to look great, so I’ll do some more with the menu. I find a photo of some tape and cut this out and resize it to fit behind my menu text.
Step 10: Now I want to make my menu text really ‘pop’. I reduce the saturation of my tape image about 80%, and make the lightness -90. I then reduce this layer’s opacity to around 70%. To fade out the bottom of the menu I go to layer > add layer mask > reveal all, and then drag a gradient (black to transparent) upwards.
Step 11: Now I want to add a cool hover effect for the menu. I create a new image, and draw a rough circle using a 1px brush. To achieve a rough effect I go around the circle several times. You don’t have to be too precise with this part… Then I copy the image into a new layer in my original image and resize the circle to fit around my menu links. Because of resizing the circle image so much the previously messy, amateurish lines now look grungy and detailed. I work with resizing like this because it would be impossible to keep a steady enough hand working at the size of the menu link.
Step 12: Finally I’ll add some dummy content to complete the design. When choosing your fonts try to go for fonts such as Georgia that will give your work a grungy edge, yet still remain web-safe. (click thumbnail to see full sized version).
And there you have it! Please let me know what you think of the tutorial and I’ll be happy to answer any questions you may have about it. I’m also willing to code the design into a functioning template if anyone is interested 
It looks great, Tom. I enjoy every piece of photoshop I can learn. That was going to be my question, how do you code it? For me it would be a great idea if you wrote some tutorials about CSS, and how you can change the appearance of your design by tweaking the codes in the one you already have. for example, if I wanted to keep my current design, but just change the sidebar to look something like the one you’ve created. I have tons of questions about CSS.
In fact, you were one of the first bloggers I started socializing with (if not the very first) , and the fact that you’re a designer, able to work from home, independentlly, inspired me to want to be one
I hope to get to go to school and get my diploma one day, it seems like something I would really enjoy doing
Nice tutorial. For your next tutorial, you should show the next step - how you get from this to a coded website.
thanks
Thanks Anca, I’ll definitely bear your ideas in mind for a future tutorial.
I’m really glad that you aspire to be a designer, it can be a lot of fun. Best of luck, and please let me know if you need any pointers.
Jim: Cheers, as I said to Anca it’s definitely something that I’ll bear in mind.
By the way Anca, if you want to simply change some parts of your existing design you can replace current background images with new ones that you have created in photoshop. Usually you will have to slice a design from scratch and hand code it, but if you already have the page structure coded I’m sure that just specifying some div backgrounds will let you improve your blog. If you need help with this just Google ‘css image backgrounds’ for some tutorials on the subject.
Thanks Tom, I’ll do that. I’ve already changed my header image, it was easy, just added a link, but lots of things in CSS are gibberish to me right now, so I’ll have to read some more tutorials.
Hi Tom, this is great stuff.
I’m also a student currently doing my degree course in computer systems in south africa. But my love for programming has pushed me into web design. I’ve been working with php for two years now, and im getting quite good at it. Now what i need is to improve my graphics skills. what would be the best way to start learning about web design?
I’ve a plan in motion of starting a hosting company, but i want to be designing sites for my own customers.
I’m not that good with photoshop, but i really need to learn it. The designs you have done are just amazing.
Keep it up.
Fantastic tutorial Tom
I like the rays of light!
Anca: Yeah I saw, the new header looks pretty awesome
Carlos: Thanks a lot, I appreciate the kind words. Graphic design is great, but I’d love to learn php… I’ve also heard that the design/hosting route can be very successful (at least when starting out)
Kieran: Cheers! I liked the light effect too, it’s something I use in a few of my designs actually.
Wow, didn’t realise how easy it actually is to create pages that look like this! Awesome stuff, excuse me while I go experiment with your tutorial =]
Thanks Charlotte, I hope that you come up with some good stuff
[…] The Ultimate Grunge Design Tutorial - Push Standards […]
I love the result!
Only suggestion I’d have is to use some lorem ipsum (lipsum.com) for the dummy text, it would make the demo look more “life like”.
Thanks Stefan! I’ll use lorum ipsum in future!
[…] Tutorial: Grunge website design tutorial […]
[…] tut Add The Ultimate Grunge Design Tutorial from […]
Great design, i’ve two questions…
where did you find the papers,
can i have the psd file (a) so i can remix youre design (a)
i give you a 9/10!
Greetz Jasper (from the netherlands)
I would most defiantly like to see this one coded. I quite like it. Before full viewing, i thought the pencil was a scroll bar. haha.
Though i would like to see some credit for where you got the texture and pieces of paper? I’m horrible at finding those, geh.
Thanks for this! It might help me in the future.
STUMBLED!
I can’t seem to get a handle on PS, no matter how much I try.
VOTED for you at:
http://www.newsdots.com/design/blog-of-tom-ross-web-designer-and-young-entrepreneur/
The Ultimate Grunge Design Tutorial : Push Standards - Blog of Tom Ross, Web Designer and Young Entrepreneur…
This tutorial will discuss how to create a fantastic grunge layout in Photoshop. It uses some techniques that are fairly common, and a couple that I’ve not seen discussed elsewhere before….
Thanks so much Geoserv, I really appreciate it
Let me know if you have any requests for photoshop tutorials and I’ll try and come up with something to help you out!
[…] 8. Grunge Design Tutorial […]
thanks a bunch for sharing tom
i like your overall site design and layout as well, especially how you’ve done your portfolio. great stuff.
Thanks Beets
I’m actually considering a redesign, but maybe not for a little while.
I liked this tutorial, instead of using the background you made I made a brick wall. I really liked the polaroid too but I couldnt find where you made it in the tutorial so I winged it with two rectangular marquees and the paint bucket tool. I just started today but I alread have a great looking page so far. I dont know when the site will be up, if ever, because its a birthday present for a friend who just started a skateboard shop. Thanks for the tutorial!
It’s a good tutorial, aside from the fact that it lacks a lot of description. You just say “Find a photo of a scrap piece of paper for your main content area.” instead of giving us a link. For beginners, or people who don’t know where to get stock images, that could be one of the things that screws the whole layout.