Photoshop Trick; CREATING AN ANIMATED FAVICON

NOW THAT YOU have learned to make a basic favicon in Technique #7, “Creating a Favicon,” you’re ready to create your own animated favicon. Th e motion in an animated favicon is created in a simple “frames-based” GIF animation, which requires no Flash and only takes a few more minutes to construct than a regular GIF favicon. Even better, all you need to make your animated favicon is Photoshop and the artwork you’ll be using for the two or more “frames” of the animation.

STEP 1 

Start by creating the fi le that holds the animation graphics. Select File > New to open the New document dialog box. Under Preset choose Web, set both the width and height to 16 px, and click OK.

HINT: If you’d prefer to work in a slightly larger fi le size, set the width and height to 64 px. Then, before you save the file as an animated GIF, just remember to scale the file down to 16×16.

STEP 2 

For this technique, you will need four layers: three separate graphics (one on each layer) and a 1 px border layer. Paste all the artwork you’d like to use in your animation into the open document, placing each image to be used in the animation on to its own layer, one above the other, in the order in which they should appear, starting from the bottom.
Be sure to name each layer appropriately (frame 1, frame 2, and so on) so that the animation is easy to configure. For example, in the animated GIF favicon used on the Luckychair.com Website, the fi le consists of four layers—one for each of the three frames of the animation, and a fourth layer called border that will also be visible in each frame of the animation, as illustrated in Figure 8-1.

To create the border layer, select the layer called frame 3 and click the Create New Layer button at the bottom of the Layers panel. Th en press Ctrl+A/Ô+A to select the entire layer, select Edit > Stroke to apply a 1 px inside border in the color of your choice, click OK, and name your layer border.

STEP 3 

Select Window > Animation to open the Animation panel. Here is where you will set up the frames-based animation. By default, the Animation panel opens to the Animation (Timeline) view. To switch the display to the Animation (Frames) view, click the Convert to Frame Animation button in the bottom-right corner of the panel.

STEP 4 

In the Animation (Frames) panel, you’ll notice that the fi rst frame of the animation is labeled with a “1” and has a time delay set to 10 seconds, which is a little too long for an animated favicon. Click on the Delay menu where it says “10 sec” and adjust the delay to 5.0 seconds.

Next, over in the Layers panel, adjust the visibility of your layers so that only the layers (frames) you want to appear in frame 1 are showing. For example, for frame 1 in the Luckychair animated favicon, the layers for frame 1 and border are visible, while the layers for frame 2 and frame 3 are hidden, as shown in Figure 8-2. This sets the scene for frame 1.

STEP 5 

To add two more frames to your  animation, click the Duplicates Selected Frames button at the bottom of the Animation panel twice. Th en make the following adjustments to the each of the new frames:

• Select frame 2, adjust the time delay to 0.2 seconds, and toggle the visibility of the layers in the Layers panel so that only the correct layers for frame 2 are visible. In other words, make frame 2 and border visible while hiding frame 1 and frame 3
• Select frame 3, adjust the time delay to 0.2 seconds, and toggle the visibility of the layers so that frame 3 and border are visible and frames 1 and 2 are hidden.

Figure 8-3 shows how each frame in this example should be confi gured in the Layers panel.

STEP 6 

To preview the animation in the Animation panel before saving it, select frame 1 and press the panel’s Play button. Notice that the animation plays once and then stops. Hmmm . . . that’s not good. To make the animation play endlessly, adjust the playback frequency by choosing Forever from the Looping Option menu in the lower-left corner of the panel. Now try playing the animation again and you’ll see the animation continuously loop. Ahhh—much better.

STEP 7 

Select File > Save For Web & Devices to save the fi le as an animated GIF. When the dialog box opens, select GIF 128 No Dither from the Preset menu and click Save. Th en, in the Save Optimized As dialog box, select the location where you’d like to save your fi le, set the filename to favicon, set Save as Type to Images Only, and choose Save.

HINT: To preview your saved animated GIF fi le before adding it to your Website, drag and drop the fi le into any open browser window.

STEP 8 

Now you are ready to use your animated GIF as a favicon. Upload the favicon.gif file to the root level of your domain and add the two lines of HTML code below to the <head>…</head> of every page on your site on which you’d like the icon to appear. After you’ve added the code, be sure to upload the updated pages to the server too.

<link rel=”shortcut icon” type=”image/ico” href=”/favicon.ico” />
<link rel=”icon” type=”image/gif” href=”/favicon.gif” />