Flash Components      Flash Menu      Flash Gallery      Flash Slideshow      FLV Player      Flash Form      MP3 Player      PhotoFlow      Flash CMS      3D Wall      Flash Scroller

Flash / AS

Silverlight

WPF

ASP.net / PHP

Photoshop

Forums

Blog

About

 


FlashComponents
  Galleries
  Slideshows
  Menus
  Design & Effects
  Audio & Video
  User Interface
  Templates

 

 

 

 


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

 

 


kirupa.com's fast and reliable hosting provided by Media Temple. flash components
The Text Animation Component for Flash CS3
Check out the great, high-quality flash extensions. Buy or sell stock flash, video, audio and fonts for as little as 50 cents at FlashDen.
Check out our high quality vector-based design packs! Flash Effect Components
flash menus, buttons and components Digicrafts Components
The best flash components ever! Entheos Flash Website Templates
Upload, publish, deliver. Secure hosting for your professional or academic video, presentations & more. Screencast.com Purchase & Download Flash Components
flash components Free Website | Make a Website
Streamsolutions Content Delivery Networks Learn how to advertise on kirupa.com