PI6 Animated Ghost GIF

I used this little animated ghost image in the Halloween Page Template tutorial. You can right click and save it to your own hard drive if you want to use mine.

If you want to learn how to make your own, this tutorial will show you how. It's pretty easy and it's fun!

Start with a new 275 X 200 pixel image with a black canvas. Select the Path Drawing tool. In the Attributes toolbar, click Shape and select the Spline tool. Click in the Color box and choose white. From the Mode dropdown list, select 2D.

Click to start drawing, making a head and body like this one. Remember to click, drag and click around the shape you want to make. Curve the previously made line after you click. You have to double click to close the path completely.

Don't worry about getting it perfect, you can always make another one if you don't like the first one. And you can select Object, Convert Object Type, From Path to Image, then select the Object Paint Eraser to fine tune the shape.

Click in the base image to deactivate the ghost body. Now click and drag again to make a primitive looking arm like this one. Double click to close the path.

Switch to the Transform tool. Right click on the arm object and Duplicate. Use the Attributes toolbar's "Rotate & Flip" options to Flip Horizontally. Select the Pick tool. Position the arms on the sides of the body. Use the Attributes toolbar's Order options to send the arms behind the body. Right click, Select All Objects, then right click and Merge as Single Object. Position it way over in the lower left corner of the base image.

Select the Paintbrush tool. In the Attributes toolbar, select a round brush, size 5, Soft edge=5. Click in the color box and choose orange paint. Paint a ribbon and bow around the ghost's neck.

Select the Outline Drawing tool. Click Shape and select Circle, 2D Mode, black. Click Width and select 1. Click Line and make sure you have a solid line. Draw a small circle for the nose and position it under the eyes.

Select the Path Drawing tool. Click Shape and select Custom Shape. When the Custom Shape box opens, choose Circular 3. Draw a small mouth for the ghost. You'll only use half of the object. Choose Object, Convert Object, From Path to Image and erase the top half.

Rotate the "smile" about 20-25 degrees clockwise and position under the nose. Right click, Merge All. Select the Paintbrush, black paint, and paint little curved "cheeks" on each side of the smile. The ghost is done!

Save the image as a BMP file to your Desktop (or some other convenient location) as frame1.

Choose the Path Drawing tool. Click Shape and select Circle, 2D Mode, white. Draw a small circle and position it like the beginning of a "thought bubble." Right click, Merge, and save as frame2.bmp. Right click, Undo, so the object is active again. Don't move it, you just don't want it merged anymore.

With the Path Drawing tool, draw another circle, slightly smaller, and position it as shown. Right click, Merge All. Save this as frame3.bmp. Right click, Undo, then click on and delete both of the little circle objects.

Time to add the BOO! text to the image. Select the Text tool. Click in the base image to open the Text Entry Box. Choose a fairly broad and heavy font. I used Showcard Gothic, size 20. Type BOO! and click OK.

From the EasyPalette's Wrap Gallery, Text Wrap, double click on Text Wrap 4. Reposition the text as needed. Right click, Merge. 

Select the Paintbrush tool. With a small brush and white paint, paint out the ghost's mouth. Use the Path Drawing tool to make a black 2D ellipse shape for an open mouth. Right click and Merge. Save this as frame4.bmp.

Now it's time to put the four frames of the animation together. In the upper right corner of the work space click Switch and select Ulead GIF Animator 4.

When the GIF Animator opens, select Animation Wizard. Doing so opens a series of dialog boxes in which you choose images for the animation. When you have stepped through the Wizard, you'll come to a screen with four tabs. You can perform specific tasks from each tab, but for now click on the Edit tab. If you need to "clean up" or correct anything on the images, you can do it from here. In the left pane is a list of all of the frames in the animation. Click on each one and change the Delay value as needed.

 

Here's the Delay I used on my animation: frame1=100; frame2=50, frame3=50 and frame4=75. I wanted the BOO! image to last a little longer and for there to be a slightly longer pause when the image returned back to the first frame. Click on the Preview tab to view the animation. Tweak settings as needed. 

When you're ready to save the animation, click the Optimize tab. Select the GIF Optimized 256 preset and click the Optimize Now button, leaving all other defaults as they are. You'll see that the file size has been reduced from 20 kb to 6 kb, a significant saving in file size. Select File, Save As and save the animation to your hard drive. Now you can use it to build your Halloween web page.

This tutorial uploaded 10/13/00

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.