[Photoshop Tutorial II: Color Management]

By

This tutorial is for Photoshop 7 and CS users, since I only have a Windows OS, I can’t be sure if it is the same for a Mac or Linux.

In this tutorial, we will discuss various ways of finding, using and replacing colors. Photoshop is a registered trademark of Adobe Inc. You may link to this tutorial, but its intellectual copyright belongs only to me, Jonathan Wu. All of the features mentioned in the program itself are copyrighted by Adobe.

Color Modes:

Before we can determine what we are going to do with colors, we need to set a color mode. When you are editing an existing image, the color mode will already have been set. Most JPEG, BMP and other similar formats will come in RGB mode. GIF and PNG images will be set in Indexed Color Mode. Black and White images are usually set in Grayscale, but can also be RGB, depending on how the image was saved. To change the color mode of the image you are currently working on, select Image from the top Menu, then go to Mode, and slect the mode that you want. Be careful, because switching modes can change the appearance of your image!

When creating a new image, you can select the mode of your image right under the pixel dimensions. For now, we will explain the three basic modes, which are RGB, Indexed and Grayscale. Note that you cannot start a picture in Indexed mode! You can only save your image in that mode after you have created it. Here is what each mode means:
RGB:The Red Green and Blue mode is the standard mode that most images come in. It means that all the colors in this image are defined by a combination of red, green, and blue. RGB mode can use any color in any shade, and most of the style and layer options in Photoshop are available for this mode. RGB mode also allows you to stretch and compress images without significant quality loss. JPEG and PSD files are saved in this mode by default. If you save a file that has no background (which can be selected when you create the file, or done by erasing the background of the selected file) this part of the image will be filled out with white color, unless you use the Save for Web... fuction, which allows you to set a background matte. (Matte will be explained in later tutorials)
Indexed Color: When saving your document with Indexed colors, it simply means that you will map out all the colors that you are currently using in your image. However, there is a limit of 256 colors per image. The more colors are indexed, the more realistic and detailed your image will look. Graphic and web designers use this mode to keep their image files from becoming too big in size. The amount of colors used can be limited before the image is saved, and the less colors you use, the smaller your image will be in size. Another advantage of Indexed color mode, is that you can save a file with a transparent background. When using a transparent background when placing the image on a website, the background will assume the color of the page it’s on. This can create problems at times when colors do not blend. This is solved by using the Save for Web... function and selecting a matte for the image. The image will then have a small edge of the color that you pick. (Matte will be explained in detail in later tutorials). If you use Adbode Imageready© you can use your GIF files to create animations. Indexed color images can be saved as either GIF or PNG.
Grayscale: If you don’t want to use colors, but shades of black and white instead, you can use this mode. If you change an existing colored image to gayscale, it will replace the colors with shades of gray from light to dark. Using any color tool will have no effect, as it will only display in gray. The amount of options for styles is limited when using this mode. Before you can use this mode, you will need to merge all existing layers together.

Selecting a Color:

Selecting a color to use in your image is done by pressing either the foreground or background color icons. They are displayed by default as black and white icons under the left hand Tools menu:

Clicking on either one of the icons will open the Color Selection Menu. The left color is the foreground color, the right color is the background color. Pressing the little icon in the top right will switch them around. Pressing the icon in the bottom left will reset both images to the default black and white. Now let’s take a look at the Color Selection Menu:

On the left of this screen, you will see the shade selection area. You can freely move your cursor to any shade to select it. The bar right of it will allow you to change the shade color by moving the ruler up and down. You will see that when you do this, the numerical values on the right will change. For this tutorial we will only use the values displayed on the left, not the right.
Starting from the top, we see three letters: H, S and B. Thse stand for: Hue, Saturation and Brightness. These terms are very imporatant if you want to manage your colors, and will be used a lot in the later tutorials. To understand what these selections do, here is a quick explanation of each word:
Hue: This determmined the range of Red, Yellow, Green and Blue that you want to use.
Saturation: This determined the vividness of the hue through light usage.
Brightness: Use this to change the amount of light added to this color.
Still confusing? Try clicking either the H,S, or B icon. You will see that the color bar on the left will change. When you select Hue, it will show the standard bar of colors. If you click pn Saturation, it will change to a new bar with that specific color. Clicking on Brightness will change the bar so that you can add or extract light from the selected color.

Underneath this are the three familiar letters: RGB. Here you can manually enter the amount of red, green, or blue for the color you want. Beneath that is a pound sign with a syntax behind it, in the example above, the syntax for this color is #1432DC. This syntax is used in webdesing, when instead of using a color by name, you can make any color by using this code. For example, the background color on Millennial Fair is #EEEEFF. Try typing that in the lower box on your Color Selection Screen, and you will see the same color as this page. This is a valuable tool that we will keep using in later tutorials.

Another way of picking a color is by using the Eyedropper Tool. When you have an image open, and you want to use one of the colors in that image, the easiest way to get it is by selecing the Eyedropper tool from the left hand Tool menu.

Selecting this tool will make an eyedropper icon appear for your mouse cursor. You can move it over any of the currently opened images and select a color you want. You can select the background color too, by switching the back and foreground color icons (see image above). If the color you want is too small to pick, try increasing the zoom of the image. You can change the zoom percentage by using the Navigator Menu on the right of the screen.

Finally, you can also select a color using the right hand color menu.

You can click on either the bottom row with colors, or you can type in any combination of Red, Green, and Blue to get the color you want. If you press the Swatches tab on top, you can select some of the indexed wed colors available to you. The Styles tab will be explained in later tutorials.

The Hue & Saturation Screen:

Let’s say you have an existing image, and you want to change the colors. For this, you need a special screen called the Hue/Saturation screen. This screen will allow you to change the Hue, Saturation and Brightness of every color in the image. You can either select the whole iamge, or use other selection tools to select specific parts of an image that you want to change. Let’s open the screen by either going to Image in the Top menu, and then Selecting Hue/Saturation from the Adjustments sub folder, or you can press Crtl+U.

First you will need to select what colors you are going to adjust in this image. You can do this by using the top drop-down menu called Edit:. You can chose from Master, which is all colors, or from a range of different colors, being: Reds, Yellows, Greens, Cyans, Blues and Magentas. Once you chose one of these, you can slide one of the three bars and watch the colors change. When you select any color range except Master, you will be able to use the three different Eyedroppers at the bottom.

The first eyedropper, starting from the right, will substract a color from the selection range. Say you selected Reds as color range. But you don’t want a few of the reds in your image to change. Using the substraction Eyedropper, you can select these colors and click to remove them from the selection. The next Eyedropper does the exact opposite and will add any color you select to your color range. Holding down the select button while scrolling your image when using either of these Eyedroppers will either substract or add all the colors you come across, depending on which Eyedropper you chose. The third Eyedropper does the same as the regular Eyedropper from the left hand Tools menu.

You can use this feature to make minor or major color adjustments to your image. But there is another options on this screen that will let you completely change the color of either the whole image, or a selected part of the image. This is done by clicking the “Colorize” option, just above Preview. The great thing about this mode, is that it will let you change the color of any image or selection, while retaining the light and dark shades. The best way to learn about this mode, is by using an example. Download the example image here.

If we don’t indicate any specific area on the image, and we activate the colorize mode, the whole image becomes monochrome. In this example, I set the hue to 220, and the Saturation to 25. As you can see, the shades of light and dark remain visible, and colors such as white and black do not change, because they cannot be colorized. Monochrome art and banners are used a lot in webdesign, and you will see it a lot on Millennial Fair as well. Now that we know how easy it is to change colors, we should find something specific in this picture that we want to change. For the next example, let’s select his bandana and change the color. To select something in an image that cannot be selected with the rectangular selection tool, you need the polygonal lasso tool from the left hand Tools menu.

Right clicking on the Lasso tool will open the small menu from which you can select the Polygonal Lasso Tool. This tool can be used to select any amount of pixels in your image. It is the most precise selection tool available. Since we want to select his bandana, we should increase the zoom percentage to about 400%. Now you need to select the bandana on both sides of his head. Click alongside the pixels you want to select and make sure you connect the start and end of this lasso in order to select all of the pixels you want. When one side is done, press and hold the Shift button before you start on the other side.

As you can see on the left picture, I selected the area I wanted to change in color of. I then opened the Hue/Saturation Screen, clicked on Colorize, then changed the Hue to 220, and the Saturation to 25. To deselect the area, go to Select in the top menu and press Deselect, or Crtl + D.

You can colorize anything except black and white in the RGB mode. This option is not available in Indexed or Grayscale color mode.

Lessons:
Tutorial I: Resizing & Canvas Work
Tutorial II: Color Management
Tutorial III: Layers
Tutorial IV: Macros
Computer Arts