Jogging Annie

~ a Paint Shop Pro Animation Shop tutorial ~

Copyright Arizona Kate 2001 All rights reserved.
All tutorials, including images, remain the property of Arizona Kate and may not
be sold or distributed in any format without purchasing a license from Arizona Kate.

This tutorial was written for Animation Shop 3, which comes bundled with Paint Shop Pro version 7. We will be animating the image created by following my vector drawing tutorial called Summertime Jogger so that the jogger looks like she is running. If you haven't created a Summertime Jogger, go to that tutorial page first to create the character, then return here.

Open your copy of Summertime Jogger that you save in psp file format. We will work with a copy and keep the original unchanged just in case a bad error occurs! Duplicate your original image. window>duplicate You can close the original file. When saving the duplicate, be sure to give it a different name than original!

The first step is to decide if you want to resize your copy of Summertime Jogger. Animations can sometimes have very large file sizes, so you should start with a fairly small image. I will resize my copy of the jogger until she is about 200-250 pixels tall. This should result in a final gif that has a file size under 20K (I always try to stay under that number, 25K max). Because this is a vector image, we will not use the resize tool, but will resize using the object selector. Vector objects can be stretched, reduced and resized in a similar manner as using the old deformation tool.

Adjust size of your jogger image:

Method 1: Use the object selector and drag a selection box completely around Annie. Make sure every body part is completely enclosed in the selection. Any object not 100% enclosed will NOT get selected. Select and drag one of the corner handles of the selection box to resize your object. Holding your right mouse button down while dragging will maintain the height-width proportions. Use the left mouse button if you want to distort proportions.

Method 2: With the object selector selected, right click your vector image and choose select all from the popup menu. Holding your right mouse button down while dragging will maintain the height-width proportions. Use the left mouse button if you want to distort proportions.

Convert to raster

Now you can convert your vector object to raster. This will merge all the objects into one layer. Before converting, make sure your background color is set to your preference.

• If you want to end with a transparent gif...start with a transparent background. If you have a separate layer that you've filled with color to cover the checkerboard pattern, delete that layer.
• If you want to end with a background that matches your webpage, fill a background layer with that color or background and merge layers.
• If you want to end with a transparent gif but will be using it on a webpage with a dark background rather than a white or light background, it will work best to start with a background that is also a dark color. This should prevent those ugly little white pixels that will sometimes show as a 'halo' around the edge of a transparent gif used on a dark background. Fill your background layer with the desired 'transparency' color. This should be a color NOT used anywhere else in your image.

Merge layers and convert. Right click the vector layer on the Layer Palette and select convert to raster layer from the popup menu or select layers > merge all. Before going on to the next step, you should have a PSP image with only one layer.... the Annie character.

To make sure we end up with the smallest file size possible.....use the crop tool and reduce your image to the smallest canvas size possible. Leave a small margin of a few pixels around the hair, elbows and feet for some animating space. Be careful....don't chop off any of those ¹hard to see¹ anti-alias pixels when cropping!

Duplicate Layer

To create the layer that will be the second frame of the animation, duplicate the first layer (Annie). Right click the layer button on the layer palette, select dupicate. Make the copy of annie layer active and select image»mirror. You should now have 2 layers, one with the right knee lifted, one with the left knee lifted, and a transparent background.

If the jogger in Layer 2 isn't correctly centered over the the jogger in Layer 1, zoom in close and make some adjustments (see adjustment tips below).

Tips for correcting alignment

Because everybody's drawing is bound to turn out a little different, there's no way for me to tell you exactly what corrections may be needed for your drawing to get both layers to line up perfectly. You may not need to make any adjustments at all! The running movement we're animating will be smoothest if the neck and shoulders are aligned in all frames. Let the head, hair and hips sway back and forth a little, but do not let the neck jerk left and right (it will look unhinged!! LOL). To check if the neck in Layer 2 is in alignment with the neck in Layer 1, reduce the opacity of Layer 2 until you can see both images at the same time. Move one layer over a few pixels, if necessary.

Add Details

We haven't added a signature yet because it would have been reversed when we duplicated and mirrored the image....so add your signature now (and any other details or shadows). Anything you add should be added to BOTH layers in the same, identical position. Zoom in very, very close to make sure anything you add lines up precisely with it's match on the other layer. Being off by only 1 pixel will make it jump around when animated....and that's not good!!

Save your image in PSP format....be sure to give it a different name than your original jogger image. Your final image should have 2 layers and BOTH layers should be visible with 100% opacity showing when you close the file.

Select the Animation Wizard. file > animation wizard




Answer questions in dialog box as follows:
pg 1: Same size as the first image frame
pg 2: Transparent (or opaque if your image has your webpage background)
pg 3: Upper left corner of the frame
      With the canvas color
pg 4: Yes, repeat the animation indefinitely
      Display time: 20
pg 5: Add image....browse to add the psp copy of your jogger image with 2 layers, then select NEXT
pg 6: Finish





Select the preview button view > animation to see how your animation will look!




If everything is OK, select save
The dialog box will appear to give your file a name.
Next, the 'GIF Optimizer' will appear.
Move slider to top for 'better image quality'.
On this same page of the dialog box, select customize. Under that tab, select the following settings:
256 colors (actually 255) and Optimized Octree
Select OK, then next, then next again.
A preview of the optimized file will display.
Select next again, and your final file size and approximate load time will be displayed. Then finish.

You're done! You can use the Preview button again to see how your final jogger looks!


Hope you enjoyed this tutorial and learned a little about Animation Shop!! ....Kate