Building an Animated Banner

As an example, let's see how I made a pair of animated banners for the Web Developer's Journal's Web Jobs Forum. I had noticed that banners that look like applications, with familiar buttons and drop-down lists for people to click on, seemed to generate good clickthroughs. Therefore, I decided to create some buttons like those on an HTML form, that illustrated some of the Web job skills that the forum is all about.

First I created an HTML page with a form, setting up the buttons just as I wanted them. Then I used SnagIt to make a screenshot of the page. Alas, screenshots are another little item that Photoshop doesn't do (Paint Shop Pro does), but SnagIt is one of many shareware apps out there that work just fine. Once I had my screenshot, I opened it in Photoshop and used the rectangular marquee tool to select just the button that I wanted. Copied it and pasted it into my banner work file.

Now, what I did here is about as simple as it gets, as animations go. I just took a couple of sentences of text, and had them show up a phrase at a time - really just a static banner dressed up to make it a little more eye-catching. Using layers in Photoshop or Paint Shop Pro, it's a piece of cake.

First I used the text tool to place the first phrase on the banner, exactly the way I wanted it. This automatically creates a new layer on top of the background. This layer will now be used as the model for all the other phrases in the sequence. Right-click on the layer in the Layers View, and select Duplicate Layer. Create as many duplicates of this layer as there are phrases in your spiel, then go in and edit the text in each one.

Of course, you could also have selected the text and copied it, then pasted, which automatically creates a new layer. Using Duplicate Layer, however, the new layer is perfectly lined up with the old, without having to drag the text into place. Whatever you do, make sure that the text on every layer lines up with the rest vertically and horizontally. Nothing looks more amateurish than text that shifts position slightly as it changes.

Now that we have each phrase of our message on its own layer, all we need to do make each one visible in turn, and export to a unique file. Click on the little eyeballs in the Layers View to turn off all the layers except for the one containing the first phrase (and the background layer of course). Now export this file as a .gif, then turn on only the second layer, export that as a .gif, and so on. We now have several .gif files, each of which represents one frame of our animation. Open the animation shareware package of your choice, and use it to assemble these files into one animated .gif file.

We used text in this example, but the same technique can be used with pictures just as easily. Duplicate the first layer as described, modify it slightly to create the second frame, then duplicate that layer, modify it to create the third frame, and so on.

Creating Graphic Banners
Designing Winning Ad Banners
Rich Media Types