|
|
Well, if you want to make some stunning graphics, you're going to have to learn a few things about the web, Netscape, and Photoshop -- importantly you'll want to know about the concepts of antialiasing and transparency.
Notes:
Antialiasing |
Why gray? Well, because gray is between white and black. If we used red lines on a white background, we'd want to antialias with shades of pink.
So how does one antialias? It doesn't take much effort at all. If you use Photoshop to make your art, then chances are you've been antialiasing all along. If you've ever rasterized* some of your illustration work into an image (like that company logo you did in Illustrator), then you've probably noticed how much better your work looks when you check the "Antialias" box. In fact, some of this may be old hat to you -- but all of this information will come in handy as we move to the next topic: transparency.
Transparency |
When you use GIF's on your web page, you can specify regions of transparency. In these regions, the browser does not display image information, but instead displays the background color of the web page.
The process is not as robust as you might initially think. This is not as powerful as an alpha* channel, where a whole range of opacity can be specified. The GIF 89a specification simply allows one table entry* to be designated as transparent; i.e. a pixel either has color information, or is transparent.
Format note: JPEG, though becoming an alternative standard on the web does not support transparency. See image format notes for more information.
So how do you add transparency to a GIF file? Most image-editing programs
only write the GIF 87 format -- this doesn't support transparency. To
convert a GIF 87 file to a GIF 89a, you'll need a special program.
giftrans
is a public domain program that will do this for you.
Some instructions on using giftrans, along with the source are
here. If you are using a Macintosh, you
should check out Transparency.
Note: it seems more and more programs are incorporating this technology into their products. You might want to check out the guide to imaging software, and what products are currently supporting.
Antialiasing and transparency |
Recall that antialiasing works by interpolating* between the foreground and the background (like the grays between black and white). Also remember that transparency works by designating one color as transparent.
The problem here is that we created this image assuming a white background. The antialiasing worked by adding grays between black and white. Now, though the black is on a blue background. For effective antialiasing, we'd want the surrounding pixels to be of shades betweeen black and blue. When we tagged the white as transparent, this only effected pure white (the background). This in no way effects the grays. If you want your image to look good on top of blue you need to re-antialias and go through the whole process again. Pretty annoying, huh? It's a strong argument for a web image format with an alpha channel.
So why use transparency at all? Why not match the background of your images to the backgound of your page? This is actually a common tactic. One site that employs such devices is HotWired. In fact, because the background color of HotWired's intro page is randomized, different versions of every image on the page (one for each background color), are required. It's a lot of effort, but it works.
There are times when this tactic isn't the best solution. One case is if you don't want to use background colors, and would rather the browser just use its default background. All graphical browsers use a shade of light gray, but the exact gray differs between browsers (and even differs between platforms). In this case, the best tactic is to antialias to a background of some light gray (like 25%), and then mark the background field of the image as transparent.
Another example is if your background color isn't a simple color. Check out the example on the left of this. If you are using a 24-bit* display this might look fine, but if you are using an 8-bit display (or a graphics workstation that has run out of color table entries), you'll notice that the image is dithered*. It's a problem with browsers working in a limited color environment. Many will dither a color in an image even if the color is the same as the background. If you mark the background as transparent, though, as in the example on the right of the same page, all will look fine.
Conclusion |
Comments? | Last modified: Mon Nov 11 11:14:28 1996 |