Photoshop Tutorial: Designing a Creative Blog Footer

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:

Design a Creative Blog Footer

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.

Create New Photoshop Document Settings

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.

Rulers and Guides Photoshop

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.

Rectangle Shape Tool Settings

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

Rectangle Shape Created

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.

Edited Shape Path

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

Layer Mask added to Texture

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.

Texture Adjustments Made

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

Gradient Inside Shape Selection

Change the layer mode for your gradient layer to Multiply.

Gradient Layer Mode Changed

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.

Grunge Brushing Layers Added

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

Drop Shadow and Coffee Stain Added

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.

Sketch Rockwell Text Added

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

Arial Navigation Text Added

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.

Design a Creative Blog Footer

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

Download Complete PSD File (rar, 1.8mb)

Recommended for designers
Comments
  1. Online Printing said at 7:42 pm on December 22, 2008

    Interesting and helpful post, keep em coming, thanks =-)

  2. Finalfire said at 5:18 am on December 24, 2008

    Hey there, nice tut! Thanks for sharing ;D

  3. NetOperator Wibby said at 6:12 am on December 24, 2008

    Not bad, not bad.

  4. Someone said at 7:33 am on December 24, 2008

    Well, I think that paper-like background of footer doesn’t work that well with straight edges… otherwise, it’s quite nice

  5. cutt said at 1:06 pm on December 25, 2008

    simple but nice, thanks a lot!

  6. joey said at 7:24 am on January 3, 2009

    nice : )

  7. mick14 said at 1:21 pm on January 3, 2009

    Amazing!I like it!it’s a simple tutorial!
    i’m sorry that my Einglish isn’t very well,so i can only say this!
    Thinks for the author!

  8. Deps said at 3:40 pm on January 4, 2009

    Very Nice tutorial thanks !

  9. Mike said at 1:06 am on January 28, 2009

    I really like this simple technique. It looks great on wood surfaces; I’ll keep it in mind for the future. Thanks.

  10. Patternhead said at 9:57 am on February 16, 2009

    Thanks

  11. zainab said at 5:02 am on March 30, 2009

    its helpful to make some other footer also thanks.

  12. No said at 8:08 pm on March 30, 2009

    Hi, i’m new to photoshop, please can someone explain how to add crumble texture as mask layer? Many thanks!

  13. Eli said at 8:14 pm on March 30, 2009

    No: Firstly you need to make the selection. Then, select your correct layer and click this little icon:

    Layer Mask Icon

  14. Tyler Maynard said at 3:14 am on December 12, 2009

    Thats a good looking footer!

  15. prem said at 4:53 pm on June 24, 2010

    nice inspiration … thanks

  16. vigilon said at 2:02 am on December 31, 2010

    Great tutorial. You make it look easy.

Leave a Reply