Kissing
Fish Animation, Page 2
Software Used: Photoshop 5.5 and ImageReady 2
This is part two of the Kissing Fish Animation tutorial. If you arrived here from a search, click here to start from the beginning. Otherwise, scroll down to continue.
15.) With the image open in ImageReady, display the animation palette by going to Window > Show Animation. The animation palette will appear with only one frame in the file.
16.) Click on Frame one to select it, then choose new frame from the
animation palette menu (indicated in the screen shot below).
17.) A duplicate of the current frame will appear in the animation palette.
Select Frame 2 in the animation palette, then go to the Layers palette and make
sure that Layer 2 and Frame 2 are active.
18.) Select the move tool and move the red fish into position so it appears to be kissing the other fish.
Notice in the animation palette that the red fish is only changed in Frame
2.
19.) From the animation palette menu, choose Tween. In the Tween dialog,
choose All Layers, Position, Tween with Previous Frame, and add 3 frames.
20.) Tweening generates the intermediate frames for our animation. As
you can see, the three new frames are added to the animation palette between
the first and last frame.
One thing to keep in mind is that additional frames will make your animations appear smoother, but each frame can significantly increase the file size. If you're creating an animation for the Web, you want to try to use as few frames as possible. At any time you can click the play button at the bottom of the animation palette to preview your animation.
21.) More than likely you're going to need to modify the frame rate.
Notice the numbers displayed under each frame in the animation palette? These
numbers indicate the time between frames, or the frame display rate. To change
the timing for all frames at once, click on the first frame, then hold the shift
key and click on the last frame.
|
When you're happy with the frame rate, it's time to set the optimization settings. Animations can be quite large, so you'll need to make some sacrifices in quality in order to get your animation to a reasonable file size. |
|
You can preview the optimization by clicking the optimized tab in the image display window, or by right-clicking (Mac users Control-click) on the image and choosing Preview In > [your browser] . To export the optimized image, choose File > Save Optimized As. It's a good idea to save your image as a native PSD file before exporting in case you want to change the frame rate or optimization settings after viewing the image. |
22.)
Click the tiny arrow displayed next to the frame rate, and then choose
a new rate from the menu. I used 0.2 seconds for my animation. You can
also set a different rate for each frame by selecting only a single frame.
My
settings are shown to the right. For a brief description on each of these
settings, see 
Here's the final optimized GIF animation, weighing in at 34 KB.
Questions? Comments? Post to the Forum!
Some images from Nova Development's Art Explosion 600,000.
