Photoshop Workshop - Lesson 3

Color in Photoshop

pixels The screen image that you see in Photoshop is a a geometric arrangement (map) of dots of different colors on a grid. Each dot is a pixel; it represents one color. By magnifying an area of an image, you can see and edit each individual pixel.

In any color system, the primary colors are the foundation for all other colors; Photoshop uses several systems of color representation. These systems -- Bitmap, Grayscale, Duotone, Indexed Color, RGB Color, CMYK Color, Lab Color and Spot Color -- can be selected through the Image > Mode sub-menu. The gamut (range of colors) that can be produced in any color system varies.

image mode You can determine the current mode or change modes through the Image > Mode menu.

Topics in this lesson:


RGB Color
Color monitors generate color by mixing three colors of light (additive color) -- red, green and blue. When all colors are on at full intensity (#fff), the result is white light. When all colors are off (#000), the result is black.

These three colors mix to form all of the colors in the RGB spectrum. You can set your output to 216-colors (the Web palette), 256 colors (8-bit color), thousands of colors (16-bit color) or millions of colors (24-bit color).

CMYK Color
This color mode is the most critical for images that are to be printed (photos, brochures, magazines, etc).

Printing generates color by mixing four colors of ink (subtractive color) -- cyan, magenta, yellow, black. The Color Settings command (C*-Shift-K) offers several standards for CYMK printing. Using Photoshop for printed documents is beyond the scope of this workshop.

Indexed Color
indexed color Indexing is the process of assigning 256 (8-bit) or fewer colors to represent the millions of colors that potentially exist in a full color image. Indexing is important for creating images to be viewed on a computer monitor; the 216-color Web palette is an example of indexed color.

Select the indexed color palette from the Image > Mode > Indexed Color submenu or through the Save for Web dialog. Choices include:

  • Exact Palette
    What the name implies; option available only if the image uses 256 or fewer colors; no dithering.
  • System Palette
    Windows and Macintosh system palettes are composed of 256 colors; however, they are not the same 256 colors.
  • Web Palette
    The 216 colors of the systems palettes that are found on both Macintosh and Windows computers.
  • Uniform
    Creates a palette by uniformly sampling colors from the RGB color cube.
  • Perceptual Palette
    Considers the color spectrum where the human eye is most sensitive.
  • Selective Palette
    Optimized for Web colors and colors that occur in large areas of flat color.
  • Adaptive Palette
    Adapted to reproduce the colors that occur most often in the image.
  • Custom
    Creates a custom palette using the Color Table dialog box
Activity: Exploring Color Palettes
  1. Save the JPG file mailbox.jpg to your hard drive by right-clicking the link and saving the image. (The actual commands to accomplish this vary by browser.)
  2. Open the image in Photoshop (C*-O).
  3. Experiment with what happens to the image when you change color palettes -- use the Save For Web option (C*-A*-shift-S) to explore Image Ready.

    Select the 4-up view; the left view is the original image.

    Select the next image and adjust settings to select between the different types of indexed color. You'll be using GIFs and PNGs.

    Use the "hand" to move the image around so that you can see the difference between formats or select "fit in window" from the bottom-left window.
mailbox image ready

Hexidecimals and Color
A hexadecimal color code uses a six digit number to represent an RGB color. For example, white is #ffffff and black is #000000. These three primary colors are mixed to create colors that we see on a computer monitor.

Red - cc Green - cc Blue - cc
equals #cccccc or grey

Although browser-safe color is less important today than three years ago, many designers stick to the palette as a conservative measure, especially if they know that their audience has older computers. You can tell from the hex color code if a color is browser safe; the color is composed of three sets of the following number/letter pairs:

00   33   66   99   cc   ff

Choosing Colors
The Foreground/Background color squares in the toolbar show you the current color settings. The foreground color shows what color you will "paint" onto the background. The background color shows what will be revealed if you "erase" (delete) portions of the image.

There are several ways to select color:

  • Click on a color square (foreground/background colors on tool palette). This will activate the Color Picker. Then choose or specify a color.
    color picker
  • Click the eyedropper tool to set a new foreground color based on a sample from any open document. Alt/Opt-Click to set a new background color.
    eye dropper
  • Select Colors and Swatches from the Window menu. The color palette allows you to mix colors scientifically or by feel. The swatches palette show a set of 125 color samples by default.
    window menu drop down color and swatches palette
Activity: Selecting Color
  1. Save the PSD file artist.psd to your hard drive by right-clicking the link and saving the image. (The actual commands to accomplish this vary by browser.)
  2. Open the image in Photoshop (C*-O).
  3. Following the overview above, change the foreground and background color in the tool palette.

Challenge of Consistent Color
There are several factors that make on-screen and printed color appear different to the eye; there are also factors that make on-screen color appear different on different platforms and monitors.

  • RGB color is additive and CYMK color is subtractive. The color on a monitor may appear brighter than the printed image.
  • The gamut of color is larger for RGB than CYMK; thus, not all theh colors that can be displayed on-screen can be printed.
  • Input and display devices may use different color spaces (sub-sets of RGB).
  • Monitor gamma differs between Macs (*nix) and PCs. Thus images appear darker on a PC monitor (default settings) than they do on a Mac monitor. This is important to know when creating Web images that will look good across platforms.

What 24-bit color means
There are 256 different brightness settings for each of the primary colors (red, green, blue) on most computer RGB color systems. Thus there are potentially more than 16 million colors (256 x 256 x 256) that could be mixed. This gamut provides enough color to realistically represent what our eyes see when we view something in the real world.

It takes 8 bits (a bit is a 1 or 0; 8 bits = 1 byte) of computer data to represent each of the 256 different values for each primary channel. To represent three sets of brightness settings -- one set for each channel -- takes 24 bits (3 x 8).

Resources

go back go back Lesson 2    :   Lesson 3   :    Lesson 4 go forward go forward


© keg 2004