The GIF Format

The GIF format was developed by the CompuServe Information Service (CIS), one of the original online services, and most programs (including DRAW) still refer to this file type as “CompuServe GIF,” even though its reach now extends far beyond CIS. GIF stands for Graphic Interchange Format (so “GIF format” is redundant, but who cares). At least DRAW 9 has renamed it to GIF-CompuServe Bitmap so you can press G to find it in the list of file types.

You will use the GIF format to display simple graphics that you create in DRAW. It is highly compressible and, though it is limited to 256 colors, is more than adequate for a majority of artwork created for the Web.

What is significant is not that the GIF format is limited to 256 colors, but that it can contain any number up to 256. In other words, you can create GIF files with fewer than 256 colors, and that means even smaller files. Do we seem obsessed about small file sizes? We are, and so, too, should you be. Indeed, this promises to be the No. 1 issue throughout your Web-designing career, as you embark upon a never-ending quest to keep your Web site as compact as possible. Most Web sites don’t charge any money for visitors to browse, but your potential audience measures the cost of a visit in a different way: waiting time. How long will they be willing to wait for your graphics to load and display? Web surfers have fast trigger fingers; your mission is to present enough of your page to deliver your message before they pull the trigger and press the Back button on their browsers.

Creating a GIF File

For this series of exercises, you will need three programs running: CorelDRAW, your Web browser, and Notepad (or some pure text editor). You are going to create a graphic in DRAW, export it to a GIF file, and view it in your browser. Here goes:

1.  In DRAW, create a thin rectangle as shown below. Apply a fountain fill to it that uses relatively light colors, like orange to cyan, or yellow to red. Set the fountain fill to move from side to side, instead of top to bottom, and remove any outline from it.

	NOTE In the graphic above, we have set our global unit of measure to pixels (note the rulers) and you can see on the property bar that our rectangle measures 500 by 200 pixels. As monitors are the official output device of the Web, pixels are the official unit of measure. To change your unit of measure, deselect all objects and use the Drawing Units drop-down on the property bar.

2.  Export this rectangle using the GIF-CompuServe Bitmap format. Name it anything you want, like rectangle.gif, and remember where in your system you created it. When you reach the settings dialog, use the graphic on the next page as your guide. Notice in particular that the color depth is set to 16 and anti-aliasing and dithering are both unchecked.

3.  At the next screen, set Transparency to None and ignore all other settings.

The settings we chose for you describe a low-quality graphic, and that’s intentional. By using a palette containing only 16 colors, the pretty fountain fill you created in DRAW won’t look very pretty by the time it gets to your Web browser. The resolution is set for 96dpi, because that is all you would need when creating a graphic for display on a computer monitor. Finally, we had you fix the size at 500 × 200 pixels just for the purposes of this exercise, so that your browser screen would look similar to ours.

4.  Switch to your text editor and create a simple HTML file, like the one below. Save the file with any name you want, but make sure to do two things: use an extension of .htm or .html, and save the file in the same location in which you exported rectangle.gif.

5.  Switch to your browser and use File Ø Open to retrieve the HTML file you just created. (Alternatively, you could find the file with My Computer or Windows Explorer and double-click it.)

Figure 20.4 shows the result, and it is likely to be quite different from what you imagined. As mentioned above, 16 colors can’t do justice to a fountain fill. This is Lesson No. 1 of Web page creation: you can never control all of the variables, as you can with traditional publishing. Every person who visits your Web page will be influenced by the type of computer they have, the grade of monitor and video card, and the way they have configured their browser. In fact, some people might opt to show no graphics at all.

FIGURE 20.4  Here is your Web page, in all its unremarkable splendor.

Fine-Tuning Your GIF File

At this point, you have set up a mini-laboratory for spinning Web graphics. You have DRAW opened to your main source of artwork, you have the Web page opened in Notepad, and you have your browser running and loaded with that same Web page. From this point on, changes are going to be easy, immediate, and even fun. Any time you make a change to the graphic or to the HTML file itself, you can switch to your browser and see those changes by issuing the Refresh or Reload command (F5 in Explorer, Ctrl+R in Navigator).

Your first objective is to rescue your fountain fill from the evil clutches of the 16-color empire.

Dithering

Dithering is the process by which DRAW essentially airbrushes a graphic to give the illusion of more tones or a smoother transition between colors. In truth, it’s a fake.

1.  Return to DRAW and export the rectangle again. Make sure to use the same name, rectangle.gif; you want to replace the previous version.

2.  At the Export settings dialog, check the Dithered box. Leave all other settings the same.

3.  Switch back to your browser and refresh the display.

This is still a paltry 16-color graphic, but DRAW has given the illusion of more colors by infusing white dots throughout. The transitions between colors appear smoother. It pales in comparison to the original, but it is an improvement over your first effort.

Paletted Images

This change will be more significant, as you will be able to use more colors to render your fountain fill. Return to DRAW and re-export the graphic, this time choosing Paletted (8-bit) and no dithering (everything else the same). “Paletted (8-bit)” is a fancy term for 256 colors, but there is an important distinction between DRAW 8 and 9’s handling of larger color palettes and that of earlier versions. If you create a 16-color graphic, the palette that is used to render the image includes white, black, cyan, magenta, yellow, red, green, blue, purple, orange, and four percentages of gray. That palette will never grow or shrink—if you export a 16-color graphic, those are the 16 hues that will be used to render your image, whether or not they will be sufficient.

The next step up is a 256-color palette, and indeed, that was the choice offered to users of DRAW 7 and earlier versions. And no matter how many colors were actually used in a graphic, the palette contained all 256 of the colors.