Create GIF Animations

Gary L. Simmons

rev 06/17/03

webwonks.org/WebBuilding/GIFAnimations.html

Home

It is fun and rewarding to make your own animated web graphics. Remember to optimize your graphics because if you animate a 40K cell you can wind up with a huge file, just 6 frames will load you down with a 240K GIF. It adds up faster than Democrat tax programs. I used AppleWorks and PhotoShop to create my individual animation cells and ImageReady to help optimize some of the graphics. You can use whatever graphics package you want to create your animation cells and

optimize. Do a search on the web for such GIF animation packages such as GraphicConverter, Clip2Gif and GifBuilder for the Mac, Adobe ImageReady as a cross-platform application, and GIF Construction Set for the PC. Included here are instructions for GraphicConverter, Clip2Gif/GifBuilder and ImageReady but once you see these instructions you will pretty much have the idea of how it works and you can have a leg up on using whichever GIF building program you choose.

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 program.
Frame - Each cell is converted to a frame, a frame is a unit of animation in an animation building program such as GraphicConverter or GifBuilder.
General Tips:
1. 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 animation will move smoothly from frame to frame. You can compare the movement between frames by comparing the position of the registration point. The registration point can always be removed later if it is not part of the graphic in the cell.
2. Put a line border around your cell if there is a empty space in your cell surrounding the animation. The pasting algorithms will usually try to center what is in the paste buffer. This may throw off your animation. You can remove the borders later.
3. You can make a QuickTime movie of any animated GIF. It is really easy. To make a QuickTime movie I used QuickTime 4 Pro. From 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 movie. Pretty slick eh?
Using GraphicConverter:
1. Draw your animation cells in a graphics program.
2. Copy the first animation cell and start GraphicConverter.
3. 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.
4. Copy another animation cell.
5. From the Picture menu in GraphicConverter do "Show movie options". It will ask you if you want to convert your document to an animation GIF, click "Convert"
6. From your movie options window click "Insert Frame" button. It will insert the cell you have in your paste buffer into the frame.
7. Continue copying cells and inserting frames until your animation is complete. If you want to make it an endless loop then you can click that box in the movie options.
8. 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.
9. Save your work.
Using clip2gif and GifBuilder:
1. Draw your animation cells in a graphics program.
2. Start clip2gif
3. Copy an animation cell from your graphics program.
4. Go into clip2gif and from the File menu do "Save Clipboard As". Tip: Put a cell number in the file name.
5. Repeat steps 3 and 4 until all of your animation cells are GIFs.
6. Start GifBuilder.
7. In GifBuilder from the File menu do "Add Frame". Add the frames in order.
8. Repeat step 7 until all your animation cell GIFs are added to the animation GIF.
9. Save your work
Using ImageReady 1.0.1:
1. Draw your animation cells in a graphics program and copy the first cell into your paste buffer.
2. Start ImageReady and select "New" from the File menu.
3. Select "Show Animation" from the Window menu.
4. Paste your image.
5. Copy your next cell from your original graphics program.
6. From your animation palette in ImageReady, select "New Frame"
7. Paste your cell into the new frame
8. Repeat steps 5 through 7 until all your cells are in animation frames.
9. 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.
10. 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 hey, 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 AppleWorks 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 orange to yellow in the background. While I was in PhotoShop I optimized the graphics and saved them as GIFs. Next I copied each GIF and pasted them into Frames in ImageReady, then set the delay and finally saved the optimized file. This one turned out much better, the colors remain 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 picked my 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 not 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 FireWorks. 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 graphics in 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.