Info
Home Page Articles Software GoodiesExplanations
How do they do that? The Web in FocusResources
Web Site Stuff Tech Books E-Books Tech Toys Web Hosting LinksWomen
Opinion Tech Women Women's StudiesTech News
Computer Security Databases Java Linux MP3 PC Software Robotics Site Owner Tech Latest Web Development XMLSpread the Word
Newsletter
Recommend this Page
Site Info
Legal Disclaimer
Privacy
Contact
Lighter Side
Crazy for Life crazy for romance Crazy for Kitties Crazy for Dogs Crazy for CowsCopyright 2000-2001, hertechnology.com
Transparent Color in a GIF Image
Colors
Item three: color. Your monitor creates colors on your screen by combining 3 primary colors: red, green, and blue (just like your TV). These three colors are (normally) beamed together at one pixel at a time to create a dot of color on your screen. Because the dots are produced very quickly, your eye sees the screen as one smooth image.
The color information stored in the graphics file for the logo will be used to render the correct colors on your monitor. (Although colors show up a little differently on each monitor; this is an artifact of how the monitor is built and configured.)
Now, to combine items one, two, and three: one of the things in the graphics file format is what color each pixel is. Each of the pixels in the Her Technology logo is represented in the graphics file with its corresponding color.
GIF Specific
The GIF graphics format, the one that lets the background show through an image, has one limitation that we'll briefly mention; namely, it can only contain 256 colors in one file. Clearly, there are more than 256 colors in the world, so the GIF format cannot represent all possible colors.
But, it can represent ANY 256 colors. If one image has a lot of different shades of blue, more of those 256 colors may be blues; another image may have more reds. In other words, the 256 colors are really like color slots. Any color can be stuck in the slot, but there are only 256 slots available.
Putting it together
We're heading down the home stretch now.
Fortunately, the Her Technology logo doesn't have that many colors in it, so we don't need to worry about what happens if we have more than 256 colors in an image.
The logo was created with Adobe PhotoDeluxe by taking a white square and drawing the pink lines. Then the Her Technology text was written on top of the lines. This setup makes it easy to make the background transparent -- the background of this image started out white.
Now for the important bit. The GIF89a format lets you designate one of your colors as transparent. You can pick any one of your 256 colors. (Adobe PhotoDeluxe or other graphics creation program or photo editing software will let you pick the color and make it transparent.) I chose white, which was the background of the image. Now, when the browser renders the image, it knows that white really isn't white any more, it is "clear". Whatever is behind the logo shows through the transparent part.
Summary
- Images are kept in graphics files.
- Graphics files have different formats for different purposes.
- The format defines what the sequence of 0's and 1's in the file means.
- Images are created on your monitor with tiny dots called pixels.
- The pixels are different colors; these colors are created by combining different amounts of red, green, and blue.
- The graphics format will say what color each pixel is.
- The GIF format can only have 256 colors in it, but they can be any 256 colors.
- The GIF89a format lets you make one color transparent.
- When the browser renders the image, it will let whatever is behind the graphic show through where the color is transparent.
Hence, the Her Technology logo will have a different background depending upon where it is on the page. The logo has a transparent background which lets the stuff behind it come through.
Aside: This next bit isn't relevant to making a color transparent, but does more precisely describe what the GIF format does with representing colors. The GIF format will indicate the color of each pixel, but it can use a shorthand notation. If many pixels are exactly the same color, the GIF format will not represent each pixel individually. Instead, it will indicate that there is a group of pixels all of a particular color. The shorthand notation makes the file smaller, particularly for files that have large areas with one color. Smaller is always better on the web, as you well know!
Want to bookmark this site? Press
Control-D. (Hold down the control key and the letter D at the same time.)