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. 

  1. go to www.gifworks.com

  2. click File/File Open . . .

  3. under Method2, click "Browse" and select your GIF file

  4. click the "Upload Image" button

  5. 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)

  6. click "Edit/Add Transparency . . ."

  7. the "Transparify" window opens - click (within the gif image) on the color you want to male transparent

  8. the Transparify window will close when completed, and the new Gif will be displayed.  The color you selected will now be transparent

  9. click "File/File Save . . ."

  10. under "Method2" - right-click on the GIF and save it to your hard drive

  11. if desired, open it in ImageReady or GIF Animator and optimize the file size by reducing the number of colors in the palette

  12. 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:

  1. opened the three GIF images

  2. clicked on image2 to select it

  3. click on the tiny arrow at the right of the animation Palette (took 3 hours to find it)

  4. selected "Copy Frame"

  5. clicked on image1 to select it

  6. clicked on the tiny arrow at the right of the animation palette

  7. selected "Paste Frame" and checked "after selection"

  8. repeated the process to paste the image 3 frame into image 1

  9. now image 1 has 3 frames in the animation

  10. selected all frames in the animation palette

  11. right-clicked on the "delay" time, and select 0.2 seconds - it applies to all frames that way

  12. clicked File/Save Optimized as . . .  and save the animated GIF - DONE !!

Example:

The three Images

The Final GIF