Frame animation workflow

In Photoshop, you use the Animation panel to create animation frames. Each frame represents a configuration of layers.

Note: In Photoshop Extended, you can also create animations using a timeline and keyframes. See Creating timeline animations (Photoshop Extended).
Illustration of an animation. The unicycle image is on its own layer; the position of the layer changes in each frame of the animation.

To create frame-based animations in Photoshop, use the following general workflow.

1. Open a new document.

If they are not already visible, open the Animation and Layers panels, as well. In Photoshop Extended, make sure the Animation panel is in frame animation mode (click the Convert to Frame Animation button in the Animation panel).

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. See Convert background and layers.

3. Add content to your animation.

If your animation includes several objects that are animated independently, or if you want to change the color of an object or completely change the content in a frame, create the objects on separate layers.

4. Add a frame to the Animation panel.

See Add frames to an animation.

5. Select a frame.

See Select animation frames.

6. Edit the layers for the selected frame.

Do 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.

    Photoshop provides tools for keeping characteristics of a layer the same across frames. See Changing attributes of layers in animations.

7. Add more frames and edit layers as needed.

The number of frames you can create is limited only by the amount of system memory available to Photoshop.

You can generate new frames with intermediate changes between two existing frames in the panel using the Tween command. This is a quick way to make an object move across the screen or to fade in or out. See Create frames using tweening.

8. Set frame delay and looping options.

You can assign a delay time to each frame and specify looping so that the animation runs once, a certain number of times, or continuously. See Specify a delay time in frame animations and Specify looping in frame animations.

9. Preview the animation.

Use the controls in the Animation panel to play the animation as you create it. Then use the Save For Web & Devices command to preview the animation in your web browser. See Preview optimized images in a web browser.

10. Optimize the animation for efficient download.

See Optimize animation frames.

11. Save the animation.

You can save the animation as an animated GIF using the Save For Web & Devices command. You can also save the animation in Photoshop (PSD) format so you can do more work on the animation later.

In Photoshop, you can save your frame animation as an image sequence, QuickTime movie, or as separate files. See also Export video files or image sequences.