Gifs and Transparency

Part I

When you're trying to save an image with a transparent portion for use on the Web, the choices can get downright confusing. In the next few tips, we'll explore the options and give you the details of what each option does to your image.

The most important thing to know is that only one color can be transparent. Many images that include Antialiasing (smoothed edges) also include many hidden colors. It's best to try to make the background color of your image the same color as the background of the Web page. If the Web page has multiple colors, try to make the background the most dominant color on the Web page background.

Keep in mind that there's a difference between the transparent background in Paint Shop Pro and a transparent background for a Web image. If you merrily create an image on a transparent background in Paint Shop Pro, thinking it will remain transparent when posted on a Web page, stop right where you are--it won't work. Web images need to have a limited amount of colors--256 or fewer. When you reduce the colors to save for the Web, the background color automatically becomes white. In the next few parts, we'll look at some of the different Transparent GIF save methods and what they do.

Part II

Perhaps the best way to save a GIF with a transparent background is by using PSP's Export GIF. When you click on the File menu and choose Export, Transparent GIF, a dialog box will pop up with many choices for settings. But before you get that far, here's a neat little trick to get an idea of what the image might look like when you post it on a Web site.

Open a new image by clicking on the File menu and choosing New. The Image Dimension should be 100 x 100. Next, click on the Flood Fill tool in the Tool Palette. Click on the Foreground Color box and select your color from the resulting dialog box. Click the Flood Fill tool on the image, and fill it with the color. Now, if your Web page background is going to be a pattern, open the pattern in Paint Shop Pro. Next, select File, Preferences, General Program Preferences. Click on the Transparency tab in the resulting dialog box. You'll see two color boxes in the Grid Colors section. If your Web page background is going to be a solid color, run the mouse over to the Flood Filled image you just made. Click on the image, and the color will appear in the Color 1 box. Repeat the process for the Color 2 box. Now the transparency is the color of the background of your Web page background.

If you have a patterned Web page background, click on the Color 1 box, run the mouse over to one of the main colors in the patterned image, and click again. Repeat this process for Color 2, clicking on the second most dominant color. Now the transparency will have at least two of the colors of the background for your Web site. The advantage is that when you use the Export Transparent GIF function in Paint Shop Pro 6, you'll be able to get a better preview of what your image might end up looking like when posted on the Web. In the next part, we'll focus on Export GIF.

Part III

In the previous part, we adjusted the Transparency colors in the Paint Shop Pro 6 General Program Preferences. Now it's time to export the transparent GIF. Click on the File menu and choose Export, Transparent GIF. The resulting dialog box is loaded with choices. We'll begin by looking at the Transparency tab. This is where you'll choose which portion of your image you want to be transparent. Within the Transparency area, notice the option None, which you can use to make the file size smaller. You can have control of how the image will look with a reduced color palette. Reducing the final colors in an image greatly reduces the file size. If an image is made up of only five colors, then there's no need for it to be a 256-color image.

Part IV

One of the neat things about Paint Shop Pro is the versatility of its Export functions. In our last tip, we talked about one of several functions available from the Export GIF option located on the Transparency tab. The next function you should take a look at is Existing Image Or Layer Transparency. This function will assist you in exporting GIFs that have a semi-opaque layer or GIFs that have a partial transparency. For examples using this function, visit:
http://www.digitalartresources.com/Tipworld/partialtransparency.htm

Part V

A very effective method of exporting a transparent GIF is to utilize Inside Current Selection or Outside Current Selection in the Transparency section of the Export Transparent GIF dialog box. Before you send your image off to the Export Transparent GIF dialog box, however, you must select the portion of the image that you want to make transparent. If you've created your image on a solid color background, you can use the Wand tool located in the Tool Palette and simply click on the solid portion of the image to make the selection. If the image is surrounded with multiple colors and designs in the background, you'll need to use the Lasso tool located on the Tool Palette to select the portion of the image that you want to be visible. For best results, check Antialias and set the Feather to 1 within the Tool Options Palette.

Now you can click on the File menu and choose Export, Transparent GIF. In the resulting dialog box, choose Inside Current Selection as the Transparency method if you've used the Wand tool, or choose Outside Current Selection if you've selected your object with the Lasso tool. Several options are available under the Partial Transparency tab. Finally, you'll be prompted to save the file. For an illustrated example of the methods, go to:
http://www.digitalartresources.com/Tipworld/selectiontransparency.htm