TRANSPARENT BACKGROUND IMAGES

A brief primer on how to create transparent GIF images


Some images look better if their background color matches the browser window,
making the image appear to float in the window.  You can't do this by setting
the background color of the image, since you can't control how people will
configure their browsers.

You can control this by using GIF89a images, which have the ability
to mark a single color in the colormap as transparent, forcing the
browser to use its background color for those pixels in the image.


Here's a cookbook way to create a transparent background image:

   
       Capture the initial image
   
       You can do this with a variety of tools.  Sun workstations come with
       snapshot, a handy tool for grabbing windows and regions of your
       screen.  You can also steal the image from an online image archive or draw it using
       any of a number of drawing tools.  I've used Frame Maker to create images
       along with xpaint (available from ftp.x.org/R5contrib/
       as xpaint-2.1.1.tar.Z, a paint tool for X Windows.  
       
   
       Isolate the background
   
       If the image does not have a single background color, you'll need
       to touch it up with some paint program.  Sometimes you can get a single
       background color by merging color map entries using a tool like xv;
       I've also converted images to PCX format and repainted the background 
       areas using MicroSoft Draw, running under the Wabi Windows emulator 
       on my workstation.
       
       In any case, the goal is make sure that the background of the image is a
       single color that isn't used anywhere else in the image.  This is
       important, since any pixel in the picture using that color will disappear
       when it is finally displayed in a browser window.
       
       If possible, make the background color light gray (I use RGB values 207, 207, 207)
       so that the image will still look somewhat transparent when viewed with a browser
       that doesn't support transparent images.
       
   
       Make the background transparent
   
       If your image isn't already in GIF89a format, you'll need to convert it.
       Most GIF images are in GIF87a format, which doesn't support the 
       transparency features.
       
       I use a little program called giftrans to effect the translation.
       Giftrans converts GIF87a images to GIF89a, and lets you specify which
       entry in the colormap represents the transparent color.  Depending on your
       platform, needs, and skills, you might want to download
       
       
	  Giftrans source code for Unix
	(available from ftp.rz.uni-karlsruhe.de/pub/net/www/tools/giftrans.c)
	  
	  Giftrans documentation (nroff format)
	(available from ftp.rz.uni-karlsruhe.de/pub/net/www/tools/giftrans.1)
	  
	  Giftrans.exe executable for DOS
	(available from ftp.rz.uni-karlsruhe.de/pub/net/www/tools/giftrans.exe)
       
       
       To use the tool, just type
       
       giftrans -t index GIF87a-file > GIF89a-file
       
       This converts the GIF87a-file to a GIF89a-file, with the index
       entry in the colormap made transparent.  You can also specify the 
       color as an RGB triple or an X Windows color name; invoke giftrans 
       with the -? option to see a complete usage description.
       
       To determine the index of the background color, view the image using 
       xv and open the color editing window.  Click on a pixel in the 
       background area of your image, and you'll note that a color in the 
       editing window is highlighted.  This is the background color.  To 
       determine its index, count colors (starting at 0) from left to right,
       top to bottom, until you reach the highlighted color.  This value is 
       the color's index in the colormap.
       
       NOTE:  Make sure you understand the difference between a color value 
       and a color index.
       
       As an alternative, you may wish to use the GIF89a conversion tools in 
       the PBM toolkit.  After obtaining and compiling this package, you'll 
       have (among many others) two programs: giftopnm and ppmtogif.  You use 
       these tools to create a transparent image like this:
       
       giftopnm GIF87a-file | ppmtogif -trans color > GIF89a-file
       
       
       Ppmtogif requires that you specify the color as the actual X-compatible 
       color, instead of the index of the color in the color map.  This means 
       you can use an RGB triple or a name in the X color database.  In 
       practice, I had trouble specifying a color name due to the way PBM was 
       configured when I built it.  Instead, I used a hexadecimal RGB triple, 
       like this:
       
       
       giftopnm orig.gif | ppmtogif -trans #CFCFCF > new.gif
       

       In this case, my background color was gray, so I used the #CFCFCF 
       triple (CF is 207 in hexadecimal) to convert the gray pixels to 
       transparent.  
       
       Some people have pointed me to another transparency tool called 
       Giftool (available from http://www.homepages.com/tools/giftool).  
       Giftool handles transparency and can also be used to enable image 
       interleaving.
       
       Finally, Mac users may want to use Transparency (available from
       http://www.qub.ac.uk/sigweb/mac-comms-utils.html#stillc), a Mac GIF 
       transparency tool.  I've not used this tool, so I cannot answer any 
       questions about it.
       
   
       An Example
  
       The buttons on my home page all have a transparent component.  I 
       started by drawing the button in Frame Maker 4.0, tweaking the shading 
       on the border of the button and leaving the background white.  I 
       grabbed this image right off my screen using a screen grabber.
       
       Then I loaded the image into xv and changed the white entry in the 
       colormap to be gray (207, 207, 207).
       
       Finally, I used giftrans to to change the gray entry (color map 
       entry 6) to transparent:
       
       Normally, I wouldn't leave a transparent border around an image (notice how there is a two
       pixel border visible in the first and second images), but my browser 
       puts a highlighted border around images used in anchors.  Since these 
       buttons are designed to be used as anchors, the "anchor ring" 
       interferes with the shadow effect, ruining the appearance of the 
       button.  By adding the border, the ring is detached from the shadow, 
       the effect is retained, and the ring still indicates that the image 
       is mousable.
       
chuck.musciano@harris.com