Color is all around us, a blessing few of us take time to think about or recognize. It is as common (for those of us without visual impairments) as the air we breathe, but when you become aware of its presence, you become aware of the minute variations that exist in every color. Notice the shades of green on the tree outside your window. Notice how those greens differ from the green of the grass. Watch the play of light and shadow. It becomes fascinating. This chapter will try to give you the beginnings of handling color in Photoshop.
So, we all know what color is, but how is color represented on a computer screen, much less color on paper (which we will get to later today)?
The computer, as you may already know, is based on a binary data system--simply put, ones and zeroes. In a computer, a "switch" is either on or off. This is a rather basic and simplified look at that complex machine on your desk, but when thinking of pixels, it becomes useful.
A pixel (a short for picture element) is a small block on the grid of your screen and there are 72 pixels in an inch. These pixels can be either on or off, which is to say, black or white. Of course, more colors than that are available on most computers.
The capability to display multiple colors (up to 16.7 million) on a modern monitor is a result of a pixel's bit depth. Bit depth refers to how many colors a single pixel can represent. A pixel with a bit depth of 8 can display 2 to the 8th power of colors--256 colors. A bit depth of 16 displays 65,636 colors. A bit depth of 24 can display 16.7 million colors, or 2 to the power of 24.
This has quite an impact on the resolution and clarity of your images, but, as with every positive comes the inherent negative: the brighter, crisper, and more life-like your image is, the more memory it will consume. It is not uncommon to be working with files that consume 10 or more megabytes of memory, and for images with larger dimensions, you are looking at an even greater size.
NOTE: Does any of this sound familiar? If not, you might take a trip into your Control Panels (on Macintosh or Windows) and open the one that controls your monitor, called either Monitors or Display. Open the control panel and note the color options you can select--depending on your monitor, this can be anything from black and white all the way up to high color at 16 million.
I suggest that when you are working with Photoshop your monitor should be at the highest resolution possible. It will slow your machine somewhat, but it is important to be able to see your work.
Now that we have discussed a little about color and how the machine displays color, imagine trying to set up a system that accounts for these colors. Where would you start? How do you separate the subjective view of color from the objective perception of color? Not an easy task.
Color is defined in terms of color spaces and gamuts (see Figure 4.1). These attempt to address the full range of color. The human eye is capable of perceiving a greater number of colors than machines can display or print. Thus, the color spaces are subsets of the human perception.
Figure 4.1
Color Gamuts.
A color space is the entire range of possible colors. A gamut refers to all of the colors within a given color model. Thus, a gamut is a subset of a space.
Today we are going to investigate the different properties of color--both in Photoshop and in real life. Some of the information at the beginning might seem a little esoteric, but in the long run, it's valuable to know. After all, the more you know about color and how Photoshop addresses it, the better off you'll be. But don't worry, I'll try to be as brief and painless as possible.
The first thing to know is that Photoshop addresses color in terms of models. The color models are as follows:
The most encompassing of these color models is CIE Lab. It defines a color gamut that is broader than any of the other models. Lab color is designed to be device independent, meaning that colors defined in this model will appear and print the same no matter the machine. However, this is probably not a model you will use frequently.
NOTE: Photoshop uses the CIE model, because its gamut is so broad, to convert from model to model. You, especially as a beginner, will probably not have much use for this model. I suggest that you work in HSB, RGB, or CMYK. Let it do its work in the background, enabling Photoshop to switch painlessly between color models, keeping your color as consistent as possible.
Let's focus our attention now on what works and what you need to know to get up and running. The other three models, HSB, RGB, and CMYK, will have much greater impact on your work in Photoshop. We will examine these models for displaying and achieving color, and then we will turn our attention to the Photoshop modes. The modes are methods of reproducing color based on the models. In fact, Photoshop has modes that precisely match the models.
Just for fun, why don't we dive in with some hands-on before we proceed? Working through this exercise will give you a better idea of the concepts and ideas that we will be exploring shortly. We'll look at a colorful image and examine how the modes affect the way the color appears.
Now, let's take a crack at changing modes:
Figure 4.2
The original figure.
Figure 4.3
Changed to grayscale. All of the color values were assigned a value of gray between
1 and 256--1 being white and 256 being black.
Figure 4.4
The Eyedropper.
Figure 4.5
An out of gamut warning.
NOTE: To change the color used in the display of the Gamut Warning, select File+ Preferences+Transparency & Gamut. Click the color swatch at the bottom of the dialog box and choose a color. I use red because it is the easiest to see.Now, select View+CMYK Preview. All of the colors that are out of gamut become shaded with your selected color.
If you have a color printer, you might want to print this document. Does it look OK? Do the colors match what you see onscreen? If so, you're in luck. Your monitor is accurately calibrated. If not, you will need to calibrate (adjust) your monitor so that the images onscreen accurately display the colors as they will print.
We will discuss calibration later on today. For the moment, let's turn our attention to the modes and models to get an idea of what was going on when we followed the previous steps.
The difference between the modes and the models is simple. The models are over-arching methods of defining color, whereas modes are particular to Photoshop--the way Photoshop defines the color. In this section, we will discuss both.
The Photoshop modes available under Image+Modes are as follows:
Otherwise, the other models, CMYK and RGB, have corresponding modes in Photoshop. In this section, we will also discuss the Grayscale mode and Indexed Color.
Before we begin, it must be said that the best way of learning this stuff is to have Photoshop up and running on your machine. You will glean a certain amount of information from merely reading, but the real learning won't start until you start working in Photoshop. This is so for two reasons:
We'll start out here with the most basic of the color modes available within Photoshop--Bitmap and Grayscale.
The Bitmap mode uses only two color values to display images--black and white, while the Grayscale mode offers 256 shades of gray that range from white to black (see Figures 4.6 and 4.7 for examples).
Figure 4.6
An image ain the Grayscale mode.
Figure 4.7
The same image in the Bitmap mode.
Notice the vast difference in quality. The Grayscale image is clear and crisp, whereas the bitmap image is not. There are, however, a number of ways to convert to Bitmap mode, which we'll discuss later today (and this is not to be confused with the Bitmap file format, which you can read about in Appendix C).
Duotones are a hybrid mode (black and white with 1 added color). If you have ever seen old black and white photos in which the people's cheeks are rosy or their eyes or hair are colored, you have seen a duotone. A duotone is a grayscale image to which a color has been added. But why stop at just one extra color? Add up to four if you like.
The HSB model is based on how the human eye perceives color. HSB stands for Hue, Saturation, and Brightness. Hue is the actual color--red, green, blue, and so on. Saturation is the purity of the color, or how much gray is in proportion to the true hue. Brightness is defined by the lightness or darkness of the color.
These components are very clear if you will select Window+Show Color. In the Colors palette, click the menu in the upper right corner and select HSB.
The bar across the top of the palette is the Hue bar (see Figure 4.8). Select colors from the bar at the bottom of the dialog. Notice the percentage in the box to the right. The percentages correspond to the color's placement on the color wheel:
In the middle slider, you see the saturation component. To the far right, you see the fully saturated color--the purest color. On the left of the saturation bar, you will see gray or perhaps even white. Drag the slider back and forth, and watch the foreground color swatch. Notice the change in the color.
In the brightness bar, you can drag to lighten or darken a color. Lighten it to 100% for the purest color; darken it to 0% and you will end up with black.
In the lower-left corner of the dialog box, you will occasionally see an Out of Gamut warning, meaning that the process colors for printing cannot duplicate the current color. Click the warning triangle to select the nearest color that can be achieved with process colors. More information on CMYK and process colors will be covered later in this chapter.
All of these attributes (Hue, Saturation, Brightness) combine to define color, which is a natural and intuitive way of selecting color. The Color Picker in Figure 4.8 is set up in the HSB model. Note the radio buttons to the right of the color window. Click the "S" radio button for saturation (see Figure 4.9). Notice how this changes your color window. Figure 4.10 shows the "B" button checked.
Figure 4.8
The Color Picker set up in the HSB model.
Figure 4.9
The Color Picker with the Saturation radio button clicked.
Figure 4.10
The Color Picker with the Brightness radio button clicked.
When I am working in Photoshop, I tend to use the HSB color model most often because it is so easy to adjust a color based on the way your eye perceives it. I know that when I drag the brightness slider to the left I am going to get a darker color, and I know when I increase the saturation that I am going to get a more vibrant color.
If you are planning on publishing your work on the web or in a multimedia presentation, HSB is a perfectly fine color model in which to work--perhaps switching to Indexed Color before finishing if you are web publishing (see Day 14). What you see is close to what others will see on their monitors, but this is never an exact science-- especially on the web. We will discuss more issues related to web publishing on Day 14.
The RGB color model is based on the primary colors of red, green, and blue. This is how your monitor displays color (by emitting light through phosphors). It is an additive color model, meaning that if you add all of the colors at 100% of their intensity, you get white. This also means, of course, that if you remove all of the colors (or move their sliders each to 0), you will get black. Let's give this a try.
Select Window+Show Colors. In the Color palette's menu (the arrow in the upper-right corner), select RGB Sliders (see Figure 4.11). This will ensure that we are working in RGB from the start--saving us the trouble of converting modes.
Figure 4.11
The Color palette in RGB.
In the Color palette, you will notice that if you move one of the sliders, the other two reflect the change. While in the HSB model where your adjustment of the Hue component has a direct and intuitive effect on the Brightness component, adjusting the RGB model isn't nearly as intuitive--but we don't have to be color experts as long as we have the color bar at the bottom of the palette. Without delving too deeply into the arcane secrets of color manipulation, we can usually come up with a pretty good match or original color.
CMYK (Cyan, Magenta, Yellow, and Black) are known as the process colors. These colors are the colors that generate most of the printed material you see, from billboards to product packaging to magazines. To achieve the wide variety of colors you see in, say, a fashion magazine, the four basic colors Cyan, Magenta, Yellow, and Black are combined.
On the page, they appear as halftone dots, the size and angle of which can be adjusted. The smaller the dots are, the less concentration of that particular color. The angle controls how the dots mix with the surrounding inks.
At one time, in the not-so-distant past, people called imagesetters actually did this by hand--setting up screens with angles for the halftones--but the advent of desktop computers and desktop publishing has all but rendered them extinct.
To get a clearer idea of what is really going on with four-color or process printing, read the following section. In it we examine, close up, what a four-color image looks like.
CMYK colors are used in professional printing and are a super set of the inks used in most consumer model color printers. Most home-based color printers use only CMY.
Take, for example, any color magazine. Find a picture (flesh tones are great for this), and look at it through a magnifying glass. Printers and prepress professionals use a fancy magnifying glass called a loupe (pronounced "loop").
If you look closely enough, you will see moirés. These are patterns of dots made up of the four process colors. With these dots, set at different percentages and varying angles, you can create almost any color you might need. Try this:
Figure 4.12
The Channels palette.
Here is another variation that will show you a better picture of how CMYK dots are arranged in an image to create the illusion of color.
Figure 4.13
The Color Halftone dialog box.
Figure 4.14
The halftone result.
The result is a "magnified for effect" version of what really happens in
the creation of 4-color images. Notice the different size of dots. Also note the
angles at which they are set in relation to each other. This is how the broad spectrum
of printed color that you see in most publications is usually created.
As I said earlier, the best way to learn to work with color in Photoshop is to have Photoshop up and running on your machine, the Color palette open, this book propped beside you, and perhaps your favorite beverage nearby.
So, to start off, select Window+Show Color. In the Color palette's menu (the arrow in the upper-right corner), select CMYK Sliders. This ensures that we are working in CMYK from the beginning, keeping us in the gamut.
CMYK is not an intuitive color mode. As with RGB, each adjustment you make to a particular color has echoed effects on the other colors. Say, for instance, you drag the Cyan slider to the far right, increasing the presence of the color Cyan to 100%. The other colors will assume a bluish cast. If you drag it to the left, effectively removing Cyan altogether, the other colors will assume a pinkish hue--given that the Black component isn't turned up too high.
NOTE: If you want to preview the colors available to you, without trying all of them in Photoshop, PANTONE offers swatch books. These are "ready-mixed" colors that you can have your professional printer use, but they also enable you to preview colors, because they include the CMYK and RGB color percentages, which you can simply enter into the Color Picker's dialog boxes. This ensures a true color, regardless of the monitor's calibration. What you see on the swatch is what you will get.
Indexed Color, when it can work for you, is a wonderful thing. It is a palette, or I should say, a collection of palettes--7 in all, in most of which you get 256 colors. With this mode you know exactly what you are getting, and if you don't like any of the palettes Photoshop supplies, you can build your own.
First of all, Indexed Color is a blessing for the World Wide Web. Web browsers can only accurately display 216 colors and these are reserved in a palette for Indexed Color images.
But before you think that this mode is only capable of 256 colors, let me set you straight, because this is not the case. Dithering takes place in Indexed Color images. This means that certain colors are combined, that is, adjacent pixels are blended onscreen to create a third (or 257+) color. Let's take a look at the Indexed Color dialog box. Select Image+Modes+Indexed Color (see Figure 4.15).
Figure 4.15
The Indexed Color dialog box.
You are given a number of palette choices when you work with Indexed Color. They are as follows:
NOTE: Here's a clever trick when converting an image into Indexed Color using the Adaptive palette. Make a selection in the image before converting. This way, the colors in the marquee will take precedence as Photoshop converts the entire image.
2. Select Image+Mode+Indexed Color.
3. In the Indexed Color dialog box, choose Custom from the drop-down menu. Click OK.
4. When you do so, you will be presented with the Custom Color Table dialog box (see Figure 4.16). Here you also have a number of choices in the drop-down menu at the top of the box. A few, such as Windows and Macintosh, we looked at in the preceding numbered list. Spectrum offers precisely that--the colors of the visible spectrum of light. Grayscale gives you the 256 shades of gray. Blackbody (one of my favorites) is made up of the colors of a heated body.
Figure 4.16
The Color Table dialog box.
NOTE: Try this. Open a new file with a white background. Paint on it with black. Paint whatever comes to mind. Now convert the image to Indexed Color and select Custom. In the Custom Color Table, select Blackbody. Click OK. What do you think?
But this still isn't what we're looking for. We need to create our own palette. Here's how you do it:
NOTE: If an image is already in Indexed Color, choose Image+Mode+Color Table to define a Custom color table.
That color is now part of your table, but this would take forever to accomplish by hand, opening every single box and defining every single color, so Photoshop makes it easy:
Figure 4.17
The Color Picker. Select your starting color.
Photoshop will do the calculations for you, choosing colors two through 255, based on your selections. How's that for easy?
When you have found a color table that you like, save it using the Save command in the Custom Color Table. You also can open previously saved colors by using the Load command.
The real trick to successfully working in color is knowing what mode you need, what mode lends itself to your particular output plans. If you plan to print your work, you need CMYK. If you plan to publish your work on the web or use it in multimedia, I suggest that you work in either RGB and save your images with Indexed Color.
All you have to do to convert, at least mechanically (this is not taking into account image degradation or changes), is select Image+Mode+ and then choose your poison.
Although Photoshop uses the model (Lab) with the broadest gamut of color to change color modes (as if all of the other modes are circles that will fit with Lab color), this is no guarantee that your colors are going to turn out.
The rule of thumb is this and I can't stress it enough: don't work in RGB if you are going to output your images to print. Instead, work in CMYK. If you are going to publish your images on the web, use Indexed Color (or use RGB and then convert). Knowing this will save you many hours of wondering why that web page looks funky on the Windows machine you use at home, or why the yellow in your printed piece looks brownish.
But what if the color mode you want happens not to be available in the Image+Mode menu? Nothing to worry about. It is true that sometimes the mode you want will not be available, but you can always get to it by first converting to Lab Color and then to the color you want. For example, when you have created or imported an image that is in Indexed Color, the CMYK option is grayed out, or not available. You actually have two choices here. Convert to Lab or RGB and then take the image over into CMYK, but beware. Make sure that the color is the one you want.
Most color conversions are simply a matter of choosing the desired mode from the Image+Mode menu and crossing your fingers. There are, however, a number of options when converting between Grayscale and Bitmap (you can only convert to Bitmap mode from the Grayscale mode). Figure 4.18 displays the image we'll be using in this section.
Figure 4.18
Original Image.
In Figure 4.19, you will see the Bitmap dialog box (Image+Modes+Bitmap).
Figure 4.19
Bitmap mode options.
Let's explore the options you have with the Bitmap mode:
Figure 4.20
300 pixels per square inch.
Figure 4.21
50% Threshold.
Figure 4.22
Pattern Dither.
Figure 4.23
Diffusion Dither.
Figure 4.24
The Halftone Screen dialog box.
Figure 4.25
Halftone Screen.
Here is another alternative for converting to the Bitmap mode. This involves filling the image with a pre-defined pattern.
Figure 4.26
The twisted.tif.
Figure 4.27
The Custom Pattern option.
Figure 4.28
The finished product.
This option takes the pattern you defined and creates the bitmap image with it. It
is an interesting effect and could be used in conjunction with a filter (see Day
12 for more information on filters).
Color channels are great. Remember way back at the beginning of today, when you tried to adjust a component of CMYK, but couldn't adjust it alone without affecting its counterparts? Well, with channels, sometimes referred to as alpha channels, you can.
Channels make up the different color components of images. Bitmap, Grayscale, Duotone, and Indexed Color have only one channel, whereas RGB has three and CMYK has four.
Try turning off a color channel by clicking the eye icon in the far left of the palette. This removes that particular color. Thus, whatever changes you make to the image at this point (which you will learn about tomorrow) leaves this channel unaffected.
To create a new channel, simply click the New Channel button at the bottom of the dialog box. To delete a channel, select it in the options palette and drag it onto the Trash icon at the bottom of the palette.
The first thing to note here is that if you are satisfied with your four-color printed pieces (or three-color depending on your printer), then read no further. This section is only for those people who are experiencing difficulties and discrepancies between what they see on their monitors and what is printed out, or who want to improve their print-outs, which is probably everybody at one time or another.
To begin with, you need to make a print-out of the file testpic.jpg (or Ole no Moire on Macs). You will find this in your Photoshop folder in the Goodies folder+Calibration folder. How does it look? Great? Not so great? Let's see what we can do about that.
First, make sure that your monitor has been on for a while, at least a half an hour, and second, make sure that you have turned off any desktop patterns or background images you might have set up on your computer's desktop. Although these features might be visually interesting, they might detract from your ability to see color as it truly appears. Colors, when placed in close proximity to one another, significantly affect how we perceive them. Blue, for example, will appear much differently on a background of white than on a background of, say, bright yellow.
NOTE: For those of you who are Windows users, this is less of a concern because Photoshop provides an entire desktop workspace for you. On the Macintosh, however, the desktop is still quite visible in the Standard Screen Mode.
Next, make sure that the lighting in your work environment is as it is when you are working. Try to set up your area as you generally have it--adjust the brightness and contrast so that viewing is comfortable. With the setup as you want it, you should in some way mark the controls so that if they are changed, you can easily change them back (as they say, "Don't touch that dial"). This way, you can compensate for the glare from external office lights or windows.
NOTE: The only real difference between calibrating a Macintosh and a Windows machine is in the location of the Gamma control panel. On a Macintosh, you will find this in the Control Panels folder. On a Windows machine, you can only reach it after going through the Color Preferences command. I will note this as we go through the process.
Now, we can proceed to the actual calibration steps:
Figure 4.29
Testpic.jpg.
Figure 4.30
The Gamma Control Panel.
Figure 4.31
The Monitor Setup dialog box.
4. For Windows users: click Calibrate in the Monitor Setup dialog box. A new dialog box very similar to the Mac's gamma control panel will appear (see Figure 4.32).
Figure 4.32
The Windows version of the Gamma Control Panel.
6. To adjust the gamma, drag the slider to match the gray swatches.
NOTE: Windows users: Do not overlook the Preview button in the lower left-hand corner of the dialog box. With it, you can immediately see the consequences of your adjustments.
When you have reached a level of calibration that is acceptable to you, you should save the settings. Simply select Save Settings in the Gamma control panel (or dialog box, for Windows users), name your settings, and click OK. This also enables you to create different settings for different users, types of paper, and for different output options (electronic versus printed).
If you weren't aware of the complexities of not only representing color electronically or physically with ink, but of the sheer complexity of color itself, I hope that this chapter opened your eyes to some of the aspects in this delicate art. A person could spend years learning about color, and I hope that you will pursue a deeper knowledge than was presented here, but I also hope that you got enough of an idea of how to use color so that you can get your machine up and running the way you want.
In this chapter, we discussed the color modes and the specific color models in Photoshop. We also looked at a few of the more salient issues regarding converting between modes. The one thing to remember is that although Photoshop uses the Lab model, the color model with the most encompassing gamut, to govern conversions, there is always the possibility of color loss. Try, if it is at all possible, to work in the mode in which you will output your final product.
And finally today, we took a brief tour of the calibration tools for Photoshop. It is not always easy to match the color of electronic images with their printed forms (or even electronic forms on other platforms and machines), but a solid approach to calibration can go a long way toward reducing this chasm.
Tomorrow, you will delve deeper into the world of color by learning how to make tonal adjustments and general adjustments.
© Copyright, Macmillan Computer Publishing. All rights reserved.