Display thumbnails of your photos on the Web in an animated slideshow with professional-looking dissolves.
Create a New File in ImageReady
In this project you'll learn how simple it is to show off a selection of your photos in an animated slide show. Try it with these photos and then substitute your own. This animation looks best with photographs that are all the same size and orientation. If you use your own photos, resize them so that they are all the same size along at least one dimension, create a new folder, and move your prepared photos into that folder.
Start making a slide show by creating a new file in ImageReady. Choose File>New from the menu bar. In the New dialog box, set Width to 300 pixels and Height to 224 pixels. Leave Contents of First Layer at its default. Click OK to open a new image.
Import Photos as Frames
Choose File>Import>Folder as Frames from ImageReady's menu bar. Navigate to a folder of photos (for example, the Project Files>Chapter 2>C02-04-photos folder) and click Choose. ImageReady automatically does all of the following for you:
Create a White Layer
Click the Create New Layer icon at the bottom of the Layers palette A. Double-click the name of the new layer in the Layers palette and rename it White. Press D on the keyboard to set the Background Color in the toolbox to white. Press Command-Delete/Ctrl-Backspace to fill the new layer with white. Then drag the new layer to the bottom of the layer stack in the Layers palette.
Match the Layer Across Frames
Next you'll make the White layer visible on all frames of the animation so that the semitransparent tweened frames you'll be creating shortly will all have the same solid white background. Select the White layer and click the Unify Visibility button at the top of the Layers palette A. Choose Match at the prompt B. The symbol on the White layer C indicates that it is visible on all frames.
Tween Frame 2
The rest of the frames in this animation will be created automatically using a process called Tweening. Tweening takes its name from the frames it generates "in-between" the frames that you create by hand.
Select Frame 2 in the Animation and click the Tween button at the bottom of the Animation palette A (or click the arrow on the right side of the Animation palette B and choose Tween from the side menu).
Choose Tween Settings
Choose the following settings in the Tween dialog box:
Preview the Tween
Select Frame 1 in the Animation palette. Then click the frame forward button at the bottom of the Animation palette Ato move through the frames one at a time. Notice that both the fire and earth photos are partially transparent on Frames 2 and 3, creating a dissolve effect.
Tween Frame 5
The water photo now appears on Frame 5. Select Frame 5 and click the Tween icon in the Animation palette again. Leave all the Tween settings as they were in Step 6 and click OK to add two tweened frames between the earth and water photos.
Tween Frame 8
The wind photo is now on Frame 8. Select Frame 8 and click the Tween icon again. Leave all the Tween settings as they were in the preceding step, and click OK to tween the wind photo with the water photo.
Preview the Animation
Click the Play button at the bottom of the Animation palette to preview the animation in the document window. Notice that there's a jump between the wind photo and the fire photo. That's caused by the animation looping back to to the beginning of the animation with no partially transparent fames between the wind photo on Frame 10 and the fire photo on Frame 1. You'll fix that in the next step.
Click the Stop button (the square icon) at the bottom of the Animation palette to stop the preview.
Tween the First and Last Frames
Select Frame 10-—the last frame in the Animation palette. Click the Tween button. In the Tween dialog box, change the Tween With field to First Frame. Leave the other tween settings as they were in Step 9, and click OK. There are now two partially transparent frames at the end of the animation. They create a dissolve between the wind photo in Frame 10 and the fire photo in Frame 1, smoothing the look of the animation when it loops back to the beginning to repeat itself.
Preview in a Web Browser
Click the Preview in Browser button on the toolbox to preview the finished animation in a Web browser. Notice that it plays very fast and that it repeats over and over. You'll address those two issues in the next steps.
Set the Repetitions
The looping option at the bottom of the Animation palette is set to Forever by default. This would create an animation that continuously repeats without end. You'll limit the number of repetitions of your slide show in this step. Click the looping option and choose Other from the pop-up menu. In the Set Loop Count dialog box that appears, type 2 into the Play field and click OK. Your slide show will play through twice in a viewer's Web browser.
Reduce the Speed
Slow this animation down so viewers have time to appreciate the photographs. Select all the frames by clicking on Frame 1, holding down the Shift key,
Pause on Selected Frames.
Now increase the timing on the four frames that display opaque photos so that the animation pauses on those frames. Click on Frame 1, hold the Command/Ctrl key and click on Frames 4, 7, and 10. Choose 2 seconds from the time delay menu beneath any one of those frames. Preview again to see the results.
Optimize the Animation
Although this file contains photos, it can't be optimized in JPEG format because JPEG doesn't support animation. Instead, you'll have to optimize the entire file as one animated GIF, choosing the maximum number of GIF colors (256), and adding dither to smooth the bands of color in the photos. In the Optimize palette, choose Format: GIF, Colors: 256, Dither Method: Diffusion, Dither Amount: 100%, Lossy: 17, and Add Metadata: Unchecked. Leave the other optimization settings at their defaults, as shown here.
Reduce the Image Size
Click the box at the bottom of the Optimized tab of the document window and choose Optimized Information. The file size reported there is quite large for the Web. To reduce file size, you'll have to reduce the physical dimensions of the image. Choose Image>Image Size. Type 50% in the Percent field, make sure Constrain Proportions is checked, and choose Quality: Bicubic Sharper.
Choose File>Save Optimized As. Leave Format/Save as Type set to Images Only, and click Save. ImageReady saves a single animated GIF file. To display this slide show on the Web add a link to the GIF in any HTML file. Choose File>Save As to save the PSD source file.
In this tutorial: