In this two-part Photoshop tutorial we’ll be designing a nice, simple grungy website design. For this tutorial I’m going to assume you have moderate knowledge of Photoshop, considering I don’t explain every single part in exact detail.

Click above image for full view.

Resources Used

Stock photos:

• Cool Speaker Stock (download cutout render)
• Green Abstract Lights

Patterns:

• 16 x 16 Scan Line
• Background Pattern
• Background Texture
• Bubbles Pattern

Brushes:

• Grunge Brush Set #1
• Grunge Brush Set #2

1. The Background

Start by creating a new document in Photoshop. We’ll be making our website design in this document. I used a size of 760 x 760 pixels.
Now fill the background with a light yellow-brown color. I used #d7ceaf. Next, create a new layer then fill the canvas with the 16×16 Scan Line.

Note: When you filled your canvas with the pattern, you’ll notice they came out black, so press ctrl+I to invert them. After filling your canvas with the scanlines, change the layer mode to Overlay and lower the opacity to around 40-50%.

Merge your two background layers together so you’ve only got one layer. Now apply Filter > Noise > Add Noise with the following settings:

Now, lastly for the background, grab the Background Texture and apply it over the background.

Change the layer mode for this layer to Overlay and lower the opacity to around 25-40%, depending on what looks best.

Looking alright now.

2. Header Design

Onto the header. Create a new layer then make a large selection near the top of the document (this is the selection for your header). Note that my selection was around 700 x 200 pixels in size. Fill the selection with solid white.

Click above image for full view.
Apply this Outer Glow to your 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 nice, vibrant Radial Gradient. The colors that I used for my gradient were #f5d57c and #a32c1e.

Go back to the white border layer of the banner. If you know about layer masks, add a layer mask to your border layer then add 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.

Next, apply the following layer styles to the gradient banner layer:

1. Inner Glow
2. Stroke

Click above image for full view.
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 think 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.

(left)

(right)
Get out 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 slightly.

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:

1. Drop Shadow
2. Inner Shadow
3. Gradient Overlay

And at last, we’re finished for this step!

3. 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:

1. Inner Glow
2. Pattern Overlay (Bubbles Pattern)

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
• Anti-Aliasing: None
• Color: #ffffff

Lower the fill opacity for this text layer to about 40-55%, then apply the following layer styles:

1. Inner Shadow
2. Outer Glow
3. Gradient Overlay

And 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:

1. Inner Shadow
2. Outer Glow
3. Gradient Overlay

And your text should look like this:

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

We’re finished for this part of the tutorial. Thanks for reading, I hope you enjoyed it!


Continuing from the last part of this tutorial. We’ll be making the side panel for recent work, the updates area, and the footer bar for this grungy web template.

1. Introduction

Before doing this tutorial, you should have finished the previous tutorial first. If you have, open up the PSD file.

2. Latest Work Sidebar

Now after you’ve got the last PSD file open, duplicate one of the button layers and move it downwards, change the text and all to correspond to what we want.

2. Recent Work Sidebar

Next thing to do is create a new layer then make a rectangle selection beneath our button.

My selection was 140 x 100 pixels. Fill this selection with a light yellowish color, #efebdb. Now use a grunge brush to erase away some of the edges of this box.

Make the same sized selection again then contract the selection by 2 pixels (Select > Modify > Contract), fill the selection with a darkish brown color. (#5b5234)

Next, change the layer mode for this darker rectangle layer to Linear Burn and lower the opacity to around 20-35%.

Select the darker rectangle again, then again contract the selection by 2 pixels. Add a picture inside of this selection.

Looks pretty cool huh? Now add in a smaller box underneath this first one, in this add in some text relating to the above image.

I used exactly the same method as above to make that smaller box. Duplicate all of the layers you just made, move them down then change the latest work image and text.

3. Updates Area

Make another one of those navigation buttons to the right of the sidebar, call the number: ’06′ and the text: ‘Recent Updates.’

Now basically just repeat the last steps. Create a new layer, fill a large selection with the light yellowy color (#efebdb), apply grunge brushes, add a darker box over the top.

See how we’re going.
Lastly for the updates box, add in some text and maybe a filler or two.

Blending image:

4. Footer Bar

Once again, repeat the step where you make a light grungy box near the bottom of the template..

Make a selection around your footer bar then contract the selection by about 2 pixels (Select > Modify > Contract) after contracting the selection, make a new layer then fill the selection with a gradient of the same colors from your header.
Gradient colors: #a32c1e and #f5d57c.

Now on a new layer do some grunge brushing inside of the gradient bar selection.

For the above brushing I used similar colors to the gradient, then I lowered the opacity to about 30%. A little more grunge brushing:

I used the layer mode Overlay for the above brushing. Lastly for the footer, add in your text. I used Tahoma, 12pt, Bold, White.

After writing out your text, to give it a cool effect apply this Outer Glow.

That’s all for this tutorial, thanks for reading.
Tutorial result: