Creating animation for the web

Author:  Philemon Yalamu

Creating Web animation using layered Photoshop images.

By definition, an animation is a composition of sequences of frames. By varying each frame slightly from the next, you achieve an illusion of motion. You can create animations in Adobe ImageReady using a layered Photoshop or ImageReady image that can be used on the web. The image you create contains all the elements of the animation on separate layers. Rather than duplicate and vary the entire image over and over, you vary the content of each frame by hiding or showing layers for each frame. You need only one copy of each layer containing static elements, whereas an element in motion will probably require several layers to create an impression of smooth, fluid movement.

For this lesson, I will be using Windows to demonstrate however, you can also apply these steps to any Macintosh computer. 

Here, we will create a simple advertisement banner for a web page.  This advertisement banner advertises certain information.  The banner size is 200 pixels by 160 pixels.  We will be using the 4 default images in the Pictures folder/ My Documents of Windows XP.

1.    In Adobe Photoshop, create a new document with the specified banner size [A] (200X160pxls). Open the 4 images in Sample pictures folder/ My Documents [B] (or you may use any other images, fine) and copy all of them into the new document (web_Banner_Tutorial) which you’ve just created.  Add some Text to the document [C]. 

Include a single layer for each static element. Create multiple layers for moving elements. Each layer for a moving element should represent its position at a different point in time.

A: New document with specified size

B: 4 images in My Documents

C: Text added onto the document

2.       Save the file, and choose File > Edit in ImageReady [D]. The file is now transferred to ImageReady [E] for animation.

D: File > Edit in ImageReady

E: File sent to Image Ready

3.      Click the Animation tab to bring the Animation palette to the front or, if the palette isn't open, choose Window > Animation.  ImageReady creates the first frame of the animation.

F: The animation pallete

4.      Click the Layers tab to bring the Layers palette to the front or, if the palette isn't open, chooseWindow > Layers. Arrange the Layers palette and the Animation palette so that you can view at least some of the document window and both palettes.

The Layers palette

  

5.      In the Layers palette, make sure the correct layers are visible and hidden for this first frame.  For this case we'll start animating from top down (that is from image1 to image4).  Click the visibility icon (the eye)  to hide or show a layer.

6.        As you can see on the animation palette, the first frame is already created (see figure F). We will now create the other frames for the other three images (image2-image4). Click the Duplicate Animation Frame button  at the bottom of the Animation palette to add the next frame. In the Layers palette, adjust the visibility of layers as needed for this frame by clicking the eye icon  of the image1 layer [G]. Continue to add new frames and hide or show their layers as appropriate with the remaining images/ layers [H].

G: Next frame created with image2 activated

H: Next frame created with image2 activated

7.         When you have created all of the animation frames, click the Play button at the bottom of the Animation palette to preview the animation. Click the Stop button to stop it.

8.            If the animation is moving too quickly, select a specific frame whose display time you want to adjust, or select all the frames to change their display time uniformly [I]. Then, click the arrow next to 0 sec. at the bottom of a selected frame, and choose the desired time from the pop-up menu.

I: select all the frames to change their display time uniformly

9.        To set how many times the animation loops, choose Other from the pop-up menu on the bottom left-corner of the Animation palette (it defaults to Forever). Enter a value for Play, and click OK [J].

J: Setting looping times

    10.          When you are satisfied with the animation, save the file. It is important to first save the file using the Photoshop format. The Photoshop format preserves all components of the button and allows you to make changes later if necessary. Once you have saved it as a PSD file, you can optimize [K] the animation for the Web and save it in the GIF format, the format needed to display the animation on the Web.