Creating a GIF Animation

Creating a GIF Animation

Photoshop CS3 Tutorial


How to Create a GIF Animation in Photoshop



To build an animation is Photoshop, you must first design the individual cells or frames as a series of layers. Once the layers are complete, the frame content is recorded to the animation timeline.


Step One

Open a new blank document in Photoshop (File > New).

Step Two

Determine what you want to display for each frame of the animation. In this example we will spell out Pixel Street Studios one letter per frame.

Step Three

Sometimes it is easier to start at the end of the animation and work backwards. Select the Text tool and add a text layer with all the letters.

Step Four

Duplicate the text layer multiple times by dragging the layer to the Create New Layer icon. Remove one letter each time you duplicate the layer. The letters should hold their registration provided you set the text alignment to left.

Step Five

We will need 19 frames since the first frame has no text. Open the Animation Timeline (Window > Animation) and click the Duplicate Frame icon multiple times to create 19 frames.

Step Six

Click on the Frame One thumbnail and turn on the visibility for the layer(s) that you want to show. Click each additional frame, one at a time, and continue to record the content for each frame.

Step Seven

Use the timeline controls to play your animation. You can adjust the Frame Delay Rate for individual frames to alter the frame rate. To use your animation for the web, see topic Saving a GIF Animation.