HOME	EVENTS & POSTS	LINKS	WEIRD INVENTIONS	ABOUT THIS SITE
MAIN GALLERY	DRAWING WITH MICE	CONTACT	GUEST ARTISTS	GUESTBOOK

SADDLETROUT STUDIOS
ANIMATION TUTORIAL #1
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:

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.

Guidelines:

USE THE GIF FORMAT

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.

KEEP FRAMES THE SAME SIZE

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.

KEEP FILE SIZE LOW

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.

USE A TEMPLATE TO DRAW FROM

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.

Measuring:

Units:

Have fun!

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

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:

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:

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.

You have your pictures!
Now get your animation software. Just click the button below.

Have fun! For the next tutorial Click Here.