Transparent GIFs and PNGs
| [ LiB ] |
Transparent GIFs and PNGs
One of the reasons that GIFs and PNGs are so useful for Web graphics is that they allow transparency in your images. GIF lets you translate a single color to transparency. The PNG specification allows you to translate more than one color to transparency, and semitransparency is also allowed. In this section, we'll look at some do-it-yourself methods of creating palette transparency. Later in the chapter, we'll look at the GIF Optimizer and PNG Optimizer, which make it especially easy to optimize your Web images and produce palette transparency.
Reducing Color Depth
When you start working on a transparent GIF, you'll likely begin with a 24-bit color depth, because this makes all of Paint Shop Pro's filters and other operations available to you. When it comes time to set your transparent color, however, you need to reduce your color depth to 256 colors. To reduce the color depth by hand, choose I mage > D ecrease Color Depth > 2 5 6 Colors (8 bit). When the Decrease Color Depth - 256 Colors dialog box opens, choose the Palette and Reduction method (and other relevant options, if any).
NOTE
CAUTION
Although PNGs normally have 24-bit color depth, Paint Shop Pro reduces the color depth to 8 bit if you set a transparent color with I mage > Set Palette T r ansparency. And, as with GIFs, you can set only a single, completely transparent color in an 8-bit PNG.
You can maintain 24-bit color and still get transparency (and semitransparency) with PNG by adding an alpha channel. Be aware, though, that not all browsers properly display PNGs that have an alpha channel. For now, the safest way to get transparency with PNGs is to use 8-bit paletted color.
Eliminating Dithering
If you use Decrease Color Depth and choose one of the reduction methods that produces dithering, you should check whether the color that you want to translate to transparency has become dithered. Keep in mind that only a single color can be translated to transparency, so if you have dithering where you want transparency, you need to eliminate the dithering. Use the Zoom tool (the magnifying glass) to zoom in on your image to look for dithering. Figure 9.1 shows an example of an image with a dithered background.
Figure 9.1. Image with a dithered background (magnified 250 percent).
NOTE
NOTE
Dithering is the process of mixing together two or more different colors that occur in a Materials palette in order to approximate another color that doesn't occur in that palette.
If you want to eliminate dithering, use the Color Replacer tool (discussed in Chapter 2, "More Painting Tools"). For the image in Figure 9.1, most of the dithered background is a medium blue, which is sprinkled with dots of two different shades of light blue.
To eliminate the dithering, take the following steps:
-
Choose the Color Replacer. Set the Foreground color in the Materials palette to the color that you want to translate to transparency by clicking with the Eye Dropper on a pixel of that color in the image.
-
Right-click a pixel of the color you want to eliminate from the background to set the Background color in the Materials palette.
-
If the Background color set in the Materials palette isn't present in the image except where you want to eliminate that color, just double-click in the image.
-
If, however, the color that you want to eliminate from some areas in your image also appears in other areas where you'd like to keep the color, you need to carefully paint with the Color Replacer to eliminate only the dithering in the area that you want to translate to transparency. If the dithering in your image includes more than two colors, repeat this process with the other dithering colors until you've cleaned up the whole area so that it is only a single, solid color.
Figure 9.2 shows a cleaned-up version of the image shown in Figure 9.1.
Figure 9.2. Cleaned-up version of the dithered image (magnified 250 percent).
NOTE
NOTE
Of course, it's even easier if from the beginning you don't have any dithering in the area that you want to translate to transparency. One way to achieve this is to use the GIF Optimizer and on the Colors tab set the amount of dither to a very small value, preferably 0. If you use a color selection method other than Standard / Web-safe, you're quite likely to get the results you want without compromising image quality.
Setting Transparency
After you have a version of your image with a single, solid color in the area that you want to make transparent, you're ready to set transparency.
NOTE
CAUTION
Be sure that the color used for transparency occurs in your image only where you want transparency. All occurrences of the color will be translated to transparency, so you need to be careful.
Paint Shop Pro provides three ways to set transparency. One method makes use of the GIF Optimizer, discussed later in this chapter. The other two methodssetting the Background color and setting the palette indexmake use of the I mage > Pa l ette > Set Palette T r ansparency operation.
The first method that makes use of I mage > Pa l ette > Set Palette T r ansparency enables you to set transparency based on the current Background color as set in the Materials palette.
-
Set the Materials palette's Background color to the color that you want to translate to transparency by choosing the Eye Dropper tool and right-clicking the appropriate color in your image.
-
Choose I mage > Pa l ette > Set Palette T r ansparency. You'll then see the Set Palette Transparency dialog box, shown in Figure 9.3.
Figure 9.3. The Set Palette Transparency dialog box, with transparency set to the current Background color.
-
Select Set the transparency value to the current background color .
-
If you like, you can proof the result before actually setting the transparent color by clicking the Proof button. To set the transparent color, click OK.
The second method that makes use of I mage > Pa l ette > Set Palette T r ansparency enables you to set transparency by entering the palette index.
-
Choose I mage > Pa l ette > Set Palette T r ansparency to open the Set Palette Transparency dialog box, shown in Figure 9.4.
Figure 9.4. The Set Palette Transparency dialog box set to palette entry.
-
Select Set the transparency value to palette entry and fill in the appropriate palette index.
If you don't already know what the index is, move the cursor to your image. The cursor changes to the Eye Dropper tool, and you can click the color you want for the transparent color. This enters the palette index for you automatically.
Alternatively, you can click the color box on the right to call up the image's palette, displayed in a dialog box titled Select Color From Palette. Then click on the appropriate color swatch in the displayed palette. As shown in Figure 9.5, the color's swatch in the palette is then highlighted, with the palette index displayed at the bottom portion of the palette, along with the RGB values and HTML specification for the color.
Figure 9.5. Palette index is indicated in the image's palette.
Click OK in the Select Color From Palette dialog box, and the palette index will be inserted in the Set Palette Transparency dialog box.
-
Proof the result, if you like, by clicking the Proof button. Click OK to set the transparent color to the color with the palette index that you specified.
No matter which method you use, you can proof the result after you set the transparent color by choosing I mage > Pa l ette > V iew Palette Transparency. You can toggle off View Palette Transparency by selecting this menu option again. If something looks wrong, you can undo the setting by choosing E dit > U ndo or by pressing Ctrl+Z. You also can undo the transparency setting at any point (even in a later editing session) by choosing I mage > Pa l ette > Set Palette T r ansparency and selecting No Transparency .
When you're satisfied that the transparent color has been set correctly, save your image as either a GIF or PNG. Remember that only these file formats support Web transparency.
| [ LiB ] |
