DiMarco J. Digital Design for Print and Web: An Introduction to Theory, Principles, and Techniques

Подождите немного. Документ загружается.

ChaPter 5 Raster Graphics 163

Figures5-19,a,b The COLOR PICKER with RGB and CMYK (A), and spot-color (B) palettes.

technique Lesson 5.20: the web-Safe Palette

Although you can access the Web-safe color palette in either Photoshop or

Fireworks, the process is a bit different in each program.

QuiCk StepS:

Selecting the Web-Safe Color Palette (PS)

1. In the TOOL palette, go to WINDOW > SWATCHES.

5.20

98364c05.indd 163 1/15/10 1:11:53 PM

PART TWO Techniques164

2. Go to the drop-down arrow and scroll down to WEB SAFE COLORS to load

the Web-safe color palette.

Using the Web-Safe Palette (FW)

1. Go to the color swatches at the bottom of the TOOL palette and click either

FILL or STROKE. Use the drop-down arrow to see and select colors from the

Web-safe color palette.

Figure5-20 The Web-safe color palette should be used for solid colors.

technique Lesson 5.21: the eyedropper

The EYEDROPPER tool is used to sample color so you can set a new color in the

foreground or background swatch in Photoshop and in the ll or stroke swatch

for Fireworks. You can select a color sample from the active image or from any-

where else on the screen.

QuiCk StepS (pS & FW):

Sampling and Selecting Color with the Eyedropper

1. Select the EYEDROPPER tool.

2a. Click in the image.

or:

2b. Position the cursor over the image, press the mouse button, and drag any-

where on the screen to sample colors dynamically as you drag. Release the

mouse button to pick the new color.

Tip

Use the Web-safe

color palette for

creating Web

page backgrounds

and solid-colored

objects such as

logos, text, and

shapes.

5.21

98364c05.indd 164 1/15/10 1:11:53 PM

ChaPter 5 Raster Graphics 165

3. The new color appears in the foreground swatch on the TOOL palette in

Photoshop, or the ll swatch in Fireworks.

Options:

To change the sample size of the EYEDROPPER, choose an option from the

SAMPLE SIZE menu:

POINT SAMPLE (PS) and 1 PIXEL (FW) read the precise value of the pixel •

you select.

3 • × 3 AVERAGE or 5 × 5 AVERAGE read the average value of the specied

number of pixels within the area you click.

Figure5-21 The EYEDROPPER samples color and places it in the COLOR PICKER.

Notice the eyedropper (top) in the red area of the image. It will add the selected color

to the color picker swatch.

Tip

Use the EYE-

DROPPER to get

precise colors

for matching and

retouching.

98364c05.indd 165 1/15/10 1:11:54 PM

PART TWO Techniques166

technique Lesson 5.22: Gradients

Gradients, discussed earlier in this chapter, can be used to create layer masks.

Gradients allow you to create mixes of graduated levels of color and transpar-

ency. Typical two-color gradients start at one color and stop at a different color.

Gradients can also have transparency as an endpoint. You can use preset gradi-

ents, edit them, or create new ones.

QuiCk StepS (pS & FW):

Making or Editing a Gradient

1. Select or make a new layer to place the gradient on. (You can also place gra-

dients inside of selections.)

2. Click on the GRADIENT tool on the TOOL palette. Options appear at the top

(PS) and below (FW). Click the gradient sample to edit the gradients.

3. Double-click on the arrows below the gradient bar to display the color

picker. Pick the gradient colors.

4. To add a STOP (new color bar) to the gradient, click underneath the gradient

bar. To delete a STOP, click on it and drag down.

5. Press NEW to add the gradient to the presets.

Applying the Gradient to a Layer

1. Select or make a new layer to place the gradient on. You can also place gra-

dients inside of selections.

2. Click on the GRADIENT tool on the TOOL palette. Choose or make a

gradient.

3. Drag across the layer to create the gradient. There is a direct correlation

between the area you drag over and the area in which the gradient appears.

Change the options (LINEAR, RADIAL, ANGLE, REFLECTED, and DIA-

MOND) to change the gradient style.

5.22

98364c05.indd 166 1/15/10 1:11:54 PM

ChaPter 5 Raster Graphics 167

Figure5-22 Gradients create smooth color transitions. Here, a selection was used to isolate

the length of the gradient.

Shape Basics

Shapes can be created in all digital design programs. In digital imaging, shapes

can either be raster (pixel) based or vector (line) based.

technique Lesson 5.23: Making Shapes

You can create shapes in digital imaging applications by lling selections or

using shape tools. The shape tools create shapes using ll pixels, a vector shape,

or the PEN tool. This section focuses on shapes with ll pixels. Vector shapes

and the PEN tool are covered in the next chapter, which is on vector graphics.

Tip

Gradients are

useful for creat-

ing transitional

backgrounds and

graphics and for

use in layer masks.

Be thoughtful in

your use of back-

ground gradients

and graphics: the

use of more than

one gradient can

become confusing

and may distract

from the overall

message of the

piece.

5.23

98364c05.indd 167 1/15/10 1:11:54 PM

PART TWO Techniques168

QuiCk StepS (pS & FW):

Making a Shape

1. Select or make a new layer to place the shape on.

2. Select a shape tool (ELLIPTICAL, RECTANGULAR, or POLYGON). Use the

FILL PIXELS option (PS).

3. Choose a color and stroke value

(FW). Use EDIT > FILL. PRE-

SERVE TRANSPARENCY should

be enabled.

4. Drag to draw the shape on the

layer.

Resizing or Rotating a Shape

5. Go to EDIT > FREE TRANS-

FORM (CTRL + T for Windows

or CMD + T for Macintosh; see

Technique 5.7)

Figures5-23,a–e Fill pixels can be used to create shapes. Here, a new layer was made, and

the shape was created. The shape was then selected by holding the Control key and clicking

the layer, and a gradient was applied. In addition, the color overlay was changed, and the shape

was scaled down a bit and softened with a 5-point feather. You can toggle off the layer mask by

right clicking and choosing Disable Layer mask to see what other variations can be built on.

Tip

Shapes are useful

for creating visual

space, buttons,

and icons. They

can be used to

overlap page ele-

ments to provide

visual depth and

solid colr areas.

Shapes can also be

used for illustration

or to create image

backgrounds and

frames.

(C)(B)

(A)

98364c05.indd 168 1/15/10 1:12:00 PM

ChaPter 5 Raster Graphics 169

Retouching Basics

Retouching images requires expertise and high-end computer equipment. How-

ever, some basic techniques in Photoshop and Fireworks can help make photo-

graphic images display better in print or on the Web. The trick to retouching is to

go slowly and use moderation; otherwise, you can do more damage than good.

technique Lesson 5.24: Checking Image Sizes

An image’s size also provides infor-

mation about its resolution. Image

size is measured in pixels and can

be checked and changed by going to

IMAGE > IMAGE SIZE in Photoshop,

or MODIFY > CANVAS > IMAGE

SIZE in Fireworks. In this dialog box,

you will see the physical size of the

document in inches (print) or pixels

(Web). Avoid making the values in

the elds in this box larger; doing so

Figure5-24 IMAGE SIZE dialog box.

5.24

(E)(D)

98364c05.indd 169 1/15/10 1:12:05 PM

PART TWO Techniques170

will impair image quality. Always try to work at 100 percent of the nal output

size.

technique Lesson 5.25: adjusting tonal range Using Levels

Use the LEVELS command to correct images that are too light or too dark. Lev-

els allow you to manipulate the tonal range of a photographic image by adjusting

intensity levels of image shadows (dark areas), midtones (midvalue areas and

grays), and highlights (light areas). These areas are also known as image key

tones. The LEVELS histogram is a small graph, represented by a black moun-

tain range, that acts as a visual guide for adjusting the image key tones. Use

the PREVIEW feature to see what is happening to the image while you make

adjustments.

QuiCk StepS (pS & FW):

Lightening or Darkening an Image Using Levels

1a. (PS) Choose IMAGE > ADJUSTMENTS > LEVELS.

or:

1b. (PS) Choose LAYER > NEW ADJUSTMENT LAYER > LEVELS. Click OK in

the NEW LAYER dialog box. The adjustment layer allows you to show or

hide the image changes in order to compare them.

1c. (FW) Choose FILTERS > ADJUST COLOR > LEVELS.

2. Adjust the shadows and highlights manually by dragging the black-and-

white INPUT LEVELS sliders to the edge of the rst group of pixels on either

end of the histogram. This is the basic technique for adjusting shadows and

highlights.

3. To adjust midtones, use the middle INPUT slider. Move this slider in small

increments; otherwise, you will damage the image’s delity.

4. Click OK. View the adjusted histogram in WINDOW > HISTOGRAM.

5.25

Tip

Adjust levels on

scanned and digi-

tal photographs to

eliminate exces-

sive shadows (dark

areas) and high-

lights (light areas)

by distributing the

key tones.

98364c05.indd 170 1/15/10 1:12:05 PM

ChaPter 5 Raster Graphics 171

Figures5-25,a–c

This image is too

dark, and the histo-

gram shows the pixels

bunched at the shadow

areas (A). Move the

white (highlight) slider

to the end of the data

mountain to adjust the

tonal range and correct

the image’s lights and

darks (B, C). Next, the

image’s red color cast

must be addressed.

(A)

(B)

(C)

98364c05.indd 171 1/15/10 1:12:07 PM

PART TWO Techniques172

technique Lesson 5.26: adjusting Color Balance

Color balancing lets you shift the colors of an image’s pixels. The COLOR BAL-

ANCE command allows you to manipulate the color balance of the RGB and

CMYK colors and the tonal balance of the highlights, shadows, and midtones.

This technique is used to eliminate color casts, which are imbalances in color

distribution in an image.

QuiCk StepS (pS):

Adjusting the Color Balance

1a. Choose IMAGE > ADJUSTMENTS > COLOR BALANCE.

or:

1b. Choose LAYER > NEW ADJUSTMENT LAYER > COLOR BALANCE. Click

OK in the NEW LAYER dialog box. The adjustment layer allows you to show

or hide the image changes in order to compare them.

2. Look at the image to determine what color is cast and what the colors

should be. Then, move the color sliders accordingly. For example, if an image

of a sunset is too red or too magenta, move the red or magenta slider to a

negative number. If the image contains both water and sky, you might need

to use the red slider to add cyan, rather than moving the magenta slider,

which could make the sky and water green instead of blue. The important

point here is that you perform subtle manipulations. Experiment with the

tonal balances to see which will create the richest image detail.

Figures5-26,a,b The red lights on the bridge are contributing to this image’s red cast. This

makes the sky and the water appear pink. Use color balance to subtract red and add cyan to

correct this problem.

5.26

Tip

Adjust color bal-

ance on scanned

and digital photo-

graphs to eliminate

excessive color

casts caused by

digital capture

equipment, cali-

bration faults, and

light reections.

98364c05.indd 172 1/15/10 1:12:09 PM