How to Create an Animation from Clip Art
Animated Golfer tutorial for Paint Shop Pro and Animation Shop

If you've never attempted to make an animated gif because you thought it would be too hard to draw the different positions needed to create the animated movement...well, now you can try it. With this tutorial we'll show you how to create an animated golfer from 3 similar clip art images, no drawing needed! We'll also add some 'in-between' action to the golf stroke by doing some creative cut & paste to the original clip art images. Again, no drawing needed to add these additional frames to the animation.

Although any version of Paint Shop Pro could be used to follow these steps, this tutorial was written specifically for Paint Shop Pro version X and for Animation Shop v.3. We will do all the image editing in Paint Shop Pro and then import image into Animation Shop. The image editing we'll be doing is pretty easy and suitable for a beginner to try (if you are familiar enough with PSP to know where to find the basic commands and tools).

Three things are necessary to accomplish this animation:

1) The Paint Shop Pro file must be saved in Animation Shop compatible format. As of this writing, the .pspimage format used with Paint Shop Pro 8, 9 and X is not compatible with Animation Shop. The format used by Paint Shop Pro 7 and older versions (.psp) must be used. Look for this file type in the SAVE AS dialog box.

2) Your Animation Shop preferences must be set to 'Keep layers as separate frames'. With this setting, Animation Shop will know, when opening a .psp file containing multiple layers, to keep those layers separate rather than merging them. Each layer will then become a separate animation frame. Animation Shop preferences can be found under File > Preferences > General Program Preferences. A more detailed explanation of this setting can be found in my Troubleshooting Tips.

3) Download and unzip the zip file below. It contains a Paint Shop Pro layered image of a golfer in 3 different positions. Be sure to keep it in .psp format (not .pspimage) so we can import it into Animation Shop. Also included in zip is a golf ball image.

In the following steps RC means Right Click.

Start with Related Clip Art Images

Match up image size and colors before proceeding

When I found 3 similar images of a golfer at Barry's Clip Art Server, each in a different position, the first thing I thought of was combining them into an animation. You can often find clip art of the same subject in different positions. Many times these images can be easily combined to create an animation. You may have to change some colors to make all images match exactly or you may have to resize some of them so they are all equal size.

Note: Many artists do not permit any altering of the original image under their terms of use. This usually includes altering image in order to animate it. Please respect the artist's copyright. For animating, it is best to use either your own or public domain clip art.

According to Barry's Clip Art Server, the 3 golfers are public domain clip art. The file you downloaded has been altered, so I thought I'd describe what I did to make the clip art suitable for animation. (1) Originally, each golfer was wearing different color clothes/shoes. I used the Color Replacer tool to change colors so all golfers would match; (2) One guy was a little shorter than the rest, so he was resized; and (3) the 'green' for each golfer was different, so I replaced the 'green' with a new one that is the same for all 3 golfers.

These particular images also needed a lot of cleaning up. The clip art file format was JPEG, which is the wrong format for this cartoon-style graphic with large areas of solid color. These areas of solid color were full of JPEG artifacts...stray pixels of varying colors. These artifacts will probably look even worse when we save our final animation...or could even ruin it. So all artifacts were cleaned up (painted out) before resizing. The end result is a much sharper image.

Note: An artifact is the result of an aggressive data compression scheme that discards some data...known as 'lossy data compression'. Compression artifacts occur in many common media formats including JPEG images. Several types of artifacts can appear which are discernible and objectionable to the user. These include noise around edges and/or checkerboarding in busy regions.

After the original 3 golfers were cleaned up, they were combined into one Paint Shop Pro image with 3 layers. We could create an animation with just these 3 images, but the golfer's stroke really needs 1 or 2 more positions to create a smooth animation...called 'tweening' or 'in-between' action. The transition between GOLFER 1 and GOLFER 2 is missing the down-swing! We'll add that next.

Separating arms from body

Cleaning up arm cutout

Open the downloaded file 3golfers.psp in Paint Shop Pro.

In this step we'll separate the arms holding the golf club from the rest of the him so we can place them in other positions.

Hide visibility for all layers except GOLFER 1. Duplicate GOLFER 1. (RC layer button, select Duplicate). Zoom in 250% or more.

Use Freehand Selection tool to select both arms and golf club. Draw a selection that encloses the golf club, the arms and black outline. You don't have to be precisely accurate when making selection ... don't drive yourself crazy...LOL. We'll just clean up the cutout in next step.

Tool Options: Freehand or Point to Point, Replace, Feather-0, Smoothing-0, Anti-alias checked.

Copy this selection; Paste as New Layer; de-select.

To make explaining things a little easier ...let's all rename the new layer 'ARMS'.
[To rename layer....(1)click directly layer name until it blinks and then retype layer name; (2) double click layer button; or (3) RC layer button, select Rename.]

On this ARMS layer, use the Magic Wand to select portion of chest area that was copied and remove it. Erase any other stray pixels until you have a clean cutout of the arm. If you hide visibility for all other layers, it will be easier to see what you're doing.

Tool Options: Mode: Replace RGB Value, Tolerance 20, Feather 0, Contiguous, Anti-alias and Outside selected.

As shown in above image, you will remove anything outside black lines. Use Eraser tool where necessary to clean up edges. If you erase too many pixels and end up with some hard edges, either use Undo and start over or use the Soften Brush (size 2-3, about 85 hardness) to go back over the black line to soften the edge a little. Careful...not too much blur.

Note: In PSP X, the Soften Brush is in the same flyout menu as the Color Replacer and Push tool....located in Tool palette between the Paintbrush and the Eraser.

Preparing body for new position

Finished armless body ready for some new arms

Now we need to make an 'armless' body before we can create a new position for the golfer. Hide visibility for ARMS layer and make COPY OF GOLFER the active layer. Rename this layer BODY.

In previous step we could have used Cut to remove arms instead of Copy...but if we had Cut the arms out, it would have left too much of the body and face to repair. It's easier to just paint out or erase what we don't need. On BODY layer, paint out the arms (with orange) where they cross the chest and cut the rest of arm and golf club from the background area.

Leave the shoulder line as is. Repair the missing line along the side of chest by painting or drawing a black line along the edge. Use the Soften Brush to soften the edges of this line, if necessary. Zoom out when done.

There...now you have a body blank that can be mated to the cut out arms/golf club in a number of different positions.

Creating Some In-Between Action

Erase portions of arm after pasting into the 2 new positions

For some added in-between action, we want to make 2 more positions for our golfer. Duplicate the BODY layer. [RC layer button, select Duplicate]

Select ARMS layer and duplicate that also. You should have 2 each of BODY and ARMS.

With the first ARMS layer selected, select Image > Free Rotate. In the dialog box, check Left and Free, enter 30 in the box. Make sure All Layers is UNchecked.

With the COPY OF ARMS layer selected, select Image > Free Rotate. In the dialog box, check Left and Free, enter 60 in the box.

Hide visibility for ALL layers except for 1 BODY layer and 1 ARMS layer.

Use the Mover tool to position arm onto body so that shoulders line up (making sure end of golf club stays inside canvas area).

You'll notice that part of his right arm is in front of the body....that's not physically possible! ;-) We must erase that part of image so most of right arm looks hidden behind body (his right, our left...see red circle in above image). Zoom in close and erase this overlap.

Then select RC Merge > Merge Visible

Hide visibility for ALL layers except for the other layer named BODY and the other ARM.

Repeat above steps to position arm #2 on body #2. You'll also have to erase the small bit of right arm that is in front of body #2.

Select RC Merge > Merge Visible.

Prepare Arms and Body for One More 'Between' Frame

Rename layers starting from bottom

By adding 2 more layers for the golf stroke, we've given our golfer a better transition from start to finish of the golf stroke. It may not be the best golfing form, but, hey, this is a cartoon! LOL You should now have 5 layers, GOLFER 1, MERGED, MERGED, GOLFER 2 and GOLFER 3.

Let's rename layers again...renaming will make it easier for me to explain each step and easier for you to follow. Click the name on each layer, starting at the bottom, and name them GOLFER 1, 2 , 3, 4 and 5 in order. GOLFER 2 and GOLFER 3 will be the 2 layers we just made....make sure these 2 layer buttons are in the correct order for the golf stroke sequence.

Hmmm....now I see there's a big jump in the golf club's position between GOLFER 3 and GOLFER 4. I think we need one more position between these 2 layers. Let's repeat previous steps to create a new arm/stroke position, but this time we'll use GOLFER 4 as the body model.

Blending Cutout with Original Image

Steps involved in creating this frame of animation

Now it gets a bit tricky. How do we get this arm placed in a believable position that will improve this guy's golf stroke? I think we can do it with some creative Cut & Paste. Refer to above image.

Step 1. On body layer for GOLFER 4, paint out the arm that is crossed over chest using the orange shirt color. Select the rest of arms and golf club and cut.

Step 2. Rotate the new arm layer. Image>Free Rotate Click the radio button for Right and for Free. Enter 45 in box.
Select the new arm layer and duplicate it. RC layer button, select Duplicate. The uppermost arm layer will be the golfer's right arm. The other arm layer will be his left arm.
Remove the golf club from the left arm (lower layer). Use Freehand Lasso to select and cut everything from elbow to end of club as shown in above image.

Step 3. Use Mover tool and move what's left of the left arm over so it is next to the body and shoulders line up.

Step 4. Now we can move the right arm into position. Line shoulder of arm up with shoulder of body.

Step 5. The chin area looks a little awkward in step 4, so let's improve that by extending the chin so it looks like it is in front of left (rear) shoulder. Select the GOLFER 4 layer and, with the Magic Wand, select the flesh colored part of his face. Enlarge this selection by 2 pixels. Selections > Modify > Expand
Use Eyedropper to select the face color from GOLFER 4. Move to the layer containing the partial left arm and use Paintbrush to paint inside the selection to extend the chin.
When done filling in the flesh color, de-select. Change paint color to black (no fill). Use Pen tool to Draw Freehand line that outlines the 'extended' chin, ending the line where it matches up to existing face outline. Create on Vector is UNchecked, Line Width is 2 and Anti-alias is checked.

Chin should look similar to Step 5 image. Isn't that better than how it looked in Step 4?

Now you can merge the 3 parts of golfer 4 by right-clicking GOLFER 4 layer button and selecting Merge > Merge Visible. (Before you do that, double-check to make sure visibility for all other layers is hidden.)

Add Golf Ball to First 3 Layers

Add golf ball to green in these 3 views

This animation just might be a little more interesting if there was a golf ball involved! But, before we add one...let's check to make sure all the golfers on all the layers are lined up right on top of each other so they won't jump around when we create the animation. Zoom in close. Turn on visibility for each layer, one at a time, and make sure the green is precisely lined up with the layer below it. If it is, everything else should fall into place.

Select the slightly off-white color from the eyeballs for the golf ball fill color. Black for the outline color. It will be a lot easier to see what we're doing if we turn off visibility for all layers except the one we're working on. Start with the bottom layer, GOLFER 1.

Another thing that will make this step easier is to create a new layer for GOLF BALL above the GOLFER 1 layer. Having it on a layer by itself will make the process of duplicating and aligning a whole lot simpler.

Use the Preset Shapes tool to draw a small circle to represent a golf ball on the GOLF BALL layer. Place it near golfer's feet, but not too close (see image above). Make it larger than it would be if you were drawing realistically.

Tool options: Ellipse tool with Circle mode selected. Show Nodes & Create on vector unchecked. Line style solid, width 2, anti-alias checked.

For the golf tee, use the Text tool to enter the letter T using the font Arial, size 20 pixels, Bold. Fill color is black.

Position the golf ball and tee where they look best and then duplicate the layer twice. RC Duplicate

Hide visibility for all layers except GOLFER 1 and one of the GOLF BALL layers. RC Merge>Merge Visible
Hide visibility for all layers except GOLFER 2 and one of the GOLF BALL layers. RC Merge>Merge Visible
Hide visibility for all layers except GOLFER 3 and the remaining GOLF BALL layer. RC Merge>Merge Visible

Hitting the Golf Ball Toward Viewer

Optional message added to ball

On layer 4 (Merged layer), the golfer looks like he has already hit the ball. For this frame, let's place the golf ball as if it is flying toward the viewer.

Hide visibility for all layers except golfer on MERGED layer.

Copy and paste the golf ball that was downloaded in the zip file onto this MERGED layer. Optionally, you could draw a plain circle for the golf ball or use a tube image. Position the ball near center of image as shown above.

Other options:

Say Hi. You can place a little message on the ball ....or not. I decided to say 'Hi' on my golf ball. You could add something different, maybe your name or initials...or some computer shorthand like TTYL or BBFN.

Add sig. To add a sig to the green, use the 'duplicate/merge visible'' method we used in previous step to add a golf ball to the green. If you add your sig or a message, make sure your text is placed in the EXACT same location on EVERY layer. If it is just 1 pixel off alignment, it will bounce and jump around. Not good! ;-) Use the Zoom tool and look very, very close at your alignment with layer beneath it.

Look at you. You could also make the golfer on the last 3 layers look straight at the viewer after he hits the ball. Zoom in very close and use the off-white eyeball color to paint out the black pupils. Then use a small black elongated ellipse to draw a new pupil that is looking straight ahead...looking toward you. Copy this ellipse shape and paste it in all eyes on the top 3 layers.

Looks like we're ready to import the file into Animation Shop and get this guy moving!

Import into Animation Shop

Filmstrip in Animation Shop

Before the final save, double-check that all layers are visible and opacity is set to 100% and then save as an Animation Shop compatible file type ( .psp) without merging layers.

You can close Paint Shop Pro now, we won't need it any longer.

Open Animation Shop and open your golfer image.

[Note: You can use File > Export to Animation Shop if you prefer. I didn't suggest it because not all versions have that command.]

If you set your preferences to 'Keep layers as separate frames' as mentioned in the beginning of this tutorial, your Paint Shop Pro layers are now displayed as individual frames in a filmstrip. However, the first frame may be the only one visible. If so, use your cursor to grab the right edge of the filmstrip. When it turns into a double-headed arrow you can drag the filmstrip to the right to display multiple frames. Use the bottom slider to move thru frames.

The first thing we need to do is change the display time (also called delay time) to something slower than the default of 10/100 of a second, which is too fast for our golfer! The display time is indicated by D:10 underneath each frame. If this is not visible, you will need to change your preferences to make visible. Select File > Preferences > General Program Preferences and check the box that says 'Display frame numbers, delay time underneath frames'.

To change the delay time for every frame at once, click Edit > Select All to select all frames. Next click Animation > Frame Properties or RC Frame Properties. In the dialog box, change display time to 25.
Note: A selected frame will be indicated by a blue border.

Preview the animation by selecting View > Animation (or RC View Animation or click the 'filmstrip' preview button on the toolbar).

Does it look OK to you? If you want him to move slower, enter a higher number. A smaller number would, of course, have the opposite effect. You will need to close preview before making any changes.

I think it needs to pause a little longer in a couple of places. Select just frame 4 (F:4) and change the display time to 30. Next select the last frame and change the display time to 120 for a longer pause at the end of the golf stroke before animation repeats.

Preview again. Look OK? Good. Close preview window.

Save and Optimize

To help keep final file size for our animation as small as possible...let's try cropping the canvas size down to the smallest possible dimensions.

Select Crop button from toolbar (it's next to the Mover tool). Three new buttons will appear above the toolbar when Crop is enabled. Select the Options button. In the popup dialog box, select 'Surround the Opaque Area'. Click OK. A crop box now appears in each frame. Look at its placement in each frame to make sure this is what you want. Select the large Crop button next to the Options button to apply (or Clear...if you need to start over and do it by hand.).

Click the Save button. The Save As dialog will appear so you can name your animation and then the GIF Optimizer will appear [Animation Quality vs. Output Quality]. Moving the 'Better Image Quality' slider down will reduce the file size by lowering image quality but it should be OK to keep the slider all the way to top for this simple animation. Click the 'Customize' button in this dialog and review all the settings for color, optimization and transparency. I selected 'Optimized Octree'.

Make your selections, click OK and Next, Next, Next, Finish. You can undo the optimization if the final result is not to your liking and you want to try again with different settings. Edit > Undo
If you have any questions, please refer to my animation troubleshooting tips.

I'm sure there's many, many other clip art files out there that could be combined to create an animation. Good luck finding some for your next animation project! Enjoy!

Content and images* are the exclusive property of ArizonaKate.com. This tutorial may not be copied, sold or distributed in any format, including sending by email or posting in forums, without first obtaining permission from Arizona Kate.

Graphics Groups may link to tutorials, but may not copy. Please take the time to read Terms of Use and FAQ. A limited license is herein granted for personal use only. If you are interested in a license to reproduce tutorials or images, please contact Arizona Kate.

*Copyright Exclusions: Fonts and dingbats will sometimes be used to create tutorial images and I do not claim copyright for these. Banners and logos linking to other sites are property of the respective website. Scripts have been used with permission as noted in source. Many 'Arizona Kate' character images created from commercial clip art or photos and from dingbats.