How to make GIF banner quickly in Photoshop CS3 I’ll show you in this tutorial. Probably this banner will be not as eye catching as those made with special software for making banner ads such as Adobe Flash or Koolmoves but it will be light and attractive. Though ImageReady is abandoned in CS3, all its features are now available in Photoshop. In Photoshop CS3 Extended besides traditional Frame animation workflow there is also Timeline view.

First of all, you have to decide with banner size you will use. There are many standard sizes, in this tutorial I bring into play Full banner (468×60) and Square banner (100×100).

You also should think of original idea and design for banner to attract visitors of web site where you are going to place this banner. Before actually animating you have to choose which images you will be use in your banner.

First banner is the simple sequence of different images which can be made in Frame animation workflow of both Photoshop CS3 and Photoshop CS3 Extended.

1. Create a new document (Ctrl+N) with size 100×100 pixels

Open the Animation palette (Window-Animation). In Photoshop Extended, make sure the Animation palette is in Frame animation mode (click the Convert to Frame Animation button in the Animation palette in the lower right corner).

2. Add a layer or convert the background layer

Because a background layer cannot be animated, add a new layer or convert the background layer to a regular layer by double clicking it and pressing OK.

3. Add content to your animation

Place images you’d like to animate on separate layers which will be used as frames later. I will use 3 layers for images and one for title in imaginary banner for a dance school.

4. Add frames to the Animation palette

In the upper right corner of Animation palette click small triangle and choose Make Frames From Layers. So now you have 4 frames. You can change their position in animation by drag and drop. You can also edit content of each layer and frames will automatically change themselves.

5. Animate frames

In this case you don’t need to do anything as we make just simple animation. Keep in mind, that you can also make animation doing any of the following:  turn visibility on and off for different layers, change the position of objects or layers to make layer content move, change layer opacity to make content fade in or out, change the blending mode of layers, add a style to layers.

Tween command, which generates new frames with intermediate changes between two existing frames, is a quick way to make an object move across the screen or to fade in or out. To make tween select two frames (one with start and next with end position of object) in Animatiion palette, click small triangle in the right upper corner and choose Tween or click looking  like chain button among controls. Specify reasonable number of frames to add (2-7) and parameters to tween: position, opacity or effects.

6. Set frame delay and looping options

You can assign a delay time to each frame by specifying number below each frame in seconds  and give looping so that the animation runs Once, a certain number of times (Other), or Forever. In this tutorial assign to each frame 0.5 seconds delay and set looping to Forever.

7. Preview the animation

Use the controls in the Animation palette to play the animation as you create it. Then use the File-Save For Web & Devices command (Alt+Shift+Ctrl+S)  to preview the animation in your web browser (click  browser button in the lower right corner).

8. Save the animation

Save the animation as an animated GIF using the Save For Web & Devices (Alt+Shift+Ctrl+S). I’d recommend you lower maximum number of colors to 128 or even samaller amount. Set color reduction algorithm to Perceptual, set ‘no dither’, uncheck transparency if you donn’t use it in your banner (or if you didn’t apply Optimize Animation command before) . To reduce the file size of your banner you can also optimize the frames to include only areas that change from frame to frame or apply special Optimize Animation command (choose Optimize Animation from the Animation palette menu).

In second banner we will change position of object and use Timeline workflow in Photoshop CS3 Extended. We’ll make banner to advertise imaginary gift shop.

1. Create a new document (Ctrl+N) with size 468×60 pixels

Open the Animation palette (Window-Animation). Make sure the Animation palette is in Timeline animation mode (if it is not, click the Convert to Timeline Animation button in the Animation palette in the lower right corner).

2. Specify the document timeline settings

Specify the duration and frame rate of your banner in the Animation palette menu.  You can set frame rate to 12 fps and change duration to 3 seconds.

3. Add a layer or convert the background layer

4. Add content to your animation

In this case you should add 2 layers: one with Santa Claus who will jump across the stage and another one with a background  (you can place text on separate layer and animate it. You can also use layer mask to reveal different portions of the layer’s content over time).

5. Create Animation

To animate layer content in timeline mode, you set keyframes in the Animation palette, as you move the current-time indicator to a different time/frame. Then you modify the position, opacity, or style of the layer content. Photoshop automatically adds or modifies a series of frames between two existing frames to create the appearance of movement or transformation.

So expand frame1 timeline by clicking triangle next to the layer name in Animation palette and then click stopwatch button. We just made first keyframe to start animation. Then move the current- time indicator right for about 2 seconds and change the position of Santa Claus by moving him right. In the timeline automatically appears a new keyframe. Repeat the process one more time.

By default there is linear interpolation between frames (Linear Interpolation creates an evenly-paced change from one keyframe to another, on the contrary Hold Interpolation changes the value of a layer property over time without a gradual transition).  You can change Interpolation in palette options (Keyframe interpolation-Hold). Of course you can leave this value by default but the final animation file size will be inadequate, especially for Opacity and other Effects transitions (320 kb in comparison with 12 kb).

Besides position effects you can also change layer opacity to make content fade in or out, change the position of a layer mask to reveal different parts of the layer, turn a layer mask on or off, change the color of an object, or completely change the content in a frame.

For example, if you want to fade out a layer, set the opacity of the layer in the starting frame to 100% and in the Animation palette, click the Opacity stopwatch for the layer. Then move the current-time indicator to the time/frame for the ending frame and set the opacity for the same layer to 0%.

6. Specify when a layer appears in an animation

You can move keyframe markers to specify duration of effects for each layer. You can also use Onion skin options in Animation palette menu, specify work area and other parameters as well.

7. Preview the animation

8. Save the animation