by Ben Watson aka B3Nkobe
| 22 November 2005
previous page, we added
a few more colors, and made our footer a bit more stylish.
In this page, we'll tie up a few loose ends in order to wrap
our cool footer!
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
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
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%’.
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
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.
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:
If you have any questions, feel free to post them on the
You can find me under the forum name B3Nkobe.