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

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

ChaPter 5 Raster Graphics 173

technique Lesson 5.27: replace Color

The REPLACE COLOR command lets you replace pixel colors in an image by

creating a temporary mask to select specic colors and then setting the hue,

saturation, and lightness of the selected areas. You can also use the COLOR

PICKER to select a replacement color that will have the same shadows and

highlights.

QuiCk StepS (pS):

Replacing the Color of Pixels

1. Choose IMAGE > ADJUSTMENTS > REPLACE COLOR.

2. Choose SELECTION as a display option. This will display the mask in the

preview box. Masked areas appear black, and unmasked areas appear white.

Partially masked areas (areas covered with a semitransparent mask) appear

as varying levels of gray, according to their opacity.

3. Select the areas exposed by the mask whose color you want to replace by

using the EYEDROPPER tool. Click either in the image area in the preview

box, or in the image document, and select the color you want to replace.

4. Replace the color of the selected areas by performing one of the following

operations:

a. Drag the HUE, SATURATION, and LIGHTNESS sliders (or enter values in

the corresponding elds).

or:

b. Double-click the RESULT swatch and use the COLOR PICKER to select

the replacement color.

5. Use the ADD TO SAMPLE EYEDROPPER tool to add areas that you may

have missed in the initial selection. As you select a color in the image

area, the mask in the preview box is updated, and the color replacement is

updated to show the newly selected areas as changed.

5.27

Tip

Use the REPLACE

COLOR command

for experiment-

ing with new

colors in order to

change the look

of an image—if,

for example,

you wanted to

change the color of

clothing.

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

PART TWO Techniques174

Figures5-27,a–c

Use the REPLACE

COLOR command to

change an image’s col-

ors while maintaining

the shadows and high-

lights. Here the area to

be replaced (shirt color)

has been selected and

isolated. Use the eye-

droppers to select the

hue from the image,

then make adjustments

and preview the results.

98364c05.indd 174 1/15/10 1:12:12 PM

ChaPter 5 Raster Graphics 175

technique Lesson 5.28: Saturate and Desaturate

The SATURATE and DESATURATE commands are used to add or subtract hue

(color) from an image. Using the SPONGE tool, you can absorb color or add color.

QuiCk StepS (pS):

Saturating or Desaturating an Image Area

1. Select the SATURATION tool (SPONGE tool).

2. From the top of the options area, choose SATURATE or DESATURATE.

3. Choose a brush size from the options palette at the top.

4. Leave the FLOW at 50%.

5. Drag the sponge over the pixels whose hue you want to enhance or reduce.

Excessive desaturation will lead to a gray color. Excessive saturation will cre-

ate an undesirable, extremely vivid color.

Figures5-28,a,b Desaturate layers to create grayscale images in an RGB document. Cre-

ate selections to isolate portions of an image to be desaturated, or saturate colors to bring out

additional hue using the SPONGE tool.

technique Lesson 5.29: Dodge and Burn

When you use the DODGE tool, you lighten areas of the image. The BURN tool

allows you to darken areas of an image. The tools are named for traditional pho-

tography’s technique for regulating exposure on specic areas of a print.

5.28

Tip

Use the SATURA-

TION and DESAT-

URATION tools to

enhance or reduce

a color in an image.

Manipulate the col-

ors in small areas

rst to determine

possible outcomes

and avoid disturb-

ing image clarity.

Too much satura-

tion will also create

problems getting

CMYK colors to

print accurately.

5.29

98364c05.indd 175 1/15/10 1:12:13 PM

PART TWO Techniques176

QuiCk StepS (pS):

Dodging (Lightening) and Burning (Darkening) an Image

1. Select the DODGE tool or the BURN tool.

2. Choose a brush size from the OPTIONS palette at the top.

3. Choose the key area and exposure (amount) from the option bar:

Midtones will change the middle range of grays.

Shadows will change the dark areas.

Highlights will change the light areas.

Specify the exposure for the DODGE tool or the BURN tool.

4. Drag over the part of the image you want to lighten or darken.

Figures5-29,a,b

The DODGE and BURN

tools are used to bring

out or reduce highlights,

shadows, and midtones.

Here, the clock’s high-

lights were dodged to

brighten them.

Tip

Use the DODGE

and BURN tools

for pulling out

or suppressing

highlights (bright

areas) or shadows

(dark areas). This

is useful when

image areas may be

“blown out” from

an unexpected light

reection. The tools

can also be used

to create shadow

areas—to enhance

the abdomen mus-

cles of a model to

create a “six pack,”

for example—or for

eliminating shadow

areas, such as the

dark circles under a

model’s eyes.

98364c05.indd 176 1/15/10 1:12:14 PM

ChaPter 5 Raster Graphics 177

Type in Digital Imaging Applications

Type is a critical element in communication design and can be generated in all

types of applications. Digital imaging programs have specialized type tools that

allow you to set type, distort type, and create type effects.

technique Lesson 5.30: Using type for headlines and Body text

The text tools in digital imaging applications work powerfully for small bits of

text, such as headlines, buttons, graphical text headers for Web pages, text with

effects, or even short paragraphs.

QuiCk StepS (pS & FW):

The TYPE palette in Photoshop uses the same character palette as the other

Adobe CS applications. The type palette in Fireworks is on the PROPERTIES bar,

which appears at the bottom of the screen by default.

Placing Type on a Document

1. Click on the TYPE tool in the TOOL palette.

2. Click on to the document; a cursor will appear.

3a. (PS) In the options palette at the top, set TYPEFACE, FONT SIZE, and

COLOR.

3b. (FW) Go to the OPTIONS palette at the bottom and set the FILL and

STROKE.

4. Start typing. Photoshop and Fireworks automatically create a new layer for

the text. With the text tool selected, highlight the text to make necessary

edits.

5. Go to WINDOW > CHARACTER to open the CHARACTER palette, which

provides type, leading, kerning, tracking, and baseline shift controls.

6. Go to WINDOW > PARAGRAPH to open the PARAGRAPH palette, which

provides alignment and indentation controls.

7. You can also drag using the text tool to create a text container in either

Photoshop or Fireworks. The width of the container can be adjusted with

manipulation handles so that you do not have to manually insert line breaks.

5.30

Tip

Digital imaging

tools are great for

applying special

effects to text, and

for adding headlines

and short para-

graphs to a layout.

They are also good

for creating buttons

and graphical text

headers for Web

projects. When

you have a meatier

body of text that

needs typesetting,

however, the digital

imaging applica-

tions won’t do. To

typeset larger bod-

ies of text, or to cre-

ate multiple-page

documents, you will

want to use a page

layout program.

You can also use a

digital illustration

program for setting

type. Setting type is

covered in the sec-

tion on page layout

(see page 245), and

digital illustration

programs are cov-

ered in chapter 6.

98364c05.indd 177 1/15/10 1:12:15 PM

PART TWO Techniques178

Figures5-30,a–c Headline text and secondary text were set using Downcome (a type-

face created by Eduardo Recife) at 249 and 24 point, respectively. The body text was set in

medium-weight News Gothic Standard at 10 point. Eight-point Modern 880 type was added

to the angel icon at the bottom to create a pseudo-logo for this experimental design. The nal

variation adds color and rotated text, created using the FREE TRANSFORM command.

technique Lesson 5.31: warped and Free transforming type

Photoshop’s warp text tools give text visual variety and, when used correctly,

can translate text into a graphical element that adds to the quality of a design.

You can also use the FREE TRANSFORM command to scale, rotate, or manipu-

late the perspective of type.

QuiCk StepS (pS):

Warping Tex t

1. Create text and then select it using the TEXT tool.

2a. Go to LAYER > TYPE > WARP TEXT.

or:

2b. Click on the WARP TEXT icon in the OPTIONS palette.

3. The WARP TEXT dialog box will appear. Choose a warp effect.

4. Manipulate the BEND and DISTORTIONS.

5. To edit the warp, click on the text layer, highlight the text, and go to LAYER >

TYPE > WARP TEXT (or click on the WARP TEXT icon in the OPTIONS

palette).

5.31

98364c05.indd 178 1/15/10 1:12:21 PM

ChaPter 5 Raster Graphics 179

Transforming Type (PS & FW):

Scaling and Rotating

1. Create type using the TYPE tool.

2. Select the type and press CTRL + T (Windows) or CMD + T (Macintosh);

FREE TRANSFORM handles will appear around the text.

Scaling

1. Click on the corner handle; hold the SHIFT key and drag to scale.

Rotating

1. Place the cursor alongside any handle; when you see a curved line with an

arrow, drag up or down to rotate.

Perspective (PS)

2. Click on a handle holding the CTRL key (Windows) or the CMD key (Macin-

tosh); move the handles to manipulate perspective.

The FREE TRANSFORM command is useful for creating perspective after

warping text, because you can move the entire FREE TRANSFORM box,

rather than just a single handle.

Figures5-31,a–c An arc and vertical distortion were created using the WARP TEXT com-

mand. The nal manipulation was done with the FREE TRANSFORM command and perspec-

tive manipulation.

Tip

Text effects

work well for visual

typography and

display text. Warps

and transforma-

tions are also useful

when illustrating

with type.

98364c05.indd 179 1/15/10 1:12:22 PM

PART TWO Techniques180

Figures5-31,b–c

Bitmap Filters

Digital imaging programs make dozens of bitmap lters available; they are, how-

ever, a secondary tool, and in many cases their use can actually hurt a design.

This lesson covers the one lter I consider a staple in the digital designer’s tech-

nique toolkit. Feel free to explore the other available lters, but be sure you can

justify their results’ value to the composition and the overall message.

technique Lesson 5.32: Motion Blur

Adding a motion blur (or any other blurring technique) to an image creates a

feeling of motion and adds an element of abstraction.

QuiCk StepS (pS & FW):

Adding a Motion Blur Filter to an Image or Text

1. Create text or place an image on its own layer.

2. Go to FILTER > BLUR > MOTION BLUR.

3. Set the ANGLE and DISTANCE.

4. Click OK.

5.32

Tip

Combining blurred

and sharp images

gives a composi-

tion an interesting

visual overlap.

98364c05.indd 180 1/15/10 1:12:25 PM

ChaPter 5 Raster Graphics 181

Figures5-32,a,b MOTION BLUR applied to a layer’s text object, creating a new variation.

Layer Effects

technique Lesson 5.33: Drop Shadows

Adding drop shadows is easy in digital imaging applications. The same tech-

nique applies to both text and images.

QuiCk StepS (pS & FW):

Adding a Drop Shadow to Text or Image

1. Create text or place an image on its own layer with a transparent back-

ground. (Some portion of the transparent background must be visible in

order to see the shadow.)

2. Select the text layer or the image layer.

3a. (PS) Go to LAYER > LAYER STYLE > DROP SHADOW.

or:

3b. (PS) Click on the “f,” which is the ADD TO LAYER STYLE icon at the bottom

of the LAYERS palette.

or:

3c. (FW) Go to the PROPERTIES bar at the bottom and select FILTERS. Choose

SHADOW AND GLOW > DROP SHADOW.

5.33

Tip

Drop shadows add

depth to an image

and help eliminate

atness. Be aware

of your angles and

positions: they

must be consistent

so that they appear

to come from the

same light source.

As a general rule,

don’t use drop

shadows on text

below 36 point:

drop shadows

work best with

larger text.

98364c05.indd 181 1/15/10 1:12:29 PM

PART TWO Techniques182

4a. (PS & FW) Manipulate the shadow’s POSITION, OPACITY, SOFTNESS, and

ANGLE by entering numeric values into these elds.

or:

4b. (PS) Move the shadow directly on the document.

5. Click OK.

Figures5-33,a,b Drop shadows on type and on an image.

technique Lesson 5.34: Color overlay

The color overlay layer effect is a handy tool that allows you to create colorized

images and silhouettes.

QuiCk StepS (pS):

Placing a Color Overlay on Text or Image

1. Create text or place an image on its own layer.

2. Select the text layer or the image layer.

3a. Go to LAYER > LAYER STYLE > COLOR OVERLAY.

or:

5.34

98364c05.indd 182 1/15/10 1:12:32 PM