GIF

PAGE (2 of 4)

Transparent GIFs

Non-Transparent

The GIF format optionally allows one color of an image to be specified as a transparent color. In the Web browser, this causes any underlying image or background to replace the transparent color in the image or 'show thru'. Given the original non-transparent gif in Figure 1 below, one can observe that the gray background of the table does not 'show'thru' the image.



Fig. 1

Transparency

The same GIF image can be saved specifying black as the transparent color, as shown in Figure 2. The problem with the display of the image in Figure 2 is that the transparent color, (black), exists in other areas of the image besides the border. (Depending on the image, this can in a few instances be used to create a startling effect.)


Fig. 2

The above problem with Figure 2 can be solved by using an image processing program to change, (paint), the color of the black borders to a color that does not appear elsewhere in the image. (Care must be taken to only alter the black border pixels and not the interior black pixels.) This remapped color can then safely be set to be the transparent color.

Feathering

 

A better solution would be to select the part of the image not to be made transparent and then soften the edges of the selection by anti-aliasing against the desired background, (some image processing programs term this effect 'feathering'), and then optionally setting the background color to be transparent. The results of this technique can be seen in Figure 3.


Fig. 3

Paint Shop Pro Transparency

In order to set the transparency of an image, right click on the figure 1 image above and select "Save image as..." from the pop-up menu to save the image to your hard drive. (Alternatively, you may click here to perform an FTP download of the image.)

Locate the Paint Shop Pro image processing application from the , Program menu. Open the saved image file in Paint Shop Pro. From the File menu, select Save As... From the Save As file dialog window click on the Options... button, (in the lower right corner). From the File Preferences window, (select the Gif tab), choose the Set transparency to background color and hit the Preview button to see the results. (The following link will allow you to view a screen capture of the Paint Shop Pro transparent gif process and results in a separate window.)


 


© CS Dept Va Tech, 1997-1998.

All rights reserved.