- Terminology in the tutorial:
Cell - one picture in a series of pictures
that will make up an animation, this term is generally used in the
creation of the art work in a graphics
Frame - Each cell is converted to a
frame, a frame is a unit of animation in an animation building program
such as GraphicConverter
- General Tips:
- Use a registration point in your cells. A registration point
is some reference point or spot in your graphic that will
always stay in the same place. That way you can guarantee your
move smoothly from frame to frame. You can compare
the movement between frames by comparing the position of the registration
point can always be removed later if it is not part
graphic in the cell.
- Put a line border around your cell if there
is a empty space in your cell surrounding the animation.
The pasting algorithms
try to center what is in the paste buffer. This may
throw off your animation. You can remove the borders later.
- You can
make a QuickTime movie of any animated GIF. It is really easy.
To make a QuickTime movie I used QuickTime 4 Pro.
the File menu do "Open movie". Open the animated GIF you
have just created. From the Movie menu do "Loop" if
you want and then save your work. It will be a QuickTime
- Using GraphicConverter:
- Draw your animation cells in a graphics program.
- Copy the first
animation cell and start GraphicConverter.
- From the Edit menu
do "new picture with clipboard".
This will create a graphic the exact size as the cell in
the paste buffer.
This will be your first frame.
- Copy another animation cell.
- From the Picture menu in GraphicConverter
do "Show movie
It will ask you if you want to convert your document to
an animation GIF, click "Convert"
- From your movie
options window click "Insert Frame" button.
It will insert the cell you have in your paste buffer
into the frame.
- Continue copying cells and inserting frames until your
animation is complete. If you want to make it an endless
you can click that box in the movie options.
- Set the delay
between frames in the top of the movie options box. Experiment
with this, you can change this when ever
you want. The larger
the number the longer each frame is displayed.
- Save your
- Using clip2gif and GifBuilder:
- Draw your animation cells in a graphics program.
- Start clip2gif
- Copy an animation cell from your graphics program.
- Go into
clip2gif and from the File menu do "Save Clipboard
As". Tip: Put a cell number in the file name.
steps 3 and 4 until all of your animation cells are GIFs.
- Start GifBuilder.
- In GifBuilder from the File menu do "Add
the frames in order.
- Repeat step 7 until all your animation
cell GIFs are added to the animation GIF.
- Save your work
- Using ImageReady 1.0.1:
- Draw your animation cells in a graphics program and copy the
first cell into your paste buffer.
- Start ImageReady and select "New" from
the File menu.
- Select "Show Animation" from
the Window menu.
- Paste your image.
- Copy your next cell from your original graphics
- From your animation palette in ImageReady,
- Paste your cell into the new frame
- Repeat steps 5 through
7 until all your cells are in animation frames.
- Set the delay between
animations by clicking on a frame and entering the delay into
the "Delay" text
box on the right of the animation palette or by selecting "Set
Delay For All Frames..." from
the palette menu if all your delays will be the same.
- Optimize and save your graphics by selecting "Save Optimized" from
your File menu.
- Some animated GIFs I did:
This is my first animated GIF, I use it on my Joke of the Weak page.
I used AppleWorks to draw the individual cells then used clip2gif
and GifBuilder to build the animation. It does not convert well
to a 256 color graphic so it suffers somewhat on a low end machine.
I could fix this now in ImageReady or PhotoShop but what the
it is very representative of a valiant first effort. I don't
think those guys at Disney have anything to worry about. Besides
if I was
at the reins there, Donald would kick Mickey's tail up between
his ears then tie Goofy up in the backyard with Pluto.
This is my second effort at an animated GIF. You can find this
one in the Marathon section of this web site. Once again I used
to create my cells. The marine image was borrowed from Bungie's
Marathon game using Apple's Resource editing software, ResEdit.
After the cells
were built they needed some touching up in PhotoShop to remove
some artifacts created by the transitional blend of colors from
yellow in the background. While I was in PhotoShop I optimized
the graphics and saved them as GIFs. Next I copied each GIF and
them into Frames in ImageReady, then set the delay and finally
saved the optimized file. This one turned out much better, the
consistent whether you are viewing it in 256 colors or millions.
You gotta love the newer software.
This one was easy kids. I just went to 3D
Text Maker and typed
in my text, made a few decisions on how I wanted it to look then
nose for a minute while it turned its little gears and produced
the excellent animated graphic you see here. Simple as pie.
The important thing here to realize is that there is no ONE way
to do things. The instructions I give above for GifBuilder, GraphicConverter
and ImageReady are bare bones. Experiment and have fun. Remember
to annoy your viewers with too much of this junk, a little bit
goes a long way.
- The last word:
There are a number of programs out their that
will automate the creation of animated GIFs. The leading contenders
that I am most aware
of are Adobe's ImageReady, BeatWare's e-Picture and Macromedia's
Any of these programs will make your animations a lot
easier to create. I am not here to rain on their parade or
nuttin, but where
is the joy of just "pushing the button"? The
flip side of that argument is the ability to produce quality
a reasonable time period. I am a big fan of Dreamweaver
because it lets
me concentrate on the content, this is also the advantage
of automated animation packages.