How to Wow: Photoshop for the Web

 < Day Day Up > 

Here's a quick and easy animation that gives the illusion of a moving light source. Once you get this down you'll be able to animate any layer style to produce animations in a heartbeat.

1.

Start with a Layer of Text

Use our file or create your own from scratch in ImageReady. Just use the Type tool to create text in a heavy font on a transparent layer. We rasterized our type layer, but this animation works fine if you leave your own type layer in its default state as editable vector-based type.

Add a Background Layer

Select the Eyedropper tool and click in the text on the Light layer. This sets the Foreground Color in the toolbox to the same color as the text. Click the Create New Layer icon at the bottom of the Layers palette. Then press Option-Delete/Alt-Backspace to fill the new Layer 1 with the Foreground Color. Drag Layer 1 beneath the Light layer in the Layers palette. Choose Layer>New>Background From Layer to make the bottom layer a non-editable Background layer. Your image now looks plain bluish/gray.

Add a Style

Select the Light layer in the Layers palette. Open the Styles palette (Window>Styles). Click the arrow on the side of the Styles palette A and choose HTWWeb-Styles from the side menu. Click that arrow again and choose Large Thumbnail.

Click the 09_light style to apply it to the text B. The Light layer in the Layers palette now displays a Drop Shadow and a Bevel and Emboss layer style.

CAUTION

HTWWeb-Styles. If you don't see the HTWWeb-Styles in the Styles side menu, it means you haven't installed them properly from the CD at the back of this book. In that case, go back to the Introduction and follow the instructions there for installing the presets we provided on the CD.

4.

Start Building the Animation Open the Animation palette (Window>Animation), which automatically displays Frame 1 of the animation. On Frame 1, the text displays the Drop Shadow and Bevel and Emboss layer styles you just applied. You'll make a simple change to those layer styles to create this animation.

First, you'll add a few more frames to the animation. Click the Duplicate Animation Frame icon at the bottom of the Animation palette three times, so that there are a total of four frames in the Animation palette. Each of the new frames is a copy of Frame 1. You'll change that in the next steps.

5.

Open the Layer Style Dialog Box

Click on Frame 2 in the Animation palette. Then double-click Effects under the Light layer in the Layers palette A to open the Layer Style dialog box. It opens with the Drop Shadow style checked and highlighted on the left side of the dialog box B, the Bevel and Emboss style checked but not highlighted C, and and Drop Shadow options displayed on the right side of the dialog box D. Notice the Angle setting of 143° E, which is the angle of the light source on the preceding frame Frame 1.

Change the Frame 2 Layer Style

With Drop Shadow highlighted (not just checked) on the left side of the Layer Style dialog box, go to the Drop Shadow settings on the right side of the dialog box and do two things:

  • Change the Angle setting to 78°. You can type 78 into the Angle field or spin the Angle wheel to that setting A.

  • Make sure there's a check mark in the Use Global Light check box B. This sets the light source angle globally so that it affects both the Drop Shadow and the Bevel and Emboss styles on the Light layer in Frame 2.

Click OK to close the Layer Style dialog box.

INSIGHT

Layer Style Dialog Box. The check mark and highlight on a style on the left side of the Layer Style dialog box mean two different things. The check mark indicates that the style has been applied to and is visible (has an Eye icon) on the layer. The highlight means that that style's options are available to you on the right side of the dialog box. If you want to change a style option you must highlight the style in the Layer Style dialog box by clicking on it; the check mark alone isn't sufficient.

7.

Change the Frame 3 Layer Style

Now you'll change the angle of the layer style on Frame 3 the same way. Select Frame 3 in the Animation palette. Double-click Effects under the Light layer in the Layers palette to open the Layer Style dialog box. In the Layer Style dialog box make sure the Drop Shadow style is highlighted.

Then change the Angle setting to 0°, and make sure Use Global Light is checked A. Click OK to close the Layer Style dialog box.

Change the Frame 4 Layer Style

Repeat the preceding Step 7 on Frame 4 A, this time changing the Angle setting to 108° B. Click OK to close the Layer Style dialog box.

Tween Frame 2

You don't yet have enough frames to make the animation run smoothly. Rather than create all the frames by hand, let ImageReady do it for you with Tweening.

Select Frame 2 in the Animation palette A. Click the Tween button at the bottom of the Animation palette B. In the Tween dialog box C, set the following options and then click OK:

  • Tween With: Previous Frame

  • Frames to Add: 2

  • Layers: All Layers

  • Parameters: Effects

TIP

Smooth Animations. The more frames you include in an animation, the smoother the animation will appear when it plays. Of course, the downside of adding lots of frames is that file size will increase. The trick is to add just enough frames to make the animation look good, without inflating file size too much.

You now have a total of six frames. ImageReady added two frames, gradually changing the layer style angle across the tweened frames current Frames 1 through 4. (The frames you made by hand are now Frames 1, 4, 5, and 6.)

10.

Tween Two More Times

Repeat the preceding Step 10 twice more. The first time select Frame 5 and tween, adding two frames. The second time select Frame 8 and tween, adding another two frames. You now have a total of ten frames.

Tween the Last and First Frames

To make the animation run smoothly as it loops back from the last frame to the first frame, you'll do one more tween. Select the last frame Frame 10. Click the Tween icon. This time, in the Tween dialog box choose Tween With: First Frame A. Leave the other settings as they were and click OK. ImageReady adds two frames to the end of the animation with gradual changes back to the layer style angle on Frame 1. You end up with 12 frames total. You're almost done with this project.

Set the Timing

Click the arrow on the side of the Animation palette, and choose Select All Frames from the side menu. Then click the Time Delay menu beneath any frame and choose 0.1 seconds A. Leave the looping option set to Forever so that the animation plays continuously B.

Optimize the Animation

Click the Optimized tab in the document window so you can see a preview of the image with the optimization settings you choose A. Open the Optimize palette and optimize the animation with GIF settings, as shown here B. Try 128 colors (to approximate the many tones in the bevel and shadow), add some Dither (to avoid banding), and add some lossy compression (to keep file size down). Leave Transparency checked (a prerequisite for the Redundant Pixel Removal method ImageReady applies by default), and uncheck Add Metadata. These settings affect all frames of the animation, so preview on several frames. You can reduce the image width and height (Image>Image Size) if you need a file that's smaller in file size.

Preview and Save

Click the Preview in Browser button in the toolbox A. If you're happy with the browser preview, choose Save Optimized As to save the file as an animated GIF. In the Save Optimized As dialog box leave Format/Save as Type set to Images Only and click Save B. ImageReady produces a single GIF file with all of the frames you created. You can bring the GIF into a site-building program like GoLive to include it on a Web page.

Now that you've checked out all the animations in this chapter, try tweaking our recipes to come up with some unique variations of your own.

     < Day Day Up > 
    Related

    Категории