PSDFan Extra

Design a Unique Grungy Website Layout

Intro

This tutorial will teach you how to create a unique grungy website design. Many of the techniques involved are fairly basic, but through the tutorial I’ve tried to explain my thought process behind certain design decisions as well as outlined how to get the most from your grunge designs.

Final Image

This is the final image that we’ll be creating:

Step 1

Create a new document (1000X800px). Create a new layer for your background and fill it with E3D4B9.

Step 2

Now paste in an image of some lined paper, I used the first photo of our Free Paper Texture Set released right here at PSDFAN. Cut out the paper using your magic wand tool and then go to image>adjustments>desaturate. Then apply the drop shadow settings shown below:

Step 3

Now I grab some images from our Grunge Essentials Pack. I start by placing some coffee stains over my lined paper, then to make sure that they only show on my paper and not my background I select my paper layer, click somewhere around it using the magic wand tool, then select my coffee stains layer and hit delete. Reduce the opacity of your coffee stain layers to 25%. Now position a paperclip image over the side of your paper and use your lasso tool to cut away the part of the clip that should be behind the paper. Then give it a subtle drop shadow. Then paste in images of sticky tape (also from our grunge essentials pack). I also fitted in the post it image, although the next step will explain how I did this in more detail. Finally, I added some text to my post it note (font: Handwriting Dakota).

Some pointers

Grunge design is all about fitting images together nicely. To make the sticky tape blend with the rest of my layout I reduce the saturation of the image to -45 (image>adjustments>hue/saturation). I also reduce the sticky tape layer’s opacity to 90% to give the illusion of slightly variations in the surfaces it covers. For my post it image I drastically altered the saturation and lightness/darkness in order to fit it well with my other grunge elements.

Another tip for grunge design is to vary your visual elements. It’s ok to use the same images over and over, but you can’t have them looking exactly the same. With each use of my sticky tape image I tried to resize/rotate it slightly, as well as subtly alter the brightness/saturation. This helps to build up the messy overall look of grunge.

Step 4

After thinking about how the different elements fit well together I couldn’t help but notice how the grayscaled lined paper image looked a little flat being black/white. To give it a tint of color I went to image>adjustments>color balance and applied the settings shown below. This allowed it to blend with the other elements a lot better.

Step 5

Now I grab a sunburst image from our High-Res Sunburst Set. I paste it so that the center of the sunburst is behind my post it image. To delete the parts of the sunburst overlapping my paper I select my paper layer, click outside it using the magic wand and then select my sunburst layer and hit delete. I also select each of the holes in the top of the paper image and repeat the same step. Then set I my sunburst layer’s blending mode to ‘color burn’ and reduce the layer opacity to 8%. This achieves a cool watercolor kind of effect.

Step 6

Now create a new document and draw a dark brown square roughly in the middle of the image. With your square selected go to select>modify>contract and contract your selection by 10px, then hit delete to leave a kind of frame. Then grab your eraser brush and erase your brown frame using a watercolor brush at low opacity. Now grab an image that you want to put in your frame and resize/crop it to fit.

Step 7

In your frame document hide your main white background layer and then go to layer>merge visible to merge your frame and image. Then copy the merged image back into your original document. Repeat this stage using different images until you have about 3 in your main design. The advantage of creating your images in a new document is that you can easily change the image being framed and then merge/copy this back into your original design. I also added some text and an arrow above these images.

Step 8

Now paste in another image from our Paper Textures Set into the bottom of the design. Be sure to create a new layer set beneath your main lined paper area, as we want this section to be below that area. To blend it nicely with the background I set the layer blend mode to ‘linear burn’ and reduced it’s opacity to 30%. I also applied the inner shadow settings shown below to give the effect of depth.

Step 9

This part is really up to your creativity. Using as many paper textures as you can find begin pasting bits of paper all round your design. Be sure to make them blend together nicely by adjusting the images hues/lightnesses. I also pasted in my sticky tape image a few more times to contribute to the background, but made sure to keep the opacity low so that it wasn’t overwhelming. The trick is to combine as many images as possible without getting too busy or distracting. It’s best to keep the opacity of most layers really low, as then you can build up a really grungy feel without detracting from your content areas.


Step 10

Now I add a few more details such as further coffee stains/paperclips, and I add the label from my Grunge Essentials Pack. Finally I add some text to the label, simply by typing it out and then going to edit>transform>rotate and fitting it properly.

Step 11

Now to create the site’s menu. I type out my menu links over the piece of paper just below my label. Then I use my line tool and custom shapes tool to create some dividing lines and arrows next to my menu links. The great thing about grunge design is that often things don’t need to be too precise. When drawing out your arrows and lines you don’t have to worry about them all being the same size or all aligning perfectly, just draw them out as quickly and roughly as you like. Finally, merge all of your arrows into one layer and then all of your divider lines into one layer. Grab a low opacity, watercolor brush eraser and erase away parts of your lines/arrows to create a more grungy look.

Step 12

Paste in a nice looking image over your lined paper, being sure to position this new layer beneath you post it layer and image thumbnails layers. Cut it out using the magic wand technique explained earlier. Then set the layer blend mode to ‘hard light’ and reduce the opacity to 70%. Finally use a watercolor brush eraser to erase the bottom/side of your image in a messy style.

Step 13

The layout is looking quite good so far, but it’s lacking structure, especially the top area. Despite grunge design typically being very messy, this doesn’t mean that it lacks structure. Some of the best grunge designs still enforce fairly rigid structures, simply because it helps to tie a layout together well. In this case I chose to create 2 dark bars running across my layout. This may be fairly simple to do, but it really helps the layout, as previously it was lacking any real shape or definition. The two lines create planes for the eye to run across and help to frame the messy images in the rest of the design. Remember – messy doesn’t mean unstructured.

Step 14

Now I create a newsletter signup area beneath my menu. The techniques are fairly self explanatory from looking at the image below, but again, the reasoning behind them is integral to understanding grunge design. I deliberately varied the darkness of the text (‘Newsletter’ is darker than ‘Name’ and ‘Email’, as this builds up a layered look. I create structured boxes for the sign up form, but reduced their opacity and gently erased their edges a little to give them a grungy feel.

Step 15

I add some text to the bottom of my design. It’s important to note that I combine handwritten fonts and regular fonts – exploiting the mix of structure/messiness that I mentioned before. Notice also how I reused the arrows from my menu. Reusing elements doesn’t make your design boring or repetitive, but can be quite a nice touch of grunge design, drawing your layout together well.

Step 16

Finally, this is a technique that I’ve used for a while. To achieve a nice handwritten style outline around my bottom headers I select a 1px brush a draw a large, rough oval shape. Then a resize this oval to fit around my header. Because I’ve resized it so much, the brush marks that previously looked rough and unprofessional now have a sketchy, detailed quality to them. Finally I grab a low opacity watercolor brush and paint roughly behind my header, just to give it a bit more precedence over the links beneath it.

And We’re Done

Here is the finished design. Click on the image below if you want to view the full sized version.

Download Source File for this Tutorial


About the Author:

Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

Leave a comment

74 Comments:

  1. ketbeophi says:

    great! :D …. good tut! thanks!

  2. beets says:

    …from here you would use Photoshop’s Slice tool and export it as html + images. After that, you take it into Dreamweaver and make any adjustments, etc – like completely replacing the html table-based layout with CSS and tags. ;)

    Once again, great tutorial Tom. :)

    ..and man I can’t wait until PS exports CSS tableless layouts, haha.

  3. Looks great! Definitely has that trendy feel going – though it might have quite a usability learning curve. But hey, if the content speaks for itself, that’s not usually too much trouble.

  4. twopo says:

    just a beets said -slice it out and try it out. wow great tutorial Tom-Thumbs up

  5. Tom says:

    Thanks guys! I’m thinking about slicing it into a WP theme possibly.

    Beets: I’m afraid I’m a handcoder ;)

    David: Thanks mate. I know what you mean about usability, but I guess this is one of those designs that is more arty than usable :P I might try another tutorial soon to create a more functional grunge layout, but for this one I was really just playing around a bit.

  6. liam says:

    Very nice work, I have a feeling this is going to be a bit of a hit. Good job!

  7. Tom says:

    Thanks mate :) Appreciate the kind words.

  8. Tom says:

    Thanks a lot Alen!

  9. Raj says:

    gr8 tutorial Tom :) really enjoyed it. Thanx!

  10. Tom says:

    Thanks Raj :) Glad you enjoyed it.

  11. nitos says:

    can you hand out the PSD??
    Thanks! :P

  12. Tom says:

    Sorry nitos, I’m still holding out for a .psd membership system. You’ll be the first to know about it though :)

  13. Kenny says:

    This websight is a-amaz’n.

    Thanks for the tip fellow design brothers!

  14. Tom says:

    Cheers Kenny, I hope that you’ll check out the other new tutorials here.

  15. YouON says:

    and now it’s time to code :(
    tell me how, please :-D

    really good job!

  16. ThinkSoJoE says:

    Thanks for the great tutorial. I started working with it but then went off in a completely different direction, which I think is a good start to a second theme for my blog. Keep up the good work!

  17. Tom says:

    YouOn: I may well code this in the future. Look out for the tutorial ;)

    ThinkSoJoe: Thanks for commenting. I’d love to see the outcome if you were willing to post it. Good luck with your blog.

  18. wasim says:

    Excellent efforts.

    thanks

  19. Mark says:

    Hi… this is a great tutorial along with a lot other out there but I never find them explaining exactly how to slice them up and code them with CSS? Can you explain a little bit how to do that with this tutorial? Please email me… And thanks for the great design ideas!

  20. naz says:

    wonderful tutorial thanx alot

  21. Tom says:

    Thanks guys.

    Mark: I’m afraid I’m just focusing on Photoshop tutorials right now. But I’ll let you know if I get around to coding this layout.

  22. Jez says:

    Be great if you also included a layered psd download of the finished tutorial—for all of your tutorials. Something to compare results against and check against whilst working through the tutorial.

  23. Mr. C says:

    I went a different direction and took it to somewhere completely my own. check it out at bestinbed.net I sliced it up and am probably going to turn it into css layout rather than tables for practice.

  24. me says:

    Here’s a nice trick to insert text: In PS, slice out the area you want text. Once you have exported it, in DW, click the image, select the source, copy it to the clipboard, and delete the image. Then paste into the ‘Background’ field. You can now type on top of it. However, if the size of the text block exceeds that of the image, a white line will appear across the page below the image for the rest of the block.

    Also, to disable segregation of high resolutions, go to Page Properties and set the page Background to E3D4B9.

  25. yash says:

    hey can u tell me wat to do after making jpg?plz i am a new bie and i dont know wat to do with this jpg please tell me step by step procedure of creating a website using this.thanks and regards.

  26. ryan says:

    I noticed the newsletter sign up box on this tut, and was wondering if anyone has a good basic free newsletter script or service that they would recommend. I have never done a newsletter and I’m clueless how to set one up.

  27. Tom says:

    Jez: .psd files will be made available relatively soon as part of a membership system.

    Mr. C: Looks great, you followed the tutorial really nicely.

    Yash: After making the image in Photoshop you will need to code it to turn it into a functioning website. Unfortunately PSDFAN only focuses on Photoshop tutorials, but you can find many great coding resources around the net (I recommend nettuts.com.

    Ryan: I haven’t used a free script for this before, but Wufoo.com seems like a good option if you’re willing to pay a little bit for it.

  28. vimukti says:

    thanks for providing this tutorials ,its nice ,

  29. E.D says:

    I’m making this layout for a DIV myspace layout. =] and coding it as a div. Great tutorial.

  30. [...] 15. Design a Unique Grungy Website Layout [...]

  31. Shashank says:

    The best photoshop tutorial on grunge designs ever published.

    Simply superb!!!

  32. bhawna says:

    it`s awesme…..

  33. Ajinkya says:

    really cool tut, thanks. wishing to join psd+

  34. nice easy to follow tutorial. Especially for somebody that struggles with web design codes and css styles.

  35. very nice website design thanks for the tutorial..

  36. Dale says:

    I really dig it, except that background on the footer area (the vertical lines). Way too distracting. IMO a solid color (the darker one) would work better. Great post though!

    • Tom says:

      Hey Dale, that’s a pretty fair point, I’ll take it on board for my next web design tut. I’m glad you liked the post though!

  37. Thanks for sharing this nice collection.

  38. Kate says:

    Amazing! very nice!!! Thanks!

  39. This was really nice. You gave me some great ideas. Thanks!

  40. Kathleen says:

    Nice tutorial! I am far more comfortable with PS – will have to learn the coding part.

  41. web says:

    wonderful layout

  42. Andrew says:

    Hello, I love this tut, but there is one problem, it isn’t enough detail for me, I just purchased Photoshop CS2, I had some experience with it and I prefer it more than Photoshop CS4 but this doesn’t have enough explanation.

    Is there anyway you can explain it more?

  43. duckpool says:

    cool tutorial, grunge isnt my thing really, maybe im getting old :)
    I would take this and use photoshop to slice without html.
    then use free program suckerfish to hand code and id use free xampp to do my php mysql coding on my computer before uploading to server. PS if your serious about getting coding right download firebug add on for firefox :)
    (coding doesnt bite..:))

  44. Benji! says:

    Hey guys! Thanks for the tutorial. I really need help coding this. Anyone? Please.

  45. FotosCR says:

    thanks! Cool tutorial

  46. Max says:

    Thanx!! I’m created my site in grunge style too :)

  47. Good tutorial, I will include this topic in our graphic design course!

  48. shishir says:

    nice one good desihgh

  49. You make it look so easy – I’m impressed and the exaplanations are very clear as well. The finished job even looks like it would slice pretty cleanly. Liking it a lot!

  50. Lynda says:

    Thankyou for this post, I am a big big fan of this web site would like to go on updated.

  51. mediafire says:

    can u provide me 3 collumn layout for blogger?

  52. dany says:

    waw.. nice nice design…

  53. creatingmyfirstwebsite says:

    dumb question… how do you put hyperlinks to About me, Contact us etc. I am assuming this is the main page of your website and about me and contact us is like a new page with similar layout.

  54. creatingmyfirstwebsite says:

    image map! i got it..

  55. cool tut, maybe a bit heavy on the old kbs, but if you dont get 10000 visits to your portfolio site then who cares (and if you do, well ill join you)

  56. rozie says:

    i really liked it but the info is not clead or no described properly!!

  57. friv says:

    Thanks for the tips,I will try to do something like that.

  58. Pete says:

    Good tutorial. Thanks.

  59. ravi says:

    i really liked it but the info is not clead or no described properly!!

  60. cool tut, maybe a bit heavy on the old kbs, but if you dont get 10000 visits to your portfolio site then who cares (and if you do, well ill join you)

  61. Chris says:

    This was a wonderful tutorial. Thank you so much. :)

  62. ab says:

    good Tutorial for all desingers

Leave a Comment:

Related Posts

Your Design Work, But More Awesome:

Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.

JOIN OUR FANEXTRA COMMUNITY TODAY