Forward and Back

While web transparency obviously has some limitations in application, it can also allow some effects that would be otherwise impossible. For example it can be used in creating some very advanced web effects, like sprite movement or passing a shadow over background elements. See Web Example 2. The balloon's shadow in the example is actually a separate dithered bitmap (checkerboard fill) of white and black pixels with the white set to transparent. The shadow travels in a layer separate from the balloon, and both pass over the background image. Both are transparent GIF images. The motion of the sprites helps reduce the apparent effect of the jagged edges on the images. This whole page loads in significantly less time than a comparable size animation would.

Smart use of matte color can also create an illusion of blending. In the earlier example (see Web Example 1), the matte color was set to a dull orangey color. The reason for this might not be immediately clear. The most difficult part of that blend is where the ram horn goes over the background type. When a white or black map was used, these colors broadcast that there was an edge there. Changing the matte color to something between the horn and text color helps the two blend. Often a shade of gray or something which will be a midpoint between where your GIF edge color meets the background is the best choice for your matte color in complex situations. In simple situations, the matte color should match the background.

Further Reading

In Special Edition Using Photoshop 6, the following sections and chapters will prove helpful in clarifying more of the details not discussed here.

Chapter 4: "Working with Channels"

Chapter 5: "Selection and Masking"

Chapter 14: "Choosing an Image Mode"

Chapter 15: "Selecting a File Format"

Section X: "Creating and Using Web Graphics



  Copyright © Richard Lynch 2001