Transparency 271GIFTransparencyWeb Design in a Nutshell, eMatter EditionIn Photoshop, the marquee, lasso, and magic wand selection tools all have the
option of turning off anti-aliasing in their respective Option palettes. You can also
choose to turn off anti-aliasing when creating text.
The advantages to aliased edges are that you avoid halos, and they require fewer
pixel colors and will compress more efficiently. The disadvantage is that the
blocky edges often just look bad.
Anti-alias to a colored background layer
Transparency can still be used successfully with smooth, anti-aliased edges, as
long as they are anti-aliasing to a color similar to the final background color of the
page.
For this technique to work, you need to start with a layered Photoshop file with
the image sitting in its own layer. If you are starting with a flattened image, such
as from a CD-ROM or scan, you first need to use a selection tool to cut the image
from the background (using an anti-aliased selection tool) and paste it on a layer
of a new Photoshop file.
- In your layered file, create a new layer at the bottom of the “stack.”
- Fill the whole layer with a color that is the same as, or as close as possible to,
the background color of your web page. If you are using a tiled background
pattern, choose a color that approximates its dominant color value. If you
cannot select the exact color, it is better to guess a little darker. - When the layers are flattened as a result of converting to Indexed Color, the
anti-aliased text and other soft edges will blend into the color of the bottom
layer. The transition pixels will be the appropriate color and will not stand out
when placed against the background color on your web page.
Using Adobe ImageReady 1.0
ImageReady, because it was designed specifically for web graphics, has methods
for preventing halos integrated into its interface design, making it simple to
prepare transparent GIFs the “right” way.
Transparency controls are accessed in the Optimize Palette when GIF is selected
from the Format menu. When the Transparency checkbox is checked, the trans-
parent areas of the final GIF are determined by the transparent areas of the layers
(the areas that the checkerboard pattern shows through).
To prevent anti-aliased edges from forming “halos,” specify a “Matte” color that
matches the background color of your page. ImageReady blends the anti-aliased
edges with your chosen Matte color while preserving the transparent areas of the
image. When the GIF is saved and displayed in a browser, the blurred edges blend
into the background seamlessly.
Preventing Unwanted Transparent Areas
When you select a color to be made transparent, pixels of that color in the entire
graphic will turn transparent, including all occurrences within the image area that
you may want to remain visible. The trick to preventing this is to fill the area to be