Transparent GIFs
A graphics image is always either square or rectangular. What if you want a round or oval button, or an irregular shape such as text? Then it's always within a square or rectangular frame filled in with the background color of the image.
It's very common on the Web to want your text or button to appear directly against the background color of the page, not against its own background. You could of course change the background color to that of the Web page, but this is often tricky to do and also means that if you want to use the graphic on a page with a different background, or change the background of the current page, you have to re-edit all the graphics used in it.
A better way is to make the image transparent. You can only do this with GIF (and PNG) images: the JPEG format doesn't include this possibility.
In a transparent image, one and only one color can be hidden, i.e. not seen. Whatever is underneath the graphic (the page background color or image) is seen instead. If the color you choose to make transparent is the background, the irregularly-shaped image (text, oval button or whatever) appears to float on the page. The graphics in the navigation bar of this site are an example.
To make an image transparent:
Open a new image (or an existing one if you'd like to remove its background). If it's a new one, start by filling it in with the background you want to become transparent. This should be as near as possible to the background color of the page it will be on.
You can change the background color by clicking on the color square for the current background color, choosing another one, and then applying it to the image with the Flood Fill tool. If you're editing a previously-created image, copy its current background color to the background color square by choosing the Color Picker (which looks like a dropper) and then right-clicking on the image background.
Create or edit the image till it's how you want. I'll use one of the graphics from the navigation bar as an example:
Obviously, this graphic file isn't transparent! To save it in a format that allows transparency, you first have to decrease the color resolution to 256 or less. Choose Colors, Decrease Color Depth, 256-Colors (8-bit). If you have more than one layer you'll be warned that you must flatten the image first. You can do this by clicking "Yes" in the warning message box.
Choose Colors, Set Palette Transparency. This is the big difference from Paintshop Pro 4, which set the transparency as a hard-to-find option in the Save dialog box for the GIF file format.
In the dialog box that appears, select Set the Transparency Value to the Current Background Color and click OK. If you save this file as a GIF and use it on a Web page it should now look like this:
Just to show you that you can't use most transparent GIFs on backgrounds radically different from their own, let's draw a little table:
|
|
|
|
The file looks best on white; it's OK on the pale cream of this page, but not on anything darker. This is because of the blurred effect and drop shadow, especially the blur which creates a gradation of colors from the original background color to the edge of the text; the result is that some nearly-white pixels are left around the text and of course are not transparent.
Be warned that if you forgot to check that the "background color" square contains the same color as the image's actual background color, the image will still not be transparent. This is because the paint program has no idea what pixels in the picture are "background" and what are part of a "foreground object". It makes transparent all the pixels in the picture that are the same color as the background-color square. Moreover, it refers to them by their index number not their RGB value. So if the palette is not full, and several colors in it are, for instance, white, it's quite possible that your image's background is white and the "background color" square shows white and yet they are not "the same color": perhaps the image's background is number 200 in the palette, whose RGB value is 255,255,255, and the background-color square' is displaying index number 201, which also has an RGB value of 255,255,255, but to the paint program they are not the same color. It makes index no. 201 transparent, but your background still shows up as white because it's color number 200 not 201.
That's why the safest course is to copy the image's background color to the color square using the dropper tool before you set the transparency.
If you can't seem to get the background transparent using the "current background color" option, you can do it by going into the palette by double-clicking on the background color, noting its index number (it will have a dotted line round it to show that was the color you selected, and its index number and RGB values will be displayed) and then in the "Set Palette Transparency" menu choose the option to specify the index number of the color to be made transparent.
You can even preview the transparency: Choose Colors, View Palette Transparency.
|
 |
 |
 |
 |
