Working with Color - Online video tutorials & training | lynda.com

4.Working with Color | Adobe Photoshop CS2 for the Web H•O•T

| 60 |

Photoshop CS2 and ImageReady CS2 offer greattools for working with color. In this chapter,

you’ll learn tips for choosing, editing, andchanging colors. You’ll explore the Color

Picker dialog box, the Colors palette,and the Swatches palette, then recolorimages with the colors you choose.

You’ll find less emphasis on Web-safe color in this chapter than youmight expect from lynda.com books.Today, there’s less reason to use toa Web-safe palette, because 8-bit(256-color) computer display sys-tems are practically obsolete. You’llread about the decline of Web-safe

color in this chapter, but you’ll alsodiscover how to access Web-safe

colors when you need them. Along theway, you’ll determine how to limit the

Color Picker dialog box to Web-safe colors,load a special lynda.com swatch of Web-safe

colors, create your own custom color swatches,and copy color values as HTML.

4Working with Color

| Color Profiles and the Web |

| Color Considerations for Windows and Mac Users |

| The Decline of Web-Safe Color | Choosing Colors |

| Creating and Saving Custom Swatches |

| Recoloring Layered Images | Copying Color as HTML |

chap_04

PCS2Web HOT CD-ROM

04 PSCS2_HOT(60-83).qxd 05/13/2005 12:51 PM Page 60

Adobe Photoshop CS2 for the Web H•O•T | 4.Working with Color

| 61 |

Color Management and the WebHave you ever looked at the same image on two computers and noticed the colors look different? Thisvery common problem results because there is no calibration standard for computer displays.

In the print world, designers use ICC (International Color Consortium) profiles to make sure the colorsonscreen look the same as when they’re printed. ICC profiles are embedded into the image file formatand provide additional information about the color characteristics of the image. This color informationstays with the file so any device can display or print the file accurately.

Unfortunately, ICC profiles are of no value when designing Web graphics. First, embedding ICC pro-files increases the image size, which negatively impacts how quickly graphics load. In some cases, acolor profile can be upwards of 750 KB, which may be larger than an optimized Web graphic. Second,most Web browsers can’t read color profiles. As a result, any efforts you make to keep colors consis-tent using ICC profiles will be lost as soon as your graphics hit the Web.

Color Management Considerations for Windows UsersIn an effort to standardize how colors appear onscreen, Microsoft and Hewlett-Packard developed a color space called sRGB. The goal of sRGB is to produce a reliable and repeatable method fordescribing color that can be understood by computer monitors and that picks up one calibration based on an average monitor.

Photoshop CS2 offers a preset in the Color Settings dialog box, which uses sRGB as the default work-ing space and will convert any RGB image you open to use sRGB. Therefore, you can rest assured thatyou’ll view all graphics you create for the Web using sRGB. Here’s how you can access the preset:



| 62 |

Choose Edit > Color Settings. In the Color Settings dialog box, choose North America Web/Internet.Notice RGB Working Space is set to sRGB and RGB Color Management Policies is set to Convertto Working RGB.

Before you begin designing Web graphics, there is one more thing you need to set up—Proof Colors.By default, Proof Colors is turned on and set to Working CMYK, which can negatively impact howyour colors appear onscreen.

To change the default Proof Colors setup, make sure you do not have any documents open inPhotoshop CS2. Choose View > Proof Setup > Windows RGB to specify Windows RGB as thedefault Proof Colors setup. To make sure Proof Colors is turned on, open a file in Photoshop CS2and take a look at the contents of the View menu. You’ll know Proof Colors is turned on if you see a checkmark beside it in the View menu. If it’s not, choose View > Proof Colors.

The settings described here apply to a Windows setup. Unfortunately, there are a few more factors toconsider if you’re using a Mac, or if you think your viewers will be using Macs to view your Web site. At the moment, sRGB is a color workspace that is supported natively on Windows, and only in certainapplications, such as Photoshop CS2, on the Mac.



| 63 |

Windows Gamma Settings vs. Mac Gamma SettingssRGB calls for a standard gamma setting of 2.2. What is gamma, you might ask? The gamma affectsthe appearance of your computer screen by defining a midpoint for gray. Gamma affects the grays, orvalues between white and black. Windows computers use a 2.2 gamma setting; Macs use a 1.8 gammasetting. As a result, colors appear darker on Windows than they do on Macs. In Photoshop CS2 andImageReady CS2, there are ways to preview how an image will look on each platform. Here’s how:

If you’re using Photoshop CS2 and ImageReady CS2 on Windows, open an image in Photoshop CS2 or ImageReady CS2. In Photoshop CS2, to preview how the image will appear on a Mac, chooseView > Proof Setup and choose Macintosh RGB. In Image Ready CS2, choose View > Preview >Standard Macintosh Color. To make sure Proof Colors is turned on, take a look a the contents of the View menu. If there is a checkmark beside Proof Colors, it’s turned on. If it’s not turned on,choose View > Proof Colors.

If you’re using Photoshop CS2 and ImageReady CS2 on a Mac, open an image in Photoshop CS2 or ImageReady CS2. In Photoshop CS2, to preview how the image will appear on Windows, chooseView > Proof Setup > Windows RGB. In ImageReady CS2, choose View > Preview > StandardWindows Color.

Color Management Considerations for Mac UsersIf you’re using a Mac, you need to consider a few things about your color settings before you begindesigning Web graphics.

If you use the North America Web/Internet preset in the Color Settings dialog box, Photoshop CS2will use the sRGB working space, which has a gamma of 2.2. On a Mac, this is can be a problembecause colors will appear different in Photoshop CS2 than in most other Mac applications that don’tsupport sRGB, including ImageReady CS2, Macromedia Dreamweaver, and most Web browsers. Thiscan be frustrating when you’re designing Web graphics on a Mac because your colors will constantlylook different, depending on which application you use.

If you’re using a Mac, you should still use the North American Web/Internet preset in the ColorSettings dialog box but use Proof Colors (Photoshop CS2) or Preview (ImageReady CS2) if youwant to simulate how your images will appear in other programs and Web browsers on a Mac.

With no document open in Photoshop CS2, choose View > Proof Setup > Monitor RGB to make it the default Proof Colors setup. To make sure Proof Colors is turned on, take a look at the contentsof the View menu. If there is a checkmark beside Proof Colors, it’s turned on. If it’s not turned on,choose View > Proof Colors.

With no document open in ImageReady CS2, choose View > Preview > Uncompensated Colors tomake it the default Preview setup.



| 64 |

TIP | Finding Additional Color Management Help

As you can see, color management is a complex topic! Photoshop CS2 ships with additionaldocumentation about color management. For more information, refer to the Color Managementtopic in the Photoshop CS2 online Help.

TIP | Adjusting Gamma Settings on a Mac

If you think your Web site will have a larger Windows audience, you may want to change yourMac OS X gamma setting to 2.2 so you can accurately see how the colors will appear onWindows in all applications. This change may save you from potential unanticipated revisions tolighten up your graphics. Keep in mind that changing your gamma settings will affect all applica-tions, not just Photoshop CS2.

To change your gamma settings, use the calibration utilities built into Mac OS X. Open theSystem Preferences dialog box, and choose Displays. Click the Color button, then click theCalibrate button. Click Continue to navigate to the Select a target gamma screen. Select 2.2 Television Gamma. Click Continue until you reach the Give the profile a name screen.Type a name for your profile. Click Continue.

Remember, changing your gamma to match Windows affects all applications, includingPhotoshop CS2, ImageReady CS2, other graphics applications, HTML editors, and Web browsers.



| 65 |

The Decline of Web-Safe ColorThe concept of Web-safe color was introduced when the Web first gained popularity in the mid-1990s.At that time, the majority of computers were far less capable than they are today. These old computershad 8-bit video cards that could only display 256 colors. Most graphics professionals owned comput-ers with 24-bit video cards that could display millions of colors but cost a lot more money than theaverage 8-bit consumer computer. For this reason, Web designers with 24-bit video cards producedcolors that could not be accurately portrayed on more common computers with 8-bit video cards. As aresult, the Web-safe palette was born. It was first published and described in Lynda Weinman’s book,Designing Web Graphics (1996).

The Web-safe palette contains only 216 colors. However, the 216 colors are special because thesecolors can be accurately displayed on computers with 8-bit video cards. The term Web-safe colorrefers to the use of these special 216 colors. Other terms, such as the Web palette, browser-safepalette, 216-color palette, Netscape palette, or 6 × 6 × 6 color cube, all refer to the same 216 colors.

You should limit your color choices to the Web-safe color palette if you think your Web site will beviewed on computers with 8-bit video cards. Just a few short years ago, almost all computers had 8-bitvideo cards. When Web design first emerged as a design medium, designers needed to understandWeb-safe color and how to create Web graphics in this limited palette. This was no picnic becausethe browser-safe palette is not very visually exciting—it contains mostly highly saturated colors of mediumvalue and not many light or dark colors, nor many muted or tinted tones.

Good news! In most cases, it is now safe to design Web graphics without the Web-safe palette. Today,very few users have computers with 8-bit video cards, and most users can see any color you designwith. If you’re unsure about when to use the Web-safe palette, the answer depends on your audienceand client. If you’re designing Web sites for alternative online publishing devices, such as cell phones,PDAs, or Internet appliances, you may still need to use a Web-safe palette. Most of those devicescurrently display only 8-bit color, and some display only 1-bit (black-and-white) color.

Some companies still feel it’s a badge of Web design honor to work with Web-safe colors, so youmight want to know how to use them. Keep in mind there’s no harm in using the Web-safe palette—it simply limits your choices to 216 colors. There’s no right or wrong about using Web-safe colors aslong as you’re able to combine them in pleasing and effective ways. As you’ll learn in this chapter, theWeb-safe palette is built into the color picking tools in Photoshop CS2 and ImageReady CS2, so it’seasy to create or recolor a Web graphic in Web-safe colors.



| 66 |

What Happens on an 8-Bit System If You Don’t Use Web-Safe Colors?It’s useful to know what your Web graphics will look like if you don’t design with Web-safe colors, andyour Web site is viewed on a computer with an 8-bit video card. Two problems will occur.

First, the colors you set in the HTML code, such as the colors of page backgrounds, text, and links, willshift in the 8-bit viewer’s Web browser. Unpredictable color shifts can cause text or links to be unread-able against a like-colored background.

Graphic viewed in 24-bit color Same graphic viewed in 8-bit color

Close-up in 24-bit color Close-up in 8-bit color

The second problem involves color. If you create flat artwork, such as illustrations or cartoons, withnon-Web-safe colors, these colors will appear dithered (made up of tiny dots) when the image isviewed on a computer with an 8-bit video card. The unwanted dithering is the result of the viewer’s8-bit video card trying to simulate colors it can’t display. The previous illustrations demonstrate whatdithering looks like, which shows why you’ll want to use Web-safe colors in your flat art Web graphicsif you think you may have viewers with 8-bit video cards. However, the opposite is true for photo-graphic content. If you’re preparing photographs for the Web, never force them to Web-safe colors.When an 8-bit browser displays photographic images, it converts them to 8-bit on-the-fly and does abetter job than if you’d converted them yourself.

In the next few exercises, you’ll learn how to use the color picking tools Photoshop CS2 and ImageReadyCS2 offer and how to select Web-safe colors when you need them. You’ll also learn how to pull it alltogether with quick and easy ways to recolor layered images.



| 67 |

Choosing Color in Photoshop CS2 and ImageReady CS2There are three tools for choosing color in Photoshop CS2 and ImageReady CS2: the Color Pickerdialog box, the Color palette, and the Swatches palette. Here’s an overview of all three:

Photoshop CS2 and ImageReady CS2 Color Tools

Option Description

Color Picker dialog box The Color Picker dialog box is the most visual and compre-hensive tool for choosing color. You can access it by clickingthe foreground or background colors in the Toolbox or by clicking any color swatch inside a dialog box or on theOptions bar. You’ll learn how to use the Color Picker dialogbox in Exercise 1.

Color palette The Color palette is an easy way to choose color if you know the exact RGB, HSB, CMYK, or Lab values you wishto use because it provides a useful interface for typing thevalue and for previewing the color. You can access the Colorpalette by choosing Window > Color. See the sidebar at theend of Exercise 1 to learn how to use the Color palette.

Swatches palette The Swatches palette is an excellent way to save colors you wish to use in more than one image. Instead of rememberingcolor values or choosing the colors again from scratch, youcan save custom swatches to use in future projects. You can access the Swatches palette by choosing Window >Swatches. You’ll learn how to use the Swatches palette in Exercise 3.

Eyedropper tool The Eyedropper tool lets you sample color from an existing image. If you have an image that uses colors you like, youcan use the Eyedropper tool to sample the color so you can use the color in your projects. You can access theEyedropper tool by selecting it in the Toolbox or by press-ing I, which is the keyboard shortcut. You’ll learn how to usethe Eyedropper tool in Exercise 3.



| 68 |

Choosing Colors from the Color Picker

In this exercise, you’ll learn how to choose color, including Web-safe colors, using the Color Pickerdialog box.

[PS/IR]1.

1. Click the Foreground Color in the Toolbox to open the Color Picker dialog box.

2. Adjust the Hue slider and use the circle in the value saturation square to adjust the cur-rently selected color.

Notice the hexadecimal readout at the bottom of the Color Picker dialog box. If you movethe arrows up the vertical Hue slider, you’ll see these readout numbers and the colors onthe screen change.

3. Click the H, S, B (Hue, Saturation, Brightness); R, G, B (red, green blue); or L (lightness),a (a-axis: green to magenta), b (b-axis: blue to yellow) radio buttons, continue to adjust toHue slider, and watch the value saturation square change.

H, S, and B stand for hue, saturation, and brightness. The Color Picker dialog box in theprevious screen shot is set to view by hue. All the different radio buttons offer different ways of seeing and picking colors. You may find these choices help you quickly find colorsthat fit together.

Value saturation square

Currently selected color

Hue slider

Hexadecimal readout



| 69 |

4. Turn on the Only Web Colors option.

Notice the value saturation square changes, and you are limited to only a few colors. By turning onOnly Web Colors, you are limiting yourself to the Web-safe color palette described earlier in thischapter. Using this option will ensure you always choose a Web-safe color.

5. Turn off the Only Web Colors option. Move the circle inside the value saturation square until yousee a small cube with a square swatch to the right of the color preview. The cube alerts you whenyou’ve selected a non-Web-safe color. Click the small swatch below the cube.

The selection jumps to the closest Web-safe color, and the cube disappears.

6. In the Color Picker dialog box, click OK.

Notice the color you chose now appears as the Foreground Color in the Toolbox.

Click the swatch belowthe cube to choose theclosest Web-safe color.



| 70 |

TIP | Choosing Colors from the Color Palette

In addition to choosing colors from the Color Picker dialog box, you can choose colors from theColor palette in Photoshop CS2 and ImageReady CS2. You may find it easier to choose colorsfrom the Color palette because you can leave it open at all times instead of reopening and clos-ing the Color Picker dialog box. To choose colors from the Color palette, first make sure theColor palette is open. If it’s not, choose Window > Color.

Adjust the sliders, or type a value into the Color palette. You can choose to have different slidersappear in the Color palette, including RGB sliders, HSB sliders, CMYK sliders, Lab sliders, andWeb Color sliders by choosing the appropriate slider from the Color palette menu.

Choose Web Color Sliders from the Color palette menu.

When you use the Web Color sliders, the colors automatically snap to Web-safe colors at the tickmarks. If you want to override the Web Color sliders, hold down the Option key (Mac) or Alt key(Windows). As soon as you choose a color outside the Web-safe color range, the alert cubeappears to the left of the sliders. You can choose the closest Web-safe color by clicking theswatch below the cube, just as you did in the Color Picker dialog box.

Note: In Photoshop CS2, you must choose Web Color sliders to view the alert cube. BecauseImageReady CS2 is designed specifically for creating Web graphics, the alert cube is availablefor all sliders.

NOTE | ImageReady CS2 and Photoshop CS2 Color Picker Differences

ImageReady CS2 has a Color Picker dialog box almost identical to the one in Photoshop CS2. TheColor Picker dialog box in ImageReady CS2 lacks some print-oriented features, such as feedbackabout Lab color, CMYK color, and out-of-print-gamut warnings. Photoshop CS2 can be used todesign print or Web graphics; ImageReady CS2 is intended specifically for designing Web graphics.



| 71 |

Choosing Color with the Swatches Palette

Another way to choose color in Photoshop CS2 and ImageReady CS2 is to use the Swatches palette.Photoshop CS2 and ImageReady CS2 ship with a number of prebuilt swatches, including swatchesbased on Web-safe colors. In addition, you can load swatches created and saved by other PhotoshopCS2 and ImageReady CS2 users.

[PS/IR]2.

1. Make sure the Swatches palette is visible. If it’s not, choose Window > Swatches.

2. Open the Swatches palette menu. Notice there are three Web swatches—Web Hues,Web Safe Colors, and Web Spectrum. All three swatches contain the 216 Web-safe colors.The only difference is how the swatches are organized.

3. Choose Web Safe Colors from the Swatches palette menu.

4. Click OK to replace the current swatches in the Swatches palette with the contents of theWeb Safe Colors swatches.

Note: If you click Append instead of OK, the contents of the Web Safe Colors swatches areautomatically added to the current swatches in the Swatches palette.

The Swatches palette automatically updates with the Web Safe Colors swatches. Increasethe size of the Swatches palette so it displays all the colors by dragging the resize handle in the bottom-right corner of the palette. You can choose any color in the Swatches paletteby clicking it. When you click a color in the Swatches palette, the Foreground Color in theToolbox automatically changes to reflect your choice.



| 72 |

Next, you’ll learn how to load the lynda.com swatches from the PSCS2Web HOT CD-ROM.

Lynda Weinman and Bruce Heavin wrote a book together in 1997 called Coloring Web Graphics,which is now out of print. Bruce developed a series of Web swatches for that book, which he organ-ized aesthetically to make it easier to choose Web-safe colors. One of these swatches is includedinside the chap_04 folder of the PSCS2Web HOT CD-ROM for you to load and use.

5. Choose Replace Swatches from the Swatches palette menu.

Note: If you choose Replace Swatches from the Swatches palette menu, you will replace the currentswatches with the swatches you’re loading. If you choose Load Swatches, you will append the currentswatches with the colors of the swatches you’re loading

6. Navigate to the chap_04 folder you copied to your Desktop from the PSCS2Web HOT CD-ROMand choose color.aco. Click Load (or Open in ImageReady CS2).

7. Expand the Swatches palette window using the resize handle in the bottom-right corner of thepalette. Then, use the scroll bar to view the swatches. The swatches are organized by hue (up anddown), by value (right to left), and saturation (up and down).

Note: Many of the colors are repeated to present an array of colors organized to make choosing coloreasy. Seeing all the hues together is nice. If you want to pick a red, for example, you can view thechoices easily. Seeing all the dark colors and/or colors of equal saturation together is also helpful.

8. Choose Reset Swatches from the Swatches palette menu. Click OK to replace the lynda.comswatches with the default swatches.



| 73 |

Creating and Saving Custom Swatches

When you’re designing Web graphics, you’ll often want to use a custom color scheme—either one you create for a project or one a client provides for you—and limiting the Swatches palette to containonly those colors can be helpful. In this exercise, you’ll learn how to create custom swatches twoways—by selecting colors from existing swatches and by sampling colors from an image by using the Eyedropper tool.

[PS]3.

1. Choose Edit > Preset Manager. In the Preset Manager window, choose Swatches fromthe Preset Type pop-up menu.

The Preset Manager in Photoshop CS2 lets you organize content libraries, such as swatches,as well as other application presets, such as brushes, gradients, styles, and patterns. In thisexercise, you’ll only learn about swatches. For more information about customizing othercontent libraries, refer to the Photoshop CS2 online Help.

2. Choose Web Hues from the Preset Manager menu. Click OK to replace the currentswatches with the Web Hues swatches.

This will replace the currently loaded swatches in the Preset Manager (and in the Swatchespalette) with swatches of Web-safe colors organized by hue.

3. Choose a few colors by holding down the Cmd (Mac) or Ctrl (Windows) key and clickingthe colors you want to be part of your new custom swatches.



| 74 |

4. Click Save Set. In the Save dialog box, type the name Custom Web Colors.aco in the Save Asfield (Mac) or Save in field (Windows). Be sure to include the .aco extension because it will identifythe file as Photoshop CS2 swatches. Navigate to the Color Swatches folder in the Presets folder inthe Photoshop CS2 application folder. Click Save.

By saving the Custom Web Colors.aco file in the Presets\Color Swatches folder, you’ll see theswatches in the Swatches palette menu the next time you launch Photoshop CS2.

5. In the Preset Manager, click Done.

6. Close and relaunch Photoshop CS2.

You have to close and reopen Photoshop CS2 in order to see the new swatches listed in theSwatches palette menu.

7. Choose Custom Web Colors from the Swatches palette menu. Click OK to replace the currentswatch with the Custom Web Colors swatch, which will now open up in the Swatches palette.

Next, you’ll make custom swatches from the colors in an existing image.



| 75 |

8. Open javaco_tea.psd from the chap_04 folder you copied to your Desktop.

9. Choose Preset Manager from the Swatches palette menu.

The Preset Manager opens with your Custom Web Colors.

10. Press Cmd+A (Mac) or Ctrl+A (Windows) to select all the Custom Web Colors. In the PresetManager dialog box, click Delete to delete all the colors. Click Done to close the Preset Manager.

The Swatches palette should now appear empty, leaving you to add custom swatches from scratch.

11. In the Toolbox, select the Eyedropper tool.

12. With the Eyedropper tool selected, click a color in the open image, then at the bottom of theSwatches palette click the New Color button.

This will add the color you selected in the image to the Swatches palette. Repeat this step until youhave all the colors you want in the Swatches palette.



| 76 |

13. Choose Save Swatches from the Swatches palette menu. Navigate to the Color Swatchesfolder in the Presets folder in the Photoshop CS2 application folder, and name the swatchesjavaco_tea.aco. Click Save.

The next time you launch Photoshop CS2, the javaco_tea.aco swatches you just created will appearin the list of swatches in the Swatches palette menu.

14. Close the image. You don’t need to save your changes.

TIP | Saving Swatches to Use in Other Adobe Creative Suite 2 Programs

Photoshop CS2 has a new option for saving swatches—Save Swatches for Exchange. Thisoption lets you save swatches created in Photoshop CS2 and use the swatches in other AdobeCreative Suite 2 programs, including Illustrator CS2 and InDesign CS2. Likewise, Illustrator CS2and InDesign CS2 also have the Save Swatches for Exchange option, which lets you create andsave custom swatches in those programs and use the saved swatches in Photoshop CS2.

Here’s how to use the Save Swatches for Exchange option in Photoshop CS2:

Choose Save Swatches for Exchange from the Swatches palette menu.

In the Save dialog box, give the Swatches a name but be sure to keep the .ase extension. The.ase extension is what allows Illustrator CS2 and InDesign CS2 to understand the informationcontained in the file and open the contents as swatches.



| 77 |

Recoloring Layered Images

Now that you’ve learned how to choose colors in different ways, how do you make images using thosecolors? You could brush or paint with any color at any time. You could also use fill tools. This next exer-cise focuses on how to recolor an existing image. It gives you a chance to work with the Lock TransparentPixels feature, which lets you easily recolor layered images.

[PS/IR]4.

1. Choose Reset Swatches from the Swatches palette menu. When asked if you want toreplace the current color swatches with the default colors, click OK.

2. Open javaco_tea_coupon.psd from the chap_04 folder you copied to your Desktop.Make sure the Layers palette is visible. If it’s not, choose Window > Layers.

Have a look at the contents of the Layers palette. This image is composed of multiple layers.It’s helpful to set up your files with separate layers like this and give the layers meaningfulnames so you can work with each layer individually, as we will do in this exercise. If you’rewondering what layers are all about, not to worry, Chapter 5, “ Working with Layers,” willteach you everything you need to know about layers.

3. At the bottom of the Layers palette, click the Background layer to select it.

Right now the image is colored using shades of greens. To change the color scheme toshades of red (or any other color choices you’d prefer), you’ll be working with one layer at a time, starting with the Background layer.

4. Choose a light beige from the Swatches palette, or use the Eyedropper tool to samplelight beige from the photograph inside the image.



| 78 |

5. To fill the Background layer with the color you chose, press Option+Delete (Mac) orAlt+Backspace or Alt+Delete (Windows).

This is a fantastic shortcut for filling a layer with a color because it is faster than using the Edit > Fillmenu command or the Paint Bucket tool.

6. Click the green layer in the Layers palette to select it. Choose a dark red from the Swatchespalette, or use the Eyedropper tool to sample dark red from the photograph inside the image. Press Option+Delete (Mac) or Alt+Backspace or Alt+Delete (Windows).

Notice the entire layer is now filled with dark red. In the following steps, you’ll learn a valuable trick torecolor just the green area and not the entire layer.

7. Press Cmd+Z (Mac) or Ctrl+Z (Windows) to undo the dark red fill.



| 79 |

8. In the Layers palette, click the Lock Transparent Pixels button. Press Option+Delete (Mac) orAlt+Backspace or Alt+Delete (Windows).

Lock Transparent Pixels protects the transparent areas of the layer. When you fill the layer with anew color, Photoshop CS2 fills only the areas of the layer that contains colored pixels, and it pre-serves the transparent areas. I can’t tell you how many students I’ve watched try to use the MagicWand or other selection tools to select shapes on layers in order to fill them. The technique youlearned here works much better because it’s easier, it fills only areas of the layer with colored pixels,and it doesn’t leave rough edges on color fills.

9. Click the javaco layer to select it, and click the Lock Transparent Pixels button. Using the same darkred, fill the javaco layer by pressing Option+Delete (Mac) or Alt+Backspace or Alt+Delete (Windows).

10. Choose a medium red from the Swatches palette, or use the Eyedropper tool to sample colorfrom the photograph. Click the tea layer in the Layers palette, and click the Lock Transparent Pixelsbutton. Press Option+Delete (Mac) or Alt+Backspace or Alt+Delete (Windows).



| 80 |

11. Choose a dark red from the Swatches palette, or sample dark red from the image using theEyedropper tool. Click the smoke curl layer to select it, and click the Lock Transparent Pixelsbutton. Press Option+Delete (Mac) or Alt+Backspace or Alt+Delete (Windows).

This step is particularly cool. Notice the smoke curl is slightly blurry. The Lock Transparent Pixelsmaintains the blurry quality of the smoke curl while recoloring it with the dark red.

12. Choose a light beige from the Swatches palette, or sample light beige from the image using theEyedropper tool. Click the Type layer (the layer with the T icon) to select it. Press Option+Delete(Mac) or Alt+Backspace or Alt+Delete (Windows).

Notice you did not have to turn on the Lock Transparent Pixels option—in fact, you can’t because it’sdimmed. This is the default behavior for an editable type layer—it automatically preserves the transparentareas when you fill the layer.



| 81 |

13. Choose a dark red from the Swatches palette, or sample dark red from the image using theEyedropper tool. Click the frame layer to select it, and click the Lock Transparent Pixels button.Press Option+Delete (Mac) or Alt+Backspace or Alt+Delete (Windows).

Like the smoke curl layer, the frame layer has a wide variation in the transparent versus nontransparentareas. The Lock Transparent Pixels option maintains this variation beautifully!

14. Choose a light beige color from the Swatches palette, or sample light beige from the image usingthe Eyedropper tool. Click the freedom of choice layer to select it, and click the Lock TransparentPixels button. Press Option+Delete (Mac) or Alt+Backspace or Alt+Delete (Windows).

Now all the layers in your image should be recolored from shades of green to shades of beige and red.

15. Close the file. You don’t need to save your changes.

The skills covered in this exercise will help you recolor layered images as you design Web graphicsin Photoshop CS2.



| 82 |

Copying Color as HTML

This exercise will be of value to you if you’re used to programming your own HTML code or workingwith an HTML editor. If you don’t work with HTML, feel free to skip this exercise! If you’re making animage in Photoshop CS2 or ImageReady CS2 and want to capture a color from that image to placeinside your HTML code so you can color a background, link, or other element in HTML to match theimage, you can use the Copy Color as HTML feature.

When you specify color in HTML code, you must use values from the hexadecimal numbering system,which uses letters and numbers to identify colors. You don’t have to worry about knowing any morethan that when you’re working with Photoshop CS2 and ImageReady CS2—they take care of the mathfor you.

The Copy Color as HTML feature converts any RGB (red, green, blue) color value to a string of hexa-decimal digits. This command also puts the hexadecimal color value into your computer’s clipboard soyou can paste it as text into other applications—a handy feature if you’re writing HTML from scratchand want to place a color value into your code.

[PS]5.

1. In Photoshop CS2, open javaco_tea.psd from the chap_04 folder you copied to your Desktop.

2. Select the Eyedropper tool from the Toolbox, then click a color in the background of the image.



| 83 |

3. Ctrl+click (Mac) or right-click (Windows) and choose Copy Color as HTML from the shortcut menu.

If you’re working in ImageReady CS2, first click on a color in the document with the Eyedroppertool, then Ctrl+click (Mac) or right-click (Windows) anywhere in the document and choose CopyForeground Color as HTML.

Note: The Eyedropper tool must be selected for this to work in Photoshop CS2 or ImageReady CS2.

4. Open a text editor, such as TextEdit (Mac) or Notepad (Windows), or an HTML editor, such asAdobe GoLive or Macromedia Dreamweaver, and choose Edit > Paste or press Cmd+V (Mac) orCtrl+V (Windows). When you paste the color into a text editor or HTML editor, it will look like this:color="#336666".

5. Close both files without saving.

Now you know how easy it is to choose color in Photoshop CS2 and ImageReady CS2 and how toapply your color choices quickly and efficiently to a layered image. These programs make choosingand using color fun and creative by offering the best color-picking tools around.

In the next chapter, “ Working with Layers,” you’ll learn the benefits of working with layers when youdesign Web graphics.


Documents

Working with Color - Online video tutorials & training | lynda.com