Photoshop is often the right tool for web design, especially if you’re creating a design using numerous images and brush effects. In this tutorial, I’ll show you how to create a complete grunge home page design. We’ll design the header, sidebar, body, footer, and style everything to work together in a heavily textured and worn design.

Step 1

This time we’re going to create a full web design in grunge style using Photoshop and a lot of stock images. As this is a intermediate to advanced level tutorial, I’ll skip the explanation of some basic steps. First create a new document 950 px by 800 px at RGB 72dpi. Show the rulers and drag four guides bounding the document, this will be the optimal area of the design. I’m planning to keep a fixed width layout.

Go to Image > Canvas Size and increase the width and height a lot more, 1200 px by 1000 px is OK, this way we’ll be designing for wider screen resolutions. Then add more guides where you’re planning to add the containers (Header, Navigation bar, Sidebar, Footer).

Let’s imagine this design is destined for a WordPress template, so we’ll need a header, a navigation bar inside the header, and a right sidebar. Take a look at the bottom of the following image. Then fill a background with this color #7A8173.

Step 2

Now we’re going to create a pattern for the header’s background, which is fairly simple. Create a new document 50 px by 300 px and draw something like the image below. I’m using guides to make my shape as symmetrical as possible. Then go to Edit > Define pattern and save the shape as "pattern 1."

Step 3

On a new layer in our main design file, draw a 300 px height rectangle using the Rectangle Tool. Go to Filters, and add a Pattern Overlay, search for your brand new pattern and apply it. To make it look correct you must click the Snap to Origin button. Change the layer Fill to 0%, create a new blank layer above the shape layer, and merge both, this way you’ll have the pattern ready to add some effects to it. Name that layer "Pattern 1."

Step 4

Select "Pattern 1" layer and apply to it some layer styles: Drop Shadow, a Gradient Overlay, and a Pattern Overlay. Try to get something similar to the bottom of image below, using following values.

Step 5

Now we’re going to add the navigation bar background. Draw a rectangle hiding a little bit of the "Pattern 1" layer. Apply to that rectangle a Pattern overlay, a black to red black gradient overlay, and a soft Drop shadow. Use the values of the images below as a reference. Next, add a Layer mask > Hide all, and draw a black to white to black Reflected Gradient on the layer mask, you’ll get something similar to the bottom image below.

Step 6

Now draw an ellipse (#691E1B) above the "Pattern 1" layer, name it "Light," and Apply a Gaussian Blur to it with a 50 pixels radius. I created an extra guide to draw the light in the center of the header. Delete everything below the navigation bar and change the layer’s Blending mode to Color Dodge.

Step 7

To finish the first part of the layout, we’re going to draw the sidebar’s background. Draw some guides to delimit the sidebar and also edit the existing guides to make them fit on the actually design. Then draw a red rectangle (#3D100B) and apply the following styles: a Drop Shadow, a Color Overlay, and a Pattern Overlay.

At this point, you must consider the way you’re going to cut (editor：photoshop1)