Simple Animated GIF
Each animated gif can be viewed as a short cartoon, with an option to re-run.
Think in terms of individual frames of an animation at first. Each frame of the final animation will become a layer in our graphics file.
In this example we'll take a static asterisk and make it move. This image:
will become this:
You can right-click on the above images and choose Save Image As... to save the files and work with them. Save the first asterisk now.
Open the saved file. It contains an 8 segment asterisk. The objective is to have each segment light up red in turn. Each frame of the animation will correspond to one layer in the image file.
Select all and then copy. This will copy the current layer into the clipboard for later use.
Now change the foreground colour to red.
- Choose the fuzzy-select tool. Click on one of the segments of the asterisk to select it. With your foreground colour bucket fill the selection area. The first layer is now complete.
- Add a new layer with transparency as the fill type. Paste the asterisk from the clipboard. Anchor the floating layer. Use the fuzzy-select tool to select a segment clockwise from the last segment. Bucket fill the selection area.
Repeat step 2 above until 8 layers are in the image with each layer showing one segment of colour, like this:
Now select each layer in turn and rename it to "Frame 1 (130ms)", "Frame 2 (130ms)" etc. The value in brackets is the time in milliseconds that each frame should be displayed before being swapped out for the next one. (There are 1000 milliseconds in 1 second.)
Now save the file as GIF (Compuserve Graphics Interchange Format). You'll be asked if you want to save this as an animation. Select that option and click Export:
Next choose to "Loop forever" and specify a delay of 130ms for any untimed frames:
Now open the file using your browser and see the results of your work. This method can be used for any other animations you can think of. The contents of the animation are limited only by your animation.
GIF is designed for for simpler graphics and therefore only stores 256 colours; it isn't suitable for photographs. For these use .jpg format or .png formats. However these formats don't support animations.
Last updated: 20120110-17:20