How to Make an Animated Border


ANSWER: Make your animated GIF with the width size of 800 pixels or longer, and set images at the left margin. Use this image as a background.

If you understand immediately what you should do, then you may not have to read following instructions. Go to your paint soft, and make your original animated stationary.
But if there's any uncertainty, reading below may help you. Go ahead.

I.  What is GIF, and animated GIF?

GIF is the abbreviation for Graphic Interchange Format. This format is used in compressing image files. The unique feature of this format is the ability of making animated images. Both static image and animated images called GIF file, and in Windows same extension ".gif" is used. So it is sometimes confusing.

Here is a simple animated GIF:

origami

And this is a combination of two static images. To be short:

origami_1  +origami_2 = origami

Note that both static GIF and animated GIF can be used as a background image in the html document. (Web page or HTML email)

II. What you need in making an animated border

  1. Paint program: Paint Shop Pro is famous, but any kind of those can handle GIF file.
  2. GIF animation program: GIF Construction Set (for Windows, shareware) and GifBuilder (for Macintosh, free ware) are famous, but any kind of those can make animated GIF. (Animation Shop is included in PSP 5.0 and above )
  3. Browser and html editor (or text editor): Netscape Communicator is my favorite. (^_^)
  4. If you are going to use already existing animated GIF, downloaded file of the image.

III. Procedure

Following instruction is supposed you are modifying a ready-made animated GIF.
  1. Extract static GIF files from an animated GIF file. GIF animation program should support this feature. Save each files.
  2. Open one file using paint program.
  3. Change the size of image. Usually width is less than 200 pixels. Expand width to 800 or more. Most 15 inch monitor users select 800x600 resolution, but 17" users may 1024x768 and there are some 21" users. So 1280 pixels may required.
  4. Move the image in the left edge of the new image area, and save. (See example below)
  5. Repeat step 2 from 4 to each files.
  6. Reconstruct new static GIF files to one animated GIF file using GIF animation program.
  7. Apply new animated GIF as a background image in the html document.
Example:

origami_1

This original image is 79x52 pixels. And a new image should be like below.

This image is 600x80. Width decreased in order to presentation. Upper and lower margins added.
 

Joji Ikeda (^_^)
 

The crane Origami folding GIF was copied from Kaleidoscope.
Falling leaves border was made by the author.

Back to Index