| The animated gif used in this tutorial is Y2K: What Do We Do With These Computers? ©1999 All rights reserved. The names Photoshop and Gif Animator are trademarks of Adobe, Inc. and Ulead, Inc., respectively. A number of animation tutorials exist for creating animated gifs using traditional methods like paper and pencil to create roughs that are then cleaned-up, scanned and loaded into an image program. This tutorial instructs one on the method of creating the entire animation in Photoshop, using a graphics tablet like a Wacom Art II and the layers option in the native Photoshop format (.psd), and then loading the file into Gif Animator as a video file, in which each layer is treated as a frame in the animation.
First Keyframe
Create a new file, 216x331 pixels. Then draw the first keyframe in your animation. I suggest using the pencil tool. Open the Brushes (Windows>Show Brushes) and select the second brush, which is 2 pixels in diameter. Even though you might be saying "Hey, I need to work this out on paper first," the reality is that drawing on Photoshop is just like drawing on paper, except the act of erasing is a lot simpler. Changing the drawing is not only easier, but one can save versions of one's work that make it possible to use and reuse drawings for later projects, or simply to see what works best. After one has finished the first drawing, the Layers Option in Photoshop can be manipulated to mimic the light-table effect of seeing the drawing underneath the page on which one is drawing.
New Layer
It is simple: create a new layer. (Shft+Ctrl+N) on top of your keyframe. Then return to your keyframe layer, which is labeled "Background," and copy it (Ctrl+A, Ctrl+C). Then go to Layer 1, and paste it (Ctrl+V) into the new layer. Next, choose to reduce the Opacity. of this layer to 85%. Now, choose white as your pencil color (click on the color box at the bottom of the toolbar). The next task is to "erase" the parts of the layer that is to be changed. This is accomplished by using the white pencil in the same way an eraser is used. The black line becomes the color of the background and viola! it is gone. As the erasure progresses, notice the "ghost" of the image underneath, which acts in the same way as the onionskin option in Flash does. In this way, one can create a layer-by-layer animation by making incremental changes. in each subsequent layer by copying and pasting the latest layer into a new layer above it. Follow the eraser instructions and draw the changes in the animation.
Simple Testing
To test it in this phase of the work, simply click from one layer to the next, or test it in a manner similar to the classic flipping of pages to see if the animation works by going up the line of layers and turning them on. It works. When the animation is completely finished, load it into Gif Animator and do a pencil test . 
Now let's add a background!  
Elandee Home Page |