Discovering color modes
Finding out about swatches
Using color for print
Using color on the Web
Using color in your documents is probably one of the most important considerations you can make in your projects. The colors you use, the mode that you use them in, and even the way you select colors make a difference in the way you create a document and the final output of that document. Even though you can create a document that looks the same on a monitor in different color modes, how that file prints onto paper is a different matter. Color is a very broad subject, and in this chapter, you find out the basics of how color affects the projects you work on.
Figuring out what kinds of colors you're using is important, and this decision is greatly determined by what kind of output you've planned for the document. Different color modes are appropriate for work for the Web and work that you're having professionally printed. Monitors and printers have different modes for color, which means that you need to work with your files in different color modes (although you can change the mode after you start working on a file, if necessary). You may also find yourself in situations where very particular colors are required in your work. You may be working with specific colors that a company needs to match its logo, or creating an image that replicates how a building should be painted with specific colors of paint. You may need to use particular Pantone colors or color mixes, if not for the printing process, for the purpose of matching a client's needs.
In this chapter, we introduce you to the different color modes and how to use them. You discover new terminology and how to find, mix, and add colors to your documents in the Creative Suite.
Several different color modes are available for use in the Creative Suite applications. When you start a new document in Photoshop and Illustrator, you can choose the color mode you want to work in. In fact, both Photoshop and Illustrator help you by allowing you to choose the color mode in the New Document dialog box. The choice you make affects how colors are created. You can change your color mode later by choosing File
RGB (Red, Green, Blue) is the color mode used for on-screen presentation, such as an image displayed on the Web or a broadcast design for TV. Each of the colors displayed on-screen has a certain level (between 0 and 100 percent) of red, green, and blue to create the color. In a Color panel, you can either use sliders to set the level in values, as shown in Figure 7-1, or you can enter a percentage into a text field (such as in CMYK color mode).
Note
Note the exclamation point on the color panel, which indicates that this color wouldn't reproduce correctly in CMYK mode. You can click the CMYK warning exclamation point to convert to a color that's suitable for the CMYK gamut. Color is discussed in the Book IV, Chapter 3, including more details about how you can adjust the Color Settings dialog box.
When you create a Web page, the color is represented as a hexadecimal number. A hexadecimal number starts with a pound sign (#) followed by three pairs of letters and numbers (A–F and 0–9) — the first pair for red, the second pair for green, and the last pair for blue. The lowest value (the least amount of the color) in a hexadecimal number is 0 (zero), and the highest value (the greatest amount of the color) is F. For example, #000000 is black, #FFFFFF is white, #FF0000 is red, and #CCCCCC is a light gray. To see what a particular hexadecimal color looks like, go to Webmonkey at www.webmonkey.com/reference/Color_Charts.
The RGB (Red, Green, Blue) color mode is the color standard for monitors and the Web, and CMYK — Cyan, Magenta, Yellow, and Key (or Black) — is the standard color mode for print media, particularly in commercial printing such as that done by a service provider.
The CMYK color scheme is based on pigment (a substance used as coloring) color separation, and it describes how light reflects off pigments. When you work with this color mode, you create black by adding the maximum values of cyan, magenta, and yellow all at once. You can create different levels of gray by combining equal, but not maximum, amounts of cyan, magenta, and yellow. White is simply the absence of all color. Many color printers you find today work using the CMYK color model and can simulate almost any color by printing two colors very close to each other; however, some at-home desktop printer models made by Epson, Hewlett-Packard (HP), and Canon use their own color systems to print your work.
You've seen a lot of grayscale so far because that's how the pictures were printed in this book. Grayscale refers to when color images are displayed or printed in black and white. Grayscale refers to the different shades of gray that can be used when printing using only black ink on a white page. Halftone patterns are used to help simulate different color values. This is accomplished by adding dots to simulate shadows and gradients between colors. Halftone patterns are created when an image uses dots of varying diameter, or when an image uses many small dots in the same area to simulate different shades of gray.
When you work with an image in Photoshop, the image has at least one (but typically more) color channels. A color channel stores information about a particular color in a selected image. For example, an RGB image has three color channels: one that handles the reds (R), one for handling green information (G), and the last for information about the blues (B). See Figure 7-2.
In addition to each of the color channels, you can have an alpha channel. An alpha channel can hold the transparency information about a particular image. If you're working with a file format that supports transparency, you can add and use the alpha channel to save alpha information.
You can also use an alpha channel to save a selection. By choosing Select
In Photoshop, you can access the channels in your image by choosing Windows
When you create a document, you may have to consider what colors you use, or you may have the freedom to use an unlimited number of colors. If you print your documents, you can choose a specific set of colors to use. You may be restricted to only the two colors in a company logo, or you may have to print in grayscale. So finding the colors you need to use in each program is important and then figuring out how to access those colors repeatedly in a document saves you a great deal of time.
Swatches are a good way to choose a color, particularly when you intend to print the document. The Swatches panel in the Creative Suite programs contains colors and sometimes gradients. (The Swatches panel, as shown in Figure 7-3, is from Illustrator.) You can create libraries of swatches that contain colors that you can use repeatedly across several documents.
You can choose libraries of swatches from the panel menu or you can load and save swatch libraries. You can customize a swatch library by adding or deleting colors.
Follow these steps to choose a color in a specified color mode:
In a program that has a Color panel, choose Window
Color to open the Color panel (if it's not open already).The Color panel is available in Photoshop, Illustrator, and InDesign.
Click the Color panel menu to choose a new color mode.
Open this menu by clicking the arrow button in the upper-right corner of the Color panel.
Choose the RGB color mode from the panel menu that opens.
The panel switches to RGB color mode.
In the Color panel, click either the Fill box (solid square) or the Stroke box (hollow square) to choose what color you want to change.
If you click the Fill box, you can modify the color of a fill (the color inside a shape). If you click the Stroke box, you can modify the color of a stroke (the outline of a shape or a line).
Use the sliders in the Color panel to change the color values.
You can also change the percentage values to the right of each slider.
After you choose a color that you're happy with, return to your document and create a new shape that uses that color.
Tip
Hold down the Shift key when adjusting any one-color slider, and the other color sliders adjust proportionally to provide you with various tints from your original.
In the past, you had to be very conscious of what colors you used on the Web. Some computer monitors were limited in the number of colors they could display. Nowadays, color monitors are much more advanced and can handle a full range of colors, so images on the Web are much more likely to be properly displayed.
Note
It doesn't have to do with color, but Macintosh and Windows computers usually display your work differently because of gamma differences on these machines. Generally speaking, colors on a Mac appear lighter, and colors on a PC look darker. You can account for this difference by making a Mac version of your site, videos, and so on look darker so that both are the same (or you can make the Windows version lighter), but these changes aren't usually necessary.
Even though most computers can handle a full range of colors, you may have to consider color limitations. If you're designing a site specifically targeted at old computers or a certain user base, you may have to limit your colors to the 256 Web-safe colors, which means that any other colors used are approximated, which can look poor. If it's likely that your site will be viewed by users with older computers, consider the following:
Use a Web-safe palette of 216 colors to design your Web sites so that you specifically design with those older displays in mind and know what the pages will look like. This number is 216 instead of 256 because the lower number is compatible with both Mac and Windows computers. This panel is usually called the Web-Safe Palette or Web-Safe RGB, and you can access it from the Swatches panel menu in Photoshop and Illustrator.
Avoid using gradients if possible because they use a wide range of colors (many unsupported in a limited Web panel).
If a color is approximated because it can't be handled by someone's computer, that color is dithered — the computer tries to use two or more colors to achieve the color you specified, causing a typically displeasing granular appearance. So a limited number of colors can have a negative affect on an image; notice the granular appearance on what should be the shape of a face in Figure 7-4.
If you keep the preceding elements in mind, you're ready to start designing for the Web! Remember also that you don't have to worry about using the Web-safe palette of colors if you're designing primarily for more up-to-date computers.
