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

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

ChaPter 5 Raster Graphics 183

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

the LAYERS palette.

4. Choose a color and manipulate the OPACITY. Leave BLENDING on

NORMAL.

5. Click OK.

Figure5-34,a,b Create silhouettes using color overlays. Here, the image was selected, and

the background was eliminated. Then the overlay was applied to create the solid form.

technique Lesson 5.35: Stroke

Strokes are outlines around objects. They call attention to an element and pro-

vide a way of highlighting something using the visual contour of a solid line.

QuiCk StepS (pS):

Adding a Stroke to 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 > STROKE.

or:

3b. Click on the “f,” ADD TO LAYER STYLE icon at the bottom of the LAYERS

palette.

4. Choose a ll color and manipulate the SIZE, POSITION, OPACITY, and FILL

TYPE. Leave BLENDING on NORMAL.

5. Click OK.

Tip

Color overlays

are good to use to

change the color

of text or image

quickly and easily.

You can also color-

ize and silhouette

images to create a

unique visual style

in a composition.

5.35

98364c05.indd 183 1/15/10 1:12:33 PM

PART TWO Techniques184

Figure5-35 Stroke can be added to text and objects.

Final Output for Print

Always save a layered Photoshop le (.psd) in RGB at 300 dpi as a source docu-

ment backup.

When printing on a printing press, proong machine, ink-jet, or laser printer,

the nal le should be in CMYK and should be saved as either an .eps or a

.tif. These le formats create uncompressed les whose color data is saved

internally.

The nal resolution for print les is 300 to 350 dpi, at the nal print size.

Consult the commercial printer who is printing the job for exact le resolution

specications.

If you are using a laser or ink-jet printer, 300 dpi is acceptable. If the le for-

mats and the color models are wrong, the images will not print correctly or as

Tip

Stroke works well

when you want

to give an object

a commercial

appearance, rather

than leave it in

its natural form.

Strokes create

order with line and

also lend variety

to a composition

when combined

with photographic

images.

98364c05.indd 184 1/15/10 1:12:34 PM

ChaPter 5 Raster Graphics 185

expected. Final images for a print project created in Photoshop may be placed

into a page layout program such as Adobe InDesign or into a digital illustration

program such as Adobe Illustrator.

technique Lesson 5.36: CMYK Conversion

QuiCk StepS:

Converting a File to CMYK

1. Go to IMAGE > MODE > CMYK COLOR.

Figure5-36 A CMYK conversion will allow you to atten the image layers and convert the

document to CMYK color for nal print output.

technique Lesson 5.37: Creating a Clipping Path

Transparency is not built in to raster images: you must create an alpha channel

(discussed on page 156) for screen transparency (Web or broadcast); otherwise,

if the image does not ll the page area, it will appear with a white bounding box.

The same is true with raster images placed in page layout and digital illus-

tration applications. To insert a raster image in a page layout or vector appli-

cation, you must rst create a clipping path, which “clips” away the external

5.36

5.37

98364c05.indd 185 1/15/10 1:12:35 PM

PART TWO Techniques186

background. The clipped area is dened in the image by a path, rather than a

marquee selection.

QuiCk StepS:

Creating a Clipping Path Using a Selection Tool

1. Make a detailed selection of the image area needing transparency.

2. Go to WINDOW > PATHS to open the PATHS palette.

3. Click on the third icon, MAKE WORK PATH FROM SELECTION.

4. Double-click the italicized name work path and rename it.

5. Go to the drop-down arrow in the PATHS palette, then select CLIPPING

PATH name; leave FLATNESS blank.

6. Click OK.

You can also use the PEN tool to create a path around an image area, and

then convert the path to a clipping path.

Figures5-37,a–c Create clipping paths

using the LASSO or PEN tool. Notice rst (A)

the selection around the guitar’s headstock

and tuners, then the converted path (B). A

clipping path permits you to have a transpar-

ent background surrounding a printed image

in a page layout or illustration program such as

Adobe InDesign or Adobe Illustrator.

(A) (B)

(C)

98364c05.indd 186 1/15/10 1:12:36 PM

ChaPter 5 Raster Graphics 187

technique Lesson 5.38: Saving as an .eps for Print

Whenever you create a clipping path, save your le in .eps format. Even though

there is a vector path embedded in the le, the image is still a raster image and

should not be scaled in the nal layout program.

QuiCk StepS:

Saving a File in .eps Format

1. Go to FILE > SAVE AS > .EPS.

EPS stands for Encapsulated PostScript. All proong machines and laser

printers use the PostScript printing language to process les. The .eps le

format is used for both raster and vector les. It is the primary format for

saving nal output vector graphics and is very reliable for the PostScript

printer output of raster images.

Figure5-38 When setting EPS OPTIONS, use ASCII85 for Windows and Binary Encoding for

Macintosh. Always use TIFF 8 bit preview. Make sure other boxes are unchecked.

5.38

98364c05.indd 187 1/15/10 1:12:37 PM

PART TWO Techniques188

technique Lesson 5.39: Saving as a .tif for Print

QuiCk StepS (pS & FW):

Saving a File in .tif Format

1. Go to FILE > SAVE AS > .TIF.

TIF stands for Tagged Image File Format. Use this format for desktop ink-jet

printers, as many use non-PostScript drivers to process les. However, .tif les

also work well on PostScript devices such as laser printers, proofers, and large-

format printers.

Figure5-39 When outputting for high-resolution print, make sure to select IMAGE

COMPRESSION > NONE.

Final Output for Web

Always save a layered Photoshop le (.psd) or a layered Fireworks le (.png) in

RGB as a source document backup.

All screen graphics, including Web page graphics, are 72 ppi. When creat-

ing Web pages or graphics, or any content for the screen, the nal le should be

in RGB or Web-safe index color. Full-color image les should be saved as .jpgs

with RGB color. In fact, you can use .jpg les for all artwork, including logos and

line art. Flat artwork, such as logos or line art, can also be saved as .gifs with

5.39

98364c05.indd 188 1/15/10 1:12:38 PM

ChaPter 5 Raster Graphics 189

Web-safe index color; however, the Web-safe index color palette cannot be

used for photographic images.

If the le formats and the color models are wrong, the images will not show

up correctly on the Web pages. Final images for a Web project created in Pho-

toshop may also be placed into a Web page layout program such as Adobe

Dreamweaver or Microsoft FrontPage.

technique Lesson 5.40: Saving as a .jpg for web

QuiCk StepS (pS):

Saving a File in .jpg Format (Photoshop Only)

1a. Go to FILE > SAVE AS > .JPG.

or:

1b. Go to FILE > SAVE > SAVE FOR WEB > JPEG.

2. Select QUALITY > HIGH 8 and BASELINE (“Standard”).

JPG stands for Joint Photographic Experts Group. Use this format for all

Web graphics. A Web .jpg le should be in RGB color.

Figure5-40 Used for Web graphics, .jpgs should be avoided for high-end print work

because their le compression algorithm generates a quality loss on high-resolution

devices.

5.40

98364c05.indd 189 1/15/10 1:12:39 PM

PART TWO Techniques190

technique Lesson 5.41: Saving as a .gif for web

QuiCk StepS (pS):

Saving a File in .gif Format (Photoshop Only)

1a. Go to FILE > SAVE AS > Compuserv.GIF.

or:

1b. Go to FILE > SAVE > SAVE FOR WEB > GIF.

2. Flatten the layers and use the Web-safe color index palette.

3. Select ROW ORDER > NORMAL.

The resulting .gif le will be in Web-safe index color.

GIF stands for Graphics Information Format.

Design Assignment

Assignment: Create a digital collage for a magazine article.

tools: Digital imaging software and six digital images.

Specs: Imagine you are the graphic artist hired to create a digital montage for

an article in Rolling Stone magazine. The image must t on an 11 × 17” landscape

page. You must direct the art and nd up to eight related images (use four to six

in the nal piece) to composite in a digital collage that expresses unity.

theme: Global warming and government. You can use specically environmen-

tal images, or images of any subject—politicians, buildings, monuments, trees,

animals, landscape images, natural textures, and so on.

Research the theme rst, and then gather newspaper or magazine clippings,

photos, and textures. Scan or photograph materials if needed. Next, practice

using selections to isolate the desired visual elements from their backgrounds.

Drag them into the nal document and arrange them thoughtfully to create a

digital montage.

Explore effects to create drop shadows and color overlays as well as lters

for blurring images. Be sure to use lters or effects sparingly, as their overuse

will diminish the quality of the design.

5.41

98364c05.indd 190 1/15/10 1:12:39 PM

ChaPter 5 Raster Graphics 191

Follow the design principles and techniques presented in chapter 2 to create

an appealing visual whole, or a gestalt. Make careful decisions about unity and

variety, scale, repetition, texture, and visual rhythm.

Save the work le as a .psd and output the nal le as a .tif or .eps, with

a clipping path if needed. Advanced design assignments are available at the

book’s Web site: www.wiley.com/go/digitaldesign.

Online Movie Lessons

Tutorial movies for technique lessons are provided online. Each section con-

tains step-by-step walk-throughs. They are available at the book’s Web site:

www.wiley.com/go/digitaldesign.

Bibliography

Muir, Peter. 2000. Preight: Avoiding costly printout problems through proper le

preparation. San Diego, CA: Windsor Professional Information.

98364c05.indd 191 1/15/10 1:12:39 PM

98364c06.indd 192 1/15/10 1:12:49 PM