To add dynamic content to your Web page, you can use Adobe ImageReady to create animated GIF images. Compact in fi le size, animated GIFs display and play in most Web browsers. ImageReady provides an easy and convenient way to create imaginative animations. PS_CS2_CIB_c15an_Fnl.indd 418 4/15/05 5:47:08 PM 15 Animating GIF Images for the Web Lesson overview In this lesson, you’ll learn how to do the following: • Use a multilayered GIF image as the basis for an animation. • Use the Layers and Animation palettes to create animation sequences. • Create animations based on changes in position, layer visibility, and layer effects. • Make changes to single frames, multiple frames, and an entire animation. • Use the Tween command to create smooth transitions between different settings for layer opacity and position. • Preview animations in ImageReady and in a Web browser. • Optimize the animation using the Optimize palette. This lesson will take about an hour to complete. The lesson must be done in Adobe ImageReady, not Adobe Photoshop. If needed, remove the previous lesson folder from your hard drive, and copy the Lessons/Lesson15 folder onto it. As you work on this lesson, you’ll overwrite the start files. If you need to restore the start files, copy them from the Adobe Photoshop CS2 Classroom in a Book CD. In addition, for this lesson, you will need to use a Web browser application (such as Netscape, Internet Explorer, or Safari). You do not need to connect to the Internet. PS_CS2_CIB_c15an_Fnl.indd 419 4/15/05 5:47:08 PM 420 LESSON 15 Animating GIF Images for the Web Creating animations in Adobe ImageReady In Adobe ImageReady, you create animations from a single image using animated GIF files. An animated GIF is a sequence of images, or frames. Each frame varies slightly from the preceding frame, creating the illusion of movement when the frames are viewed in quick succession—just like movies. You can create animation in several ways: • By using the Duplicate Current Frame button in the Animation palette to create animation frames, and then using the Layers palette to define the image state associated with each frame. • By using the Tween feature to quickly create new frames that warp text or vary a layer’s opacity, position, or effects to create the illusion of an element in a frame moving or fading in and out. • By opening a multilayer Adobe Photoshop or Adobe Illustrator file for an animation, with each layer becoming a frame. When creating an animation sequence, it’s best to select the Original tab in the image window, because this view doesn’t require ImageReady to re-optimize the image as you edit the frame contents. Animation files are output as either GIF files or QuickTime movies. You cannot create a JPEG or PNG animation. About working with layers in animations Working with layers is an essential part of creating animations in ImageReady. Placing each ele- ment of an animation on its own layer allows you to change the position and appearance of the element across a series of frames. Frame-specific changes Some changes you make to layers affect only the active animation frame. By default, changes you make to layers using Layers palette commands and options—including layer opacity, blending mode, visibility, position, and style—are frame specific. However, you can apply layer changes to all frames in an animation by using the unity buttons in the Layers palette. Global changes Some changes affect every frame in which the layers are included. Changes you make to layer pixel values using painting and editing tools, color- and tone-adjustment commands, filters, type, and other image-editing commands are global. Each new frame starts out as a duplicate of the preceding frame—you edit the frame by adjusting its layers. You can apply layer changes to a single frame, a group of frames, or the entire animation. PS_CS2_CIB_c15an_Fnl.indd 420 4/15/05 5:47:08 PM ADOBE PHOTOSHOP CS2 421 Classroom in a Book Getting started In this lesson, you’ll work with a set of images designed to appear on the Web page of a fresh-juice company. Use a Web browser application to preview the fi nished animations. 1 Launch Adobe Bridge and click Lessons in the Favorites palette in the upper left corner of the browser window. Then double-click the Lesson15 folder in the thumbnail preview area. 2 Right-click (Windows) or Control-click (Mac OS) the 15End.html fi le, and choose Open With from the contextual menu. Choose a Web browser to open the HTML fi le. The page includes three animated areas: the “Making Waves” text, the chemical formula for water moving into the image, and a dolphin swimming along and releasing bubbles that pop into the air. (The text and buttons are merely placeholders.) 3 When you have fi nished viewing the fi le, quit the browser. 4 Start Adobe ImageReady while holding down Ctrl-Alt-Shift (Windows) or Command-Option-Shift (Mac OS) to restore the default preferences. (See “Restoring default preferences” on page 6.) 5 When prompted, click Erase to erase preferences. PS_CS2_CIB_c15an_Fnl.indd 421 4/15/05 5:47:11 PM 422 LESSON 15 Animating GIF Images for the Web Defining a workspace for animation tasks Before you start working on the file, you’ll define a new workspace especially for animation work. Having the right workspace available at any time reduces screen clutter and makes your task more efficient and more enjoyable. 1 Choose File > Open, navigate to the Lessons/Lesson15 folder, and double-click the Dolphin.psd file to open it. (The artwork for the animation has been completed for you, so you won’t need to enlarge the image window or zoom in for the tasks in this lesson.) Note: Double-clicking the image thumbnail in Bridge opens the file into Photoshop. 2 Close the Color, Web Content, and Slice palette groups. 3 In the Info palette group, select the Layer Comps tab to bring it forward. 4 Choose Window > Animation to open the Animation palette. Drag the lower right corner of the Animation palette to expand it so that you take advantage of available horizontal space in the work area. (Optional) You can also move the Animation palette closer to the image window, to keep elements in the work area close together. 5 Choose Window > Workspace > Save Workspace. PS_CS2_CIB_c15an_Fnl.indd 422 4/15/05 5:47:12 PM ADOBE PHOTOSHOP CS2 423 Classroom in a Book 6 Type Animation in the Save Workspace dialog box, and click OK. Now you can quickly restore these palette sizes and positions by choosing Window > Workspace > Animation at any time. Animating by hiding and showing layers Perhaps the simplest way to create a two-step animation is by toggling the visibility of two layers by changing the eye icons ( ) in the Layers palette. For example, you can make an animated character alternate between different expressions or make an object move back and forth in a simple pattern. The Dolphin.psd image file includes five layers, as you can see by examining the Layers palette. You’ll create your first animation with the two Dolphin layers. Preparing layer comps You learned about layer comps in Photoshop in Lesson 6, “Layer Basics.” ImageReady offers the same capabilities, which can make animations much easier to create. 1 In the Layers palette, make sure that eye icons ( ) appear in the visibility boxes for the Background and Dolphin 1 layers and that the visibility boxes for the three other layers are empty. 2 In the Layer Comps palette, click the Create New Layer Comp button ( ). 3 In the New Layer Comp dialog box, type Dolphin 1, make sure that Visibility is selected (checked), and click OK. PS_CS2_CIB_c15an_Fnl.indd 423 4/15/05 5:47:13 PM 424 LESSON 15 Animating GIF Images for the Web Now a new layer comp, Dolphin 1, appears in the Layer Comps palette. 4 In the Layers palette, click to hide the eye icon for the Dolphin 1 layer, and then click to set an eye icon for the Dolphin 2 layer. 5 Create a new layer comp, Dolphin 2, using the techniques in Steps 2 and 3. 6 Click the box on the left of the Dolphin 1 layer comp to apply those visibility conditions to the image. A badge ( ) appears in the box, indicating that this is the current layer comp. PS_CS2_CIB_c15an_Fnl.indd 424 4/15/05 5:47:15 PM ADOBE PHOTOSHOP CS2 425 Classroom in a Book You now have two layer comps that you can use as starting points for the frames you’ll create in the animation. Beginning the animation process As you begin, only one frame, the default, appears in the Animation palette. This frame shows the current visibility settings in the Layers palette, with only two layers visible: Dolphin 1 and Background. The frame is selected (outlined with a border), indicating that you can change its content by editing the image. 1 In the Animation palette, click the Duplicate Current Frame button ( ) to create frame 2. PS_CS2_CIB_c15an_Fnl.indd 425 4/15/05 5:47:16 PM 426 LESSON 15 Animating GIF Images for the Web 2 In the Layer Comps palette, click the box to set the Apply This Layer Comp badge ( ) for the Dolphin 2 layer comp. Notice that in the Layers palette, the Dolphin 1 layer is now hidden and the Dolphin 2 layer is visible. 3 In the Animation palette, select frame 1. In the image window, the dolphin resumes its original appearance, with only Layer 1 visible.