Adobe Creative Cloud Design Tools All-in-One For Dummies (2013)

Book I

Getting Started with Adobe Creative Cloud

Chapter 7: Using Color

In This Chapter

Discovering color modes

Finding out about swatches

Using color for print

Using color on the web

Using color in documents is one of the most important considerations in creating your projects. The colors you use, the mode you use them in, and even the way you select colors make a difference in the way your document looks as a finished product. Color is quite a broad subject, and in this chapter, you find out the basic facts about how color affects the projects you work on.

Planning how you apply color is important, and this plan is greatly determined by the kind of output you intend for the document. Different color modes are appropriate for graphics that are onscreen rather than those that are professionally printed.

You may be working with specific colors that a company needs in order 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, also referred to as PMS (Pantone Matching System) or color mixes — if not for the printing process, then for the purpose of matching a client’s color request.

In this chapter, you are introduced to color modes and how to use them. You also discover new terminology and how to find, mix, and add colors to your documents in the Creative Cloud.

Looking at Color Modes and Channels

Several color modes are available for use in the Creative Cloud 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 letting you choose a color mode in the New Document dialog box. The choice you make affects how colors are created. You can change the color mode later by choosing File⇒Document Color Mode in Illustrator or Image⇒Mode in Photoshop.

If you’re working with print, generally you use CMYK mode. If you’re working on files to be displayed on a monitor, RGB is the right choice.

Using RGB

RGB (Red, Green, Blue) is the color mode used for onscreen presentation, such as an image displayed on the web or a broadcast design for TV. Each color displayed onscreen has a certain level (between 0 percent 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 enter a percentage into a text field (such as in CMYK Color mode).

Figure 7-1: Creating colors with the sliders in RGB mode.

Note the exclamation point on the Color panel, which is the Out of Gamut symbol. It 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 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, which starts with a pound sign (#) followed by three pairs of letters and numbers (A through F and 0 through 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 light gray. To see what a particular hexadecimal color looks like, go to Visibone at http://html-color-codes.com/.

Working with CMYK

CMYK — Cyan, Magenta, Yellow, and Key (or Black) — is the standard color mode for print media, particularly in commercial printing such as what a service provider does.

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 one time. 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 now work by 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.

Saving in grayscale

You’ve seen a lot of grayscale images (color images displayed or printed in black and white) because the pictures in this book were printed in grayscale. 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 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. Halftone patterns help simulate different color values by adding dots to simulate shadows and gradients between colors.

Looking at color channels

When you work with an image in Photoshop, the image has at least one (but typically more) color channel. 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.

Figure 7-2:This RGB file is created from a Red, Green, and Blue channel.

You can have, in addition to the three color channels, an alpha channel, which 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. Some file formats that support transparency are .png, .tiff, .gif, .dcs, .eps, and the native .ai and .psd formats.

You can also use an alpha channel to save a selection. By choosing Select⇒Save Selection in Photoshop, you create an alpha channel with your selection saved to it. You can choose Select⇒Load Selection and choose the channel to reload your selection at any time.

In Photoshop, you can access the channels in your image by choosing Window⇒Channels. When the Channels panel opens, you can toggle the visibility of each icon by clicking the eye icon next to each channel. (Refer to Figure 7-2.)

Choosing Colors

When you create a document, you may have to consider which 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. 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.

Using swatches

A swatch is a good way to choose a color, particularly when you intend to print a document. The Swatches panel in the various Creative Cloud programs contains colors and sometimes gradients. (The Swatches panel, shown in Figure 7-3, is from Illustrator.) You can create libraries of swatches that contain colors you can use repeatedly across several documents.

Figure 7-3: Swatches panels are similar in most CC applications.

You can choose libraries of swatches from the panel menu or load and save swatch libraries. You can customize a swatch library by adding or deleting colors.

Mixing colors

A color mixer, found in the Color panel, helps you choose colors. You can use the Eyedropper tool to choose a color or, if you prefer, enter values for each hue or percentage. You can use one of several color modes in the programs you use, which offers you a lot of flexibility for all your projects.

Follow these steps to choose a color in a specified color mode:

1. 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 Illustrator, InDesign, and Photoshop.

2. 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.

3. Choose the RGB color mode from the panel menu that opens.

The panel switches to RGB color mode.

4. In the Color panel, click either the Fill box (solid square) or the Stroke box (hollow square) to choose the 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).

5. 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.

6. After you choose a color you’re happy with, return to your document and create a new shape that uses the color.

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.

Using Color on the Web

In the past, you had to consciously choose which 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.

Though this statement doesn’t have to do with color, 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.

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 colors to the 256 web-safe colors, which means that any other colors used are approximated, which can look poor. If your site will likely be viewed by users with older computers, consider these suggestions:

Use a web-safe palette of 216 colors to design websites with those older displays in mind so that you 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. You can access this panel, usually known as Web-Safe Palette or Web-Safe RGB, from the Swatches panel menu in Illustrator and Photoshop.

Avoid using gradients, if possible. They use a wide range of colors (many unsupported in a limited web panel).

Avoid dithering if you can. A color that’s approximated because it can’t be handled by someone’s computer is dithered — the computer tries to use two or more colors to achieve the one you specified, causing a typically displeasing granular appearance. So a limited number of colors can have a negative effect 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 suggestion list 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.

Figure 7-4: The shading in the face is dithered.