DRAW 8 and 9 are smarter. When you choose Paletted as the color palette, DRAW studies the colors actually contained in the drawing and creates a subset of the 256-color palette from them. You may only use a few dozen colors from the 256-color palette. You may only use 16...or four...or two. But that doesn’t mean that you could get away with the 16-color palette, because those wouldn’t necessarily be the correct 16 colors. When you choose Paletted, you are permitting DRAW to determine the size of the palette, based on the colors you are actually using in your drawing.

With all of this said, re-export your rectangle—this time as a Paletted image instead of a 16-color graphic—and see if your browser doesn’t show you a clean and smooth fountain fill, like ours in Figure 20.5.

FIGURE 20.5  As a Paletted image, the subtleties of this fountain fill are rescued.

Creating Transparent Graphics

One of the most important aspects of creating GIF files is the ability to control which parts of the graphic will be visible and which will be transparent. Follow these steps:

1.  Return to DRAW and round the corners of your rectangle. (You can do that with the Shape tool and the rectangle’s on-screen selection handles, or with the slider on the property bar.)

2.  Export it again, same settings as before.

3.  Switch to Notepad, where your HTML file should still be loaded, and change the file as follows (changed line is highlighted).

This code defines a light blue background color.

4.  Save the file and switch to your browser.

When you refresh the display, it should look similar to Figure 20.6, and that’s bad. You rounded the corners of the rectangle, but DRAW still uses a rectangular area to define the space of the graphic (as it does for all exported graphics). The unsightly white spaces are because neither DRAW nor your browser understands that you only want the graphic to display, not the rectangular area in which the graphic sits.

FIGURE 20.6  Here is your not-so-beautiful Web page.

Fortunately this is easy to fix:

1.  Return to DRAW and export the graphic again. Confirm the first Export settings dialog (where you have been adjusting the colors) and stop at the second one.

2.  In the Transparency section, change None to Image Color.

3.  At this point, DRAW gives you an opportunity to define a particular Color to be transparent.

4.  Click on the Eyedropper tool on the right side of the dialog.

5.  Carefully click on the white regions in the thumbnail display labeled Original. If you did it correctly, the color white becomes the chosen color in the palette of colors, as well as the larger swatch.

6.  OK the box to create the file and switch to your browser. When you refresh, you should no longer see any white in your graphic. You have set white to be transparent.

TIP What would happen if the foreground of your graphic contained white and you set white to be transparent? This could be hazardous to your career as a Web designer. When you choose a transparent color, you need to first ensure that the color is not part of the drawing. If it is, you must choose a different background color: draw a rectangle behind your artwork and assign it a color that you haven’t used. When exporting, choose that color as your transparent color.

Creating Interlaced Graphics

As we have already said, and will say several more times, the display speed of a Web page is critical to its success. Graphics are the most common reason for a Web page being slow to load...too bad they are also crucial to your page’s appearance. You can help matters by creating interlaced GIF files for your larger graphics (graphics over 50KB in size).

You might be familiar with the term interlaced if you have recently bought a display monitor for your computer. One of the important qualities of a professional monitor is that it be “non-interlaced.” An interlaced display does not draw every scan line in succession from top to bottom; instead, it draws every other or every third and then goes back and draws the others. This is easier for manufacturers to produce and makes for a cheaper monitor. A non-interlaced monitor is greatly preferred, as it draws your screen much more smoothly and crisply.

With Web graphics, though, an interlaced graphic can be a very good thing. An interlaced graphic does not draw itself completely from top to bottom, but instead first appears as a very rough representation. Then on the second pass, it fills in a bit more detail. Still more on the third, and more on the fourth and fifth. If you’re visiting a site and don’t need to see the entire graphic, you’ll appreciate getting a low-resolution glimpse of it so you can decide whether to click on it or move on. That is the idea behind creating interlaced GIF files: you let your visitors have a quick look at a graphic without forcing them to sit through the whole show.

There is nothing to creating interlaced files. On the same dialog where you defined transparency, simply check the Interlace Image box, and you’re done.

The ABCs of Anti-Aliasing

Anti-aliasing can spell the difference between a great Web graphic and an ugly one. Anti-aliasing is like dithering, in that it adds other colors to smooth out harsh transitions. Dithering adds white to colors to soften transitions, while anti-aliasing smoothes jagged edges by adding an intermediate color, be it white or another color. Figure 20.7 shows the anti-aliasing effect with a very simple graphic—a rounded letter. You don’t need any labels to know which is which—the one that is noticeably smoother and cleaner is the one that was created with Anti-aliasing checked during export.

FIGURE 20.7  Anti-aliasing takes the rounded corner of this letter and smoothes it out significantly.

While it is obvious which looks better, it is not at all obvious why. You would need a much closer inspection to understand what anti-aliasing is actually doing, and Figure 20.8 offers the pixel’s eye view. In this close-up of the curved portion of the letter, you can see that the anti-aliased version on the right adds gray pixels to smooth out the journey around the curve. So it’s not rocket science—it’s the simple introduction of intermediate-colored pixels at the edges of objects.

	WARNING By adding intermediate colors, anti-aliasing requires that a broader color palette be used, and that will increase the size of GIF files. This is a trade that you’ll probably take every time, but you should be conscientious of the price that anti-aliasing exacts.

We will have a lot more to say about anti-aliasing in Chapter 22.

FIGURE 20.8  In this close-up, you can see how anti-aliasing adds an intermediate color to soften the transition at the edges where one color meets another.