Even though graphic designers typically work on computers that contain up to four megabytes of VRAM and can display 24-bit images (consisting of up to 16.7 million colors), there are cases in which graphics should contain no more than 256 colors. Why should the number of colors in an image be limited to 256? This is the central question driving this exploration of a seldom-used tool in Photoshop 4.0: Indexed Color Mode. Two high-tech answers come to mindthe Internet and custom color palettes.
Designers who create images for the Internet must attempt to control the colors that users will see no matter the age or brand of computer platform used. Unfortunately, many Internet users still have eight-bit color display cards that display only 256 colors. It is a waste of time for the graphic designer to improve and color-correct 24-bit images that will appear banded (distinct bands of color) or dithered (interpolated colors) on eight-bit systems. By purposely limiting the palette of colors in an image to 256, the designer can present images in the best possible light. The designer controls how colors are displayed on-screen, so there are no ugly surprises. The viewer sees what the designer wants to be seen.
A second reason for using a 256-color palette when designing for the Internet is to decrease image file size. The success of a web site is often judged by the number of visitors the site receives (hits) and whether the viewer browses the whole site or gives up after viewing only a page or two. Internet users often quit a web site because excessively-large image files take too long to download. Keeping the file size small will greatly improve the success of the web site. How can designers limit the file size of images they create for the web? One way is use a 256-color palette. If you have two files of the same image that are identical except one is a 256-color file while the other is a 16.7 million-color file, the 256-color file will contain less data and will be much smaller and will download faster than the 16.7 million-color file. Unfortunately, using a 256-color palette can produce a banded appearance in some images. Therefore, it is best to use a 256-color palette only when the clarity of the image is not an issue. It is possible to compensate for banding by pre-selecting key areas of the photo to use in creating the indexed color palette. A full discussion of this technique can be found in David Siegels Creating Killer Web Sites.
You can also decrease file size by compressing the file by saving with a compression scheme such as Joint Photographers Expert Group (JPEG) or Graphic Interchange Format (GIF). Compression schemes use pattern recognition algorithms to reduce horizontal lines of pixels to run-length code. The use of a 256-color palette optimizes the compression algorithms which, in turn, decrease the overall compressed file size. Compressed files are transmitted by the Internet much faster than uncompressed files. However, compressed files must be decompressed before they can be viewed. Web Browsers, such as Netscape Navigator or Internet Explorer automatically decompress files on-the-fly as they are being displayed on the users screen.
Limiting the palette of an image to 256 colors is surprisingly easy using Photoshop. Simply convert the image to the Indexed Color Mode (from the Image Menu, choose Mode, then select Indexed Color Mode). The Layers and Filters menus and many items on other menus, such as the Selective Color and Variations color correction tools, are inoperative when an Indexed Color image is displayed. Therefore, be sure to use any of these menu items before you convert an image to the Indexed Color Mode. RGB images can be directly converted to the Indexed Color Mode, but CMYK images must first be changed to gray scale or RGB before they can be converted to the Indexed Color Mode.
When you select Indexed Color Mode from the Mode submenu of the Image Menu, Photoshop displays the Indexed Color dialog box. This dialog box includes a pop-up menu that contains several previously-prepared palettes to make color decisions easy. The available palettes are listed and described below.
The Exact palette will contain the same colors as those that appear in the RGB image. This option is available only if 256 or fewer colors are used in the RGB image.
The System palettes are those that the Mac or Windows systems use internally. The Mac System Palette and the Windows System Palette are not the same. If you use the Mac System Palette on an image, Windows users will see an image composed of different colors.
The Web palette contains colors used by Internet Web Browsers. Because all web browsers support this palette, it may be the safest choice when preparing graphics for Internet distribution.
The Uniform palette contains an equal number of samples of red, green, and blue.
The Adaptive palette allows the designer to select an area of interest in the image and build a specialized color palette from that area. To use this option, you must first select areas of the image that you think are most important to the effect you want to create. Then, choose Indexed Color Model from the Mode submenu of the Image Menu and select Adaptive on the Indexed Color dialog box. Photoshop will then weigh the colors in the Adaptive palette toward the colors in the selection.
In the Indexed Color dialog box, you may also choose Custom from the palette pop-up menu. If you choose Custom, the Color Table dialog box will be displayed. You can use the Color Table dialog box to select from among several additional palettes, load one of the PANTONE, ANPA (American Newspaper Association), FOCOLTONE, or Trumatch palettes included with Photoshop (in the Color Palettes folder, which can be found in the Goodies folder in the Adobe Photoshop 4.0 folder), or load a palette that you have previously prepared and saved. The palettes listed on the Color Table dialog box are listed and described briefly below.
The Black Body palette was developed from the color changes a piece of iron goes through when heated to white hot. Colors include black, red, orange, yellow, and white. The Black Body palette contains no blues or greens.
The Gray Scale palette consists of 256 shades of gray that transition smoothly from white to black.
The Spectrum palette provides a smooth transition between the colors that occur when white light is passed through a prism: violet, blue, green, yellow, orange, and red.
Both the Macintosh and Windows System palettes are also available in the Color Table dialog box.
The Custom color tables created by the designer.
You should also use the Indexed Color dialog box to choose the type of dithering method you wish to use. A dithering method is the procedure Photoshop will use to simulate colors in the image that are not available in the chosen color palette. The available dithering methods include None, Diffusion, and Pattern.
If you choose None, Photoshop will not dither the colors, but uses the available color closest to the missing one. This results in sharp transitions between adjacent colors, creating a posterized effect.
The Pattern dithering option adds random pixels in patterns to simulate colors that are not available in the color palette. (This option is only available if you choose the Macintosh color palette.)
The Diffusion dithering option uses a method that is less-structured than the Pattern option to simulate missing colors. The Diffusion option is available when any palette is chosen and provides the best overall simulation of missing colors.
Once you have completed the Indexed Color dialog box by choosing a palette and dithering option, click OK to convert the RGB image to Indexed Color. After the image has been converted to Indexed color, you can perform color corrections and other necessary manipulations. You can also change the palette assigned to an image by choosing Color Table from the Mode submenu of the Image menu. You may choose from among the same options described above under the Custom Color Palettes heading.
A second application for Indexed Color Mode is creating custom palettes that can be saved and reloaded. This is particularly useful for design projects employing photos from many sources that need to standardize the variety in lighting thereby creating a custom tonal look, or corporate color palette. Custom Indexed color palettes can compensate for these variations of lighting and create more evenly toned images with a fuller tonal range than standard duotones . When used on black and white images, a custom color palette colorizes the image in a similar way to the Hue/Saturation option in the Image/Adjust pop-up menu colorizes RGB or CMYK images. However, custom Indexed color palettes allow the designer to choose a particular Pantone color as the colorizing hue, instead of the less precise visual judgments required in Hue/Saturation.
To understand the rather complicated process of creating a custom color palette, I will go through the conversion on a scanned black and white photo to the new indexed color image. I began by converting the image to Indexed Color Mode. I then chose a deep blue from the Pantone color system (Pantone 2945 CV) and used its CMYK formula to calculate a three-quarter shadow (75%), a midtone (50%), and a one-quarter highlight (25%) points of the color adjustment curve, which will be used (as well as black). The tones between are then interpolated by defining a custom color look-up table (CLUT) using the Color Table option also found in the Mode pop-up menu (once the image is converted to Indexed Color mode). The steps employed in creating this table are described below.
Using indexed color instead of duotones has the added bonus of keeping file sizes small since the image does not have to be converted to process colors. Those interested in seeing comparisons between the Indexed Color image and a standard duotone using the same Pantone 2945CV color may contact Dr. Jerry Waite at the University of Houston (JWaite@uh.edu).
| | ||
Black and White Halftone |
Conventional Duotone composed of PANTONE 2945 and black. |
256-color Indexed Color Image composed of 256 shades of the equivalent of PANTONE 2945 |
Since Indexed color is a tool whose primary medium is intended to be an RGB monitor, outputting separations can be problematical. Photoshop handles outputting two-color images as duotone separations. However, Indexed color images either have to be reconverted to gray scale and then converted to a duotone which undoes the color indexing or the images must be converted to CMYK.
Designers who are interested in creating Web designs or who have a project that includes pictures from a wide range of sources should check out indexed color as an intriguing new tool. Photoshops index color mode is the logical tool to implement the reduced-color palette; however, there are several other software packages available that also manipulate color images. These include DeBabelizer by Equilibrium Software and Color GIF 2.0.6 by HVS. Pantone now also supports a Web Color system that makes working with color on the Web easier. A complete discussion of file compression and limiting color palettes can be found in David Siegels Creating Killer Web Sites (now in a second edition). More complete instructions on using Photoshops indexed color are found in Fundamental Photoshop 4 by Adele Droblas Greenburg and Seth Greenburg. An excellent article on corporate color palettes (Developing a Corporate gray scale) is found in Step-by-Step Graphics, Volume 11, Number 6, pages 100-105.
Greenburg, Adele Droblas and Seth Greenburg. Fundamental Photoshop 4. Osborne/McGraw-Hill: Berkeley. 1997.
Sharpless, Gregory, ed. Developing a Corporate Gray Scale. Step-by-Step Graphics. Vol. 11, Number 6.
Siegel, David. Creating Killer Web Sites. Hayden Books: Indianapolis. 1997.