Adobe Photoshop CS2 CLASSROOM IN A BOOK [Electronic resources] نسخه متنی

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.

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.

You now have two layer comps that you can use as starting points for the frames you'll create in the animation.

1.

In the Animation palette, click the Duplicate Current Frame button () to create frame 2.

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.

4.

Select frame 2 and then frame 1 repeatedly to manually animate the image.

1.

In the Animation palette, make sure that Forever is chosen in the Looping pop-up menu in the lower left corner of the palette.

2.

Click the Select Previous Frame button () to move to the other frame. (Try clicking the button repeatedly in quick succession, and watch the manual playback of the animation in the image window.)

3.

In the Layers palette, click the Backward or Forward button in the lower left corner of the palette, and notice results similar to the previous step.

A. Layers palette Backward button

B. Layers palette Forward button

4.

Click the Play button () in the Animation palette to preview the animation. The Play button becomes the Stop button (), which you can click to stop the playback.

5.

Choose File > Preview In, and choose a browser application from the submenu. When you finish previewing the animation, quit the browser window and return to ImageReady.

You can also press Ctrl-Alt-P (Windows) or Command-Option-P (Mac OS) to launch a browser preview quickly, or click the Preview In button in the toolbox.

6.

Choose File > Save Optimized As.

7.

In the Save Optimized As dialog box, open the Lessons/Lesson15 folder and click the icon for Create New Folder. Type My_GIFs to name the new folder, and then open it. Still in the Save Optimized As dialog box, name the file Dolphin.gif and click Save.

1.

In the Animation palette, select frame 2 and click the Duplicate Current Frame button () to create a new frame (frame 3) that is identical to frame 2. Leave frame 3 selected.

2.

Open the Animation palette menu and choose the New Layers Visible in All States/Frames command to deselect it (remove the check mark).

[View full size image]

3.

In the Layers palette, select the Bubble layer and click the box for the eye icon () to make the layer visible. Leave the Bubble layer selected.

In the image window and in the frame 3 thumbnail, notice the bubble that appears above the dolphin's blow hole.

4.

Choose View > Snap to deselect it so that no check mark appears by this command.

5.

Select the Move tool () in the toolbox.

6.

Hold down Alt (Windows) or Option (Mac OS) and drag the bubble up and to the right in the image window. When you release the mouse button, two bubbles now appear in the image, and a new layer, Bubble copy, appears in the Layers palette.

7.

Again hold down Alt (Windows) or Option (Mac OS) and drag to create a third bubble, a little above and to the right of the second bubble.

You now have three bubble layers in the image window and the Layers palette: Bubble, Bubble copy, and Bubble copy 2.

1.

If the Move tool () is not still selected, select it now, and then make sure that the Layer Select tool () is selected on the tool options bar.

2.

In the image window, select the middle bubble, the Bubble copy layer object.

3.

Choose Edit > Transform > Scale.

In the image window, the transformation bounding box appears around the Bubble copy layer.

4.

On the tool options bar, select the Constrain Aspect Ratio button (), and type 24 px for width (W:). Click anywhere outside the width text box and notice that the bubble assumes its new size, but the transformation bounding box remains on the Bubble copy layer object.

5.

Press Enter (Windows) or Return (Mac OS) to commit the transformation.

6.

Select the third bubble and repeat Steps 35, but this time type 26 px as either the width or height dimension.

7.

Still using the Move tool and the Layer Select tool option, refine the locations of the three bubble layers by dragging them in the image window, as needed.

Make sure that the third bubble does not extend beyond the tip of the dolphin's dorsal fin and that the three bubbles are nearly evenly spaced. Refer to the following illustration as a guide.

8.

Choose File > Save.

1.

In the Animation palette, make sure that frame 3 is selected, or select it now.

2.

In the Layers palette, click the visibility boxes to set or remove eye icons () so that the Background, Dolphin 1, and the original Bubble layer are visible and the other layers are hidden.

NoteWhen you hide or show a layer in a frame, the visibility of the layer changes for that frame only.

3.

In the Animation palette, click the Duplicate Current Frame button () to create frame 4. Leave frame 4 selected in the Animation palette.

4.

In the Layer Comps palette, select Dolphin 2 by clicking its Apply this Layer Comp button. Then, in the Layers palette, set an eye icon () for the Bubble copy layer.

5.

Click the Duplicate Current Frame two more times, and then use the Layer Comps and Layers palettes as follows:

For frame 5, apply the Dolphin 1 layer comp and make the Bubble copy 2 layer visible.

For frame 6, apply the Dolphin 2 layer comp and make the Pop layer visible.

6.

Click the Play button () on the Animation palette to preview the results. When you are finished, click the Stop button () to stop the playback.

As the animation moves from frame to frame, the dolphin's tail moves up and down with each step. In each full cycle, the bubble emerges from the dolphin, rises, and pops in a four-step sequence.

If your results are different from what is described here, review the visibility settings on the Layers palette for each successive frame and make any necessary corrections.

1.

From the Animation palette menu, choose Select All Frames.

[View full size image]

2.

Click the time (0 seconds, which is the default) beneath any one of the frames to open the Frame Delay pop-up menu, and choose 0.2 seconds.

The new value appears below each frame thumbnail, indicating that the time delay applies to all the frames in the palette.

3.

Click the Play button () in the Animation palette to view your animation, and then click the Stop button () when you're ready to halt the playback.

4.

Choose File > Preview In, and choose a browser from the submenu to play back the animation with accurate timing. When you finish previewing, return to ImageReady.

5.

Choose File > Save Optimized As.

6.

In the Save Optimized As dialog box, make sure that the image is named Dolphin .gif and that the location is your My_GIFs folder. Then click Save, and click Replace to replace the existing file.

The Save Optimized As command saves a file in the GIF, JPEG, or PNG format for use in your Web pages. GIF is the only format that supports animations, so that's the format you need for this project.

7.

Choose File > Close to close your original image without saving changes.

You've finished your work on the dolphin animation for the Web-page project. Next, you'll continue with work on other animated elements for the project.