How to Wow: Photoshop for the Web

1.

Understand the Problem & Solution

This project, like the last one, involves a remotely triggered animation, but with a twist. This time an animation (the circular border of stars) surrounds a round trigger area (the orange button). When a viewer moves her mouse over the orange button the stars animate. If you tried to make this project by drawing a rectangular slice around the orange button, the trigger area would extend beyond the button, causing confusion about where and how to activate the animation, as you'll see in the next step. The solution is to use an image map hot spot to trigger the animation. Unlike slices, which are always rectangular, an image map hot spot can be circular, so that it just fits a circular trigger area.

2.

Try Using a Slice

Let's see what happens if you try to define the trigger area of this animation with a slice. Select the Button layer in the Layers palette. This layer contains only the orange button and its text. Choose Layer>New Layer Based Slice from the menu bar. This creates a tight-fitting slice around the content of the Button layer. You can see that the corners of the rectangular slice extend over the ring of stars A, B, C, D. If you used this slice as the trigger region for the animation, moving a mouse over these corners would start the animation playing. Viewers wouldn't see the slice, of course, and they would probably be confused about how to activate or avoid activating the animation.

3.

Make a Layer-Based Hot Spot

Now that you understand what not to do, let's get started making this project the right way. First, you'll create an image map hot spot around the orange button. A hot spot is an active link region in an image map. You can draw image map hot spots manually with the Image Map drawing tools in ImageReady's toolbox. But if the content of the hot spot is on a separate layer, as it is here, you can use the automatic layer-based method instead.

Make sure the Button layer is selected in the Layers palette. Then choose Layer>New Layer Based Image Map Area to create an image map hot spot around the contents of the Button layer. The hot spot boundaries are identified by a colored line A. By default the hot spot is rectangular. You'll fix this in the next step.

4.

Make the Hot Spot Circular

Open the Image Map palette (Window>Image Map). Click the arrow next to Layer Based Settings to display the Shape setting. Click the Shape button and choose Circle from the pop-up menu A. This changes the shape of your hot spot to a circle that exactly fits the edge of the orange button B.

Select the Hot Spot

The Web Content palette lists all image map hot spots, as well as all slices and rollover states, in an image. If your hot spot is no longer selected, select it by clicking on its default name, ImageMap_01, in the Image Map area of the Web Content palette A. Or select the Image Map Select tool from the toolbox B and click inside the hot spot area in the image.

Add an Over State

In this step you'll add an Over rollover state to the image map hot spot. The Over state will occur when a viewer moves her mouse over the hot spot area defined by the image map coordinates.

Simply click the Create Rollover State button at the bottom of the Web Content palette A to add an Over state B to the selected image map hot spot.

7.

Display Animation Frames

The Web Content palette does not display animation frames by default. But it makes sense to manage animation frames from this palette when you're creating animation triggered by an image map rollover. That allows you to see all the related elements image map hot spots, their rollover states, and the frames of animations triggered by the rollovers in the same palette.

8.

Create Animation Frame 2

The first frame of an animation is created for you automatically. Click the Duplicate Current Frame button at the bottom of the Web Content palette A to create Frame 2 of the animation. Both frames are now displayed under your ImageMap_01 hot spot in the Web Content palette B and also in the Animation palette C.

Change Animation Frame 2

At this point, Frame 2 is still a copy of Frame 1. You'll change that in this step. With Frame 2 selected in the Web Content palette, go to the Layers palette and click in the Visibility field of the Stars2 layer to add an Eye icon there A. Then click in the Visibility field of the Stars1 layer to remove its Eye icon B.

Set Timing and Looping

Leave the Time Delay on both frames at its default of 0 seconds A so the frames animate quickly. Leave the looping option at its default of Forever B, so that the animation continues to play over and over while the viewer's mouse is over the image map hot spot.

Preview the Animation

Click the Play button at the bottom of the Animation palette to preview the animation. The stars on Frame 2 are shifted slightly around the ring from those on Frame 1. So as the animation moves quickly back and forth between Frames 1 and 2, it gives the illusion that the stars are moving around the ring. Cool!

Set Up Your Optimizing Workspace

Click on the Optimized tab in the document window A where you'll see a preview of the image with the optimization settings you choose in the next step.

Open the Optimize palette (Window>Optimize), where you'll choose optimization settings that will affect the whole image. When you optimize a document as an image map the entire image takes the same optimization settings. And when you optimize an animation, all of its frames share the same optimization settings.

Click the double-pointed arrow on the Optimize palette tab B to open the sub-headings so you can see all the settings in the Optimize palette.

Choose Optimization Settings

Choose the following settings in the Optimize palette:

• Format: GIF (You have to optimize this image in GIF format because you will be saving it as an optimized GIF, ImageReady's default animation format.)

• Colors: 128 (This image needs lots of colors because the orange button has a strong bevel and emboss effect that contains lots of graduated colors.)

• Dither Method: Diffusion

• Dither Amount: 88% (Adding a high percentage of dither helps smooth out potential banding in the beveled button.)

• Lossy: 17 (Adding lossy compression to a GIF helps reduce file size.)

  Add Metadata: Unchecked (Metadata adds to file size and is not necessary here.)

• Leave the other settings at their defaults as shown here.

Preview in a Browser

Click the Preview in Browser button. The animation doesn't start until you move your mouse over the orange button. That causes the animation to play, making the stars appear to dance around the button. Move your mouse off the orange button and the animation stops.

Save

Back in ImageReady, choose File>Save Optimized As. Leave Format set to HTML and Images so that ImageReady generates an HTML file with the Java-Script that makes your rollovers function and the image map coordinates. ImageReady also saves two GIF files including an animated GIF for the Over state and a static GIF for the normal state.