Creating a Gif Animation with ImageReady 2.0
This is an update to the previous ImageReady 1.0 Tutorial
- Start ImageReady. Make sure the Animation palette is visible.
If it is not, choose Window > Show Animation to make it
- Seven steps to construct an animation
- Create basic image (or open an existing multilayered image)
We will construct a simple image, a sign that says "WELCOME",
using the Toolbox.
- First, select File>New
- In the dialog box that opens set:
Image size: Width 200, Height 40, and
- Select the Text Tool in the Toolbox and click the blank
transparent image. Type "WELCOME" at the cursor on the image.
We want to use a 30 px Bold Arial font so enter the values below in
the Type Tool palette and change the foreground color to green.
After achieving the desired font and color the Move tool can be used to
center the text in the image.
This is the basic image we will use to form the animation.
- Add animation frames
A thumbnail of the basic image should be located in the Animation
palette. The initial frame needs to be duplicated several times.
This is done by clicking the "Duplicate Current Frame" icon
The result should look like
- Make changes in frames using Layer palette
Changes will be made in the first and third frames to create the
animation. In the third frame we will change the opacity so the
"WELCOME" message fades away. We will change the first frame so that
the message will move "onstage" from the left side to the center.
Select the third frame. Then in the Layer palette
move the opacity slider to 0%.
The message in the third frame should now be invisible.
Now select the first frame. Using the Marquee tool (from the toolbox)
select the text "WELCOME". Then, using the Move tool, move the selection
just off the left edge of the image. The image below shows the text
- Add frames with Tween
We now have three frames where the message is visible in the 2nd
frame, but invisible in the 1st and 3rd.
We will use the Tween Command to fill in frames to create the desired
First we will add frames between the 2nd and
3rd frames that will cause the message to fade away.
Select the 2nd frame.
Open the Animation palette menu (by clicking the small triangle
the upper right of the Animation palette) and select Tween.
In the Tween dialog box select to add 6 frames, Tween with
Next Frame, and select Opacity to vary.
Clicking "OK" should add 6 more frames.
Now we want to use tweening to move the message from offstage to
the center. Select the 1st frame and select Tween
from the Animation menu as before. Use 6 new frames again, but this
time check Position and uncheck Opacity as the
feature to vary. Clicking "OK" adds 6 more frames as indicated.
It only remains to set the delay between frames.
- Add delays between frames
Go to the Animation menu and choose Select All Frames. This
will highlight all the frames. Alternately, the (number on the) first frame
can be clicked and the last frame can be shift+clicked. With all the
frames selected click the small down triangle to the right of sec
at the bottom of one frame. Choose a delay, for example, 0.1 seconds. This
is applied to all the selected frames. To set the delay for a single frame,
for example Number 7, select it alone and change its delay.
- Preview animation
To view the animation
go to File>Preview File>Netscape
(or whatever browser is listed). It is good to check what
the animation looks like in all the popular browsers.
- Save animation
The layered animation is saved as a .psd file using
To save it as a gif animation
use File>Save Optimized.
An HTML file which includes the code for placing the animation
on a web page can also be generated by going to
- View the completed GIF animation