About animation

An animation is a sequence of images, or frames, that is displayed over time. Each frame varies slightly from the preceding frame, creating the illusion of movement or other changes when the frames are viewed in quick succession.

Frame animation workflow

In Photoshop, you use the Animation palette 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).

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 palettes, as well. In Photoshop Extended, make sure the Animation palette is in frame animation mode (click the Convert to Frame Animation button in the Animation palette).

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.

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 palette.
Adding frames is the first step in creating an animation. If you have an image open, the Animation palette 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 palette.

5. Select a frame.
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 palette, 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.

Select multiple animation frames

In the Animation palette (in frame animation mode), do one of the following:
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 Animation palette menu.
To deselect a frame in a multiframe selection, Ctrl-click (Windows) or Command-click (Mac OS) that frame.

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 palette using the Tween command. This is a quick way to make an object move across the screen or to fade in or out.

Changing attributes of layers in animations

The unify buttons (Unify Layer Position, Unify Layer Visibility, and Unify Layer Style) in the Layers palette 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 palette 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).

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

9. Preview the animation.
Use the controls in the Animation palette to play the animation as you create it. Then use the Save For Web & Devices command to preview the animation in your web browser.

10. Optimize the animation for efficient download. Use Save for Web.

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.

Create frames using tweening

The term tweening is derived from “in betweening,” the traditional animation term used to describe this process. Tweening 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.

Using tweening to animate text position

(Photoshop Extended) Make sure the Animation palette is in frame animation mode.
To apply tweening to a specific layer, select it in the Layers palette.
Select a single frame or multiple contiguous 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.)
Do one of the following:
Click the Tween button in the Animation palette.
Select Tween from the Animation palette menu.

Specify the layer or layers to be varied in the added frames:

All Layers : Varies all layers in the selected frame or frames.

Selected Layer :Varies only the currently selected layer in the selected frame or frames.

Specify layer properties to be varied:

Position : Varies the position of the layer’s content in the new frames evenly between the beginning and ending frames.

Opacity : Varies the opacity of the new frames evenly between the beginning and ending frames.

Effects : Varies the parameter settings of layer effects evenly between the beginning and ending frames.

If you selected a single frame, choose where to add frames from the Tween With menu:

Next Frame : Adds frames between the selected frame and the following frame. This option is not available when you select the last frame in the Animation palette.

First Frame : Adds frames between the last frame and first frame. This option is available only if you select the last frame in the Animation palette.

Previous Frame : Adds frames between the selected frame and the preceding frame. This option is not available when you select the first frame in the Animation palette.

Last Frame : Adds frames between the first frame and last frame. This option is available only if you select the first frame in the Animation palette.
Enter a value, or use the Up or Down Arrow key to choose the number of frames to add. (This option is not available if you selected more than two frames.)
Click OK.

Please enter the url to a YouTube video.

Exercise

Create a web banner ad to be used on your mid-term project.