Basic GIF Animation

by Bruce Brodie

Welcome to the Animation Workshop. The purpose of this tutorial is to create an animated gif (gif stands for: graphics interchange format) by actually drawing the pictures that make up the animation. If you're looking for a "bare bones" lesson in animation, you've come to the right place. We will be starting from scratch, but don't let that scare you. It's easier than you might think. When you're done, you will have a sequence of drawings you can animate with a compiler (more about compilers soon).

The whole process is similar to making a "flip-book" or movie: A sequence of frames (pictures) are displayed in rapid succession giving the appearance of motion. It's a lot of fun to watch these little creations come to life on your monitor. If you've been looking for a creative way to use your computer, animation can be very fun.

Things you will need:

There are two items of software you will need to create animated gifs. The first is a drawing program. "Microsoft Paint" will do just fine. In fact, "Paint" is what I used to draw the project in this tutorial. If you use Windows, you most likely already have it. Look under accessories. It comes as a standard program on many PCs. If you don't have it, or you use Apple (which is often preferred by artists) there are plenty of drawing programs out there. Photo editing software featuring drawing tools can also be used to create animated gifs. Note: "Microsoft Paint" doesn't always let you save to the gif format every time. Be careful you don't end up with a sequence of bit-maps instead of gifs. "Paint" saves to a bit-map the first time anything is saved. You will need to save your work a second time as a gif.

The other piece of software you'll need is an animation compiler. This is the software you'll use to do the final step of bringing your drawings to life. A compiler is easy to use: you load in your sequence of pictures and "Voila" you get a little moving picture. There are good compilers available for download from several sources on the web. You can get them with editing features that can be very helpful in fine tuning your animations. I'll give you a link to the one I use at the bottom of this page. It's offered as a free trial. If you like it and register it the price is very reasonable.


For best results you'll want to follow these basic guidelines while drawing animated gifs:
Each frame in the animated sequence must be stored in the Graphics Interchange Format. Again, "Paint" can be tricky in this area. It tends to save in bit-maps, especially the first time something is saved and when you only save a portion of an image. Bit-map files are very large and don't work for this type of animation.
A piece of movie film wouldn't suddenly change size halfway through a scene. Therefore, your image frames shouldn't change either. Even a slight difference in size between frames can cause jumping and unwanted movement. Measure and crop carefully when animating.
The frames of an animated gif must be able to load quickly in order to work correctly. Large, slow loading, files won't work. Always keep file size in mind during the animation process.
Planing out and drawing a good working template for your images will help keep things in the right place. We'll be making one shortly.

Always keep in mind the above guidelines while animating. You'll save yourself a lot of headaches. Plus, you'll be able to troubleshoot problems that may arise.


It's important to know how your particular drawing program lets you measure the elements of your images. You should have somewhere on your screen a set of numbers indicating width and height. You should also find another set indicating x and y coordinates. You can ignore the x and y coordinates for now, but you will definitely need width and height. On "Microsoft Paint" the width and height numbers are in the lower right-hand corner of the screen (see example below). This is the ruler. I will from here on refer to it as the ruler. If you do a lot of animating you will learn to appreciate it very much.

example of Microsoft's Paint screen


While we're on the subject of rulers, make sure your's is set to measure in pixels. Pixels are the units we will be using during this project. If your ruler is set to anything else things might not work out too well.

Have fun!

Animating can be very enjoyable. Have a good time and try new ideas. Don't be discouraged if things don't work right the first time.

By the way, the projects in this tutorial are designed to give you practice in the basics, a start, so that you can create on your own. Let your imagination go!

Here's a quick Project

rolling prehistoric wheel

I call this the "Hanna Barbera". Not only does it remind me of the Flintstones, but it also uses the old repeating background technique we've all seen in countless cartoons. The whole thing is actually an illusion: the wheel stays still while the scenery changes behind it...simple and effective.

Drawing the template:

example 1

example 2

example 3

example 4

NOTE: The scenery you draw does not have to look like mine. Make your own...be creative. Just be sure the beginning and ending are on the same level as shown above. You'll only have to draw it once so you can make it as complex or as simple as you'd like.

Also, you can increase the length of the scenery if you'd like. Just make it divisible by an even number of rectangular cells. This uses 4 because I'm trying to keep it simple. Yours' might use 6, 8 or more if you choose. The reason for having an even amount of cells will become apparent in the next step.

Looping the scenery:

This is the step that makes the illusion work smoothly. You're going to copy and paste the first rectangle of scenery to the end of rectangle 4. The scenery strip will now have 5 rectangles. The first and fifth will be the same, allowing the scene to repeat. Study the example below.

example 5

example 6

example 7

Once you have your template done things start moving fast. All you have to do is copy and paste the "wheel frame" (which should be the exact size of two scenery rectangles) into the scenery. Be sure to use the transparency tool (see your help menu for transparency) when selecting the wheel frame.

If you have measured accurately; used transparency; and are wielding your selection tool carefully; you should be able to paste copies of the wheel into the scenery as shown below. The scenery should show through. Erase out the centering lines when you're done pasting each frame.

NOTE: Be sure, as you go, to save each frame under a new name, something like: "wheel1.gif"..."wheel2.gif"...etc. DO NOT save the frames you make under your template's name or you'll ruin your template!

example 9

example 10

example 11

example 12

example 13

example 14

You have your pictures!
Now get your animation software. Just click the button below.
GIF Construction Set Professional by Alchemy Mindworks

Have fun! For the next tutorial Click Here.

Saddletrout Studios