Creating Cool Footers

There’s nothing worse than visiting an Online Forum Community & seeing that everyone has really large footers (Example: 600px x 300px, 112KB), they just look horrible & take forever to load especially for 56K users. So I always like to create my footers nice & small so that they load quickly & look sharp. Now, you can too!

The following footer is an example of what you will create towards the end of this tutorial:

Step 1
For this tutorial we will be using a document size of 300px * 40px, with a transparent background:

Step 2
Create a new layer & fill it in with any color desired. Change the fill down to ‘0%’ & right click the layer selecting ‘Blending Options’.

Once in ‘Blending Options’ click the ‘Stroke’ tab on the left hand side at the very bottom, this should bring up some more options to edit our stroke.

Change the size of the stroke to ‘1’; change the position to ‘inside’ & change the color to #0E0D0D. We are done; select the Ok button to finalize the stroke.

Step 3
Now duplicate that layer by clicking & dragging it onto the ‘New Layer’ button. Right click the copied layer, select ‘Blending Options’ & click on stroke just like we did above.

However change the size of the stroke to ‘2’ & the color to white #FFFFFF. Select Ok to finalize the stroke:

You will need to also make sure that this ‘white stroke layer’ is under the dark grey stroke layer, if it’s not just click & drag it under the other layer.

Step 4
Create a new layer below the 2 stroke layers & fill it with a desired color, for this tutorial I chose: #A8EB17. Now right click this layer & select ‘Blending Options’.

This time select ‘Inner Shadow’. Change the opacity to 45%, Distance to ‘0’ & size to ‘18’ then select Ok to finalize these options.

Intermission
Well hopefully you have understood the tutorial so far, if not then please make sure you read everything in every step carefully, missing one thing may just make something not work.

So far your footer should look similar to the one below, if it doesn't then see what it is missing, and go back a few steps to find out what you missed!

On the next page, I will explain how to make the above colored rectangle look better and actually resemble a footer!

Onwards to the next page!

page 1 of 3