Tricks:For Animators: Creating Cool Footers

here’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!

Step 5
You might think it’s looking a bit dull still, so we will jazz it up with a nice gloss. Create a new layer under the 2 stroke layers but above the green background layer, so in between both.

Select the “Rectangular Marquee Tool” from the Tool Bar (Keyboard Shortcut: M)Use the Marquee tool & select the top half of our footer as done in the image below:

Now continue on to fill this selection with a white fill #FFFFFF & then change the opacity to ‘15%’, this will give it the nice glossy feel/look, example below:

Step 6
We will now add the 3 different colored bars that are aligned to the left of the footer. These not only help the footer stand out more but give it a much better appeal than just having a plain green background.

Like in step 5 we will use the “Rectangular Marquee Tool” from the Tool Bar (Keyboard Shortcut: M). Use the Marquee tool & select a diagonal line such as the one in the example below:

Fill the marquee with a nice orange color, # F7AB19, this will mix well with the green. We now want another 2 of these bars, so duplicate the layer twice (Refer to Step 3 for duplicating layers). Once you have duplicated them align them all up next to each other, side by side, examples below:

We now want to change the colors of the 2 duplicated bar layers. For the first duplicated layer, right click the layer, select ‘Blending Options’ then select ‘Color Overlay’. Change the first bar to #FF0000 & the second bar to #009CFF. Once that is done align them to left & finally step 6 is complete!

Step 7
We now want to add the scan lines which really helps to show the footers vibrant colors. To create the scan lines we will need to open a New Document with a transparent background of 3px by 3px.

Once the new document is open we need to zoom in as close as we can on the document by using the Zoom Tool from the toolbar (Keyboard Shortcut: Z).

Select the Pencil Tool (Keyboard Shortcut: B) from the toolbar, this needs to be a size of 1px & use black #000000 as the color. With this we will draw 3 black pixels just like in the screenshot below:

We now need to save this as a pattern, so on the top menu bar select: Edit --> Define Pattern. Give it a name & select Ok. We can now close this 3px * 3px document & return to our Footer Document.

Now we are back to our Footer Document, create a new layer under the white gloss layer. Select the ‘Paint Bucket Tool’ from the toolbar (Keyboard Shortcut: G) & at the top toolbar change the ‘Fill’ from Foreground to ‘Pattern’. Then on the Pattern menu to the right select our pattern we created above.

Now fill the layer we created with this pattern by clicking somewhere inside our document, you will notice that it looks very horrid at this point, so simply change the opacity down to about ‘10%’.

Step 8
We will now add the final part to this footer, text. Text can mean a lot of things & can help define something much larger than it actually is. I will be using a nice pixel font for this with a size of 6px.

To add the text simply select the ‘Horizontal Type Tool’ (Keyboard Shortcut: T), select somewhere on the document & type your text, for this I typed my website name; Faded Pixel.

If you wish to use the font that I used then you may download it here as it’s a free pixel font: FP Pixel Font.

Final Result
Well if yours turned out similar to the one below then your all done, if not then I suggest you read back over the tutorial & find out where you went wrong.

I also suggest you experiment with this footer design, once you understand how I did it then play around with the styles yourself, add different features, here's 2 examples below: