~ Free Graphics for U ~ We talk about Graphics

In this Photoshop tutorial I would like to walk you through the designing of a creative, paper-crumpled Blog/website footer area like the one shown here:

Introduction

Firstly, I have to give credit where credit is due. I was inspired to design this after viewing the portfolio of Alexandru Cohaniuc. For the footer he has something very similar as to what we’ll be designing in this Photoshop tutorial. I emailed Alexandru and requested his permission to use his design as inspiration.

That being said, let’s move onto the tutorial. This tutorial is probably best directed at the beginner users, but you should have some knowledge of the interface and tools of Photoshop. I’ll be using Adobe Photoshop version CS3, but it most likely doesn’t matter what version you’re using, as I recall version 7 is very similar to even CS4.

Step 1

Let’s start by creating a new document. For this I’ll be using a size of 1400 x 600 pixels, but if you’re not using a large monitor you may want to use something a bit smaller. The size of our footer is going to be around 800 x 110 pixels though, so you should just use something larger than that.

Use all of the default settings other than the size – 72 Resolution and RGB color mode.

Step 2

We need to set up a grid or some rulers so we can make our base area just the right size. For this I’ll be using rulers or guides. Enable rulers by hitting CTRL+R. Now, if you see the rulers on the top and left side of your document, you can drag from this area onto your canvas to create a guide.

I prefer to drag a selection onto the canvas the size of the shape I want to create, then dragging the guides over to the selection. The guides will automatically snap to the sides of the selection.

Step 3

After you’ve set up your guides, find and get out the Rectangle Shape Tool. Drag a shape inside of your guides.

Once you’ve set your settings set up as shown above, create your rectangle.

The color I used for my shape shown above was #121413.

Find and get out the Add Anchor Point Tool then add an anchor point at the bottom and center of your shape. Now, select this point and move it down and maybe to the right a few pixels.

(click above image to see larger version)

This is just to make our shape a little more odd and uneven, particularly at the bottom though. You may even want to move a few of the corners a few pixels.

Step 4

Now it’s time to add some texture to our shape. For this I used a basic crumpled paper texture that I found in my resources folder. This texture wasn’t created by me, so I can’t take credit for it, but I can’t give credit for it because I can’t find the author of it anywhere.

Download Crumpled Paper Texture (jpg, 700kb)

Open your texture in Photoshop and lighten it up a little bit if you want to remove some of the detail. Copy the texture over into your other document. Select the pixels of the shape you created earlier (the footer), then add this selection as a layer mask for your texture layer.

OK, now you can rotate, resize and adjust your texture. After any adjustments you make, invert your paper texture (so it will appear to be white crumple effect on a black background) then lower the layer opacity to around 20%, or whatever looks best.

(click above image to see larger version)

OK, now it’s looking cool! The opacity I’ve used above for my texture was 27%, but it may be different for different textures, etc.

Step 5

Time to add some slight details. I want to add a dark gradient to the lower part of the base shape, and also some grunge brushing.

Hold CTRL/CMD on your keyboard then click the base layer’s thumbnail, this will select the pixels. Create a new layer then drag a black to white gradient inside of your select, black being at the bottom and white at the top.

Change the layer mode for your gradient layer to Multiply.

I guess you have to look very closely to notice this gradient, but it was important to me.

Next thing is the subtle grunge brushing. You’ll need some nice brushes for this – so check out Brusheezy and deviantART.

Create a new layer then apply a bit of off-white-colored brushing to the canvas. Use a layer mask to crop your brushing to your base shape, then lower the opacity and change the layer mode if necessary.

(click above image to see larger version)

Finish off by adding a shadow to the entire shape. You can easily do this by applying a Drop Shadow layer style with 0-2 distance.

Also added a faint coffee stain to the left side, as you can see.

Step 6

Now for the final touch – some simple text. For the copyright text (Copyright © 2008 Design Blurb) I used the font Sketch Rockwell – a free download.

For the text on the right, a secondary navigation, I used Arial, 14pt, white.

As you can see I also added an interesting underline to the links, using the pencil tool on a separate layer. Finally, for the sake of showing it off, I added a bit of a nicer additional shadow, and added a really cool wood texture to the background.

As I said before, these final touches were just for the sake of showing it off, they’re not important to the tutorial.

Complete

Well, thanks for reading this Photoshop tutorial, I hope it was enjoyable and easy enough to follow! If you wish to download and analyze the PSD file, please feel free to do so.

Download Complete PSD File (rar, 1.8mb)