Learn To Create A Grunge Style Layout

What We’ll Be Creating

Resources Used In This Tutorial

• Earth/Space Wallpaper from desktop world
• Grunge Brushes by Keren-R
• Diagonal Lines Pattern Set

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.

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.

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.

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.

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.

• Diagonal Lines Pattern Set

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

Your background should now look like this.

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.

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

You should have something like this.

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

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

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.

Creating The Navigation

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

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

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

You should have something like this.

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.

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.

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.

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

Your header rectangle should look something like this.

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

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

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

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.

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.

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.

Adding Some Grunge

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

• Grunge Brushes by Keren-R

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

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.

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.

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

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%.

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.

You should have something like this.

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

Creating The Content

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

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

Creating The Footer Area

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

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.

You should have something like this.

Finally add your footer text inside the rectangle.

Conclusion

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