How to Make an Animated Banner

Banners are not quite as popular as they used to be. Affiliates are starting to use other methods of promoting sites, such as text links, reviews, and e-mail. But banners are still a necessary part of any affiliate site’s repertoire.

Creating an animated banner graphic can actually be pretty simple. Let’s start with a standard 468x60 banner, which has been the most popular banner size for several years. In Photoshop, select File: New. Set the size to 468 pixels in width and 60 pixels in height.

Now you’ll want to fill the background. You can use a solid color or a gradient. Again, if you’re going to use a gradient, you should probably stick to two similar shades of the same color.

Next, you’ll want to bring in an image of some sort. You should resize the image to around 100 pixels before you bring it into your banner. Open your photo, and then click Image: Resize Image. Enter 100 pixels into Width and be sure Constrain Proportions is selected. The click Select: All. Then select Edit: Copy.

Now go to your banner image. Select Edit: Paste. This will paste the image into the banner on a new layer. Now you can click Edit: Transform: Scale to resize the image further to fit inside the banner. You can also select Edit: Transform: Rotate in order to rotate the image if you’d like to tilt it inside the banner.

Once you have your photo in the right position, you can add your text. You should add a title in fairly large text.

Then you can add a subtitle that rotates. This will be our animation. Let's say you're advertising a dog training eBook.

Your title might be "World's Greatest Dog Training Manual!" Then your first subtitle might say, "Written by a dog trainer with 20 years of experience!"

Now, look at your layer palette. Make sure the subtitle text layer is selected, and then click Layer: Duplicate Layer, and click OK. You'll see a little eye icon to the left of your original subtitle text layer.

Click that icon to make the layer invisible. Now you should see your copied layer. Select the text and change it to "Click here to get your copy now!"

Click Window: Animation. (If your version of Photoshop doesn't have this, you'll have to use another program to animate the banner, such as ImageReady.)

You'll see a new window open up at the bottom of your screen. This is the animation pane. To the left of the trashcan icon on that pane, you'll see another icon. This icon makes a new frame for your animation.

Make both of your subtitle layers invisible, and then create three new frames by pressing that button. Select the first frame, and then make the first subtitle layer visible. Now select the second frame and make that subtitle layer invisible.

Do the same for the other two frames. Select the third frame and make your second subtitle layer visible. Then select the first frame and click the number underneath it to bring up the time menu.

Select 2.0 to make this frame appear for 2 seconds. Select the second frame and do the same thing, but make this frame 0.2. Then make the third frame 2.0 and the fourth frame 0.2. Then look at the bottom left of the animation pane and be sure it says "Forever."

This means the animation will loop over and over instead of playing just once and then stopping. Now you can press the play button to watch your animation to be sure it works correctly. If it looks good, you'll want to save this PSD so you can make changes to it later.

The animation data will be saved with the PSD, so you can edit it all later if necessary. Now you can click File: Save for Web. Be sure to save your banner as a GIF file, because only GIF files currently support animation. If you save your banner as a JPG, PNG, or other format, it won't be animated.