Preview

How to Create a Grunge Web Design in Photoshop

Sep 24th in Interface by Alvaro Guzman

Photoshop is often the right tool for web design, especially if you're creating a design using numerous images and brush effects. In this tutorial, I'll show you how to create a complete grunge home page design. We'll design the header, sidebar, body, footer, and style everything to work together in a heavily textured and worn design.

Author: Alvaro Guzman

I'm Alvaro Guzman from Bolivia, Web developer and Graphic designer. For me digital design is a modern form of art, which allows me to explore innovative techniques, and helps to deliver a clear message to the public. My work covers advertising, corporate image, print design, and web design areas. I am currently the Design Team Leader of SouthMakers.

Final Image Preview

Before we get started, let's take a look at the image we'll be creating. Click the screenshot below to view the full-size image. As always, the layered Photoshop file is available via our PSDTUTS Plus membership. You can view the final image below or view a larger version here.

Final Click

Step 1

This time we're going to create a full web design in grunge style using Photoshop and a lot of stock images. As this is a intermediate to advanced level tutorial, I'll skip the explanation of some basic steps. First create a new document 950 px by 800 px at RGB 72dpi. Show the rulers and drag four guides bounding the document, this will be the optimal area of the design. I'm planning to keep a fixed width layout.

Go to Image > Canvas Size and increase the width and height a lot more, 1200 px by 1000 px is OK, this way we'll be designing for wider screen resolutions. Then add more guides where you're planning to add the containers (Header, Navigation bar, Sidebar, Footer).

Let's imagine this design is destined for a Wordpress template, so we'll need a header, a navigation bar inside the header, and a right sidebar. Take a look at the bottom of the following image. Then fill a background with this color #7A8173.

Step 2

Now we're going to create a pattern for the header's background, which is fairly simple. Create a new document 50 px by 300 px and draw something like the image below. I'm using guides to make my shape as symmetrical as possible. Then go to Edit > Define pattern and save the shape as "pattern 1."

Step 3

On a new layer in our main design file, draw a 300 px height rectangle using the Rectangle Tool. Go to Filters, and add a Pattern Overlay, search for your brand new pattern and apply it. To make it look correct you must click the Snap to Origin button. Change the layer Fill to 0%, create a new blank layer above the shape layer, and merge both, this way you'll have the pattern ready to add some effects to it. Name that layer "Pattern 1."

Step 4

Select "Pattern 1" layer and apply to it some layer styles: Drop Shadow, a Gradient Overlay, and a Pattern Overlay. Try to get something similar to the bottom of image below, using following values.

Step 5

Now we're going to add the navigation bar background. Draw a rectangle hiding a little bit of the "Pattern 1" layer. Apply to that rectangle a Pattern overlay, a black to red black gradient overlay, and a soft Drop shadow. Use the values of the images below as a reference. Next, add a Layer mask > Hide all, and draw a black to white to black Reflected Gradient on the layer mask, you'll get something similar to the bottom image below.

Step 6

Now draw an ellipse (#691E1B) above the "Pattern 1" layer, name it "Light," and Apply a Gaussian Blur to it with a 50 pixels radius. I created an extra guide to draw the light in the center of the header. Delete everything below the navigation bar and change the layer's Blending mode to Color Dodge.

Step 7

To finish the first part of the layout, we're going to draw the sidebar's background. Draw some guides to delimit the sidebar and also edit the existing guides to make them fit on the actually design. Then draw a red rectangle (#3D100B) and apply the following styles: a Drop Shadow, a Color Overlay, and a Pattern Overlay.

At this point, you must consider the way you're going to cut the image into HTML + CSS; that's why I'm using Drop shadows with 0px of Distance the most of the time, and only horizontal or vertical gradients. The texture in this case has many horizontal lines. It needs to be easy to convert this into a repeating background for many areas. Also ,this is a good point to take a break and organize the layers in your folders to keep things organized.

Step 8

Now begin with the details, I want to add the site name in a prominent place, that's why I will use this nice grunge label image. Obviously you must extract the label and place it in the top left corner of our design. Try to get something like the first image below. Next, use the Magic Wand tool to select the little brown circle, then Command + Shift + I to inverse the selection. Adjust the Levels and Hue/Saturation using the values shown below.

Step 9

Now using the Eraser tool and an irregular Brush, delete some areas of the label's border. To add a paper cut effect, select the Dodge tool and use the same Brush shape to apply the dodge to the label's border.

Step 10

We're going to add a shadow to our label next. For this, duplicate the "Label" layer, change the Hue/Saturation > Lightness to -100, and apply a Gaussian Blur with a 10 px radius. Next, change the "Label copy" Blending mode to Multiply and set the Opacity to 75%.

Step 11

A last retouch for the label, change the Saturation to -40 to make it more gray.

Step 12

Now we'll add some support images, try to find images surrounding a concept, but as this is a tutorial about the techniques, I'm choosing a random one. This one is a beautiful picture of a vintage train here in the highlands of Bolivia. Extract the shape of the train however you want. Then change the "train" layer's Blending mode to Darken.

Step 13

Let's add some text, first the page name. Type something using a grunge font; you can find some interesting ones over here. For the title use a black type and change the layer's blending mode to Overlay, then duplicate the layer and change the copy's Opacity to 75%. To get a tiny blur effect, move the copied layer one or two pixels left or right. Add more text using this technique, like a slogan or something. Also, it's a good moment to add the navigation links as well.

Step 14

Now add more stuff, it's grunge style! I downloaded some Jenn B’s brushes from here, these brushes have restrictions. Using those brushes add some numbers, corners, masking tapes and whatnot, feel free to do whatever you want in this step. Just remember add all the layers below both the "Label" and "Label Copy" layers.

Step 15

Now we'll start adding the page sections. First of all, in the header we'll need a search bar. Type a search label. Next, draw a red (#6A0400) rectangle as a search input field, then apply a Stroke and a Pattern overlay layer effect.

Step 16

Now we'll start adding the main content of our design. First we're going to add a field to put some featured text on. Draw a dark gray (#0D0F0E) rectangle into a layer below the sidebar. I created four folders to keep the layout organized: One for the "Header" above everything, one for the "Sidebar" below the "Header," one for the "Content" below the "Header" and "Sidebar," and the last one for the "Footer."

You can add this rectangle into the "Content" layer, also you can add as many folders as needed inside these four folders. Once you've placed the rectangle in a proper place, apply a Drop shadow and a Stroke effect using the values below.

Step 17

Download some grunge corners and borders from here, and paste one over the gray background. Next, apply apply an Overlay effect to the corner with a color of #171612. Also, add another corner over the sidebar's background, but this time bring down its Opacity below 25%.

Step 18

Let's add some text. You can add any sample text, imagine that it's javascript driven text recent posts section, or a featured post section, something like that. I'm using the same grunge display typeface as used for the navigation bar with the color #4D0D0D and Arial with a color of #3F3F3F for the body text.

Apply a drop shadow effect to the title and add the same effect to the navigation items as well. When you convert this PSD into an HTML + CSS file, you'll need to convert these titles to images, so it's OK if you want to add more styles to them. Finally, use some guides to put the text layers into a proper place.

Step 19

Our featured bar is looking a little empty, so let's add a support image. In this case, I used a polaroid shot. You can download the polaroid picture from here. Extract the polaroid, paste it into a layer above the gray background and the grunge corner on the "Content" folder, then change the Hue/Saturation to make the polaroid a little more sepia (Select the Colorize option).

Use the same techniques for the "Label" layer's edges (Step 9). Erase and Dodge the edges of the Polaroid picture. Finally, add a drop shadow using the same technique as used in Step 10 of this tutorial.

Step 20

I had this sepia picture of myself so I'm adding it to the design. Add any image into a new layer above the "Polaroid" layer, select the black square of the polaroid, then Command + Shift + I to inverse the selection. Select the picture layer and Delete all the extra. Next, you can add more grunge details, like some masking tape over the picture, as shown in the images below. I applied a 1px Drop Shadow effect to the added tape as well.

Step 21

It's a good moment to add a RSS icon to the sidebar. Draw a Rounded Corner Rectangle (#99917E), then apply the following effects to it: an Inner Glow, a Pattern Overlay, and a Drop Shadow, use the values shown in the image below. Next, draw or paste into a new layer above the rectangle the standard RSS shape and fill it with black. Finally, change the "RSS shape" layer Blending Mode to Overlay.

Step 22

Now place the RSS icon on the sidebar's top left. Add some text like "RSS FEED." Draw another piece of masking tape, and write the number of subscribers over it. Remember, now we're working in the "Sidebar" folder.

Step 23

It's time to add a single post to our design. Just write some random text as a Title, another line for the date, category, and author. Also, some words as the text of the post. Typography is the most important in this step. I love to use Serif fonts for the titles and Sans-Serif for the body, but is just me. Decide what you feel is best for your design.

Step 24

To give our sample post a little more attitude, we're going to add a preview image, just like in the TUTS sites, but as this is a grunge design we need to add a grunge background to our images. This is as simple as adding padding top and bottom with CSS, then setting a repeating background image.

This image will be of 35mm film. Extract two small stripes from the film, and change their Hue/Saturation using the values in the image below. Next, using an irregular Eraser, Delete some areas of the stripes. Finally, add a Drop Shadow to each stripe. When you have finish with the film, paste any image below the film layers. I'm adding a picture of one of my travels. Finally, apply a Stroke Effect (#2F261D) to that image.

Step 25

Draw a 2px red line below the post and some text for the comments, it's a good idea to add all the post related layers into a new folder called "Post." Then increase the height of the document a little bit, you can do that by using the Crop tool, do this just to see how our design will look if it has two or three posts on it. Duplicate the "Post" group, and change the text and the image, as shown below.

Step 26

Actually it's looking pretty good, now add the titles of Sidebar's items. Yo can create a folder for each item as well.

Step 27

Now add a list icon. You can use any Custom shape. Add some random text, I'm using Georgia for the sidebar. Duplicate the icons and edit one to represent the hover state. Do the same for each Sidebar item.

Step 28

We're close to finished. Add some grunge details at the bottom of sidebar, by adding some grunge brushes into a new layer above the sidebar's background layer. Select the Sidebar's background layer, then go to Layer > Layer Mask > Reveal all. Next, hide some areas of the bottom left of the sidebar's background using an irregular black Brush.

Step 29

Finally, select the Sidebar's background layer and copy the layer style of it. Draw a rectangle at the bottom of the design inside the "Footer" folder and paste the layer style into it. Next, extract and paste this image above the Footer's background.

Adjust the saturation to make it a little bit more gray. Also, you can apply to that sheet of paper a drop shadow repeating the technique of Step 10. Add some text over the piece of paper, maybe a Slogan or something. And also add some footer text, like a quick navigation bar, and the copyright information.

Conclusion

Web design isn't an piece of cake, but I hope this tutorial will help you to improve your skills. It's up to you now, design your own, or sign up for PLUS to download the PSD source and play with it. I'd love to see some grunge web designs in the PSDTUTS Flickr group. You can view the final image below or view a larger version here.

Subscribe to the PSDTUTS RSS Feed for the best Photoshop tuts and articles on the web.


Enjoy this Post?

We'd love your vote!

User Comments

( ADD YOURS )

  1. PaulR September 24th

    Really Cool Tut. Thanks


  2. Dan September 24th

    Not really my style but a well written tut.


  3. Daniel Olmos September 24th

    Alvarito…. no doubt… u’r a really great designer, u’r job is fantastic!.. Congrats ones again!.


  4. Jorge September 24th

    Nice tuto..


  5. Drudoo September 24th

    WOW really nice :)


  6. Anthony September 24th

    What a great tutorial, this is sweet. Hopefully, you’ll now bring this over to NETTUTS and show us how to code a site like this….eh? eh?


  7. yusuf1 September 24th

    thats a really brilliant tut! cheers


  8. curtis allen September 24th

    nices tut. keep up the good work.


  9. Make Design, Not War September 24th

    This has got to be one of the longest, most thorough tutorials on this site so far. Very in depth, helpful, and the final product is actually pretty cool. I do a ton of web designs and skins like this myself, but seeing it all laid out in a step process like this really shows how much work and skill go into a high quality design. Getting grunge to work artfully really is more work than it seems, but you’ve done a great job. I’d actually be interested in a Part II of this where you take it to a platform like Wordpress or something. Thanks for another great tutorial here! MakeDesign,NotWar


  10. Daniel September 24th

    This is amazing, I’d never thought to try that zig-zag pattern before, now I definetly will!


  11. Webdesigner September 24th

    Hello, This is definitely one of the best web design tutorial on the internet. Just more like this :) Thank you!


  12. EdpeppeRs September 24th

    awesome tut, man! thx a lot! it’s very important to me! ^^
    thx!

    peace out!


  13. Moritz September 24th

    Wow, I love this tut. Would perfectly fit for my band website. Great inspiration!


  14. Jeroen September 24th

    Perfect one. I like it very much


  15. mdeering September 24th

    Great desgn thank you for sharing the techniques.

    Not sure the article would belong here or on NETTUZ but I would love to see a follow up on how you would go about slicing and exporting this into the assets needed to mark this up in XHTML.


  16. belrock September 24th

    Very nice tutorial indeed. As an amateur, I join Make Design not War and would like to know how to put a ps-template into a living website. This would be very helpful and appreciated!!!


  17. Qbrushes September 24th

    Finally some more layout designs :)


  18. BroOf September 24th

    Hey looks great!


  19. Geoff September 24th

    Alvaro - you love the grunge, man. I’m glad there are no skulls. So sick of skulls. Skulls.


  20. SnakeJake September 24th

    Now THIS is useful. Awesome tutorial.


  21. Nate September 24th

    Awesome finished product. You did a great job =)


  22. BogDinamita September 24th

    wow this is so beautiful and unexpected, i can’t wait to try it!!


  23. JTR September 24th

    Oh my god! This is really amazing. I waited a long time for a tutorial just like that!


  24. EAMejia September 24th

    Amazing tutorial!!!


  25. Lawrence77 September 24th

    looking for this tutorial only [:D]…
    NICE ONE…
    thanks to “Alvaro Guzman” great work!
    First of all i thanked you for sharing this much techniques…
    Each step is valuable…….


  26. Christian September 24th

    It would be nice a detailed tut about exporting it to the web


  27. monaye September 24th

    Great tutorial !! I always envy of Designer who can create such nice Grunge Web Design.
    Can I translate this tutorial and put on my future blog? Of course, I will write big note about original author and link to this page and about joining PSDTUT Plus.


  28. Robin September 24th

    Please, please, please take this into NETTUTS. Beautiful design. Thank You.


  29. tabs September 24th

    Awesome tutorial man. Been doing layouts for years now, still, I learned lots of tips and tricks here. Thanks for sharing and keep them coming!


  30. Manuel Minino September 24th

    so much cool tips in just one tutorial!! amazing!!
    ..and the design is so cool… “grunge” but elegant… congratulations Alvaro!! cool techniques and inpirational layout, now that’s what i call a tutorial!!


  31. ELIAS DE OLIVEIRA September 24th

    Muito massa!

    Viva Photoshop CS4…


  32. Cory Kemp September 24th

    That’s fantastic. You proved that grunge can be elegant. It reminds me of the Coal March site, which is also very well done.


  33. Alvaro September 24th

    I’m really happy that you liked the tutorial. I wanted to make a grunge webdesign tutorial since a long time ago, but also I wanted to keep the clean style of Web 2.0… I think I did it this time :D

    I hope you find it useful…

    Thanks for all the good comments


  34. insic September 24th

    Indeed so nice. I love this kind of design but somehow i cant make one perfectly. Thanks for the tutorial.


  35. NaldzGraphics September 24th

    nice design.great work!!!


  36. chris September 24th

    damn this looks awesome. thx :)


  37. macias September 24th

    yeeep… please take this to Nettuts to xHTML / CSS it ! :) Nice lay


  38. Misja September 24th

    Great Tut! These are the designs everyone likes to make but our customers won’t let us…

    I too would like to see you cut this up for Wordpress.

    Misja

    PS. In step 23 I think the third caracterpallet should not read Georgia…


  39. 5ivedance September 24th

    Thank you for sharing this techniques…Just need it..


  40. 5ivedance September 24th

    macias‘s idea is not bad.;)


  41. john September 24th

    cool.. looking for this


  42. Chris Bauer September 24th

    Thanks for the tutorial.

    Add me to the list of requests to see this sliced and CSSed. Thanks again.


  43. Shane September 24th

    Another big thank you from me!

    Great tutorial.


  44. Joe September 24th

    Hmm, yes, very nicely done tutorial but I agree with Dan that the style is not my cup a’ tea - the whole setup reminds of grunge rock which is REALLY 90s.


  45. angeloff September 24th

    This is great tutorial!


  46. Johan September 24th

    Thanks! Really nice.


  47. nicolas September 24th

    Very Nice Tut

    Why not continue it in htmltut, with how to cut a template, how making a css site…


  48. Andris September 24th

    Really nice tutorial. Very well explained. Thanx a lot for this one.


  49. Bill Biwer September 24th

    Very in depth tutorial, some nice effects demonstrated.


  50. Daniel Richard September 24th

    Woah. That’s super detailed.


  51. Kovilen September 24th

    Really cool tutorial


  52. David Sparks September 25th

    I dig the tutorial however i have to say i think it got off on the wrong foot.
    the ideal site width is 960. not 950. its divisible by a very large amount of numbers lending itself very well to grid based design which i believe to be extremely important. heres more info on the 960px width:

    http://960.gs/


  53. MSOnWired September 25th

    Nice tutorial. It’s so fun to get lost in the details of a grunge design. Definitely would make a nice Wordpress theme.


  54. Clarissa September 25th

    Soooooo now you’ve got me anxious to slice and dice. When do we take this to completion? Are you designing this to fit a template’s measurements or defining your own?


  55. Nestor September 25th

    This is the one, very great tutorial, congratulations my friend Alvarín, good jog.

    I waiting for your xhtml + css conversion for this tutorial º_º

    Thanks


  56. Takumi86 September 25th

    Great Tutorial!! Keep them up man, keep them up :)


  57. bergslay September 25th

    Great Work Now… the HTML


  58. Roy Nottage September 25th

    Great tutorial! Grunge will never die (he hopes).


  59. Jake Holman September 25th

    Ah, awesome! I’ve actually always wondered how people produce sites in Photoshop first - I’ve always been a bit of a ‘hack’ designer, doing everything in raw HTML then seeing if it looks ok.

    I’m old fashioned :(


  60. Lamin Barrow September 25th

    I love grungy stuff. Thanks for all of your time and effort putting this tut together.


  61. Cory September 25th

    Great tut. I think the beauty of tuts like this is that not only is the final work very inspirational, but the individual processes are also very valuable inspiration and learning tools. Thanks.


  62. MONSTER September 25th

    Nice and thorough. I may have to adapt several of these techniques myself.


  63. jason September 25th

    sweet! now teach us how to cut and code it with css.


  64. Naykris Crowley September 25th

    Great tutorial, thanks! Add to Favorites


  65. Johnny September 25th

    Looks awesome. Is there a place to download the psd file?
    http://www.tranquilblue.com


  66. Dainis Graveris September 25th

    Nice design - very good and detailed tutorial!


  67. Kelly September 25th

    I love it! Thanks for the tutorial. I’d also like to see how you take this from PShop to the web, though, like WordPress or something similar.


  68. andi September 25th

    really nice end product, look forward to following this tut


  69. tca September 25th

    beautiful design. great work!


  70. Fabryz September 25th

    Aww, i’ve always really wanted to create a design like this for my personal website. Time to get inspiration from this article =)


  71. liko September 25th

    very cool, is it possible to make tuts about how to cut the works into HTML….. :)


  72. Raj September 25th

    very nice tutorial :) Thanx a lot!


  73. Nikhil Patel September 25th

    Thats awesome !!!!!!!!!
    And yeah……want another tutorial for making this a theme of wordpress……hehe :P


  74. lo.asca September 25th

    Please take this to NETTUTS and slice it up for WordPress, please!


  75. John September 26th

    I just want to extend thanks to you for writing a complete and wonderful tutorial. I personally, stink at grunge designs so i had to do this tutorial for a test of my own will….and it came out great, and now with some alterations here and there(so I’m not a COMPLETE copycat) I have a top notch grunge template in my arsenal thanks again, to you.


  76. David Perel September 26th

    Well done, great Tut!


  77. Pete September 26th

    Almost a perfect tutorial, but you spelled Subscribers wrong. So close yet so far.


  78. Berkan Akyürek September 26th

    A wordy Perfect. very nice tutorial


  79. Ivan September 26th

    Perfect - one of the best tutorials in psdtuts! fantastic results, very useful!


  80. Alvaro September 26th

    @pete your right!!! I just notice that hehehe my bad…


  81. Small business website design September 26th

    thank u r information


  82. Navdeep September 26th

    Very good one


  83. Roach September 26th

    I love this design.
    Love it even more for the complicated CSS build.
    Should keep the rip off merchants at bay.
    WorldPress… indeed.


  84. Conrad Gorny September 26th

    Really nice work.

    Conrad Gorny
    Freelance Graphic Designer
    http://www.conradgorny.com


  85. Owz September 27th

    Great tut, will be having a go at this tonight…

    But I agree with everyone else.. It would be really cool if you did a 2nd part showing us how to code it.

    Tutorials Like this are very helpful for me as I can apply these skills in my job..

    Keep up the good work

    Owain @ icomcreative.co.uk


  86. Julio September 27th

    Awesome tutorial. I’ll take some of your techniques into consideration. Keep up the good work dude. :-)


  87. Grafiko September 27th

    Very nice a good tutorial, longest tutorial i have seen so far, but not as log as this cooments :| .


  88. sabry September 27th

    god jop


  89. Andrey September 28th

    Realy interesting…. I am new in webdesign….


  90. Matthew Heidenreich September 29th

    great tutorial! Very nice outcome.


  91. Joomla templates September 30th

    I hope my clients never see tutorials like this because you make it look easier than it actually is. In reality, we don’t just add an element, pick a brush, rough it up and change the blend mode and viola. What sounds like 2 minutes would probably take 20 minutes tweaking and experimenting, undoing and redoing until it’s right.

    But, I do love this tutorial and have picked up a few pointers.

    Well done. Thank you.


  92. Boots September 30th

    And what about the second part from photoshop to dreamweaver?? Cheers


  93. TiKi September 30th

    That was Inzane


  94. Daniel & Sophie October 1st

    Dear Tuts, I always watch your creations and every time you surprise me. Now I´m trying to change the header of my blog but I cant´t find somebody with your ability, can you help me?. Do you belive in karma? If you´re thinking to came to Buenos Aires, we can give you Tango lessons for free !!!

    Anyway, I love your work.

    Daniel
    2XTANGO.COM
    Buenos Aires
    ARGENTINA


  95. ThePhotoshopper October 1st

    nice and easy does it!!! great tute!!!

    check out my grunge effect at
    http://thephotoshopper.blogspot.com

    –the photoshopper


  96. Maxerateur October 4th

    Wow, that’s really helpfull. Love the Outcome!
    Great job!


  97. Rishele October 7th

    Nice tut! But how do I bring it to life?


  98. across October 7th

    wow guy awesome


  99. romane October 8th

    Thanks a lot. Great job.


  100. Alvaro October 9th

    Thank you guys, I’ll try to find some time to turn this into HTML + CSS


  101. Clinton Montague October 11th

    Awesome, thanks! Just learning Photoshop and there are loads of useful techniques here, thanks again


  102. Daniel Braha October 12th

    You make it look easy : )


  103. Tiffany October 12th

    Great TUT. I’ve only got half way through so far, but there are so many techniques that I would like to use for my own stuff. Thanks oodles.


  104. Orama October 14th

    I started working through this tutorial before it even finished loading everything. Little did I know how detailed it was…a few long but educated hours later and I’m done! You have tremendous talent and perseverance to make such a thorough and damn fine looking tutorial!


  105. D-Jhun October 15th

    Man, This Tut is perfectly expressed, i love it……..really tight! Love ya Man.


  106. pablogt October 19th

    cool


  107. Brandon October 19th

    Haha.. I really liked this tutorial.. Pretty awesome.. But you KNOW everyones gona have a grunge site now =P


  108. IIAnnexII October 20th

    I love creating grunge graphics. This is just my style.


  109. youness October 22nd

    great tuto
    thx


  110. Jeba October 23rd

    could you please write the next version of this tutorial where we slice it and code it in for wordpress ??

    That would be so awesome.. a complete tutorial!!!

    Thank You


  111. Cristian October 26th