Making An Animated Image

                To make an animated gif requires a little creativity. For our example we will use three tools. MircoSoft Paint, MicroSoft Photo Editor and GIF Construction Set 32.

starting image

                Step 1: will be to open the image in MicroSoft Photo Editor and determine its size in pixels. After the image has been opened right click on the image with your mouse and select Properties.

starting image

The image is 112 by 44 pixels. This will help you to define how big the eyes need to be. You should also note that the glasses.gif file is a transparent gif. You may want to change this by unchecking the Transperency box and saving the image.

                Step 2: Open MircoSoft Paint and set the image size to 20 by 21 pixels by selecting "Image" & "Attibutes".

starting image


                Step 3: Draw the eyes.

starting image


                Step 4: Draw the pupil of the eye.

starting image


                Step 5: Paint the eye color.

starting image


                Step 6: Paint the pupil.

starting image


                Step 7: Add some reflections to the pupil.

starting image


                Step 8: Cut and paste the pupil to the left side of the eye.

starting image


                Step 9: Cut and paste the pupil to the right side of the eye.

starting image


                Step 10: You now have all the pieces you need to make the various images you will use to make the animated images. To do this you will need to open both the glass and eye gifs in MicroSoft Photo Editor. Select File and Open glasses1.gif and eye1.gif. Zoom out to 400...

starting image


                Step 11: Copy and paste the pupil to the left side of the glasses.

starting image


                Step 12: Center the eye in the frame of the glasses.

starting image


                Step 13: Paste the eye and add another eye in the right side of the glasses.

starting image


                Step 14: Save the first image and using the other eye images build the other images, looking right, looking left and eyes closed.

starting image


                Step 15: After you are done you should have four images that can be used to build your animated gif.

starting image starting image starting image starting image


                Step 16: Next, start the Gif Construction Set tool and open the first image.

starting image


                Step 17: Move to the Control line in the main form and double click on it.

starting image


                Step 18: The Edit Control Block form will pop up. The Edit Control Block form in the animated gif is placed before every image and is used as a setup for each image relative to timing and type of transistion between images. More will be said on this later.

starting image


                Step 19: Move to the Image line in the main form and double click on it.

starting image


                Step 20: The Edit Image form will pop up. This form controls some of the characteristics of the image like location, interlace and color palette.

starting image


                Step 21: OK, now you need to plan the sequence of images that you would like to use. We have created four images that we need will use. For our example we will use the following sequency...

  1. look straight ahead ... (glasses1a.gif)
  2. look left                ... (glasses1b.gif)
  3. blink                     ... (glasses1d.gif)
  4. look left                ... (glasses1b.gif)
  5. look straight ahead ... (glasses1a.gif)
  6. look right              ... (glasses1c.gif)
  7. blink                     ... (glasses1d.gif)
  8. look right              ... (glasses1c.gif)
  9. look straight ahead ... (glasses1a.gif)
  10. blink                     ... (glasses1d.gif)
  11. loop

                Step 22: Add the images as defined above and place a Control between each image and a Loop.

starting image


                Step 24: Once the images and controls have been change all the images and deselect the "Interlaced" button, change the "Removed By" option to (Previous Image) and adjust the contol timing "Delay".

starting image

starting image

starting image



                Step 25: You can view your results by selecting the View button and when you are satisfied with the results do a "Save As" and save the animated gif...
starting image


Transparent GIFs Home Tables