Grunge Web Design Tutorial [2022]

Want to learn how to create a grunge web design? In this tutorial, you’ll learn how to create a fancy grunge layout in Photoshop.

Also read: 25+ Top WordPress Theme Stores To Help You Find The Perfect Theme

Grunge Web Design Tutorial

To give you an idea of what we’ll be creating below is the finished product.

 

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.

 

Summary – Grunge Web Design Tutorial

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.