To Temple College Class  logo R. Craig Collins > Intro to Computer Graphics > gif Transparency

gif transparency © R. Craig Collins, 2007

The way transparency works, and the way you often implement it, are two different things.

The way it actually works is similar to how the weather person stands in front of a background, and a computer replaces the color of the background with another image. This is often called Chroma Key in TV.

The visual effect is the colored screen is rendered transparent, so something else can show.

Chroma key demo

Your digital image editor has two ways to do this.

One, is to select a color or area, and instruct the computer to ignore it when the file is being saved, as in chroma key. This is called the alpha channel. (More on alpha channel later)

The other is the equivalent of using transparent plastic sheets.

  1. Start with your photograph
  2. Take a piece of clear plastic, to place under your photograph.
  3. Then using scissors, you cut away part of the picture, and lay it back on the clear plastic.
  4. Perhaps you add another piece of clear plastic on top of the background and the photo... you could write on the top layer, without messing up the layer underneath, and still see the material behind the image.

    transparent layers

When you digital editor save the image as a gif, the computer knows to select those areas to be transparent, leaving the desired result. (More on these layers, later.)


trasnparent background

trasnparent background trasnparent background
File with transparent background on bgcolor="white"

Same file with transparent background on bgcolor="black"

Same file with transparent background on background="bricks"

Read Saving gif using GIMP for details.