| Get your FREE home page! |
|
FLIP! MAKING ANIMATED GIFS, ONE FRAME AT A TIME a tutorial by a cartoonist who still draws flipbooks in the margins |
| HOME · LESSON 1: DRAWING THE FRAMES · LESSON 2: PUTTING IT TOGETHER · WRITE ME |
|
Hi, I'm Deb. I draw the editorial cartoon for a weekly paper in Las Cruces, New Mexico, and I have been drawing flipbooks in the corners of things since the third grade: textbooks, phone books, a hymnal once, which my mother found and did not enjoy. When I got on the Web in 1997 and saw my first little spinning globe, I thought, somebody made a flipbook. I have to know how. It turns out an animated GIF is exactly a flipbook. It's a stack of ordinary pictures, called frames, saved together in one file, with a note on each one saying how long to show it before flipping to the next. Your browser flips the pages. That's it. Everything else is craft, and the craft is what this site is about. Want to see the stack for yourself? Here are two from the GeoCities.us clip art library:
Save one to your computer, open it in any of the programs below, and the frames will be laid out in a row in front of you like cels on a light table. Look at how little changes from one to the next. That's the first lesson, really. |
|
WHAT YOU'LL NEED
A paint program to draw the frames. Any one that saves GIFs will do. I use Paint Shop Pro, and I drew in plain old Windows Paint for my first year. An animation program to stack them up. These are the ones I've used or my readers swear by:
Patience. A good little animation is an evening's work. A great one is a weekend. |
|
THE LESSONS
Lesson 1: Drawing the frames. Thinking like a flipbook: the key poses, the in-betweens, keeping every frame lined up, and why a bouncing ball squashes. With a four-frame ball you can draw tonight. Lesson 2: Putting it together. Timing in hundredths of a second, looping, see-through backgrounds and the dreaded white fuzz, what "disposal method" means, and how to keep the whole thing small enough that people will wait for it. Lesson 3: Text that moves |
|
A WORD OF RESTRAINT
Once you can make them, you will want to put forty of them on your front page. I did. Please don't. A page where everything moves is a page where nothing gets looked at. Pick your best one and let it be the star, the way a cartoonist gives one character the funny line and keeps everybody else still. |