Part 8
Photoshop cs5
WEB LAYOUT AND OPTIMIZATION
CREATING AN ANIMATED FAVICON Part (B)
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. Th is sets the scene for frame 1.
Figure 8-2
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: n 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.
n 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 configured in the Layers panel.
Figure 8-3
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 file as an animated GIF. When the dialog box opens, select GIF 128 No Dither from the Preset menu and click Save. Then, in the Save Optimized As dialog box, select the location where you’d like to save your file, set the file name to favicon, set Save as Type to Images Only, and choose Save.
[box type="info"] HINT: To preview your saved animated GIF file before adding it to your Website, drag and drop the file into any open browser window.[/box]
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” />
loading...
loading...
About shakil .
