Creating Cool Footers - Page 3
       by Ben Watson aka B3Nkobe  |  22 November 2005

In the 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!

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
W
ell 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 kirupaForums. You can find me under the forum name B3Nkobe.
 
The image “http://www.kirupa.com/forum/images/smilies/d_smile.gif” cannot be displayed, because it contains errors. Ben Watson aka B3Nkobe
Fadedpixel

 


 

page 3 of 3

 

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.