Learn To Create A Grunge Style Layout

What We’ll Be Creating

Grungy Web Layout Tutorial

Resources Used In This Tutorial

Lets Get Started, Creating Your Document

Create a new document (Ctrl + N) 1200 x 1200 pixels with any background color. Double click your background layer to make it available for editing, then add a gradient overlay using the settings below.

Grungy Web Layout Tutorial

Were now going to setup two vertical guides so our layout stays within the width we want it to be which will be 850 pixels. Go to “View > New Guide” then use the settings below.

Grungy Web Layout Tutorial

Grungy Web Layout Tutorial

We are now set to go.

Creating The Header Background

Select the “Rectangular Marquee” Tool (U) then make a selection across the top of the canvas, the selection should have a height of about 8px. Once you’ve create the selection select the “Fill” tool (G) and fill the selection with any color. Now add a gradient overlay using settings below.

Grungy Web Layout Tutorial

Still with the “Rectangular Marquee” tool (U) make another selection directly underneath the top bar, make the selection 1px in height. Fill (G) the selection with the color white (#ffffff) then shift the selection down 1px by using the move tool (V). Once you’ve moved the selection down fill (G) the selection again with the color black (#000000), now set the layers blend mode to overlay.

Grungy Web Layout Tutorial

Select the “Rectangular Marquee” tool (U) then make a selection directly underneath the black and white lines. The selection should have a height of about 100px.

For this next step you will need the “Diagonal Lines Pattern Set“. Once you have downloaded the pattern set and loaded them into photoshop select the fill tool (G) with a fill type of pattern then select the 13px diagonal line from the list.

Grungy Web Layout Tutorial

Fill your selection with the diagonal lines pattern then add a color overlay using the settings below.

Grungy Web Layout Tutorial

Your background should now look like this.

Grungy Web Layout Tutorial

Creating The Header

Select the “Rectangle Tool” (U) then drag out a rectangle no wider than your guides but about 245px in height. Fill your rectangle with the color #2b2e33.

Grungy Web Layout Tutorial

Once you’ve created the rectangle add the following layer styles.

Grungy Web Layout Tutorial

Grungy Web Layout Tutorial

Grungy Web Layout Tutorial

You should have something like this.

Grungy Web Layout Tutorial

Right-Click your rectangle layer and select “Convert To Smart Object” from the menu.

Quick Tip:

Smart Objects are layers that contain image data from raster or vector images, such as Photoshop or Illustrator files. Smart Objects preserve an image’s source content with all its original characteristics, enabling you to perform nondestructive editing to the layer.

Now add some noise to your rectangle layer by going to “Filter > Noise > Add Noise”. Use the settings below.

Grungy Web Layout Tutorial

Once you’ve added the noise filter add a layer mask to your rectangle, then select the gradient tool with a linear gradient. Drag the gradient from the bottom of the rectangle upwards towards the top.

Grungy Web Layout Tutorial

Creating The Navigation

Select the “Rounded Rectangle Tool” (U) with a radius of 15px.

Grungy Web Layout Tutorial

Drag out a rectangle onto your header rectangle leaving about 10px – 15px either side. The rectangle should be about 50 – 53px in height.

Grungy Web Layout Tutorial

Once your happy with your rectangle add the following layer styles to your rounded rectangle layer.

Grungy Web Layout Tutorial

Grungy Web Layout Tutorial

Grungy Web Layout Tutorial

You should have something like this.

Grungy Web Layout Tutorial

Select the “Type” tool (T) then add your navigation links, use the color #616872 for your navigation text and the color #93a1ae for the hover state color. Once you’ve typed out your navigation add a subtle drop shadow to the text using the settings below.

Grungy Web Layout Tutorial

In between each navigation item create two 1px lines next to each other colored black and white. Once you’ve created the lines set the opacity of the lines to 45% and the blend mode to overlay. You should have something like this.

Grungy Web Layout Tutorial

Creating The Header Rectangle

Select the “Rounded Rectangle Tool” (U) with a radius of 15px. The header rectangle should be about 160 – 163px in height.

Grungy Web Layout Tutorial

Once your happy with your rectangle add the following layer styles.

Grungy Web Layout Tutorial

Grungy Web Layout Tutorial

Grungy Web Layout Tutorial

Your header rectangle should look something like this.

Grungy Web Layout Tutorial

Inside your header rectangle add your website title text using the “Type” tool (T).

Grungy Web Layout Tutorial

Once you’ve created your website title add a gradient overlay and drop shadow using the settings below.

Grungy Web Layout Tutorial

Grungy Web Layout Tutorial

Finally add your slogan to the right of your website title text, you should have something like this.

Grungy Web Layout Tutorial

Were now going to add a shine effect to the header, select the “Pen” tool (P) then make a curved line which goes across your header starting from the bottom right corner going up towards the top left corner.

Grungy Web Layout Tutorial

Once you’ve created the base for your shine, fill (G) it with the color white (#ffffff). Next, load a selection around your header rectangle by clicking the little thumbnail inside the layers window whilst holding down the “Ctrl” key on the keyboard.

Quick Tip:

A loaded selection is shown with a black and white animated dashed border around the shape.

Now highlight the shine layer and go to “Select > Inverse”, inverse the selection then hit the delete key. You should be left with a clean white shape inside the header rectangle. Set the shine layers opacity to 1% then add a layer mask to the shine layer, once you’ve added the layer mask drag a linear gradient from the left side of the canvas. You should have something like this.

Grungy Web Layout Tutorial

Adding Some Grunge

Download the grunge brushes from the brush pack listed in the resources list.

Load the brushes into photoshop then select the grunge brush located in the image below.

Grungy Web Layout Tutorial

On a new layer below your header rectangle layer simply click once with your mouse button any where on your canvas. Select the “Move” tool (V) then move the grunge into place behind the header rectangle on the left hand side.

Grungy Web Layout Tutorial

Repeat the same steps for the right side of your layer only this time flip the grunge layer horizontally.

Creating The Search Box

Select the “Rounded Rectangle” tool (U) with a radius of about 5 – 10 px. Drag out a small search box on the right side of your header rectangle. Once your happy with your search box add the following layer styles.

Grungy Web Layout Tutorial

Grungy Web Layout Tutorial

Grungy Web Layout Tutorial

Inside the search box add some example search text and a little magnifying glass icon.

Grungy Web Layout Tutorial

Creating The Featured Image

Select the “Rectangular Marquee” tool (M) then drag out a rectangle up to your guides and about 223px in height. Fill the selection with the diagonal pattern we used earlier, once you’ve filled the rectangle set the opacity of the lines pattern to 10%.

Grungy Web Layout Tutorial

Using your desired featured image add it inside your featured pattern rectangle leaving about 10 – 20px space all the way around. Once you’ve added your desired image add the following layer styles to your image layer.

Grungy Web Layout Tutorial

Grungy Web Layout Tutorial

You should have something like this.

Grungy Web Layout Tutorial

Finish off the featured image by adding a caption box with an image caption.

Grungy Web Layout Tutorial

Creating The Content

Using a combination of headers and example paragraph text start to build up your content area.

Grungy Web Layout Tutorial

Using the techniques already learned build up an image gallery using the diagonal lines pattern as the border for your gallery images.

Grungy Web Layout Tutorial

Creating The Footer Area

Duplicate the header elements and background then flip them vertically. Drag the duplicated layers to the bottom of your canvas.

Grungy Web Layout Tutorial

Using the “Rounded Rectangle” tool (U) create a small rectangle at the bottom of your footer. Make the rectangle slightly bigger than your navigation rectangle. Once you’ve created the rectangle add the following layer styles.

Grungy Web Layout Tutorial

Grungy Web Layout Tutorial

Grungy Web Layout Tutorial

You should have something like this.

Grungy Web Layout Tutorial

Finally add your footer text inside the rectangle.

Grungy Web Layout Tutorial

Conclusion

Thanks for taking part in this tutorial, maybe you could share some of your results by posting them below.

Purchase Psd Now

Author: Sam ZamanSam loves to write on technology & related stuff. Ecommerce, mobile and internet marketing equally drive her interest. Likes gardening and experimenting with new recipes. An avid reader and absolutely mad @bout donuts :)

12 thoughts on “Learn To Create A Grunge Style Layout”

  1. Hello, nice tutorial, could you please just say me how do you create the Caption Box? On the feature image? I wanna a blurred backround like that to use as text background..

    Reply

Leave a Comment