This article covers step by step guide to animate a banner which has been created in Adobe Photoshop.
Note: To make the tutorial practical & easy to understand we have created a banner in Photoshop & Animated in ImageReady Click here to download the Banner.
After downloading the banner follow the steps given below :
Standard Banner Sizes
There are different banner sizes. Some of the sizes are given below for your reference.
Dimensions
(in Pixels) Type 468 x 60 Full Banner 392 x 72 Vertical Navigation Bar Banner 234 x 60 Full Banner 125 x 125 Half Banner Square 120 x 90 Button Banner 120 x 60 Button Banner 88 x 31 Micro Button Banner 120 x 240 Vertical Banner
In this example we will learn to & animate 468×60 Pixel Banner.
Download and open a banner in the Photoshop. (The banner is created using Photoshop & available for downloading with the article)
Note: In this example we have created a banner with different objects and text in separate layers. The color of the Layer Property has been changed for each frame; i.e., first frame in grey, second in light red, and so on.
Make all the objects & texts of the first frame visible keeping the rest as invisible.
Banner in Adobe ImageReady
After opening the banner in Photoshop Jump to Adobe ImageReady.
Choose File > Jump to > Adobe ImagerReady or click on Tools Palette Icon.
If the Animation palette is not visible, choose Window > Show Animation.
Select the first frame in the Animation Palette by clicking on it.
Make all the layers visible which are to be shown in this first frame while keeping the rest as invisible.
Click on the Duplicate Current Frame button in the Animation palette to create next frame.
Select the second frame in the animation palette. Make the layers visible which are to be shown in the second frame while keeping the rest invisible.
Similarly, to create the other frames click the Duplicate current frame button in the animation palette.
Go through the animation frame by frame, making different layers visible and invisible on each frame. Imageready will keep track of what’s visible/invisible on each frame.
Note: In this example 13 different frames are created.
Play Animation
Click on the play button in the animation palette to preview the animation. The animation might be very fast as all the frames play at the same speed.
Time Frame
For adjusting the time frames click the time marker below the frames to display a pop-up menu under each frame. Adjust the time period for each frame.
For continous loop of animation select the “Forever” button from the animation palette.
Selects a looping option to specify how many times the animation seqeuence repeats when played. For Example: Once, Forever, or Other. 
Duplicates current frame. 
Optimizing Banner
To optimize the banner, choose Window > Show Optimize
In the optimize palette you can adjust the settings according to the banner. To decrease the file size, set the color settings accordingly.
Note: Only the .gif format supports frame animation.
Testing it in the browser
To make sure the animation, text and the rest of the elements are properly placed, preview the banner in your browser.
Choose File > Preview In… (select your browser to preview your animation)
After testing the banner save the animation.
For saving the banner choose File > Save Optimize
Article first appeared at Layout Galaxy
Jatin Parmar works as graphic designer at Image Online Pvt. Ltd, the
developer of the Layout Galaxy web site design templates for Photoshop and Flash.
The Layout Galaxy family of products offers collections of templates to fit the needs of any business, regardless of size. Find out how you can purchase mind-blowing Flash, PSD, and HTML templates for your company at http://www.layoutgalaxy.com/product_present_catlog.php4.
