Making A Banner Ad in Adobe Imageready
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.
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 select "Inside".
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].
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 select "Inside".
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 identical.
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.
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.
