WebDevelopersNotes logo

home-icon Home / Graphics / Animated GIF banners – An Example

Animated GIF banners – An Example

Animated GIF banners - An Example

Animated Gifs have been extensively used in web advertisement banners. Why? The motion in an animated gif banner on an otherwise static page attracts viewer’s attention.

Animated gif banners can be used to promote your web site, your products (as in eBay or other web sites), the services you offer etc. The important point to remember when designing animated gif banners is that they don’t end up irritating the viewer. The color choice as well as excellent copy goes a long way in creating a successful animated gif banner. To know more about web banners, read Banner ads for online promotion and Web banner design tips.

Sponsored Links

In this article, we’ll make a small banner 300 X 50 pixels in dimensions with 6 frames. Note: This is not the standard banner size. If you want to create animated gif banners to promote your web site, it would be better if you stick to one of the standard banner sizes; Refer Standard animated gif banner sizes or Banner sizes. before we begin, I recommend that you first read a few articles – What are animated Gifs?, details of animated gifs and How to create animated gifs.

I will use my favorite graphics editor, PaintShop Pro, to create each frame of the animated gif banner (you can employ any graphics program you are comfortable with) and then bring them all together in Animation Shop. Animation Shop is a software for creating animated gif images and comes free with PaintShop Pro. And what is the exact role of Animation shop? – This software not only allows us to compile individual images in the correct sequence into an animated gif but also lets us fine-tune the timing for each frame.

Okay, let us start. Here are our six frames individual images I created in PaintShop Pro.

Animation gif frame no. 1
Frame #1

Animation gif frame no. 2
Frame #2

Animation gif frame no. 3
Frame #3

Animation gif frame no. 4
Frame #4

Animation gif frame no. 5
Frame #5

Animation gif frame no. 6
Frame #6

Employing the Animation Shop Animation Wizard, we import these individual files and create an animated gif banner; Refer Creating animated gifs.

Now comes the interesting part, which is changing the timing of each frame.

Right-click on the first frame of the animation. You’ll get a drop down menu that will look similar to the one below.

Changing the properties of frames

Select Properties. Animation Shop now displays a window that allows you to modify the properties of the frame.

Changing the properties of frames

Change the Display time for the first frame to 250. Hence, this frame is now displayed for 2.5 seconds.

Select the second and the third frames (SHIFT-CLICK or CONTROL-CLICK) and then right-click. Change their timings to 25 (quarter a second).
The timings for the fourth, fifth and sixth frames are set at 100, 300 and 400, respectively.
Now play your animation once again and note the difference.

Animated Gif Banner

A more complex animated gif banner

Below you will find a very complex animated gif banner. Why is it complex? Because it involves 31 frames all of which were designed individually. The banner below conforms to the standard web banner size – 468 x 60 pixels. You’ll also note that this animated gif banner has a sort of theme or a story to tell. Make sure all your banners have good color combinations and a nice “story” to tell 🙂 For further details refer Tips for creating web banners.

Animated Gif Banner

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

"The Computer" was named Time magazine's "Machine of the Year" in 1982. [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy