Electronic Arts Name: ______Period: _____ Photoshop COLOR

Electronic Arts Name: ______Period: _____ PhotoShop COLOR

Next we are going to focus on color and color selection methods. We have already touched the basics on color theory (see Elements of Art packet, last page on Color Theory) and color modes (PhotoShop Basics sheet), but we will review to ensure you understand the basic principles.

First, the terminology:

RGB: One of the color spaces used in graphics software that is based on the primary additive colors of Red, Green, and Blue. This is the most common color mode used in graphics software. 10

CMYK: Another one of the color spaces used in graphics software that is based on the ink colors used in traditional full-color commercial printing: Cyan, Magenta, Yellow, and blacK. In general, it is best to edit your images in RGB color mode because many software features and commands will not be available in CMYK mode. Converting your RGB images to CMYK should be one of the final steps before sending your image to a commercial printer (Also see Out of Gamut). In most cases you do not need to convert images to CMYK for printing on personal desktop inkjet printers as your printer driver handles the RGB to CMYK conversion. Although our class inkjet printers is one of these cases, they do use CMYK ink and we will still get in the habit of changing all projects to the CMYK color mode before saving.

⇒ When opening a new file (File > New), it normally defaults to RGB. If not, go to the Mode drop down arrow and select RGB to start off.

⇒ To change the color mode after editing your image, go to Image > Mode and select the appropriate mode – for this class: CMYK.

Out of Gamut: The phrase "out of gamut" refers to a range of colors that cannot be reproduced within the CMYK color space used for commercial printing. Graphics software is designed to work with images in the RGB color space throughout the editing process. The RGB color space has a much wider range of colors than CMYK. When you print an image it must be reproduced with inks and these inks cannot reproduce the same range of colors that we can see with our eyes. Because the gamut of color that can be reproduced with ink is much smaller than what we can see, any color that cannot be reproduced with ink is referred to as "out of gamut."

Web-Safe Color Palette (a.k.a. Browser-Safe): This is a collection of 216 colors that will not shift or dither when viewed on any operating system that is set to display 256 colors. The reason the palette consists of 216 instead of 256 colors is because there are 40 colors that are unique to the Windows and Macintosh operating systems. The best way to ensure that your color selections will be displayed accurately on any computer is to select colors from the Web-safe palette.

Hexadecimal Codes: These are universal, 6-digit codes assigned to every color due to the need to in the HTML programming code used in web design, using a hexadecimal system. The hexadecimal system has a base of 16 alphanumeric characters: numbers 0 to 9 and letters A to F. As an example, the hexadecimal equivalent of white is FFFFFF. Let’s bring these terms to life by showing you where they come into play while you are working in PhotoShop. First, let’s open the COLOR PICKER by clicking once on either the foreground or background color swatch box in the toolbox.

Notice the two rectangles just left of the cancel button; one says “new” above it and other “current” below it. The color shown on top is the new color you have just picked; the color on the bottom is the current color in the swatch. If you see a triangle with an exclamation mark, it means you have selected a color that is out of gamut for CMYK. Below the out of gamut alert, Photoshop displays the closest color that is within the CMYK color gamut. If you see a small cube displayed, it indicates that the color selection is not "Web-safe." Below the Web safe alert, Photoshop displays a tiny swatch of the closest Web-safe color match. Clicking on either of the closest match swatches will change the selected color to the closest match.

Now take a look at all those numeric entry fields on the right lower quadrant of the color picker box. These allow you to enter numeric color values in a variety of ways. There is a dot next to a capitol letter H, S, B, R, G, B that you can click in to select which value you want to change. The letters represent the following: H: Hue --allows you to pick colors S: Saturation --adjusts saturation of the color chosen B: Brightness --adjusts brightness of the color chosen You can also change the hue by clicking in the narrow rainbow-colored strip next to the large color picker area, or you can drag up and down in this space.

In this class you will choose colors with this color picker box, so it is up to you to explore the numeric entry fields on your own. You can select a specific color by its RGB values by entering numbers in the corresponding numeric fields for R, G, and B. For example, the RGB values for 50% gray are R128-G128-B128 and would be entered like this:

In addition to the color picker dialog box, Photoshop provides two palettes for selecting color: the COLOR Palette and the SWATCH Palette.

The nice feature on the color palette is the rainbow color ramp has two larger areas with black and white swatches. This makes it easier to select pure white or pure black from the color ramp. If a color is out of gamut, the color palette will also display the gamut alert.

Now you can click on the swatch tab within the same palette and again, here is another way to select colors. The default swatches are a generic set of colors, but the benefit of the Swatches palette is that you can add, save and load custom swatch colors & collections. With a set of custom color swatches you can restrict yourself to specific colors without having to remember any numeric color values. A great example use would be to create a custom swatch collection containing the colors used in a company logo so you can use those colors when working on other projects for the same company. CUSTOM SWATCHES You can use the color picker or the color palette or the eyedropper to select the colors you are wishing to use and add them to your swatch palette by using the new swatch button on the bottom bar of the swatch palette. You can easily thrown away swatch colors by dragging and dropping them over the trashcan on the bottom bar of the swatch palette as well – or hover over the swatch and press the option key and click!

You can save, reset or load swatch collections through the options button on the top right corner of the swatch palette. When you save swatches, the typical save window will appear; name the file and pay attention to where you are saving it. This file’s extension will be .aco as it is a color swatch file made through the palette and can only be opened in the swatch palette. Be aware that loading swatch collections will add that collection to the existing one in the palette; so in most cases, you will want to “replace swatches” with your preferred collection (swatch file).

Custom swatches can be created with any colors you choose, but it is good to know that you can save some time by pulling colors from an existing image.

In order to create a swatch collection from an image (either to use that image’s color collection or to just see all the colors in the image), we must first convert the image’s mode to indexed color. To do this, go to Image > Mode > Indexed Color… Then the indexed color dialogue window appears. You can read more about the options in the dialogue window in the online help, but for this exercise, just make the following selections:

Palette: Local (Perceptual) Colors: 128 Forced: None Transparency: unchecked Dither: None

Then click OK.

To view the color collection from the image, go to Image > Mode > Color Table Once you see the color table, you can save it so it can be loaded to the swatch palette just like the previous method of making a swatch file, but this file’s extension will be .act as it is a color swatch file created from the color table. It also can only be opened through the swatch palette.

DON’T FORGET: Once finished creating a color table swatch file, you will need to undo (command-z) out of Index mode back to RGB mode. As mentioned before, if you want to view this file in the swatch palette, you will want to go to the option button of the swatch palette to load it by selecting “Replace Swatches” in order to bring up just the collection of the file into your palette.

EYEDROPPER The eyedropper tool allows you to pick up any colors from any open image. Simply click the eyedropper in your image to pick up and change the foreground color to the color the eyedropper is over.

INFO PALETTE The eyedropper can be used in conjunction with the Info Palette to read color values from your images. Display the Info Palette, then select the eyedropper and move it over your image with the mouse pressed down. By default, the Info Palette displays the RGB and CMYK numeric values, as well as the X and Y coordinates of the cursor. When making a selection, the Info Palette also displays the width and height of the selection. Lastly, it tells you the size of your document.

REVIEW: The Four Color Schemes of Color Theory

Monochromatic The use of one color (hue) and any values of that same color.

Complementary The use of two colors that are opposite each other on the color wheel.

Triadic The use of three colors that are equally spaced from each other on the color wheel.

Analogous The use of three or more colors that are next to

each other on the color wheel, not exceeding more than half the wheel of colors.

*Values of any color are allowed in a scheme **Black, white & grays are neutrals and are allowed in a scheme ***Browns are colors. You must determine which though…