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

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

Chapter Objectives

Identify and dene vector

graphics.

Identify and dene the

differences between

vector graphics for print

and for the Web.

Introduce basic vector graph-

ics techniques.

Chapter 6

Vector Graphics

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

PART TWO Techniques194

Digital Illustration and Vector Graphics

Digital illustration is the creation of artwork using vector graphics applications.

Vector graphics are also known as vector objects. Vector images are made with

points and paths, which are described in the vector software and PostScript

programming language as mathematical formulas. Vector graphics are complex

because they use many points (or anchor points) and typically combine various

vector objects inside of one graphic—a logo with a shape and text, for example.

Points connect line segments, which can be open or closed objects that have a

color ll or color stroke. Curved line segments have direction handles that allow

you to manipulate the curve.

Vector Graphics for Print and Web

Vector graphics have built-in transparency. Instead of importing into a page

layout program like InDesign or a digital imaging program like Photoshop, with

a white bounding box, vector images (CMYK .eps les) have a transparent

background.

The le format used for printing vector les is .eps. Vector graphics can be

rasterized to convert them from points and paths to pixels. You must rasterize

vector images before you can use them in a Web page. Exporting an image as

a .jpg or .gif in a vector program, or opening the vector image in a digital imag-

ing application such as Adobe Photoshop or Adobe Fireworks, will automati-

cally rasterize the image and turn it into a bitmap graphic. However, vector

formats are native to Adobe Flash, a vector-based motion graphics program;

therefore, the same paths and points that exist in Illustrator are also utilized in

Flash.

The most common graphical objects that are created in vector-based pro-

grams such as Adobe Illustrator are logos, line art graphics (buttons and icons),

and illustrations. Text-based designs are also created using vector programs.

Vector graphics are high resolution and 300 ppi at any size. That is why they

are the format used for logos, which usually have to be printed at many different

sizes—on banners (big) and business cards (small), for example. Vector graph-

ics also provide smooth, clean, sharp lines when printed on a PostScript printing

device such as a laser printer or a wide-format poster printer.

98364c06.indd 194 1/15/10 1:12:50 PM

Chapter 6 Vector Graphics 195

Figure6-1 Vector graphics are made up of anchor points and line segments. Graphics created

in vector programs can be scaled without losing quality.

Here are some concepts critical to outputting print and Web vector images:

Vector images are resolution independent. •

Vector images for print projects are automatically created at 300 ppi to •

scale in vector applications such as Adobe Illustrator and Corel Draw.

Always export vector images for Web projects at 72 dpi to scale. •

It is OK to scale vector images above 100 percent after they are placed in a •

page layout program; the image will not degrade (i.e., get jagged and lose

detail). Create images at the size needed—or larger, if they may need to be

enlarged in the future.

Print projects are created in CMYK mode or using spot color (Pantone •

swatches).

RGB color can be used for Web and broadcast graphics made in digital illus- •

tration (vector) programs. Never use CMYK for Web or broadcast graphics.

The correct nal output le format for vector graphics is .eps. These les can •

be placed in page layout programs such as InDesign and QuarkXPress.

Digital illustration applications also allow output of raster images if needed. •

This is for convenience, not necessity. If you do this, export raster images for

the Web as either .jpgs or .gifs. The .eps le format will not work in a Web page.

98364c06.indd 195 1/15/10 1:12:50 PM

PART TWO Techniques196

The native, layered le format for Illustrator images is .ai; .eps also works as •

a native, layered le format for Illustrator.

Integrating artwork between raster and vector programs is easy. You can •

drag and drop or import and place Illustrator les into digital imaging pro-

grams such as Photoshop or Fireworks. The images are rasterized automati-

cally and will lose their vector attributes: resolution and scalability.

Vector Graphics Techniques

As discussed in the previous chapter on raster graphics, digital production proj-

ects are the culmination of a series of techniques that require familiarity with the

various tools, palettes, and menus in the software application you use. There

are thousands of techniques and a variety of digital imaging applications: all of

them cannot be covered in a multisubject text such as this one. This chapter

covers some of the most important techniques in order to help you get started

creating layered illustrations, icons and logos, and page designs in digital illus-

tration programs.

All of the techniques below are shown in Adobe Illustrator, but apply to

other vector-based applications. Some lessons apply to programs that have

vector tools. The names of menu commands, tools, panels, and palettes are

written in ALL CAPS. Dialog boxes refer to boxes that appear after selecting

tools, palettes, or menu items. They provide ne-tuning controls for executing

techniques. Most menu items have dialog boxes associated with them.

You will eventually nd your own comfort zone with digital illustration tools

and use them accordingly when developing projects. In print workows, Illus-

trator can be used for preparing vector-based images for other applications or

act as a standalone tool for nal design projects. In Web workows, you can

use Illustrator for Web page design and then open or drag your .ai les into Fire-

works to perform optimization, slicing, and exporting.

The techniques below are presented in steps with corresponding sample

project images that exemplify the techniques. You should explore various com-

binations of techniques in your work to discover divergent approaches to draw-

ing and two-dimensional design in Adobe Illustrator. It is important to become

comfortable using layers and familiar with this set of foundation techniques

used in design projects.

98364c06.indd 196 1/15/10 1:12:50 PM

Chapter 6 Vector Graphics 197

As with most applications, there is usually more than one way to perform a

technique in Illustrator, so don’t be surprised if you discover other methods or

shortcuts beyond those presented in this book. You can test yourself and explore

these techniques by creating additional projects guided by the corresponding

online movie lessons listed at the end of each technique lesson in this chapter.

View these online tutorials by going to www.wiley.com/go/digitaldesign.

Document Setup

Adobe Illustrator allows you to create vector image documents for digital design

projects. Setting up a new document requires the designer to make some

choices about size and color.

technique Lesson 6.1: Creating a New Document

This is the rst step in creating a digital design project. Adobe Illustrator pro-

vides a simple setup box for new documents. The two main preset sizes are

print (paper) and Web page. These setups provide the size settings automati-

cally. Remember, Illustrator creates high-resolution (300 ppi) les by default.

Qu ick Ste ps:

Creating a New Document

1. Go to FILE > NEW.

2. Choose tabloid 11 × 17″, one of the

preset setups in the drop-down

menu. Use CMYK color for a print

project; use RGB color for a Web

project.

3. Choose ORIENTATION >

LANDSCAPE.

4. Click OK.

technique Lesson 6.2: Guides and grids

The guides and grid are critical tools for helping you arrange items on a page.

All digital design programs have guides and grid functions. In Illustrator, setting

up a 3 × 3 grid for layouts will help you adhere to the rule of thirds and the law of

thirds in your compositions.

6.1

Figure6-2 Illustrator’s NEW DOCU-

MENT dialog box allows you to select print

or Web page size presets.

Tip

Create a new nal

document or an

image for place-

ment in another

application.

6.2

98364c06.indd 197 1/15/10 1:12:51 PM

PART TWO Techniques198

QuiCk StepS:

A 3 × 3 Grid Using Guides

To create a 3 × 3 grid in Illustrator using the grid lines function:

1. Go to EDIT > PREFERENCES.

2. Choose GUIDES and GRIDS.

Now set the grid:

3. For a 3 × 3 grid, set the grid for 3.66 with 1 subdivision (11 divided by 3 = 3.66).

4. Click OK.

The grid will appear on the document page.

Layers and Templates

technique Lesson 6.3: Using Layers

Because compositing an image requires exibility and control, most digital design

programs, including Illustrator, employ a layers function within their interface. While

you can work in Illustrator and other digital illustration programs without using

layers much more easily than you could in a digital imaging program such as Photo-

shop, it is still recommended that you put each individual object on its own layer.

Illustrator layers work differently than layers in Photoshop. In Illustrator, line

segments and anchor points are each color-coded to the corresponding layer.

When you use the SELECTION tool (black arrow) and click on an object (either

the path, point, or shape), it will appear with a color and a dot of the same color

as the layer it is on.

QuiCk StepS:

The Layers Palette’s Show Layers Only Option

In Illustrator, every object created gets placed on an individual sub-layer, which

exists under the top layer. This can become daunting as many, many layers and

sub-layers begin to pile up. It is, however, possible to work without sub-layers.

1. Go to WINDOW > LAYERS to open the LAYERS palette.

2. Go to the drop-down menu in the LAYERS palette.

3. Choose PALETTE OPTIONS.

4. Enable the SHOW LAYERS ONLY check box (this will hide the sub-layers).

Tip

Creating a grid

before starting

the design project

helps with com-

position decisions.

Arrange objects

in your composi-

tion based on grid

placements and

the rule of thirds

and law of thirds.

6.3

98364c06.indd 198 1/15/10 1:12:51 PM

Chapter 6 Vector Graphics 199

5. In thumbnails, enable the LAYERS check box only.

Making a New Layer for Artwork

1. Go to WINDOW > LAYERS to open the LAYERS palette.

2a. Click on the NEW LAYER icon at the bottom of the LAYERS palette.

or:

2b. Go to the drop-down menu in the LAYERS palette.

3. Choose NEW LAYER.

Moving Objects from Layer to Layer

1. Click on a layer.

2. Grab the color dot and drag it to the layer on which you want the artwork to

appear. The selection on that layer will be moved to the targeted layer.

Figure6-3 A layered illustration in Illustrator. Artwork by Michael Calandra.

technique Lesson 6.4: placing artwork (raster or Vector)

Illustrator is typically used as a tool for drawing individual images or creating a lay-

ered page design. Always create a nal document (receptacle) and place or drag

images into it (composite), rather than working from within an original image le.

This preserves the original image in case it is needed in its original form.

Tip

Layers help you

organize, view,

and manage art-

work. They are

also needed for

certain production

techniques, so try

to remember to

use them, espe-

cially for complex

projects with many

objects.

6.4

98364c06.indd 199 1/15/10 1:12:52 PM

PART TWO Techniques200

You can use FILE > OPEN to open raster or vector images in Illustrator. You

can work on them rst—creating an illustration from a bitmapped image or

making a logo, for example—and then drag and drop or copy and paste them

into your receptacle document. Or you can save the images and, using the

PLACE command, import them (in a variety of popular graphical le formats)

into a new Illustrator document. Placed images all appear on the same layer,

unless you create a new one before importing.

QuiCk StepS:

Placing an External Raster File

1. Go to FILE > PLACE.

2. Choose the image le you want to place (.tif, .jpg, .psd, .png, .eps, .bmp, or

.gif) and open it.

3. The image can be resized using the FREE TRANSFORM tool in the TOOL

palette. Grab a corner and hold down the SHIFT key to maintain the object’s

proportions when scaling it.

Figures6-4,a,b Placed images in Illustrator can be used for layouts or as bitmap templates

for creating custom illustrations.

technique Lesson 6.5: tear-Off panels

Tear-off panels can be pulled from tools in the TOOL panel. Tools that have mul-

tiple tool sets have tear-offs. The PENCIL tool, for example, has a tear-off with

the SMOOTH tool and the ERASER tool.

Tip

Place external

images into docu-

ments to use for

drawing templates

or for layouts.

6.5

98364c06.indd 200 1/15/10 1:12:55 PM

Chapter 6 Vector Graphics 201

QuiCk StepS:

Using Tear-Off Panels

1. Go to the PENCIL tool.

2. Click and hold the mouse button.

3. Go to the end of the panel and drag it off.

Figure6-5 Tear-off panels.

Color

technique Lesson 6.6: Fill and Stroke

You can add color to vector-based objects such as shapes and paths in two

areas: ll and stroke. Fill refers to the inside of the shape or the inner portion of a

path; stroke is the line that makes up shapes and open paths.

QuiCk StepS:

Adding a Fill to a Shape or Path with the Color Picker

1. Use the SELECTION tool (black arrow) to choose the shape or path you

want to ll. (An object must be selected in order to ll it.)

Tip

You can use the

tear-offs for the

SHAPE, LINE, PEN,

and PENCIL tools

for quick access to

entire tool sets.

6.6

98364c06.indd 201 1/15/10 1:12:55 PM

PART TWO Techniques202

2. Go to the TOOL palette and double-click on the FILL swatch (a square color

chip) at the bottom.

The COLOR PICKER will appear.

3. Choose a color.

4. Click OK. Click on any white space to deselect the object.

Figures6-6,a–c Strokes and lls can be applied to shapes and paths. Gradients, patterns,

and solid swatches can all be applied to lls. This poster shows a variety of strokes and lls used

on type, custom illustration, and a premade Illustrator symbol.

98364c06.indd 202 1/15/10 1:12:59 PM