Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Designing a Creative Blog Footer

Designing a Creative Blog Footer


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.

Designing a Creative Blog Footer image 1

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.

Designing a Creative Blog Footer image 2

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.

Designing a Creative Blog Footer image 3

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

Designing a Creative Blog Footer image 4

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.

Designing a Creative Blog Footer image 5

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.

Designing a Creative Blog Footer image 6

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.

Designing a Creative Blog Footer image 7

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.

Designing a Creative Blog Footer image 8

Change the layer mode for your gradient layer to Multiply.

Designing a Creative Blog Footer image 9

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.

Designing a Creative Blog Footer image 10

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.

Designing a Creative Blog Footer image 11

Designing a Creative Blog Footer image 12

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.

Designing a Creative Blog Footer image 13

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

Designing a Creative Blog Footer image 14

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.

Designing a Creative Blog Footer Tutorial: Final Result

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.



Author's URL: Design Blurb
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Designing a Creative Blog Footer"

Only registered users can write comment

No comments yet...