|Programming Art's Tutorials|
Making A Banner Ad
One of the best ways to advertise online is to make banner ads. I'm going to show you how to create fantastic animated
banner ads using Adobe Imageready and Adobe Photoshop. I decided to make a banner ad for our very own Mouse Tamer
software. Check out the tutorial and then get to work on your own! As always, tell us if
you have anything to contribute.
1. First, switch to Photoshop and make a new document [CTRL + N] 468 pixels
wide and 60 pixels long. These dimensions are the traditional size for banner ads. I want a 1-pixel
line running around the edge of the ad, so make a new layer [Shift + CTRL + N] and select the Rectangular
Marquee Tool [M]. Now drag over the whole document so that the entire banner ad is selected. Pick a nice
foreground color [I used black] and use Edit > Stroke. Use a width of 1 pixel and under Location
The beginnings of a banner ad.
2. To create the initial graphics, you can use Photoshop or Illustrator or whatever you'd like.
I decided to go with Illustrator. This saved time because I already had a Mouse Tamer logo designed in Illustrator,
and to keep the color scheme and design related I worked from that. Once you have a beginning design, group everything
together and Copy [CTRL + C] and Paste [CTRL + V] into a new layer in Photoshop
[unless of course you designed in Photoshop].
The first layer.
3. I think I need a few frames of animation in the Mouse Tamer ad so I can convey all of the information
I want to. So make a change to your old banner ad, and then Copy [CTRL + C] and Paste [CTRL
+ V] into another new layer in Photoshop. I chose to replace some of the text with new text describing Mouse
Tamer's features. Now repeat this until you have several layers in Photoshop, one for each frame of animation you'd
like in your finished banner ad. If you want a banner ad that has moving elements instead of static elements that
change like mine will, make sure you put anything that you want to move [like a bit of text] on its own individual
layer. I'll show you how to tween animation at the end of this tutorial.
Another one of my layers.
4. OK, so now you've got all of your frames of animation saved in different layers in Photoshop.
It's time for Imageready, so switch over [Shift + CTRL + M]. Now we get to animate, so make sure
that the Animation Palette is visible. If it isn't, just go to Window > Show Animation. Now all
you really need to know is how many frames you want your animation to be. I'd like 6, so select the "Duplicates Current
Frame" button in the Animation Palette until there is a total of 6 frames there. At this point, they should all be
5. Now select the first frame in the Animation Palette by clicking it. Now go through all of your
layers and make everything that you want to be on this first frame visible by clicking the eye next to each layer.
Switch to the next frame, and do the same. You just go through your animation frame by frame, making different layers
visible and invisible on each frame. Imageready will keep track of what's visible on each frame for you, so if you
return to a frame all of the visible and invisible layers will shuffle around how you want them.
6. If you preview it at this point, [the "Plays Animation" button in the animation palette] it will
probably seem a bit fast for your tastes. All you need to do is select the "0 sec." pull down menu under each frame.
This adjusts how long each frame is visible. Now when you preview it should be pretty good. Also, make sure "Forever" is
selected in the loop pull down at the bottom, so that your animation will continuously loop. A good way to make sure
the timing is good is to preview the animation in a browser. Just go to File > Preview In. and select
a browser to see your animation in.
7. Now all you really need to do is save the animation! If you like, you can go into the optimize
panel at this point and adjust colors and tweak to bring the file size down. I set the colors down to 128 to
save a few Kb. Now post your magnificent banner ad, and you're all set.
The finished ad.
For those of you who would like to learn tweening: As a small tweening example, take a single layer of text
from your original banner ad. Make 2 new frames, and make this single text layer the only thing visible in each frame.
All you need to do to animate with tweening is take the 2nd frame's text layer and move it somewhere else. You should
also make the transparency 1% for this example. Now select the layer with the text, and in the Animation Palette
select the 1st frame and Shift-select the 2nd frame so that both are selected. At the upper right corner of the Animation
Palette is an arrow. Click it and from the menu that appears select Tween. In the dialog box select "Selected
Layer" for Layers, "Position" and "Opacity" for Parameters, and keep the rest the same. Now Imageready will add 5
additional layers to the animation, gradually transitioning from the first to the last! Experiment with this for
some cool results.
The tweened animation.