Design considerations for the Web
Table of Contents
- Introduction
- The attributes of web graphics—color, quality, and file size
- Understanding and using web-safe colors
- Maximizing image quality on the Web
- Using compression to reduce file size
Understanding and using web-safe colors
Most designers have a swatch book by their side—such as a Pantone book—that helps them choose colors to use in a design. And even though color management technologies have been getting better over the years, most people still don’t trust the color they see on their computer screens. If you’re designing web graphics though, you don’t have much of a choice because the computer screen is the delivery medium for your artwork. Therefore, it’s entirely possible that you can choose a nice yellow color on your screen, but when someone views your website on a different computer, that color might appear green or orange. So what’s a designer to do?
With a little bit of information and some simple math, it’s possible to narrow the number of colors that you might use to ensure that your color looks decent on someone else’s computer screen. Although there are all types of computers and graphics cards out there, the minimum number of colors that a system supports is 256 (also referred to as VGA). However, not all computer systems use the same set of 256 colors. In fact, Windows-based computers use a different system-set of colors than Mac-based computers (not surprising). The good news is that of these two mainstream systems, only 40 colors are different, which leaves 216 common colors. This means that if a designer were to use one of these 216 colors, referred to as web-safe colors, they would be assured that their artwork would display properly on just about any computer.
Illustrator can help you choose from these web-safe colors in several ways. First, you can load a custom palette that contains all 216 Web-safe colors by choosing Window > Swatch Libraries > Web (Figure 1). Illustrator also features a color palette called VisiBone2, which displays web-safe colors in a more intuitive way (Figure 2). Alternatively, you can choose Web Safe RGB from the Color palette menu, which allows you to choose web-safe colors using the color ramp, the RGB sliders, or by directly entering their hexadecimal values. If you are using the regular RGB sliders in the Color palette, Illustrator lets you know when a color is not a web-safe color by displaying a small cube under the color icon. If you click the cube, Illustrator chooses the closest web-safe color for you (Figure 3).
Figure 1: Illustrator’s Web palette displays all 216 web-safe colors.
Figure 2: When the palette is resized correctly so that there are white swatches in each of the four corners, the VisiBone2 palette displays the 216 web-safe colors in a way that closely matches a color wheel, making it easier to use when designing.
Figure 3: A small cube in the Color palette indicates when a chosen color is not a web-safe color. You can have Illustrator snap to the closest web-safe color by clicking the cube.
