Animating with layer opacity, layer style, and position

1 In Photoshop, choose File > Open, and open the rgb.psd file from Assignment #2.

The graphic consists of four different components that reside on separate layers: transparent, red, green, blue. You'll compose animation frames that show the characters of the logo appearing and moving into their final position from different areas. The initial state reflects how you want the image to appear at the end of the animation.

2 Make sure that the Animation and Layers palettes are visible, or choose Window>Animation and Window>Layers to open them

3 In the Animation palette, click the Duplicate Current Frame button  to create a new animation frame.

Now that you have two frames, you've paved the way for a new animation. Your next tasks will be to change the status of various layers for the different frames.

Setting layer positions and opacity

In this part of the lesson, you'll adjust the position and opacity of layers in an image to create the starting and ending frames of an animation sequence. Changing the order in which frames appear in the animation is as simple as dragging the thumbnails in the Animation palette.

1 In the Animation palette, make sure that frame 2 is selected. Then, in the Layers palette, select the “red” layer

2 Select the Move tool , hold down Shift (to constrain the movement), and drag the "red circle" to the right side of the image window so that only a small portion of the "circle" is visible.

3 In the Layers palette, select the “green” layer, and then hold down Shift and drag to a similar position on the left side of image window.

4 Repeat Step 3, but this time select the “blue” layer and drag it to the upper edge of the image window. The three layers should be arranged as shown in the illustration below.

5 In the Layers palette, select the “red” layer and drag the Opacity slider to 20%. Repeat this process to reset the opacity of the “green” and “blue” layers at 20% as well.

In the Animation palette, notice that frame 2 has updated to reflect the current image state. To make frame 2 the starting state of your animation, you'll switch the order of the two frames.

6 In the Animation palette, drag frame 1 to the right, releasing the mouse when the black bar appears to the right of frame 2.

Tweening the position and opacity of layers

Next, you'll add frames that represent transitional image states between the two existing frames. When you change the position, opacity, or effects of any layer between two animation frames, you can instruct Photoshop to tween, which automatically creates as many intermediate frames as you specify.

1 In the Animation palette, make sure that frame 1 is selected; then choose Tween on the Animation palette menu .

2 In the Tween dialog box, set the following options (if they are not already selected):

• On the Tween With pop-up menu, select Next Frame.

• For Frames to Add, type 4.

• Under Layers, select All Layers.

• Under Parameters, select Position and Opacity, as needed, so that checkmarks appear for those options. (You could select Effects if you were going to vary the settings of layer effects evenly between the beginning and ending frames. You won't choose this option now because you have not applied any layer effects.)

• Click OK to close the dialog box.

Photoshop creates four new transitional frames, based on the opacity and position settings of the layers in the original two frames.

3 On the Looping pop-up menu  in the lower left of the Animation palette, choose “Forever”.

4 In the Animation palette, click the Play button  to preview your animation in Photoshop.

5 Save as animateCircles.psd

For the Web: Tweening frames

You use the Tween command to automatically add or modify a series of frames between two existing frames-varying the layer attributes (position, opacity, or effect parameters) evenly between the new frames to create the appearance of movement. For example, if you want to fade auto 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.

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.

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

Animating a layer style

When you tweened to create the four new frames in the previous procedure, you noticed the Effects check box in the Tween dialog box. In this procedure, you will animate a layer effect or layer style. The final result will be a little flash of light that appears and then disappears.

1 In the Animation palette, select frame 6, and then click the Duplicate Current Frame button to create a new frame with all the same settings as frame 6. Leave frame 7 selected.

2 In the Layers palette, select the “blue” layer, and then choose Outer Glow from the Layer Style pop-up menu at the bottom of the palette.

Notice the subtle light halo around the edges of the blue circle.

3 When the Layer Style dialog box opens, click OK to accept the default settings.

4 Repeat with the red and green layers

5 Duplicate frame 7 by clicking the Duplicate Current Frame button.

6 In the Layers palette, double-click the Outer Glow effect for the “blue” layer to open the Layer Style dialog box. Make sure that the Preview check box is selected, and then specify the following options:
• For Spread, drag the slider to 20%.
• For Size, drag the slider to 50 pixels.

7 Click OK, then repeat with the red and green layers

8 File > Save.

Tweening frames for the layer-style changes

As you've seen already in this lesson, the Tween feature can save you lots of time you might have spent doing tedious and exacting work. You'll use the Tween command again now to animate the change in layer style.

You'll also complete the glow effect by duplicating one more frame and moving it to the end of the animation. The resulting animation gives the impression of a little "pop" of light behind the circles as they come into place.

1 In the Animation palette, select frame 7.

2 Choose Tween from the Animation palette menu.

3 In the Tween dialog box, specify the following options:

• For Tween With, select Next Frame.

• For Frames to Add, type 2.

• Under Layers, select All Layers.

• Under Parameters, select Effects.

4 Click OK to close the dialog box.

5 In the Animation palette, select frame 6, and then select the Duplicate Current Frame button  to create a new frame 7, which will renumber the frames following 7.

6 Drag the new frame 7 to the end of the Animation palette so that it is to the right of (after) frame 11.

7 Choose File > Save.

8 Set the timing to all frame sat .1 sec, except for the last one. Set it to 2 sec.

9 Select all frames, right click (Ctrl+Click) and choose “Dispose”.

The disposal options - Dispose will clear the selected frame before the next frame is played, eliminating the danger of displaying remnant pixels from the previous frame. The Do Not Dispose option retains the frames. The Automatic option is suitable for most animations. This option selects a disposal method based on the presence or absence of transparency in the next frame and discards the selected frame if the next frame contains layer transparency.

Preserving transparency and preparing to optimize

Next, you'll optimize the images in GIF format with background transparency and preview your animation in a Web browser. Remember that only the GIF format supports animated images.

We included the Backdrop layer in the rgb.psd file. That layer is not necessary for the final Web-page project because you're going to optimize the file with a transparent background. Your first step, then, is to hide the Backdrop layer.

1 On the Animation palette menu, choose Select All Frames.

2 On the Layers palette, click the eye icon for the Backdrop layer to hide it in all frames.

3 File>Save for Web

• For the file format, choose GIF

• Under Color Table, choose Perceptual for Reduction and 256 for Colors.

• Under Transparency, select the Transparency check box (to preserve the transparency of the original image).

• For Matte, select the white swatch from the pop-up palette, if it is not already selected.

4 Click Save Button

5 Change File Name to lnAniGIF.gif

In addition to the optimization tasks applied to standard GIF files, several other tasks are performed for animated GIF files. If you optimize the animated GIF using an adaptive, perceptual, or selective palette, Photoshop generates a palette for the file based on all of the frames in the animation. A special dithering technique is applied to ensure that dither patterns are consistent across all frames, to prevent flickering during playback. Also, frames are optimized so that only areas that change from frame to frame are included, greatly reducing the file size of the animated GIF. As a result, Photoshop requires more time to optimize an animated GIF than to optimize a standard GIF.

Check GIF in several different browsers.