Web Design Concepts for Print Designers

Color on computer monitors is made of light, so traditional systems for specifying color for print (CMYK, Pantone Swatches, etc.) do not apply.

Computer monitors display colors by combining red, grean and blue light. This color syste is known as RGB color.

RGB color is a 24-bit system, with eight bits of data devoted to each of three color channels. Eight bits of data can describe 256 colors. With 256 possible colors in each of three channels, the total possible number of colors is calculated by muliplying 256x256x256 for a total of 16,777,216. That's more than enough colors to provide stunning representations of artwork and photography.

The problem is that only a small percentage of computers in the world are equipped to display 24-bit color. Many more support only 8-bit color; these systems can display only 256 coors at any one time. The good news is that, by using a color palette, 8-bit computers can change which 256 colors to display at one time.

Colors on a web page are forced to adapt to the browser's Web Palette. The only way to ensure that all users will see them as you intended is to use web safe colors.

Browsers attempt to approximate the colors in an imgae by dithering, mixing pixels of similar colors available in the palette. This may not be an issue for photographic images. However, for images with large areas of flat colors this may produce an undesirable effect. Also colors specified for use in an HTML document, such as text color or background colors will usually be replaced by the nearest available Web Palette color. This effect is called color shifting and it can result in a large dicrepancy between how a color is rendered on a 24-bit versus an 8- bit display.

Even though using the Web Safe color palette can lead to undesireable results on 8-bit monitors, the numbers of those in existence is dwindling. You can use the web palette to your advantage, because it shows you exactly how a color will render on a Mac or a PC. Using the Web safe pallete while designing web images may require a little more effort but the result will be more consistant accross machines.

Many programs allow you to choose from colors of the web safe palette when applying colors to text and to backgrounds. You can immediately see your results when viewed in a window or preview browser.

You can also experiment with the web safe palette in Adobe Photoshop by choosing a web safe palette in the color picker.

Here are the most common file types for use on the web

GIF

The GIF (graphic Interchange Format) file format is the traditional file format of the web. GIFs are indexed color files with a maximum 8-bit palette capacity, which means that a GIF can contain a maximum of 256 pixel colors. Because they compress color information by rows of pixels, GIF files are most appropriate for graphics that contain flat color.

JPEG

Another popluar graphcs format on the Web today is the JPEG (Joint Photographic Experts group) format. Jpegs contain 24-bit color information that's millions of colors ,as opposed to GIF's 256. They use what is called a Lossy copression scheme, which means that some image information is thrown out of the image in the compression process, but in most cases the loss of information is not detrimental to the overall quality of the image.

Photographic images with subtle gradations are best saved as jpeg images. Jpegs are not well suited for saving images of flat color as they tend to be larger than their GIF counterparts.

This ends this tutorial.