Animating with layer opacity and position
You'll use a slightly different method for animation in the next part of the project. This time, you'll animate a fly-in of a text logo, using a multilayered Photoshop image. The good news is that you don't have to manually create more layers for each change in position, and you don't have to painstakingly create and adjust each individual frame. As soon as you create the beginning and end frames for the sequence, you can relax and let ImageReady do all the work for the frames in between them.
Opening the image file and starting the animation process
To get started, you'll open the new art file and review its current settings.
1. | In ImageReady, choose File > Open, and open the H2O.psd file from the Lessons/Lesson15 folder on your hard disk. The logo consists of four components that reside on separate layers. 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 > Workspace > Animation 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 task will be to change the status of various layers for the different frames. |
Setting layer positions and opacity
Next, you'll adjust the position and opacity of layers in an image to create the start and end 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 H layer.
| 2. | Select the Move tool () and begin to drag the "H" to the left side of the image window. After you start dragging, hold down Shift to constrain the movement. When only a portion of the "H" is visible, release the mouse button and then the Shift key.
| 3. | In the Layers palette, select the O layer, and drag the "O" to a similar position on the right side of image window, using Shift again to constrain the movement.
NoteBe careful not to drag the letters completely out of the image window and onto the desktop, which might create an ImageReady clipping file there. | 4. | Repeat Step 3, but this time select the 2 layer and drag the "2" to the upper edge of the image window. The three layers should be arranged as shown in the following illustration.
| 5. | In the Layers palette, select the H layer and drag the Opacity slider to 20%. Repeat this action to reset the opacity of the 2 and O 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 2 to the left, releasing the mouse when the black bar appears to the left of frame 1.
|
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 ImageReady to tween, which automatically creates as many intermediate frames as you specify.
1. | In the Animation palette, make sure that frame 1 is selected and then choose Tween from the Animation palette menu. | 2. | In the Tween dialog box, set the following options (if they are not already selected): Choose Tween With > Next Frame. For Frames to Add, type 4. Under Layers, select All Layers. Under Parameters, select Position and Opacity, as needed, so that check marks 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 haven't applied any layer effects.) | 3. | Click OK to close the dialog box. ImageReady creates four new transitional frames, based on the opacity and position settings of the layers in the original two frames.
| 4. | Choose Once from the Looping pop-up menu in the lower left corner of the Animation palette.
NoteIn the 15En205 file that you previewed at the beginning of this lesson, the looping is configured differently from what you're instructed to do here. In the end file, the Looping option is Forever, but there is also a long delay after the final frame of the animation, which has not yet been created. | 5. | In the Animation palette, click the Play button () to preview your animation in ImageReady. |
Tweening frames
You use the Tween command to automatically add or modify a series of frames between two existing framesvarying 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 out a layer, set the opacity of the layer in the starting frame to 100%, and 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 term used in traditional animation 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.) Note:
You cannot select discontiguous frames for tweening. |
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 behind the 2 image.
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 2 layer, and then choose Outer Glow from the Layer Style pop-up menu at the bottom of the palette.
| 3. | When the Layer Style dialog box opens, click OK to accept the default settings. A subtle, light halo is created around the edges of the 2 image.
| 4. | Duplicate frame 7 by clicking the Duplicate Current Frame button () in the Animation palette. | 5. | In the Layers palette, double-click the Outer Glow effect for the 2 layer to open the Layer Style dialog box. Make sure that the Preview box is checked, and then set Spread to 20% and Size to 49 pixels. Then click OK.
| 6. | Choose File > Save. |
Tweening frames for the layer-style changes
As you've seen, 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 2 image as it comes 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, choose 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 click 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. |
Preserving transparency and preparing to optimize
Next, you'll optimize the H2O image in GIF format with background transparency, and then preview your animation in a Web browser. Remember that only the GIF format supports animated images. We included the Backdrop layer in the H2O.psd file to make it easier to see the results as you work. That layer is not necessary for the final Web page, because you're going to optimize the file with a transparent background. Your first step, then, is to hide the Backdrop layer.
1. | From the Animation palette menu, choose Select All Frames. | 2. | In the Layers palette, click the eye icon () for the Backdrop layer to hide it in all frames. | 3. | In the Optimize palette, set the following options: For the 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, choose the white swatch from the pop-up palette if it is not already selected.
Making good GIF optimization choices
One of the most important aspects of making efficient GIF imageswhether still or animatedis to reduce file size as much as possible without degrading image quality. To that end, when you optimize GIF images, you need to choose the most appropriate color-reduction algorithm, reduce the color palette as much as possible, and control application and browser dither. ImageReady (and Photoshop) can calculate the most-needed colors for you based on any of several color-reduction algorithms: Perceptual, Selective, Adaptive, Web, Custom, and Windows or Mac OS. Typically, you'll want to choose between Perceptual, Selective, and Adaptive. Perceptual creates a custom color table by giving priority to colors for which the human eye has greater sensitivity. Selective works similarly, but favors broad areas of color and the preservation of Web colors. Selective usually produces images with the greatest color integrity. Adaptive creates a custom color table by sampling colors from the spectrum appearing most commonly in the image. Once you've chosen a color-reduction method, the colors in the file are displayed in the Color Table. You can further reduce the number of colors in the file using the Color pop-up menu. This often preserves good image quality while dramatically reducing the file space required to store extra colors. Application dither occurs when ImageReady or Photoshop attempts to simulate colors that appear in the original image, but not in the optimized palette that you specify. To control application dither, zoom in to transition areas of your image and see if they are smooth or abrupt. If there are harsh borders or bands of color, drag the Dither slider up to 100%. Browser dither occurs when a Web browser using a 256-color display simulates colors that appear in the optimized image's palette, but not in the system palette used by the browser. You can control browser dither by shifting selected colors to Web-safe colors in the Color Table palette. For more information on these and other optimization settings, see ImageReady Help. |
| 4. | With all frames still selected in the Animation palette, right-click (Windows) or Control-click (Mac OS) one of the frames in the Animation palette to open the Disposal Method contextual menu, and choose Restore to background.
The frame-disposal method specifies whether to discard the current frame before displaying the next frame. The disposal options "Restore to background" () and Automatic 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. | 5. | With all frames selected, use the Frame Delay pop-up menu at the bottom of any one of the frame thumbnails and choose 0.1 sec. | 6. | From the Animation palette menu, choose Optimize Animation. | 7. | In the Optimize Animation dialog box, make sure that both the Bounding Box and Redundant Pixel Removal check boxes are selected, and then click OK. The Bounding Box option directs ImageReady to crop each frame to preserve only the area that has changed from the preceding frame. Animation files created using this option are smaller but are incompatible with GIF editors, which do not support the option. The Optimize by Redundant Pixel Removal option makes all pixels in a frame that are unchanged from the preceding frame transparent. When you choose the Redundant Pixel Removal option, the Disposal Method must be set to Automatic. 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, ImageReady 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, ImageReady requires more time to optimize an animated GIF than to optimize a standard GIF. For more information about optimizing images for the Web, see Photoshop Help. |
Viewing the optimized GIF file
You've almost completed your work in the H2O.psd file that you'll use to save as an animated GIF image.
1. | In the image window, click the Optimized tab.
ImageReady rebuilds the image according to the options you entered. | 2. | In the image window, click the 2-Up tab and compare the information for the original and optimized versions of the animated image. | 3. | Choose File > Save Optimized As, name the image H2O.gif, select the My_GIFs folder, and click Save. If you want to preview your animation in your default Web browser, do that now by clicking the Preview In button in the toolbox. Then close the browser. | 4. | In ImageReady, choose File > Close to close the original file, and don't save changes. You have finished your work on the fly-in logo. |
|