Page : 1 2

Dear Friend,

Hello & welcome back to Firewire, your friendly guide to the exciting world of web-design & web-solutions!

This newsletter 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 :



There are different banner sizes. Some of the sizes are given below for your reference.

Dimension (in Pixel) 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 468x60 Pixel Banner. Download and open a banner in the Photoshop.
(The banner is created using Photoshop & available for downloading with the news letter)

Note: In this example we have created a banner with different objects and text in separate layers. Colour of the Layer Property has been changed for each frames, 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.



After opening the banner in Photoshop Jump to Adobe ImageReady.

Choose File > Jump to > Adobe Image ready 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 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 keeping the rest as invisible.

Similarly, for creating the other frames click on the Duplicate current frame button in the animation palette.

Just go through the animation frame by frame, making different layers visible and invisible on each frame. Imageready will keep check on what's visible / invisible on each frame.

Note: In this example 13 different frames are created.






© Image Online  2001-2003