In Photoshop, you use the Animation panel (Photoshop Extended CS5) or Timeline panel (CS6) to create animation frames. Each frame represents a configuration of layers.
Frame animation workflow
In Photoshop Extended CS5 and Photoshop CS6, you can also create animations using a timeline and keyframes. See Creating timeline animations.
If they are not already visible, open the Animation (Photoshop Extended CS5), Timeline (CS6), and Layers panels. Make sure the Animation panel (Photoshop Extended CS5) or Timeline panel (CS6) is in frame animation mode:
(Photoshop Extended CS5) Click the Convert to Frame Animation in the Animation panel.
(CS6) In the middle of the Timeline panel, click the downpointing arrow to choose Create Frame Animation and then click the button next to the arrow.
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.
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.
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 Unifying layer properties in animation frames.
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.
Use the controls in the Animation panel (Photoshop Extended CS5) or Timeline panel (CS6) 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.
Save as an animated GIF using the Save For Web & Devices (Photoshop Extended CS5) or Save For Web (CS6) command.
Save in Photoshop (PSD) format so you can do more work on the animation later.
Save an image sequence, QuickTime movie, or as separate files. See also Export video files or image sequences.
Add frames to an animation
Adding frames is the first step in creating an animation. If you have an image open, the Animation panel (Photoshop Extended CS5) or Timeline panel (CS6) displays the image as the first frame in a new animation. Each frame you add starts as a duplicate of the preceding frame. You then make changes to the frame using the Layers panel.
Select animation frames
Before you can work with a frame, you must select it as the current frame. The contents of the current frame appear in the document window.
In the Animation panel (Photoshop Extended CS5) or Timeline panel (CS6), the current frame is indicated by a narrow border (inside the shaded selection highlight) around the frame thumbnail. Selected frames are indicated by a shaded highlight around the frame thumbnails.
Click a frame.
Click the Selects Next Frame button to select the next frame in the series as the current frame.
Click the Selects Previous Frame button to select the previous frame in the series as the current frame.
Click the Selects First Frame button to select the first frame in the series as the current frame.
To select contiguous multiple frames, Shift-click a second frame. The second frame and all frames between the first and second are added to the selection.
To select discontiguous multiple frames, Ctrl‑click (Windows) or Command-click (Mac OS) additional frames to add those frames to the selection.
To select all frames, choose Select All Frames from the panel menu.
To deselect a frame in a multiframe selection, Ctrl-click (Windows) or Command-click (Mac OS) that frame.
Edit animation frames
- To edit the content of objects in animation frames, use the Layers panel to modify the layers in the image that affect that frame.
- To change the position of an object in an animation frame, select the layer containing the object in the Layers panel and drag it to a new position.
You can select and change the position of multiple frames. However, if you drag multiple discontiguous frames, the frames are placed contiguously in the new position.
The frames you want to reverse do not have to be contiguous; you can reverse any selected frames.
Unifying layer properties in animation frames
The unify buttons (Unify Layer Position, Unify Layer Visibility, and Unify Layer Style) in the Layers panel determine how the changes you make to attributes in the active animation frame apply to the other frames in the same layer. When a unify button is selected, that attribute is changed in all the frames in the active layer; when that button is deselected, changes apply to only the active frame.
The Propagate Frame 1 option in the Layers panel also determines how the changes you make to attributes in the first frame will apply to the other frames in the same layer. When it is selected, you can change an attribute in the first frame, and all subsequent frames in the active layer will change in relation to the first frame (and preserve the animation you have already created).
You can also propagate frames by Shift-selecting any consecutive group of frames in the layer and changing an attribute in any of the selected frames.
Copy frames with layer properties
To understand what happens when you copy and paste a frame, think of a frame as a duplicate version of an image with a given layer configuration. When you copy a frame, you copy the configurations of layers (including each layer’s visibility setting, position, and other properties). When you paste a frame, you apply that layer configuration to the destination frame.
Replaces the selected frames with the copied frames. No new layers are added. The properties of each existing layer in the destination frames are replaced by those of each copied layer. When you paste frames between images, new layers are added to the image; however, only the pasted layers are visible in the destination frames (the existing layers are hidden).
Paste Over Selection
Adds the contents of the pasted frames as new layers in the image. When you paste frames into the same image, using this option doubles the number of layers in the image. In the destination frames, the newly pasted layers are visible, and the original layers are hidden. In the non-destination frames, the newly pasted layers are hidden.
Create frames using tweening
The term tweening is derived from “in betweening,” the traditional animation term used to describe this process. Tweening (also called interpolating) significantly reduces the time required to create animation effects such as fading in or fading out, or moving an element across a frame. You can edit tweened frames individually after you create them.
You use the Tween command to automatically add or modify a series of frames between two existing frames—varying the layer properties (position, opacity, or effect parameters) evenly between the new frames to create the appearance of movement. For example, if you want to fade out a layer, set the opacity of the layer in the starting frame to 100%; then set the opacity of the same layer in the ending frame to 0%. When you tween between the two frames, the opacity of the layer is reduced evenly across the new frames.
If you select a single frame, you choose whether to tween the frame with the previous frame or the next frame.
If you select two contiguous frames, new frames are added between the frames.
If you select more than two frames, existing frames between the first and last selected frames are altered by the tweening operation.
If you select the first and last frames in an animation, these frames are treated as contiguous, and tweened frames are added after the last frame. (This tweening method is useful when the animation is set to loop multiple times.)
Varies the position of the layer’s content in the new frames evenly between the beginning and ending frames.
Adds frames between the selected frame and the following frame. This option is not available when you select the last frame in the Animation (Photoshop Extended CS5) or Timeline (CS6) panel.
Adds frames between the last frame and first frame. This option is available only if you select the last frame in the Animation (Photoshop Extended CS5) or Timeline (CS6) panel.
Adds frames between the selected frame and the preceding frame. This option is not available when you select the first frame in the Animation (Photoshop Extended CS5) or Timeline (CS6) panel.
Add a new layer for each new frame
The Create New Layer For Each New Frame command automatically adds a new layer visible in the new frame but hidden in other frames. This option saves time when you are creating an animation that requires you to add a new visual element to each frame.
Hide layers in animation frames
To show new layers only in active frames, deselect New Layers Visible In All Frames from the Animation panel menu (Photoshop Extended CS5) or Timeline panel menu (CS6).
To hide a layer in a specific frame, select the frame, and then hide the desired layer in the Layers panel.
Specify a delay time in frame animations
You can specify a delay—the time that a frame is displayed—for single frames or for multiple frames in an animation. Delay time is displayed in seconds. Fractions of a second are displayed as decimal values. For example, one-quarter of a second is specified as .25. If you set a delay on the current frame, every frame you create after that will remember and apply that delay value.
Choose a frame disposal method
The frame disposal method specifies whether to discard the current frame before displaying the next frame. You select a disposal method for animations that include background transparency to specify whether the current frame will be visible through the transparent areas of the next frame.
A. Frame with background transparency with Restore To Background option B. Frame with background transparency with Do Not Dispose option
The Disposal Method icon indicates whether the frame is set to Do Not Dispose or Dispose . (No icon appears when Disposal Method is set to Automatic.)
automatic frame disposalAutomatic
Determines a disposal method for the current frame automatically, discarding the current frame if the next frame contains layer transparency. For most animations, the Automatic option (default) yields the desired results.
To preserve frames that include transparency, select the Automatic disposal option when you are using the Redundant Pixel Removal optimization option.
Do Not Dispose
Preserves the current frame as the next frame is added to the display. The current frame (and preceding frames) may show through transparent areas of the next frame. Use a browser to see an accurate preview of an animation using the Do Not Dispose option.
Specify looping in frame animations
Looping options can also be set in the Save For Web & Devices (Photoshop Extended CS5) or Save for Web (CS6) dialog box. For more information, see Save For Web & Devices overview.