by Ben Watson aka B3Nkobe
| 22 November 2005
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
The following footer is an example of what you will create
towards the end of this tutorial:
For this tutorial we will be using a document
size of 300px * 40px, with a transparent background:
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.
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.
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
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
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