Grungy Web Layout

1. Resources Used

Stock Photo 1: Cool Speaker
Stock Photo 2: Green Abstract Lights

Pattern 1: 16x16 Scan Line
Pattern 2: Background Pattern
Pattern 3: Background Texture
Pattern 4: Bubbles Pattern

Brushes: Grunge Brushes 1
Brushes: Grunge Brushes 2

2. The Background

First create a new document for your template. I used a size of 760 x 760 pixels. Then fill the background with a light yellowish color. I used #d7ceaf.

Next create a new layer then fill the canvas with the 16x16 Scan Line

Note: If your scanlines came out black which they will have, press Ctrl+I to invert them.

After filling your canvas with the scanlines, change the layer mode to Overlay and lower the opacity to 50%.

Merge the Scanlines and Background layers together then go and apply Filter > Noise > Add Noise with the following settings:

Now, lastly for the background, grab the Background Texture and apply it to a new layer above the background layers.

Change the layer mode for this layer to Overlay and lower the opacity to 40%.

Not bad so far.

3. Header

Moving on to the header. First create a new layer then make a large selection near the top of the document. My selection was 700 x 200 pixels. Fill the selection with white, #ffffff.

Click to enlarge

Apply this Outer Glow to the banner layer.

Select the main banner layer again (Ctrl+Click Layer Thumb), then contract the selection by about 4 pixels (Select > Modify > Contract), on a new layer fill this selection with a radial gradient of #f5d57c and #a32c1e.

Now go back to the white border layer of the banner. If you know about layer masks, add a layer mask then do some grunge brushing with some of the brushes I've provided with this tutorial. If you don't know about layer masks just get the eraser tool, select a grunge brush then erase some of the corners of the white banner.

Now apply the following layer styles to the gradient banner:

Click to enlarge

Next, get the Green Abstract Lights stock photo, drag it over the banner, resize it then crop it to the banner's size.

With a large, soft eraser erase away some of the corners, then blend it in by changing the layer mode to either Overlay or Soft Light, then lower the opacity if you see it needs it.

With some of the grunge brushes I've given you to download, in the corners of the gradient banner do some grunge brushing. If the grunge brushing looks a bit dull you can change the layer mode to Soft Light or Overlay.

Next, get the Cool Speaker stock photo and drag it onto the canvas. Resize it so it just fits over the headers border.

Use the Polygonal Lasso Tool to make a selection around the entire speaker then delete the outsides. You don't have to keep the shadow, I edited mine later on anyway.

I added in a little bit of a different shadow with a brush, then I resized the speaker slighlty.

Lastly for the header graphic I added in the text. I used the font Standard 07_53, sizes 24pt and 32pt, No Anti-Aliasing.

Lastly I applied the following layer styles to the text layer:

And that's just about it for this step.

4. Navigation Buttons

Start by creating a group underneath the header group/layers, then make a new layer inside of the group. Now make a selection partially underneath the header for your first button. My selection was 36 x 60 pixels in size.

Fill this selection with a dark brownish gradient. My gradient colors were #6d5e39 and #51462a.

After drawing your gradient apply the following layer styles:

Now you've done all that, either add a layer mask and do some grunge brushing on the bottom of this button, or just use the eraser tool to erase away some of the bottom.

This is how mine turned out:

Next thing to do is add in some text. First I added in the text '01' in the middle of this button.

Font details:

Tahoma
12pt
Bold
AA: None
Color: #ffffff

Lower the Fill for this text layer to about 45-50%, then apply the following layer styles:

Now my text looks like this:

Now the button is finished, let's add in the actual link text.

First add in some more text to the right of the button. I used all the same details as the last text except the color #ba5e38.

I applied the following layer styles to this text layer:

And your text should look like this:

Duplicate all the button layers, move them along to the right, edit the text, repeat.

Click to enlarge

Finished for this tutorial. Thanks for reading, I hope you enjoyed this tutorial.

For learning purposes only you can download the PSD file from here.