Animated GIF’s

Animated GIF’s with Transparency

How to do - and a Comparison of the Tools used to do It

An Animated GIF is a single image file that contains multiple images that play like a silent video. Until Flash came out - this was a breakthrough for websites. It still beats Flash as far as simplicity and the ability to create. In addition, unlike JPEG’s, animated GIF’s offer the ability to make one or more colors transparent – just as static GIF’s do !!!

GIF, which stands for Graphics Interchange Format, is a lossless method of compression. All that means is that when the program that creates a GIF squashes the original image down it takes care not to lose any data. It uses a simple substitution method of compression. If the algorithm comes across several parts of the image that are the same, say a sequence of digits like this, 1 2 3 4 5, 1 2 3 4 5, 1 2 3 4 5, it makes the number 1 stand for the sequence 1 2 3 4 5 so that you could render the same sequence 1 1 1, obviously saving a lot of space. It stores the key to this (1 = 1 2 3 4 5) in a hash table, which is attached to the image so that the decoding program can unscramble it.

The maximum compression available with a GIF therefore depends on the amount of repetition there is in an image. A flat colour will compress well - sometimes even down to one tenth of the original file size - while a complex, non-repetitive image will fare worse, perhaps only saving 20% or so.

There are problems with GIFs. One is that they are limited to a palette of 256 colours or less. Compuserve, which created the GIF, did at one point say it would attempt to produce a 24-bit version of the GIF, but then along came problem number two: Unisys. Unisys discovered that it owned some patents to key parts of the GIF compression technology, and has started demanding fees from every company whose software uses the (freely available) GIF code. This has somewhat stifled development.

There is a 24-bit, license-free GIFalike called the PNG format, but this has yet to take off.

Removal Method

– can cause Ghosting or Trailing if not set properly

Animated GIF images have a little-known but very important parameter called the “Removal method”. It dictates how portions or all of an image are removed as the next image in a sequence comes into view. If set wrong, it can have a disastrous effect on Transparent animated GIF’s, as each image’s visible area is retained and overlaid bt the next image’s visible area, creating a trailing effect. The proper Removal method for Transparent Anmated GIF’s is called “Background”, where the entire frame is removed, and then the next frame is layered upon the webpage background – which means the visible area is shown and any transparent areas reveal the background. Here is an example of the trailing effect - I wanted to use this GIF on my website, but it had no transparency and would show up as a rectangle - by making the green color transparent - it would display only the dog :

Before

without Transparency

After

using default Removal setting

retains previous frames

causing "Trailing" effect

After

using "To Background" Removal setting - removes previous frames

yielding a smooth animation

NOTE: the Background Removal method is not the Default on these utilities – you must select it !!!

GIF Animator 5.0

Smart - Automatically choose one of the two methods (Do Not Remove or To Background) depending on the frames.

Do Not Remove - The frame is not removed and any subsequent images are displayed over it.

To Background (use this for Transparent images) - Removes the frame and replaces it with the Web page background. If frames overlap evenly, then a smooth transition effect occurs.

To Previous State - Removes the frame and replaces it with the frame preceding it. If all the frames in the sequence are set to this, then a smooth transition from one frame to the next happens regardless of how they are overlapped.

Web Browser Decides - the Web browser playing the animation removes the frame. How this is done varies from browser to browser and is not recommended.

Note: The To Previous State option may not be supported by some Web browsers.

GIF Construction Set

Double-click on any frame to bring up the “Edit Image” window – there is no Menu option to bring up this Window !!! Ubderneath the Transparency picker - the Remove By combo box will allow you to specify how your image should be dealt with once its delay time has expired and it’s time to move on to the next image in your GIF file. There are four Remove By options, but only two of them are supported by all web browsers.

Nothing - your existing image will be painted over by the next image in your animation – for Transparent Animations – this will result in the awful “trails”

Background (use this for Transparent Animations) - your existing image will be painted over with the background colour or texture for your web page, and then the next image in your GIF file will be displayed.

Leave As Is – don’t use this option !!!

Previous Image - don’t use this option !!!

Image Ready

3 options:

Automatic

Do not Dispose

Restore to Background (use this for Transparent GIF’s)

The default here is “Do not Dispose” – same as “Nothing”. You need to change that to “Automatic” or preferably “Restore to Background”. To apply to all frames, click the first frame on the filmstrip at the bottom, then hold the Shift key down and cick the last frame. Finally, right-click and select “Restore to Background”.

The Tools - Compared

Tool	Magic Wand Selector	Transparent Color Across Frames	Single Transparent Color	Multiple Transparent Colors	Movie to Animated GIF	Image Editing Tools
Gif Animator 5	Yes	No	Yes	Yes	Yes	Yes
GIF Construction Set	No	No	Yes	No	Yes	No
Image Ready	Yes	No	Yes	Yes	Yes (but tricky and complicated)	Yes
www.gifworks.com	No	Yes	Yes	Yes	No	No

In short, GIF Animator and Image Ready are the most powerful tools. However, it is lacking one important feauture – you cannot simply select a colors and make them transparent across all frames of an Animated GIF. Instead, you have to do it one frame at a time. GIF Construction set is not worth the money - I guess you may want to use it's convert Movie to GIF feature, but GIF Animator also supports this.

The simplest tool, www.gifworks.com, has one great feauture – you can take an animated GIF and make one or more colors Transparent instantly !!! It will save you a lot of time if that is what you need to do.

Image Ready - the hands down Winner

Adding Transparency to an Animated GIF

open the animated GIF

make sure that “Layer/{Propagate Frame1 changes” is checked

click the first frame on the filmstrip at the bottom, then hold the Shift key down and cick the last frame. Then right-click and select “Restore to Background”.

click on Frame1 on the bottom filmstrip to select it

click the “Optimized Tab”

click the eyedropper tool and then click the color you want to be transparent

go to the Color Table palette and click the tiny Transparent (checkerboard) square

repeat if more colors need to be transparent

play the animation by clicking Play button at the bottom Frames view

if all is well: File/Save Optimized as . . . and save the file

www.GifWorks.com

The perfect (and free) method of making a color Transparent

This is an online GIF editor. The only thing I have used it for is to create transparent GIF’s.

go to www.gifworks.com
click File/File Open . . .
under Method2, click "Browse" and select your GIF file
click the "Upload Image" button
wait until the gif is fully loaded - if it is an animated gif - wait until all frames are loaded (the gif will be running like a video)
click "Edit/Add Transparency . . ."
the "Transparify" window opens - click (within the gif image) on the color you want to male transparent
the Transparify window will close when completed, and the new Gif will be displayed. The color you selected will now be transparent
click "File/File Save . . ."
under "Method2" - right-click on the GIF and save it to your hard drive
if desired, open it in ImageReady or GIF Animator and optimize the file size by reducing the number of colors in the palette
Done !!!

GIF Animator 5 - powerful tool, but transparency capability Sucks

This is a powerful utility by ULEAD . . . but . . . .

DO NOT USE THIS UNLESS YOU DO NOT HAVE IMAGE READY !!! Unfortunately, to create an animated Transparent GIF from images or an existing animated GIF, the process is a royal pain because you have to apply transparency to one frame and one object at a time - also you cannot simply pick a color to be transparent, instead you must use the Magic Wand to select an area to be made transparent !!! There is no way to select a color to be transparent across all frames. In fact there is no way to select a color to be Transparent even when working with one frame. YOU MUST first make a selection and then set the option to make that selection transparent – and you must do this frame by frame !!! What a horrible way !!!

File/New (and use any dimensions – we will replace them on the next step)

File/Open Image . . . open the first image

File/Add Image . . . repeat until all images are loaded

Now you will see the images as “Frames” on the bottom, and also as “Objects” to the right

One at a time click on the Frame you want to make transparent, and click on the corresponding object – BOTH MUST BE SELECTED

use the magic wand to select the color you want to make Transparent

click the “Selection Options” button at the top-middle

select “Make Selection Area Transparent” - repeat the last 3 steps for as many colors as you want to make transparent (zoom in to see edge pixels and select them for transparency)

repeat for each Frame

select all frames on the bottom – click the first frame, hold down the Shift key, and click the last frame - then go to Frame/Frame Properties, and set the Removal Method to “To Background” – this will stop any “trailing effects”

NOTE!!! if you have create an animated GIF in Image Ready and did not change the removal method to "Restore to Background" (the default, stupidly - is "Do not Dispose", which creates the trailing effect) - and then open the saved GIF with GIF Animator - no matter what removal method you select you will not be able to get rid of the trailing effect !! If this happens, reopen the GIF in Image Ready and set all frames to the correct removal method.

File/Save as . . . and save the file

NOTES:

the utility will automatically try to optimize by including only the visible portion in each frame – as shown in the following 4-frame animated transparent GIF:

GIF Construction Set

GCS has no selection Tool !!! However it not needed Same as GIF Animator – this has no way to set one color Transparent across all frames – instead you must do it one frame at a time.

File/Open . . . open the GIF

double-click on the first Frame to bring up the Editor – this will be “Image 2” since the first frame is usually the header

click “Transparent Colour” and use the eye dropper Tool to click the colour you want to be Transparent

set the Removal Method to “Background” to prevent trails (default=Leave as Is)

Done !!!

Creating an Animated GIF from Images - Image Ready

I used Image Ready - with the following steps:

opened the three GIF images
clicked on image2 to select it
click on the tiny arrow at the right of the animation Palette (took 3 hours to find it)
selected "Copy Frame"
clicked on image1 to select it
clicked on the tiny arrow at the right of the animation palette
selected "Paste Frame" and checked "after selection"
repeated the process to paste the image 3 frame into image 1
now image 1 has 3 frames in the animation
selected all frames in the animation palette
right-clicked on the "delay" time, and select 0.2 seconds - it applies to all frames that way
clicked File/Save Optimized as . . . and save the animated GIF - DONE !!

Example:

The three Images

The Final GIF