[ to step 3 ]


Good use of animation can give your banner a real boost.

Most animation tools come with a wide range of special effects and transitions. The problem is that usually the animations they produce are far too large in file size (too many frames), and they look 'mass produced'.

Making the frames of your banner animation by hand is fun and easy AND it leaves you with complete control! You then need only a simple tool to assemble the frames.

Let's look at how the 'talkitup @ ccc support forums' banner was made. You can download the layered Photoshop v4/5 file here (6k)!

View the 'talkitup @ ccc support forums' banner.

Banners for the CCC site must be sized at 444x46 pixels and be less than 10k.

Initially the main elements were created on separate layers in Photoshop, and guides were set for positioning of elements across the frame.

The frames were created by positioning the elements and saving each frame out as a GIF.

It's important to remember that the eye requires very few cues to perceive movement.

[ to top of page ]

The mask layer was used to hide elements where necessary. The optimization of the eight frames (below) was left until they were in the animation tool.

A blank frame is often used in animated banners to create transitions and/or breaks between ideas.

It's also a good strategy to work with as small a color palette as possible, helping to keep the file size down.

[ to next page - assembling your animation ]

[ to top of page ]