Illustrator Web Project

Adobe
Web Project
Illustrator
Curriculum
Guide
Adobe Web Project
ILLUSTRATOR OVERVIEW
ContentsIllustrator
Lesson 1: Beginning Successfully
Tools
Palettes
Artwork Windows
Lesson 2: Working in Illustrator
Artwork
Drawing
Lesson 3: Applying and Using Color
Color Modes and Models

Applying Color
Modifying Color
Lesson 4: Graphics for the Web
Prepare Graphics
Linking Objects
Optimizing
Saving Images from Export
Lesson 5: Saving, Exporting, and Printing Artwork
Saving Artwork in a Variety of Files

Exporting Artwork
Printing Artwork
The Movie Project Begins
Illustrator Overview
Adobe Web Project
IntroductionIllustrator
Welcome to Adobe Illustrator, the industry-standard illustration program for print, multimedia, and online
graphics. Illustrator excels as an art production tool for designers or illustrators who produce artwork for print
publishing, multimedia graphics, or for Web pages or online content.
This introduction to Illustrator will afford your students an understanding of the precision and control over their
artwork plus the flexibility to produce anything from small designs to large projects. Students will be introduced
to tools, palettes, drawing, and working in Illustrator, colors, and Web publishing. The emphasis of this lesson is
on preparing students to use the basic tools of Illustrator and to apply them in preparation of basic Web design.
As an educator, you will appreciate that Illustrator also provides a consistent work environment with other
Adobe applications including Adobe Photoshop with ImageReady, Adobe GoLive, and Adobe LiveMotion.
Other learning resources

Classroom in a Book
The official training series for Adobe graphics and publishing software. This book is developed by experts
at Adobe and published by Adobe Press. Adobe Illustrator Classroom in a Book includes lessons on using
Illustrator software. Instructors can download individual chapters from the Adobe in Education web site
(www.adobe.com/education) for free to supplement their lessons. For information on purchasing Adobe
Illustrator Classroom in a Book, visit www.adobe.com/education/educators/books.html, contact your local
Adobe Authorized Education Reseller at www.adobe.com/education/purchasing/resellers.html, or contact
your local book distributor.
Official Adobe Print Publishing Guide

Provides in-depth information on successful print production, including topics such as color management,
commercial printing, constructing a publication, imaging and proofing, and project management guidelines. For
information on purchasing the Official Adobe Print Publishing Guide, visit the Adobe Web site at www.adobe.com.
Official Adobe Electronic Publishing Guide

Tackles the fundamental issues essential to ensuring quality online publications in HTML and PDF. Using simple,
expertly illustrated explanations, design and publishing professionals tell you how to design electronic
publications for maximum speed, legibility, and effectiveness. For information on purchasing the Official Adobe
Electronic Publishing Guide, visit the Adobe Web site at www.adobe.com.
SAMS Teach Yourself Adobe Illustrator 9 in 24 Hours

This is a great learning tool and resource of curriculum ideas for educators because it follows the structure of 24
one-hour lessons in order to make the content manageable. It's easy to learn Adobe Illustrator 9 with this book
because each hour-long lesson is full of step-by-step instructions, screenshots, tips, and tricks. To order a copy,
visit http://www.adobe.com/education/educators/books.html.
Other learning resources are available but are not included with your application.
Adobe Web Project
Adobe, the Adobe logo, Acrobat, Acrobat Reader, Classroom in a Book, Illustrator, ImageReady, LiveMotion, Photoshop, and PostScript are
either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Mac is a trademark of
Apple Computer, Inc., registered in the United States and other countries. Microsoft, Windows NT, and Windows are either registered
trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. All other trademarks are the property of their
respective owners.
2001 Adobe Systems Incorporated. All rights reserved.
Adobe Web Project
ILLUSTRATOR LESSON 1
Beginning Successfully
Level
Advanced beginner. Students are assumed to have basic-level understanding of the use of computers
and computer applications. Students are also assumed to have a familiarity with the Web and online
resources.
Summary and Overview

The purpose of AdobeIllustrator/ Lesson One is to introduce students to the Adobe interface
(command menus, artwork window, toolbox, and floating palettes) through identification as well as
hands-on use of the tools and palettes.
1.
Students will be able to select, draw, paint, and edit their basic artwork within the Illustrator artwork
window.
2.
Students will also begin to design free-form paths in the artwork window using the pencil tool
(round and sharp-cornered rectangles, ellipses, polygons, spirals), and start using preset shape tools
and then be able to modify and combine the shapes.
3.
Using the pen tool, students will be able to draw straight lines and flowing curves. The pen tool is
less intuitive than the pencil toolhowever, with practice, students will be able to draw
combinations of straight and curved segments to create flexible, smoothly shaped illustrations.
4.
Students will also learn to access Help in the Illustrator program.
Lesson One is designed to be taught in approximately one class hour. Depending on the teachers pace of
instruction and the prior knowledge of the students, Lesson One may take more than one class hour.
What Students Will Learn: Assessable Outcomes from the Five Exercises
In this lesson, your students will learn
To use the Illustrator interface

To select and display tools
To display and hide the palettes
To arrange the toolbox and the palettes
To view, create, and edit artwork inside the Illustrator artwork window
To draw basic paths and shapes with the pencil tool
To draw basic paths and shapes with the pen tool
To get more information about the Illustrator program and Help resources for Adobe Web Project
Students will open a document, change the view of a document, identify and use the tools and palettes, and
move the toolbar and palettes. Students will also be able to get more information about the Illustrator program.
Adobe Web Project
Teacher Orientation for Lesson One

Key Definitions for Lesson One
Tool: used to draw and paint your artwork.
Artboard: the Artboard displays the maximum printable area but does not define the size of the printed page.
The printable area of the page is derived from the printer driver and ppd of the printing device. The page size
settings can only be changed if the printer(s) will accept custom pages.
Palette: floating boxes that contain the colors and textures that monitor, modify, and enhance the artwork.
Work area: the work area occupies the entire space within the Illustrator window and includes more than just
the printable page containing your artwork. The printable and nonprintable areas are represented by a series of
solid and dotted lines between the outermost edge of the window and the printable area of the page.
Tools and palettes can be hidden and re-arranged to organize the work area as needed.
Adobe Web Project
Exercise One: Tools

Selecting and Displaying Tools:
The first time your students start Illustrator, the toolbox appears on the left side of the screen. The tools in the
toolbox let your students create, select, and manipulate objects in Illustrator.
Want students to select a particular tool? Simply instruct them to CLICK! its icon in the toolbox. As an exercise
that your students will enjoy, some of the tools have additional hidden tools. See if your students can find them.
Hidden tools can be selected by holding down the mouse button, dragging the move over the new tool, and
letting go.
Moving the toolbox to optimize the work area:

Moving a toolbox in Illustrator consists of SELECTING and DRAGGING the toolbox by the palette
header bar to a new location.
If students CLICK! on Venus, they will launch the Adobe Web site.
Showing or hiding the toolbox:

To show the toolbox, choose Window > Show Tools; to hide the toolbox, choose Window > Hide
Tools.
Closing a detached toolbar:
CLICK! the close box.
Changing the pointer to a precision pointer:
Do one of the following:
1. While the tool is selected, press Caps Lock on the keyboard.
2. Choose Edit > Preferences > General, select Use Precise Cursors, and CLICK! OK.
Adding and displaying hidden tools on-screen:

1.
Press a tool in the toolbox that has hidden tools underneath it. (Tools
that have hidden tools are identified by a triangle in the lower right
corner.)
2.
When the toolbar of hidden tools appears, hold down the mouse button
and drag to the arrow at the end of the toolbar. The toolbar detaches
from the toolbox.
Adobe Web Project
Exercise Two: Palettes

Displaying and Hiding the Palettes:
Adobe Illustrator includes a number of palettes to help students monitor and modify their work. By default,
these palettes appear stacked together in several groups. Students can display and hide these palettes as they
work. Students can also dock palettes so that students can move them together.
Displaying (showing) or hiding a palette:

Ask students to do one of the following:
Choose Window > Show or Window > Hide. Show displays the selected
palette at the front of its group; Hide conceals the entire group.
Press Tab to hide or show all palettes and the toolbox.
Press Shift+Tab to hide all palettes except for the toolbox.
When Illustrator is first started, your students will see that the floating palettes
appear stacked in default groups. The following techniques are used to show
and hide palettes:
To make a palette
appear at the front of
its group, CLICK! the
palettes tab.
To move an entire palette group, drag its title bar.
To rearrange or separate a palette group, drag a palette's tab. Dragging a palette outside of an existing
group creates a new palette window.
To display a palette menu, position the pointer on the triangle ( ) in the upper right corner of the palette
and hold down the mouse button.
To change the size of a resizable palette, drag the lower right corner of the palette (Windows) or drag the
size box at the lower right corner of the palette (Mac OS).
A few palettes, such as the Color palette, cannot be resized by dragging.
Adobe Web Project
Activities:
1.
Have students move the mouse to the palettes tab and CLICK! to bring the palette to the front of its
group.
2.
Students will need to show or hide a palette as work proceeds. Choose the appropriate window and use
the mouse to select show or hide. Show displays the selected palette at the front of its group; hide
conceals the entire group.
3.
If students want to cycle through the minimized, compact, or expanded views of the palette, they
should move the mouse to the small triangle pair that appears in the palette tab and CLICK!.
4.
Do students need to hide or display all open pallettes and the toolbox? CLICK! Tab. Pressing Shift+Tab
will hide or display the palettes only.
Your students will have different work preferences and encounter such problems as limited screen area.
Therefore, palettes may be repositioned and regrouped for efficiency.
How?
Students can take the mouse and change the palettes location by dragging a palettes Tab. Students can also
drag a palette to another group or to its own separate group.
Adobe Web Project
Exercise Three: Work Area

Setting Up the Work Area:
Once students have created a document and understand basic tool and palette use, they can then set up their
work area to organize their work and streamline the workflow. For example, students can change the size of the
artboard, tile their workspace, or move their page boundaries.
Opening a new file:

1.
Choose File > New, and then enter a name in

the Name text box.
2.
Select the CMYK or RGB color mode. (See Color

modes and models in Lesson Three.)
3.
If necessary, enter a height and width for the

artboard.
Opening an existing file:

1.
Choose File > Open.
2.
Select the name of the file you want to open, and

CLICK! Open.
Closing a file and quitting Illustrator:

1.
Choose File > Exit (Windows) or File > Quit (Mac OS).
2.
If the file has not yet been saved or named, the Save
dialog box appears. To save the file, enter a name in the
Name text box (if necessary) and then CLICK! OK.
Showing or hiding the artboard:

To show the artboard, choose View > Show Artboard; to hide the artboard, choose View > Hide Artboard.
Adobe Web Project
Adobe Illustrator gives your class great flexibility in viewing their artwork. Your students can view different areas
of the artwork at different magnifications, use simplified views for tasks such as editing paths, and preview how the
artwork will appear in a Web browser or in print.
Your students can open additional windows to display several views at once, so that they can quickly switch
among view modes or magnifications. For example, students can set one view highly magnified for doing close-up
work on some objects and create another view less magnified for laying out those objects on the page.
Changing the screen mode for illustration windows:

CLICK! a screen mode button in the toolbox:
The left button ( ) displays artwork in a standard window, with a menu bar at the top
and scroll bars on the sides.
The center button ( ) displays artwork in a full-screen window with a menu bar but with
no title bar or scroll bars.
The right button ( ) displays artwork in a full-screen window, but with no title bar,
menu bar or scroll bars.
Opening a new window:

Choose Window > New Window.
A new window of the same size appears on top of the previously active window. The two windows are identical
except for their window numbers. The new window is now the active window.
Closing windows:
Choose File > Close to close the active window.
Press Alt (Windows) or Option (Mac OS) and choose File > Close to close all document windows.
Arranging multiple windows (Windows only):
Choose Window > Cascade to display windows stacked and
cascading from the top left to the bottom right of the screen.
Choose Window > Tile to display windows edge to edge.
Choose Window > Arrange Icons to arrange minimized windows
within the program window.
When working in Illustrator, students can open additional windows to

display several views at once, so that they can quickly switch between view modes or magnifications. For
example, your students can set one view highly magnified for doing close-up work on some objects and create
another view less magnified for laying out those objects on the page.
Adobe Web Project
Creating a view:
1.
Set up the view that is wanted.
2.
Choose View > New View.
3.
Enter a name for the new view, and CLICK! OK.
The view names, along with keyboard shortcuts for

choosing them, appear at the bottom of the View menu. To retrieve a view, select the name of the view you
want to use. It is possible to create and store up to 25 views for each document.
Renaming or deleting a view:

1.
Choose View > Edit Views.
2.
Select the view you want to edit, and

rename it or CLICK! Delete.
Scrolling the view with the hand tool:

).
1.
Select the hand tool (
2.
Move the pointer onto the artwork, and drag in the direction in which you want the artwork to move.
To switch to the hand tool when using another tool, hold down the spacebar.
Adobe Web Project
Exercise Four: Working the Artboard

Changing the size of the artboard:
1.
Choose File > Document Setup. Then choose

Artboard from the pop-up menu at the top left
of the Document Setup dialog box.
2.
Students can do one of the following:
3.
Choose a preset size from the Size pop-up

menu.
Choose Custom from the Size pop-up menu,
and enter the dimensions you want in the
text boxes, up to 227 inches by 227 inches.
Students can change the units of measure for the current document in Preferences. Changing this will
not change the size of the artboard. Students can set specific units by typing the new size in pixels or in
inches in the height and width dialog.
Select Use Print Setup (Windows) or Use Page Setup (Mac OS) to set the size of the artboard to match
the page size set in the Print Setup (Windows) or Page Setup (Mac OS) dialog box. The size of the
artboard then changes whenever students choose a new page size in the Print/Page Setup dialog box.
CLICK! OK.
Adobe Web Project
Exercise Five: Additional Skill-Building Activities for Students

This is an optional activity for your class depending on the skill level of
your students and the time you have available. However, it may be useful
as a brief review of Online Help for all skill levels.
Online Help
Online Help has complete information about using palettes and tools. Also included are keyboard shortcuts and
additional information, including full-color galleries of examples not included in the printed lesson plans. All of
the illustrations in Online Help are in color.
Online Help is easy to use, because you and your students can look for topics in these ways:
Scan a table of contents

Search for keywords or phrases
Use an index
Jump from topic to topic using related topic links
Displaying the Online Help contents

To properly view Online Help topics, you and your students need Netscape Communicator 4.0 (or later) or
Microsoft Internet Explorer 4.0 (or later) and an Internet connection. JavaScript must be active.
First your students will look for a topic using the Contents screen:
1.
To display the Help Contents menu, choose Help >

Illustrator Help, or press F1 (Windows).
2.
Drag the scroll bar or CLICK! the arrows to navigate through the
contents. The contents are organized in a hierarchy of topics,
much like the chapters of a book.
3.
For example, position the pointer on the Looking at the Work

Area chapter, and CLICK! it to display its contents.
4.
Locate the Toolbox

Overview (1 of 5)
topic, and CLICK! to display it. An illustration of the selection
tools and shortcut information appears.
The Online Help system is interactive and therefore very
useful for advanced beginners and intermediate users. You
and your students can CLICK! any blue text, called a link, to
jump to another topic. The pointer icon indicates links and
appears when the mouse pointer is moved over a link.
10
Adobe Web Project
Lesson One: Check for Understanding

Review questions
1.
Describe two ways to change the view of a document.
2.
How do you select tools in Illustrator?
3.
Describe three ways to change the palette display.
4.
On a handout provided by the teacher, students are to write the name and the use of each tool.
5.
Describe how Illustrator Help is used to find and retrieve information.
Review answers
1.
Commands can be selected from the View menu to zoom in or out of a document, or fit it to the screen;
students can also use the zoom tools in the toolbox, and CLICK! or drag over a document to enlarge or
reduce the view. In addition, keyboard shortcuts can be used to magnify or reduce the display of artwork.
The Navigator palette can be used to scroll artwork or change its magnification without using the document
window.
2.
To select a tool, either CLICK! the tool in the toolbox or press the tools keyboard shortcut. For example,
press V to select the selection tool from the keyboard. Selected tools remain active until students CLICK! a
different tool.
3.
You can CLICK! a palettes tab or choose Window > Show Palette Name to make the palette appear. A
palettes tab can be dragged to separate the palette from its group and create a new group, or drag the
palette into another group. Students can drag a palette groups title bar to move the entire group. DoubleCLICK! a palettes tab to cycle through a palettes various sizes. Also, students can press Shift+Tab to hide or
display all palettes.
Additional Adobe Resources on the Web

Visit the Adobe in Education Web site at http://www.adobe.com/education for additional resources:
Instructional resourcesonline tutorials, books, tech guides, and more:

http://www.adobe.com/education/educators/main.html
Complete product information: http://www.adobe.com/education/products/main.html
Training opportunities: http://www.adobe.com/education/educators/training.html
respective owners.
11
Adobe Web Project
Working in Illustrator
Level
Advanced beginner. Students are assumed to have mastered tools, palettes, and the concept of artwork
windows. Students are assumed to have a familiarity with the Web and online resources.

The purpose of Adobe Illustrator/Lesson Two is to introduce students to three fundamental
components of using a successful Adobe project in designing basic Web sites:
1.
Setting up artwork
Illustrator allows you to create artwork or import artwork from other applications. To create
effective artwork, students must understand some basic concepts about graphics and bitmap
images, resolution, and color.
2.
Drawing
Drawing and modifying paths can be accomplished with Illustrator using tools found also in Adobe
Photoshop and in LiveMotion. Paths can be freely pasted between programs.
3.
Working with objects

Editing in Illustrator allows you and your students to select, move, and arrange objects precisely.
Tools are available that let you measure and align objects, group objects, and selectively lock and
hide objects.
A note about graphics and images: Computer graphics fall into two main categoriesvector graphics and
bitmap images (more on this topic in a future lesson). Understanding the difference between the two helps as you
instruct your class to create, edit, and import artwork. In Illustrator, the type of graphic image can have important
effects on your students workflow. For example, some file formats only support bitmap images and others only
vector graphics. Graphic image types are particularly important when importing or exporting graphic images to
and from Illustrator. Linked bitmap images cannot be edited in Illustrator. Graphic formats also affect how
commands and filters can be applied to images; some filters in Illustrator will only work with bitmap images.
Lesson Two is designed to be taught in approximately one class hour. Depending on the teachers pace of
instruction and the prior knowledge of the students, Lesson Two may take more than one class hour.
What Students Will Learn: Assessable Outcomes from the Exercises

To set up the work area

To design paths
To change a tool pointer
To draw more sophisticated paths and shapes with the pen tool
To draw and edit free-form paths
To draw and edit brushed paths
Adobe Web Project
Teacher Orientation for Lesson Two

Key Definitions for Lesson Two
Brushed Paths: adds art (calligraphic, scatter, art, pattern) to paths
CMYK: cyan, magenta, yellow, black
HSB: hue, saturation, brightness
Path: string or curved segments that begin and end in anchor points
Pen tool: more precise tool for drawing than the pencil tool
RGB: red, green, blue
Adobe Web Project
Exercise One: Setting Up the Work Area in an Open Document

Review from Lesson One, Exercise Three: Once your students have created a document, they can then set up a
work area to organize their work and streamline their workflow. For example, students can change the size of
the artboard, tile their workspace, or move their page boundaries.
Opening a new file:

1.
Choose File > New, and then

enter a name in the Name text
box.
2.
Select the CMYK or RGB color

mode.
3.
If necessary, enter a height and

width for the artboard.
To create a new document without opening the New Document dialog box, press Ctrl+Alt+N (Windows) or
Command+Option+N (Mac OS). The new, untitled document has the settings last used.
Opening an existing file:

1.
Choose File > Open.
2.
Select the name of the file you want to open, and CLICK! Open.
Closing a file and quitting Illustrator:

1.
Choose File > Exit
2.
If the file has not yet been

saved or named, the Save
dialog box appears. To
save the file, enter a name
in the Name text box (if
necessary) and then
CLICK! OK.
Showing or hiding the artboard:

To show the artboard, choose View > Show Artboard; to hide the artboard, choose View > Hide Artboard.
Adobe Web Project
Changing the size of the artboard:

1.
Choose File >

Document Setup.
Then choose
Artboard from the
pop-up menu at the
top left of the
Document Setup
dialog box.
2.
Students should do
one of the following:
3.
Choose a preset
size from the
Size pop-up
menu. Suggest
to students that
they use a common size. OR
Choose Custom from the Size pop-up menu, and enter the dimensions you want in the text boxes, up to
227 inches by 227 inches. Students can change the units of measure for the current document in
Preferences. Changing this will not change the size of the artboard. Students can set specific units by
typing the new size in pixels or in inches in the height and width dialog.
Select Use Print Setup (Windows) or Use Page Setup (Mac OS) to set the size of the artboard to match
the page size set in the Print Setup (Windows) or Page Setup (Mac OS) dialog box. The size of the
artboard then changes whenever students choose a new page size in the Print/Page Setup dialog box.
CLICK! OK.
The artboard displays the

maximum printable area but
does not define the size of
the printed page. Page size
settings can be changed if
the printer will accept
custom page sizes.
Adobe Web Project
Exercise Two: About Paths

Introduce the exercise by explaining that a path is made up of one or more straight or curved segments. The
beginning and end of each segment is marked by anchor points, which work like pins holding wire in place. Note
that your students change the shape of a path by editing its anchor points. Your students can also control curves
by dragging the direction points at the end of direction lines that appear at anchor points.
Explain that a path is either open, like an arc, or closed, like a circle. For an open path, the starting and ending
anchor points for the path are called endpoints.
Reproduce on the whiteboard or on paper these diagrams in order to clarify the various ideas of paths for your
students.
Students should be given an opportunity to create paths and manipulate them in ways similar to the
diagrams below:
Diagram A
A. Selected (solid) endpoint B. Selected anchor point C. Curved path segment D. Direction line E. Direction point
Paths can have two kinds of anchor pointscorner points and smooth points. At a corner point, a path abruptly
changes direction. At a smooth point, path segments are connected as a continuous curve. Students can draw a
path using any combination of corner and smooth points. And, if students draw the wrong kind of point, the
point can always be changed!
Adobe Web Project
Diagram B
A. Four corner points B. Same point positions using smooth points C. Same point positions combining corner and
smooth points
Do not let students confuse corner and smooth points with straight and curved segments. A corner point can
connect any two straight or curved segments, while a smooth point always connects two curved segments:
Diagram C
A corner point can connect both straight segments and curved segments.
Adobe Web Project
Exercise Three: Changing a Tool Pointer, Drawing with a Pen Tool,

and Drawing and Editing Free-Form Paths
Students can change the appearance of the pointer from the tool pointer to a cross hair for more precise control.
Why? When the pointer is a cross hair, more artwork is visible. This is convenient when students are doing
detailed drawing and editing.
Making a drawing tool pointer appear as a cross hair:

Choose Edit > Preferences >

General. Select Use Precise
Cursors, and CLICK! OK.
Press Caps Lock before
beginning to draw with the
tool.
Drawing with the pen tool:

Students should use the pen tool
to draw a path that cannot be
drawn using the simpler drawing
tools. The pen tool lets your
students create straight lines and
smooth, flowing curves with great
precision.
Drawing and editing free-form paths:

Tell your students that if they want to draw and edit free-form paths, they should use the pencil tool. They can
also smooth out and erase segments of a free-form path with the smooth tool and erase tool.
Anchor points are set down as they are drawn with the pencil tool; students do not need to determine where
they are positioned. However, points can be adjusted once the path is complete. The number of anchor points
set down is determined by the length and complexity of the path and by the tolerance values set in the Pencil
Tool Preferences or Smooth Tool Preferences dialog box for either tool.
Students can draw and edit brushed paths with the paintbrush tool by using the same methods as for paths
drawn with the pencil tool.
Adobe Web Project
Drawing a free-form path with the pencil tool:

1.
Ask students to select the pencil tool (
).
2.
Tell them to position the pointer where they want the path to begin, and drag to draw a path. The pencil
tool displays a small x to indicate drawing a free-form path. As students drag the pointer, a dotted line
follows the pointer. Anchor points appear at both ends of the path and at various points along it. The path
takes on the current paint attributes, and the path remains selected by default.
3.
To continue the existing free-form path, tell students to select the path, and then position the pencil tip
on an end-point of the path and drag.
Drawing a closed path with the pencil tool:

1.
Instruct students to select the pencil tool.
2.
Students should position the pointer where they want the path to begin, and start dragging to draw a
path.
3.
As students drag, instruct them to hold down Alt (Windows) or Option (Mac OS). The pencil tool
displays a small loop, and its eraser will be solid indicating a closed path is being drawn.
4.
Let students know that when the path is the size and shape they want, they should release the mouse
button (but not the Alt or Option key). After the path closes, release the Alt or Option key.
Changing a path with the pencil tool:

1.
Tell students that if there is a path they want to change, that they should select it with the selection tool
( ).
Or Ctrl-click (Windows) or Command-click (Mac OS) the path to select it.
2.
Students should position the pencil tool on or near the path to redraw, and drag the tool until the path is
the desired shape. Use the following example:
Using the pencil tool to edit a closed shape

Depending on where your students begin to redraw the path and in which direction students drag, they may get
unexpected results. For example, students may unintentionally change a closed path to an open path, change an
open path to a closed path, or lose a portion of a shape.
Adobe Web Project
Exercise Four: Adjusting Path Segments, Drawing Shapes, and

Drawing and Editing Brushed Paths
Adjusting path segments:
The shape of the path can be changed by adding, deleting, or moving the path's anchor points. To adjust a
curved segment, students can move one or more of its anchor points or direction points. Your students can also
adjust a path by converting smooth points to corner points and vice versa.
Drawing shapes:
Many objects in Adobe Illustrator can be created by starting with basic shapes. The
tools in Illustrator let students easily create rectangles, ellipses, polygons, spirals, and
stars.
Drawing and editing brushed

paths:
The Brushes palette in Illustrator contains
four brush typesCalligraphic, Scatter, Art, and Pattern brushesto
use in adding art to paths. Students can choose from the brush
effects that have been preloaded into the Brushes palette.
Show your students that they can also modify these brushes, create brushes, or import a brush from the Brush
Libraries to the Brushes palette. Brushes created and stored in the Brushes palette are associated only with the
current file.
After brushes have been applied to a path, they can modify the attributes of the path in several ways.
To import a brush from a Brush Library to

the current Brushes palette:
1.
Make sure the Brushes palette into which

students want to import a brush is open.
2.
Choose Window > Brush Libraries > Brush

Library name. To locate a Brush Library not
stored in the Brush Libraries folder, choose
Window > Brush Libraries > Other Library.
3.
Have students select a brush, and then

instruct students to do one of the following:
Use the selected brush in the current artwork (recommended for one or two brushes at a time). Once it
is used in the artwork, the brush is copied from the Brush Library to the Brushes palette.
Drag the selected brush to the current Brushes palette (recommended for multiple brushes at a time).
Choose Add to Brushes from the Brushes palette menu.
Adobe Web Project
Note to your students: each Illustrator file can have a different set of brushes in its Brushes palette.
Your students can achieve the following effects using the four brush types. It would be a good idea to
demonstrate to your students the various brush types:
Calligraphic brushes create strokes that resemble strokes drawn with the angled point of a calligraphic pen,
drawn along the center of the path.
Scatter brushes disperse copies of an object (such as a ladybug or a leaf) along the path.
Art brushes stretch an object or artwork (such as an arrow or dog bone) evenly along the length of the path.
Pattern brushes paint a patternmade of individual tilesthat repeats along the path. Pattern brushes can
include up to five tiles, for the sides, inner corner, outer corner, beginning, and end of the pattern.
A. Calligraphic brush B. Scatter brush C. Art brush D. Pattern brush
To create a brushed path with a drawing tool:

1.
Students should draw a path using a drawing tool, including the pen or pencil tool or a basic shape tool.
2.
Choose a method for applying a brush to the path:
Select the path that is to be brushed. In the Brushes palette, select a brush with which to brush the path.
Drag a brush from the Brushes palette onto a path.
To remove a brush from a path:

1.
Students should select the path to change.
2.
Then do one of the following:

a. In the Brushes palette, choose Remove Brush Strokes from the palette menu or CLICK! the Remove
).
Brush Strokes button (
b. In the toolbox or the Color palette, CLICK! the Stroke box and apply a stroke of None.
c. The brush is removed and the path remains.
10
Adobe Web Project
To draw a path with the paintbrush tool:
1.
Students choose Window > View Brushes to display the Brushes

palette, and select a brush from the Brushes palette.
2.
Students double- CLICK! the paintbrush tool (

and CLICK! OK:
), set preferences,
In the Smoothness text box, enter a value (0% to 100%) for the percentage stroke and curve smoothness, or
use the slider. The higher the value, the smoother the stroke or curve.
In the Fidelity text box, enter the number of pixels (from 0.5 to 20) for the number of pixels the stroke can
stray from the path to produce smooth curves, or use the slider. The higher the value, the smoother the
stroke or curve.
Select Fill New Brush Strokes to have paths drawn by the brush filled. When the option is unselected, paths
are unfilled.
Select Keep Selected to keep the path just drawn with the brush selected.
Note: the above may require additional demonstration from the teacher. By default, the path is selected when
you release the mouse button.
To draw a closed path with the paintbrush tool:

1.
Students select the paintbrush tool.
2.
Students position the pointer where they want the path to begin, and start dragging to draw a path.
3.
As students drag, hold down Alt (Windows) or Option (Mac OS). The paintbrush tool displays a small loop to
indicate drawing a closed path.
It is very important that you do not hold down the modifier key until after you start drawing to create a
closed loop.
4.
When the path is the size and shape wanted, release the mouse button (but not the Alt or Option key). After
the path closes, release the Alt or Option key.
To edit a brushed path with the paintbrush tool:

1.
Students select the path to edit with the selection tool (

(Mac OS) the path to select it.
2.
Position the paintbrush tool on or near the path to redraw, and drag the tool until the path is the desired
shape.
), or Ctrl-click (Windows) or Command-click
11
Adobe Web Project
Lesson Two: Check for Understanding

Review questions
1.
Describe two ways to change the size of your artboard.
2.
There are two kinds of paths in Illustrator:

a.
b.
______________
______________
3.
How are Illustrator paths changed in shape?
4.
How are the curves of an Illustrator path controlled?
5.
What are the advantages of doing work with the pen tool?
6.
What are the four brush types in Illustrator and what are their optimal uses?
Review answers
1.
a. Commands can be selected from Choose File > Document Setup. Choose the artboard from the pop-up
menu.
b. Students may choose Custom from the Size pop-up menu and enter the dimensions they want.
2.
a. Open like an arc.

b. Closed like a circle.
3.
The shape of a path can be changed by editing (moving) its anchor points.
4.
Curves of a path can be controlled by dragging the direction points at the end of direction lines that
appear at anchor points.
5.
The pen tool is a more sophisticated tool that allows students to create straight lines and smooth, flowing
curves with very great precision. It is somewhat more difficult to use than the pencil tool. The pencil tool
should be used generally for drawing free-form paths, for example.
6.
Calligraphic brushes create strokes varying between light- and heavily angled.
Scatter brushes disperse copies of an object along a path.
Art brushes stretch an object or artwork.
Pattern brushes paint a pattern that repeats along a path.


12
Adobe Web Project
respective owners.
13
Adobe Web Project
Applying and Using Color

Level
Advanced Beginner. Students are assumed to have mastered tools, palettes, and the concept of
artwork windows. The exercises in Lesson Two should have been mastered. Students are
assumed to have a familiarity with the Web and online resources.

The purpose of Adobe Illustrator/Lesson Three is to introduce students to applying and
using color in a successful project of designing basic Web sites using Adobe tools.
1.
Color modes and models

Illustrator bases its color modes on established models for describing and reproducing
color. Students will be introduced to these models.
2.
Applying color
Students will use the Fill and Stroke boxes in the toolbox to select an objects fill and
stroke, to swap the fill color with the stroke color, and to return the fill and stroke to their
default colors.
3.
Modifying color
Students will use the color picker to select the fill or stroke color by choosing from the
color spectrum or by defining colors numerically. Students will also be able to use the
paint bucket and eyedropper tools to copy paint attributes from one object to another.
Lesson Three is designed to be taught in approximately one class hour. Depending on the teachers
pace of instruction and the prior knowledge of the students, Lesson Three may take more than one class
hour.

To use color modes and models

To apply color using the toolbox
To use the color palette
To apply color by dragging and dropping
To display the color picker
To use the Color Picker
To modify colors in Illustrator
Adobe Web Project
Teacher Orientation for Lesson Three

Key Definitions for Lesson Three:
Color mode: a color mode In Illustrator determines the color model used to display and print Illustrator
files. Illustrator bases its color modes on established models for describing and reproducing color.
Common models include HSB, RGB, and CMYK.
Fill attributes: in graphics applications, fill is used to paint the inside of an enclosed object. Typically, a
color and pattern can be chosen, and then the object painted with a fill tool. The area that is painted is
called the fill area.
Grayscale: an image that only uses black, white, and shades of gray to represent color.
Palettes and colors: the palette may be only a subset of all the colors that can be physically displayed.
For example, SVGA systems can display 16 million unique colors, but a given program would use only
256 of them at a time if the display is in 256-color mode. In paint and illustration programs, a palette is a
collection of symbols that represent drawing tools. As demonstrated in Lesson One: a simple palette
might contain a paintbrush, and a pencil.
Stroke: defines or paints outside border for a filled or open path.
Web-safe palette: also called a Browser-Safe Palette; only contains 216 colors out of a possible 256.
That is because the remaining 40 colors on Macs are different from those on PCs. By eliminating the 40
variable colors, this palette is optimized for cross-platform use.
Adobe Web Project
Exercise One: Applying Color and Changing Fill or Stroke

Attributes
Applying color using the toolbox:
Explain to the students that they will use the Fill and Stroke boxes in the toolbox to select an object's fill
and stroke, to swap the fill color with the stroke color, and to return the fill and stroke to their default
colors.
To switch between fill and stroke as the active selection, press x on the keyboard. To swap the fill and
stroke colors of a selected object, press Shift+x. Below the Fill and Stroke boxes are the Color, Gradient,
and None buttons. These buttons are used to change the selected fill or stroke to a color, to change a fill
to a gradient, or to remove the fill or stroke from the selected object.
Changing fill or stroke attributes using the toolbox:

1.
Demonstrate to students how to select an object using any selection tool.
2.
Then students should do one of the following (write on whiteboard or overhead):
CLICK! the Swap Fill and Stroke button ( ), or press Shift+x to swap colors between
the fill and the stroke.
CLICK! the Default Fill and Stroke button ( ) to return to the default color settings
(white fill and black stroke).
CLICK! the Color button ( ) to change the currently selected stroke or fill to
the last-selected solid color in the Color palette.
CLICK! the Gradient button ( ) to change the currently selected fill to the
last-selected gradient in the Gradient palette.
CLICK! the None button ( ) to remove the object's fill or stroke.
Use keyboard shortcuts to switch to Color, Gradient, or None: Press < to change the selection to a
color; > to change the selection to a gradient; to change to None.
Using the Color palette:

Students will use the Color palette to apply color to an object's fill
and stroke, and also to edit and mix colorseither colors that
students create or colors that students select from the Swatches
palette, from an object, or from a color library.
Adobe Web Project
Editing the fill or stroke color using the Color palette:

1.
Students select an object using any selection tool.
2.
Students choose Window > Show Color.
3.
Select the Fill box or Stroke box in the Color palette or in the
toolbox.
4.
Instruct the students to do one of the following:
Position the pointer over the color bar (the pointer turns into
the eyedropper), and CLICK!
Choose an RGB, Web-safe RGB, HSB, CMYK, or
Grayscale color model from the Color palette
menu, and use the sliders to change the color
values. Students can also enter numeric values
in the text boxes next to the color sliders.
Adjust the Tint slider if using a global color from the Swatches palette.
Some students will encounter this problem concerning color. An exclamation point
inside a yellow triangle in the Color palette when using HSB or RGB color indicates that
students have chosen an out-of-gamut colorthat is, a color that cannot be printed using CMYK inks.
The closest CMYK equivalent appears next to the triangle. CLICK! the CMYK equivalent to substitute it for
the out-of-gamut color.
A cube above the yellow triangle in the Color palette when using RGB, HSB, or CMYK color indicates
that students have not chosen a Web-safe color. CLICK! the cube to substitute the closest Web-safe color.
Adobe Web Project
Exercise Two: Applying and Modifying Color

Applying color by dragging and dropping:
Students will be interested in knowing that an easy way to paint an object is to drag a color directly
from the Fill box or Stroke box in the toolbox, the Color palette, or the Gradient palette and drop the
color onto the object, or to drag a swatch from the Swatches palette and drop it on an object. Dragging
and dropping lets students paint objects without first selecting them. You can also drag and drop colors
from the Swatches palette to the Fill box or Stroke box in the toolbox, the Color palette, or the Gradient
palette.
When students drag color, the color is applied to either the object's fill or stroke, depending on whether
the Fill box or Stroke box is currently selected. (For example, if students drag a red color to an
unselected object when the stroke box in the toolbox is selected, the object's stroke is painted red.)
Displaying the Color Picker:

In order to display the Color
Picker, students should do
one of the following:
Double-CLICK! the Fill or

Stroke color selection
box in the toolbox.
Double-CLICK! the active
color selection box in the
Color palette.
Using the Color Picker:

Tell students that they can use the Color Picker to select the fill or stroke color by choosing from a color
spectrum or by defining colors numerically. In addition, they can select colors based on the HSB, RGB,
and CMYK color models.
Modifying colors:
Illustrator provides a wide variety of tools to modify and edit colors in your file. Ask students to
experiment with the paint bucket
and eyedropper
tools to copy paint attributes from one
object to another.
Adobe Web Project
Lesson Three: Check for Understanding

Review questions
1.
Name two uses of the Color palette in applying color.
2.
In terms of color, what do the initials RGB stand for?
3.
In terms of color, what do the initials CMYK stand for?
4.
What is the primary purpose of the Color Picker?
5.
Name one tool that allows you to modify or edit colors.
6.
How many colors are there in the Web-safe palette?
7.
How are Web-safe colors represented?
Review answers
1.
Answers may include: apply color to an objects fill and stroke; edit colors; mix colors.
2.
Red, green, blue.
3.
Cyan, magenta, yellow, black.
4.
The Color Picker allows students to select the fill or stroke color by choosing a color spectrum or
defining colors numerically.
5.
The two tools mentioned most often are: paint bucket and eyedropper.
6.
The Web-safe palette contains 216 colors.
7.
Web-safe colors are represented in hexadecimal code with a separate two-digit value for red,
green and blue.


Adobe, the Adobe logo, Acrobat, Acrobat Reader, Classroom in a Book, Illustrator, ImageReady, LiveMotion, Photoshop, and
PostScript are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other
countries. Mac is a trademark of Apple Computer, Inc., registered in the United States and other countries. Microsoft, Windows NT,
and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.
All other trademarks are the property of their respective owners.
Adobe Web Project
Graphics for the Web

Level
Advanced beginner to intermediate. Students are assumed to have mastered tools, palettes, and the
concept of artwork windows. The application of colors is a critical component of graphics in a Web
environment. The exercises and projects in Lessons Two (artwork and windows) and Three (colors)
should have been mastered. Students are assumed to have a familiarity with graphics, the Web, and
online resources.

The purpose of Adobe Illustrator/Lesson Four is to introduce students to creating small graphics files
to distribute images on the World Wide Web. With smaller files, Web servers can store and transmit
images more efficiently, and viewers can download images more quickly. Teachers and students will
find that Illustrator provides a variety of tools for creating and viewing Web graphics as well as
optimizing and saving graphics for use on the Web.
Lesson Four is designed to be taught in approximately one class hour. Depending
on the teachers pace of instruction and the prior knowledge of the students, Lesson Four
may take more than one class hour.

To prepare graphics for the Web using a variety of Illustrator tools

To use a variety of graphics file formats (JPG, GIF, PNG)
To link objects to URLs for Web pages
To view the project in various optimized formats
To save images for export
Adobe Web Project
Teacher Orientation for Lesson Four

Key Definitions for Lesson Four
GIF: pronounced jiff or giff (hard g) stands for Graphics Interchange Format, a bitmapped graphics file format
used by the World Wide Web, CompuServe, and many bulletin board services. GIF supports color and various
resolutions. It also includes data compression and transparency. The GIF format is most often used for drawings
and illustrations.
HTML: a markup language used to structure text and multimedia documents and to set up hyperlinks between
documents. HTML is used extensively on the World Wide Web.
Image map: a single graphic image containing more than one hot spot. For example, imagine a graphic of a
bowl of fruit. When you CLICK! on a banana, the system displays the number of calories in a banana and when
you CLICK! on an apple, it displays the number of calories in an apple.
JPG: short for Joint Photographic Experts Group, and pronounced jay-peg, sometimes spelled JPEG (except as a
file-name extension). JPG is a lossy compression technique for color images (see definition below). Although it
can reduce file sizes to about 5% of their normal size, some detail is lost in the compression. The JPG format is
the most common format used for photographs because of its ability to create sharp images with small file sizes.
Lossy Compression: Refers to data compression techniques in which some amount of data is lost. Lossy
compression technologies attempt to eliminate redundant or unnecessary information. Most video compression
technologies, use a lossy technique.
Optimizing: special features in Illustrator to select an image for export in GIF, JPEG, or PNG file, and to preview
the optimized images in different Web graphics file formats.
Pixels: the smallest image-forming unit of a video display.
PNG: short for Portable Network Graphics, and pronounced ping, a new bitmapped graphics format similar to
GIF. In fact, PNG was approved as a standard by the World Wide Web consortium to replace GIF because GIF uses
a patented data compression algorithm called LZW. In contrast, PNG is completely patent- and license-free. The
most recent versions of Netscape Navigator and Microsoft Internet Explorer now support PNG.
Rasterize: This is the process of converting vector objects, those created in Illustrator, to a resolution-dependent
graphic format. The rasterized image will not scale or resize as the users screen size changes.
URL: abbreviation for Uniform Resource Locator, the global address of documents and other resources on the
World Wide Web. The first part of the address indicates what protocol to use, and the second part specifies the IP
address or the domain name where the resource is located.
Vector Object: A resolution-independent graphic format that has the ability to resize itself to match the
resolution of the views monitor.
Adobe Web Project
Exercise One: Preparing and Linking Web Graphics

Preparing Web graphics in Illustrator:
Your students can make use of a variety of Illustrator tools to ensure that graphics created for the Web display
correctly in a Web browser. Be sure that you emphasize that students should keep the following in mind as they
prepare graphics for use on the Web:
When your students first start the Illustrator application, they can choose between the RGB and CMYK color
modes for their files; if they are creating Web-based graphics, they should choose the RGB color mode.
To preview the artwork as it would display if rasterized for use on the Web, students should use the Pixel
View mode. While they work in Pixel View mode, artwork that is created will snap to a pixel grid. To create a
link from an object in the artwork to a Uniform Resource Locator (URL), students will use the image map
option in the Attribute palette.
To apply Web-safe colors to artwork, students will use the Web-safe color options in the Color palette or the
Color Picker. See Using the Color palette and Using the Color Picker in Lesson Three.
To export images in specialized Web formats such as Scalable Vector Graphics (SVG) format or Macromedia
Flash (SWF) format, as well as other formats for the Web, use the Export command.
To optimize images in several graphic file formats used on the Web, such as Graphics Interchange Format
(GIF), Joint Photographic Experts Group (JPEG), and Portable Network Graphics (PNG-8 or PNG-24), use the
Save for Web command.
Adobe Web Project
Linking objects to URLs for Internet Web pages:

The following is for more advanced students or to challenge all students if there is sufficient class time:
Any object your students create in Adobe Illustrator can be linked to a Uniform Resource Locator (URL) string,
transforming the object into a button that links the user to an Internet Web site. This feature is useful when
creating artwork for Web pages, allowing students to pre-attach Web links to individual objects before
importing the artwork into a Web page design application.
After assigning a URL to an object in an illustration, more advanced
students can verify that the URL is valid by using the Launch
Browser button in the Attributes palette. If your computer systems
have an Internet browser (such as Netscape Navigator or Microsoft
Internet Explorer), clicking the Browser button automatically
connects to the URL you or your students have defined as the
object's link.
To activate URL links to objects, students must designate the object
as an image map using the Attributes palette. The image map
defines the shape of the button that links to the assigned URL. The
image map can be assigned a shape such as a rectangle, or as a
free-form polygon that follows the outline of the selected object.
See the illustration below:
Imagemap set to Rectangle and to Polygon in Attributes palette
Adobe Web Project
Exercise Two: Optimizing and Saving In Illustrator

Optimizing in Illustrator:
For basic image optimization tasks, your students can export an image in Illustrator as a GIF, JPEG, or PNG file.
Students can use the special optimization features in Illustrator to preview optimized images in various Web
graphics file formats and with different file attributes. They can view multiple versions of an image
simultaneously and modify optimization settings before previewing the image and select the best combination
of settings.
In Illustrator, preferences can be set for saving image previews, using file extensions, and maximizing
file compatibility.
To set file saving preferences:

Have students choose Edit > Preferences > Saving Files, and set the following options:
Image Previews:
Students should choose an option for saving image previews: Never Save to save files without previews, Always
Save to save files with specified previews, or Ask When Saving to assign previews on a file-by-file basis.
(In Mac OS, you can select one or more of the following preview typesto speed the saving of files and
minimize file size, select only the
previews needed:
Icon to use the preview as a

file icon on the desktop.
Macintosh Thumbnail to
display the preview in the
Open dialog box.
Windows Thumbnail to save
a preview that can display on
Windows systems.
Full Size to save a 72-ppi
(pixels per inch) version of
the file for use in applications
that can only open lowresolution Photoshop
images. For non-EPS files, this
is a PICT preview.)
File Extension (Windows):

Students should choose an option for the three-character file extensions that indicate a file's format: Use Upper
Case to append file extensions using uppercase characters or Use Lower Case to append file extensions using
lowercase characters.
Adobe Web Project
Append File Extension (Mac OS):

File extensions are necessary for files that students want to use on or transfer to a Windows system. Choose an
option for appending extensions to filenames: Never to save files without file extensions, Always to append file
extensions to filenames, or Ask When Saving to append file extensions on a file-by-file basis. Select Use Lower
Case to append file extensions using lowercase characters.
In Mac OS, to append a file extension to the current file only, hold down Option and choose a file format from
the Save As or Save a Copy dialog box.
To display a preview file icon (Windows

only):
1.
Students Save the file in Photoshop

format with a thumbnail preview.
2.
Right-CLICK! the file on the desktop

(or in any Windows or Photoshop
dialog box that displays a file list),
and choose Properties from the
context menu that appears.
3.
CLICK! the Photoshop Image tab.
4.
Select an option for generating

thumbnails, and CLICK! OK.
Preview icons appear on the desktop and in

file lists (when the view is set to Large Icons).
Adobe Web Project
Viewing the Save for Web dialog box:

Instruct students to choose File > Save for Web.
Optimizing files and choosing options:

Instruct your students that they can use the Settings panel of the Save for Web dialog box to select the file
compression format and other optimization settings for an image. They can also optimize an image to a
specified file size, using current optimization settings or automatically generating a GIF or JPEG file.
Adobe Web Project
Saving optimized images:

Students can save an optimized image in Illustrator in its current state, and save the HTML file for the image in
the same folder. The HTML file also includes the image name, the image dimensions, and other code necessary
to specify the image for display on a Web site. This code can than be cut and pasted in the students Web page.
Finally, saving an optimized file:

1.
To save an optimized file, students should CLICK! OK in the Save for Web dialog box.
2.
In the Save Optimized As dialog box, type a filename, and choose a location for the file. The file is saved in
the format specified in the Settings panel of the Save for Web dialog box.
3.
Select Save HTML File to save the HTML file with the image file, and CLICK! Save.
Adobe Web Project
Lesson Four: Check for Understanding

Review questions
1.
What is the benefit of selecting the Web palette when preparing images for publication on the World Wide
Web?
2.
For each of these types of files, what file type would be best for the Web? Photo, line art, etc.
3.
How is a file saved for publication to the Web?
4.
What optimization benefits does Illustrator offer as part of its features?
Review answers
1.
Selecting the Web palette ensures that the images are displayed using the same color palette, regardless of
the platform on which the image is displayed.
2.
Answers may vary. Example: The style of artwork being worked with determines the file format that should
be used to save an image for publication on the Web. In addition, file size and image integrity may also
affect which file format is used. In general, the integrity of the image should be maintained and the file size
should be kept small.
3.
Choose File > Save for Web.
4.
Illustrator allows images to be previewed in various Web-graphics file formats and with various file
attributes. This allows for viewing of multiple versions of an image simultaneously and modification of
optimization settings before previewing the image.


respective owners.
Adobe Web Project
Saving, Exporting, and, Printing Artwork

Level
Advanced beginner to intermediate. Students are assumed to have mastered tools, palettes, and
the concept of artwork windows. The application of colors is a critical component of graphics in a
Web environment. The exercises in Lessons Two (artwork), Three (colors), and Four (graphics)
should have been mastered. Students are assumed to have a familiarity with graphics, the Web, and
online resources as well as basic Save and Print commands.

The purpose of Adobe Illustrator/Lesson Five is to introduce students to saving artwork in a
variety of formats through using Illustrator. Artwork can be saved in PDF and EPS formatsand can
be exported in a variety of other common graphic file formats. Students will want to print artwork
as a way to take it home, to put it in a portfolio, or to show it to other students. Artwork usually
progresses through a variety of stages before a final printing, and students will often want to
maintain a record of the progression of the artwork.
Lesson Five is designed to be taught in approximately one class hour.
Depending on the teachers pace of instruction and the prior knowledge of
the students, Lesson Five may take more than one class hour.

To understand the different graphic-file formats

To save artwork files in several formats: PDF, EPS, AI
To export artwork files for use in other applications including the Web
To print artwork files
Saving, Exporting and, Printing Artwork
Adobe Web Project
Teacher Orientation for Lesson Five

Key Definitions for Lesson Five
There are a number of terms with which both teachers and students should be familiar. While some teachers
and students will know (or remember) these terms, they are provided here for reference and review.
About graphic file formats:

Adobe Illustrator can import and export many common file formats. Graphic file formats are distinguished
by the way they represent graphic information. Graphic information can be represented as either vector
drawings or bitmap images. Some graphic file formats contain only vector drawings or only bitmap images,
but many can include both in the same file.
Bitmap images
Paint and image-editing software, such as Adobe Photoshop, generate bitmap images, also called raster
images. The images use a grid (also known as a bitmap or raster) of small squares, known as pixels, to
represent graphics. Each pixel in a bitmap image has a specific location and color value assigned to it. For
example, a bicycle tire in a bitmap image is made up of a collection of pixels in that location, with each pixel
part of a mosaic that gives the appearance of a tire. When working with bitmap images, you edit pixels
rather than objects or shapes.
Bitmap images are the most common electronic medium for continuous-tone images, such as photographs
or images created in painting programs, because they can represent subtle gradations of shades and color.
Bitmap images are resolution dependentthat is, they represent a fixed number of pixels. As a result, they
can appear jagged and lose detail if they are scaled on-screen or if they are printed at a higher resolution than
they were created for.
Resolution in bitmap images

Resolution is the number of dots or pixels per linear unit used to reproduce artwork and images. Output
devices display images as groups of pixels. The resolution of vector graphics, such as Illustrator artwork,
depends on the device used to display the artwork. The resolution of bitmap images, such as digital
photographs, depends on both the display device and the inherent resolution of the bitmap image.
Pixel dimensions the number of pixels along the height and width of a bitmap image. The display size of an
image on-screen is determined by the pixel dimensions of the image plus the size and setting of the
monitor.
A typical 13-inch monitor displays 640 pixels horizontally and 480 vertically. An image with pixel dimensions
of 640 by 480 would fill this small screen. On a larger monitor with a 640 by 480 setting, the same image
(with pixel dimensions of 640 by 480) would still fill the screen, but each pixel would appear larger.
Changing the setting of this larger monitor to 1152 pixels by 870 pixels would display the image at a smaller
size, occupying only part of the screen.
When preparing an image for online display (for example, a Web page that will be viewed on a variety of
monitors), pixel dimensions become especially important. Because your image may be viewed on a 13-inch
monitor, you will probably want to limit the size of your image to a maximum of 160 pixels by 120 pixels.
Saving, Exporting and Printing Artwork
Adobe Web Project
Image resolution the number of pixels displayed per unit of printed length in an image, usually measured in
pixels per inch (ppi). Two images of the same pixel dimension of different resolutions would be two different
on-screen sizes when scaled to 100%. For example, a 1-inch by 1-inch image with a resolution of 72 ppi
contains a total of 5184 pixels (72 pixels wide x 72 pixels high = 5184). The same 1-inch by 1-inch image with
a resolution of 300 ppi would contain a total of 90,000 pixels.
Monitor resolution the number of pixels or dots displayed per unit of length on the monitor, usually
measured in dots per inch (dpi). Monitor resolution depends on the size of the monitor plus its pixel setting.
The typical resolution of a PC monitor is about 96 dpi, of a Mac OS monitor 72 dpi. Understanding monitor
resolution helps explain why the display size of an image on-screen often differs from its printed size.
Vector graphics
Drawing programs such as Adobe Illustrator create vector graphics, made of lines and curves defined by
mathematical objects called vectors. Vectors describe graphics according to their geometric characteristics.
For example, a bicycle tire in a vector graphic is made up of a mathematical definition of a circle drawn with
a certain radius, set at a specific location, and filled with a specific color. You can move, resize, or change the
color of the tire without losing the quality of the graphic.
A vector graphic is resolution independentthat is, it can be scaled to any size and printed on any output
device at any resolution without losing its detail or clarity. As a result, vector graphics are the best choice for
type (especially small type) and bold graphics that must retain crisp lines especially when scaled to various
sizesfor example, logos.
Because computer monitors represent images by displaying them on a grid, both vector and bitmap images
are displayed as pixels on-screen.
Common Web Graphic Formats:

Encapsulated PostScript (EPS)
The EPS file format is used to transfer post-script language artwork between applications and is supported
by most illustration and page layout programs. Typically, EPS files represent single illustrations or tables that
are placed onto a host page, but an EPS file can also represent a complete page.
Because EPS files are based on the PostScript language they can contain both vector and bitmap graphics.
Flash (SWF) format

The Flash format is a version of the Macromedia Flash Player vector-based graphics format for interactive,
animated Web graphics. Students can export artwork to the Flash format for use in Web design, and view
the artwork in any browser equipped with the Macromedia Flash Player plug-in.
Adobe Web Project
Graphics Interchange Format (GIF)

GIF is a popular Web graphic format. GIFs contain a maximum of 256 colors. This format offers good image
compression, but if the image contains more than 256 colors quality is significantly reduced. GIFs can also
contain a transparent area and multiple frames for animation.
Images compressed with lossless compression normally lose no image quality. A GIF compresses by
scanning horizontally across a row of pixels, finding solid areas of color, and then abbreviating identical
areas of pixels in the file. GIFs are only lossless if the image contains very few colors, as line or geometric art
usually does.
Therefore, images with areas of solid color compress best when exported as GIFs. A GIF is usually ideal for
cartoon-like graphics, logos, graphics with transparent areas, and animations. Vector objects are often saved
as GIFs.
Joint Photographic Experts Group (JPEG)

JPEG was developed by the Joint Photographic Experts Group specifically for photographic or high-color
images. JPEG supports millions of colors (24-bit), whereas GIF supports only 256 colors. JPEG always
produces higher quality for photographic image data. JPEG is a lossy format, which means that some image
data is discarded when it is compressed, reducing the quality of the final file.
However, image data can sometimes be discarded with little or no noticeable difference in quality. When
exporting a JPEG, use the Quality slider pop-up menu in the Optimize panel to control how much quality is
lost when compressing the file.
A high percentage setting maintains image quality but compresses less, producing larger files. A low
percentage setting yields a small file, but produces a lower-quality image.
Use the 2-Up and 4-Up previews to test and compare the appearance and estimated file size with different
Quality settings for an exported JPEG.
The JPEG format is best for scanned photographs, images using textures, images with gradient color
transitions, and any images that require more than 256 colors.
Portable Document Format (PDF)

The PDF format is used by Adobe Acrobat, Adobe's electronic publishing software for Macintosh, Windows,
UNIX, and DOS. You can view PDF files using the Acrobat Reader software included on your Adobe
Illustrator CD.
PDF can represent both vector and bitmap graphics. PDF pages are identical to PostScript pages, but PDF
files can also contain electronic document search and navigation features. PDF files, for example, can
contain hypertext links and an electronic table of contents.
Adobe Web Project
Because Illustrator can open a PDF file, you can use the vector artwork or bitmap images from any PDF file in
an Illustrator file.
Students can also use Illustrator to make changes to individual PDF pages. To modify a page within a PDF
file, open the PDF file, select the page to modify, make changes, and save the modified PDF file. The
modified page is restored to its original position in the PDF file.
Portable Network Graphic (PNG)

PNG is a versatile Web graphic format. However, not all Web browsers can take full advantage of PNG
characteristics without using plug-ins. Therefore it is not a common file format for the Web. A PNG can
support up to 32-bit color, can contain transparency or an alpha channel, and can be progressive.
PNG compression is lossless, even in high color depths. It compresses across rows and columns of pixels. For
high-color images, JPEG produces a superior quality. PNG allows transparency with 32-bit color images, but
the image size is large.
The PNG format is best for creating complex live transparency, high-color graphics, and better compressed
low-color graphics.
Scalable Vector Graphics (SVG) and Scalable Vector Graphics Compressed (SVGZ) formats
The Scalable Vector Graphics formats are a World Wide Web Consortium (W3C) specification for a standard,
two-dimensional vector graphics language for the Web. SVG works well with HTML and JavaScript, giving
Web designers creative control in designing an interactive and dynamic Web experience. The scalable
vector-graphic plug-in is required.
Adobe Web Project
Exercise One: Saving Files in PDF or EPS Format

Saving files:
Indicate to students that Adobe Illustrator provides several ways to save files:
The Save command saves the file with its current name, location,
and file format.
The Save As command lets students save an alternative version
of the file with a different name, location, or file format.
The Save a Copy command saves an identical copy of the file,
with the word Copy added to the filename. This command leaves
the original file as the active file.
The Save for Web command (covered in the previous lesson)
allows the user to export a graphic in one of several WebCompatible graphic file formats.
Saving in PDF:
1.
Instruct students to choose File > Save.
2.
Then, select the folder where you want students to save the file and have them enter a name for their
files.
3.
Next, students select Adobe PDF from the Save as Type (Windows) or Format (Mac OS) pop-up menu.
Adobe Web Project
4.
There are options that you will want to explain to students:
In the Adobe PDF Format Options dialog box, students may select from the following options in the Options
Set menu:
Select the Default option to use the default PDF general settings and compression settings.
Select either Acrobat 5.0 or 4.0 in the File Compatibility panel. Transparent artwork will be preserved
only when saved in the Acrobat 5.0 format.
Select Preserve Illustrator Editing Capabilities to export the file in a Acrobat PDF format that allows you
to reopen and edit the file in Adobe Illustrator.
Select the Embed All Fonts option to save the fonts used in the file with the saved file. (Protected
Japanese fonts cannot be embedded in the file.)
Select the Subset Fonts When Less Than _ % of the Characters are Used option to minimize the PDF file
size by embedding only those characters of the font that are used in the documentthat is, a subset of
the font. This option is available when you select Embed All Fonts. Type the character threshold that
determines when a font subset is created. If the percentage of characters used in the document exceeds
this setting, then the entire font is embedded in the file rather than a subset of the font.
Select the Embed ICC profile option to embed a color profile into the saved file. The color profile is
determined in the Color Settings dialog box. This embedded color profile is then applied to the file
when the file is reopened in Adobe Illustrator.
Select the Generate Thumbnails option to save a thumbnail image of the artwork with the saved file.
When working with images optimized for the Web, select Screen Optimized to use default settings
appropriate for use on the Web. When selecting Screen Optimized, the file is automatically converted to the
RGB color mode .
Adobe Web Project
Exercise Two: Exporting Artwork

Exporting artwork:
To use an Adobe Illustrator file in another application, students must save or export their files in a graphics
file format that the other application can use.
Instruct students that if they want to save a file as an Illustrator file (AI), an Illustrator EPS file, or a PDF file,
they use the Save, Save As, or Save a Copy command. To save files in an optimized Web format (JPEG, GIF, or
PNG), use the Save for Web command. All other file formats are exported using the Export command.
In order to export an Illustrator file to another file format:
1.
Student choose File > Export.
2.
Students select the folder where they want to save the

file, and type a name for the file in the Name text box.
3.
Students choose a file format from the Save as Type

(Windows) or Format (Mac OS) pop-up menu.
4.
CLICK! Save (Windows) or Export (Mac OS).
Adobe Web Project
Exercise Three: Printing

Improving printer performance:
Students should be informed of the following: Objects that contain overly complex paths are a main cause
of printing problems. A path's complexity is determined by the number of line segments and anchor points it
contains. The more complex the path, the longer it takes to print. Before printing, make sure that paths
contain only the necessary anchor points.
Here are some suggestions for your students to simplify paths:
Use the pen tool instead of the pencil tool, when possible. Drawings made with the pen tool typically
contain fewer points than those created with the pencil tool.
Use the Object > Path > Simplify command to simplify the path.
Remove unnecessary points. Delete stray points. Change the output resolution.
Increase the flatness of curves.
Split overly complex paths.
Printing a file:
1.
Instruct students to choose File >

Print.
The number of pages that
Illustrator will be printing
determined by the View options selected in the Artboard panel of the Document Setup dialog box. If the Single
Full Page option in the Document Setup dialog box is selected, a single page prints. If any other View option is
selected, for example, the Tile Full Pages option, you can specify a page or a range of pages to print by
entering beginning and ending page numbers in the From and To text boxes.
2.
Students need to indicate which pages they want printed.

If fonts print diagonally and do not show the correct
typeface, the fonts are not stored on the printer. Forcing the
fonts to download allows you to print them (with reduced print
quality). For better print quality, install the fonts on the printer.
3.
CLICK! OK (Windows) or Print (Mac OS).

Important: Adobe Illustrator does not support PDF Writer format; if you attempt to print to PDF Writer you
may experience delays or errors in printing.
Adobe Web Project
Lesson Five: Check for Understanding

Review questions
1.
What is a common way to save artwork files so that they can be shared with other applications?
2.
What are the commands used to save a file as an Illustrator file, an Illustrator EPS file, or a PDF file?
3.
What is the command used to save files in an optimized Web format (JPEG, GIF, or PNG)?
4.
What is the command used to export to all other file formats?
5.
What is a main cause of printer problems in printing artwork?

Note: For this Lesson, teachers may wish to include questions concerning common Web graphic formats
and/or graphic file formats.
Review answers
1.
A common way of sharing Illustrator artwork is to save the artwork as an EPS file. Virtually all page
layout, word processing, and graphic applications accept imported EPS files.
2.
Students should use the Save, Save As, or Save a Copy command.
3.
Save for Web command.
4.
File > Export.
5.
Objects that contain overly complex paths are the main cause of printing problems.


Adobe, the Adobe logo, Acrobat, Acrobat Reader, Classroom in a Book, Illustrator, ImageReady, LiveMotion, Photoshop, and PostScript
are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Mac is a
trademark of Apple Computer, Inc., registered in the United States and other countries. Microsoft, Windows NT, and Windows are either
registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. All other trademarks are the
property of their respective owners.
10
Adobe Web Project
ILLUSTRATOR THE MOVIE PROJECT

Almost every commercial movie has a marketing campaign that starts publicly with the poster/playbill. You are
the Director of the Marketing Team working for a large Hollywood studio (Palisades Pictures). As the Director, it
has fallen on your shoulders to design and create the advertising poster/playbill for the soon-to-be released film
described below. The head of the studio has made it clear that she expects an outstanding advertising campaign
centered on your poster/playbill. In short, the commercial success of this film is YOUR responsibility.
Here is an example of the vital statistics for the film you are working on (you may create your own with your
teachers guidance and permission):
Working Title: Once Upon a Day in Wonderland

Starring: John Revath, Charlize Sheron, Gregg German, and Christine Grant
Directed by: Tim O'Connors
Assumed Rating: PG-13 / PG
Final Cut Running Time: 160 minutes (two hours, forty minutes)
Synopsis of the Script: Tom Jeever's rather creepy mission is to create a new virtual world called Wonderland.
But others are out to stop this new virtual paradise. When Tom meets Christine Grant, another virtual reality
programmer working for the enemy, all madness breaks loose. Will the two live happily ever after in charmed
bliss? Or will Christines deep, dark secret throw a wrench into the works?
Using the above example (or your own vital statistics) and the information learned from your Illustrator lessons,
you will create one or more movie posters to advertise Palisades Pictures new film. Of course, your poster will be
created on the computer you use employing Illustrator as your tool. The studio has high hopes for Once Upon a
Day in Wonderland (or your title). As the Director of Marketing, you are to make those hopes come true.
Your teacher will tell you the time/class periods you have to create your poster.
Assignment: Design a poster to advertise Once Upon a Day in Wonderland (or your title).
Necessary procedures:
1.
Use Illustrator to create the desired graphic elements for the poster.
2.
Use the Internet to locate other resources, if needed, to use in your poster.
3.
Use Illustrator to lay out the poster using color, text, and graphics.
4.
Save your poster as a PDF file and as a JPG file.
5.
Print your poster and turn it in to your teacher.
Adobe Web Project
ILLUSTRATOR THE MOVIE PROJECT
Sample movie posters that can be created using Illustrator:
Adobe, the Adobe logo, Acrobat, Acrobat Reader, Classroom in a Book, Illustrator, ImageReady, LiveMotion, Photoshop, and PostScript are either
registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Mac is a trademark of Apple
Computer, Inc., registered in the United States and other countries. Microsoft, Windows NT and Windows are either registered trademarks or
trademarks of Microsoft Corporation in the United States and/or other countries. All other trademarks are the property of their respective owners.
Adobe Web Project
ILLUSTRATOR TOOLBOX OVERVIEW
The selection tool

(V) selects entire
objects.
The directselection tool

(A) selects
points or path
segments
within objects.
The groupselection tool

(Shift+A) selects
objects and
groups within
groups.
The lasso tool

(Y) selects entire
objects.
The direct-select
lasso tool (Q)
selects points or
path segments
within objects.
The rotate tool

(R) rotates
objects around a
fixed point.
The twirl tool

(Shift+R) twirls
objects around a
fixed point.
The scale tool

(S) resizes
objects around
a fixed point.
The reshape tool

(Shift+S)
smoothes or
changes a path
while retaining
the path's overall
shape.
The reflect tool

(O) flips objects
over a fixed axis.
The shear tool

(Shift+O) skews
objects around a
fixed point.
The pen tool (P)

draws straight
and curved lines
to create objects.
The add-anchorpoint tool (+) adds

anchor points to
paths.
The deleteanchor-point
tool (-) deletes
anchor points
from paths.
The convertanchor- point

tool (Shift+P)
changes smooth
points to corner
points and vice
versa.
The type tool (T)

creates
individual type
and type
containers and
lets you enter
and edit type.
The area type

tool (Shift+T)
changes closed
paths to type
containers and
lets you enter and
edit type within
them.
The path-type
tool (Shift+T)
changes paths to
type paths, and
lets you enter and
edit type on
them.
The vertical type

tool (Shift+T)
creates vertical
type and vertical
type containers
and lets you enter
and edit vertical
type.
The vertical
area-type tool
(Shift+T)
changes closed
paths to vertical
type containers
and lets you
enter and edit
type within
them.
The vertical
path-type tool
(Shift+T)
changes paths to
vertical type
paths and lets
you enter and
edit type on
them.
The ellipse tool

(L) draws circles
and ovals.
The polygon tool

(Shift+L) draws
regular, multisided shapes.
The star tool

(Shift+L) draws
different sorts of
stars.
Illustrator Toolbox Overview
Adobe Web Project
The spiral tool

(Shift+L) draws
clockwise and
counterclockwise
spirals.
The rectangle
tool (M) draws
squares and
rectangles.
The roundedrectangle tool

(Shift+M) draws
squares and
rectangles with
rounded corners.
The pencil tool

(N) draws and
edits freehand
lines.
The paintbrush
tool (B) draws
freehand and
calligraphic lines,
as well as art and
patterns on paths.
The scissors tool

(C) splits paths.
The knife tool

(Shift+C) slices
objects and paths.
The measure
tool (Shift+H)
measures the
distance
between two
points.
The eyedropper
tool (I) samples
paint or type
attributes from
objects.
The paint
bucket tool (K)
fills objects with
the current paint
or type
attributes.
The gradient
mesh tool (U)
creates
multicolored
objects and
applies a mesh for
adjusting color
shading.
The gradient
tool (G) adjusts
the beginning
and ending
points and angle
of gradients
within objects.
The auto trace

tool (Shift+W)
traces the outlines
of objects in
placed images.
The blend tool

(W) creates a
blend between
the color and
shape of
multiple
objects.
The page tool

(Shift+H) adjusts
the page grid to
control where
artwork appears
on the printed
page.
The column
graph tool (J)
positions
columns
vertically.
The stacked
column graph
tool (Shift+J)
stacks columns on
top of one
another.
The bar graph

tool (Shift+J)
positions
columns
horizontally.
The stacked bar

graph tool
(Shift+J) stacks
columns and
positions them
horizontally.
The line graph

tool (Shift+J)
shows the trend
of one or more
subjects over
time.
The area graph

tool (Shift+J)
emphasizes totals
as well as
changes in
values.
The scatter
graph tool
(Shift+J) plots
data as paired
sets of x and y
coordinates.
The pie graph

tool (Shift+J)
creates a circle
graph with
wedges showing
relative
percentages of
the compared
values.
The radar graph

tool (Shift+J)
uses a circle to
compare sets of
values at given
points in time or
in particular
categories.
Adobe Web Project
The hand tool (H)

moves the Adobe
Illustrator
artboard within
the illustration
window.
The zoom tool

(Z) increases
and decreases
the magnifycation in the
illustration
window.
The free
transform tool
(E) scales, rotates,
or skews a
selection.
The smooth tool

(Shift+N)
removes excess
anchor points to
smooth a path
while retaining
the overall
shape.
The erase tool

(Shift+N) erases
paths and anchor
points from the
artwork.
Adobe, the Adobe logo, Acrobat, Acrobat Reader, Classroom in a Book, Illustrator, ImageReady, LiveMotion, Photoshop, and PostScript are either registered
trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Mac is a trademark of Apple Computer, Inc., registered in
the United States and other countries. Microsoft, Windows NT, and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United
States and/or other countries. All other trademarks are the property of their respective owners.
Adobe Web Project
ILLUSTRATOR USING THE PEN TOOL
Using the Pen Tool

Drawing with the pen tool
Use the pen tool to draw a freeform path. The pen tool lets you create straight lines and smooth, flowing curves
with great precision.
A path is made up of one or more straight or curved segments. The beginning and end of each segment are
marked by control points, which work like pins holding wire in place. You change the shape of a path by editing
its control points.
A path is either open, like an arc, or closed, like a circle. For an open path, the starting and ending control points
for the path are called endpoints. You can control curves by dragging the direction points at the end of direction
lines that appear at control points that form curves.
A. Selected endpoint B. Selected control point C. Curved path segment D. Direction line E. Direction point
Paths can have two kinds of control points--corner points and smooth points. At a corner point, a path abruptly
changes direction. At a smooth point, path segments are connected as a continuous curve. You can draw a path
using any combination of corner and smooth points. If you draw the wrong kind of point, you can always
change it.
A. Four corner points B. Same point positions using smooth points C. Same point positions combining corner
and smooth points
A corner point can connect any two straight or curved segments, while a smooth point always connects two
curved segments.
Using the Pen Tool
Adobe Web Project
A corner point can connect both straight segments and curved segments.
Note: The default fill property of any line drawing is Fill, which fills in the area between path points to create
solid shapes. If you want to make an unfilled line drawing, choose Window > Properties and click Outline. Use
the slider to determine the width of the line.
Drawing straight segments

The simplest path you can draw with the pen tool is a straight line, made by clicking the pen tool to create two
control points. By continuing to click, you create a path made of straight line segments connected by corner
points.
To draw straight segments with the pen tool:

1.
Select the pen tool (
2.
Position the tip of the pen point where you want the straight segment to begin, and click to define the first
control point (do not drag). The control point remains selected (solid) until you add the next point.
).
Note: The first segment you draw will not be visible until you click a second control point. Also, if direction lines
appear, you have accidentally dragged the pen tool; choose Edit > Undo and click again.
3.
Click again where you want the segment to end. This creates another control point.
4.
Continue clicking the pen tool to create additional straight segments.

The last control point you add appears as a solid square, indicating that it is selected. Existing control points
become deselected as you add more control points.
5.
Complete the path by doing one of the following:
To close a path, position the pen pointer over the first (hollow) control point. A small loop appears next
to the pen tool ( ) when it is positioned correctly. Click to close the path.
To leave the path open, Ctrl-click (Windows) or Command-click (Mac OS) anywhere away from all
objects, or choose Edit > Deselect All, or select a different tool in the toolbox.
Using the Pen Tool
Adobe Web Project
Direction lines and direction points

When you select a control point connecting curved segments, or a curved segment, the segments display
direction lines which end in direction points. The angle and length of the direction lines determine the shape and
size of the curved segments. Moving the direction points reshapes the curves. Direction lines do not appear on
your Web page.
After selecting a control point (left), direction lines appear on any curved segments connected to it (right).
A smooth point always has two direction lines that move together as a single, straight unit. When you drag the
direction point of either direction line on a smooth point, both direction lines move simultaneously, maintaining
a continuous curve at that control point.
In comparison, a corner point has no direction lines. The angles of corner points are changed by dragging the
corner point directly.
Adjusting direction lines on a smooth point (left) and a corner point (right)
Direction lines are always tangent to (perpendicular to the radius of) the curve at the control points. The angle of
each direction line determines the slope of the curve, and the length of each direction line determines the
height, or depth, of the curve.
Using the Pen Tool
Adobe Web Project
Moving and resizing direction lines changes the slopes of curves.
Drawing curved segments

You create curves by using the pen tool to add control points where a curve changes direction, and to drag the
direction points that shape the curves.
Curves are easier to edit and your system can display them faster if you draw them using as few control points as
possible. Using too many points can also introduce unwanted bumps in a curve. Instead, draw widely spaced
control points, and practice shaping curves by adjusting the length and angles of the direction lines.
To draw a curved segment:

1.
Select the pen tool (
2.
Position the pen tip where you want the curve to begin. Hold down the mouse button. The first control
point appears.
3.
Drag to set the slope of the curve segment you are creating. In general, extend the direction line about one
third of the distance to the next control point you plan to draw.
).
A. Positioning pen tool B. Starting to drag (mouse button pressed) C. Dragging to extend direction lines
Using the Pen Tool
Adobe Web Project

4.
Release the mouse button.
Note: The first segment will not be visible until you draw the second control point.
5.
Position the pen tool where you want the curve segment to end, and then do one of the following:
To create a "C"-shaped curve, drag in a direction opposite to the previous direction line.
To create an "S"-shaped curve, drag in the same direction as the previous direction line.
A. Starting to drag second smooth point B. Dragging away from previous direction line, creating a "C" curve
C. Result after releasing mouse button
A. Starting to drag new smooth point B. Dragging in same -direction as previous direction line, creating an "S"
curve C. Result after releasing mouse button
6.
Continue dragging the pen tool from different locations to create additional smooth points.
7.
Complete the path by doing one of the following:
To close the path, position the pen tool over the first (hollow) control point. A small loop appears next
to the pen tip when it is positioned correctly. Click or drag to close the path.
Using the Pen Tool
Adobe Web Project
To leave the path open, Ctrl-click (Windows) or Command-click (Mac OS) anywhere away from all
objects, or choose Edit > Deselect All, or select a different tool in the toolbox.
Apple Computer, Inc., registered in the United States and other countries. Microsoft, Windows NT and Windows are either registered
respective owners.
Using the Pen Tool
Adobe Web Project
ILLUSTRATOR MACINTOSH SHORTCUTS
Selecting and Moving

Result
,
Action
, or
(last used)
or
(last used)
Any tool (except selection tools) +

+ Ctrl + Tab
-click tool
Adds to or subtracts from a selection
, or
Adds to lasso selection
Subtracts from a lasso selection
Constrains to follow mesh line
-drag mesh point
+ drag
+ drag
Moves selection in user-defined increments

Moves selection in 10x user-defined increments
Locks all deselected artwork
Selects an object that is hidden below another

object
*Press
Shift
Illustrator Macintosh Shortcuts
Option
+2
Position the selection tool over the top object at a point

directly above the object below. (Be sure that any objects
you want to select are directly below the clicking point of
the selection tool.) Without moving the selection tool, Ctrlclick to open the context-sensitive menu. Then choose an
option from the Select submenu.
to constrain movement to 45 angles (except
Command
).
Key
Adobe Web Project
Painting and Transforming

Result
Action
Switch between the paint bucket and the

eyedropper
Samples intermediate color from gradient
Samples style and appends appearance of

currently selected item
Sets origin point and opens dialog box
Duplicates and transforms selection
Transforms patterns (independent of object)
Rotates selection
,
,
,
, or
-click
, or
-drag
, or
+ ~ -drag
-click and then drag anywhere outside of bounding box

+ -drag handles (
skew from center)
Skews selection (after mouse down only)

Changes perspective (after mouse down only)
Resizes selection proportionally
or
Resizes selection from center
or
Command
-click
Shift
Option
-drag handles to
-drag corner handle
-drag bounding box handle

Key
Adobe Web Project
Shapes
Result
Action
Sets center point and opens dialog box
Shape tools + click
Constrains proportion
Constrains orientation
, or
,
, or
Repositions object while it is being drawn
Changes to minimum/maximum radius
Maintains inner radius
-drag
Adds/subtracts sides, corner radius, star points, or

spiral coils
Adds/subtracts coils while increasing spiral length
Changes decay
+
,
Draws circle, polygon, rectangle, rounded

rectangle, or star from center
Command
Shift
Option
-drag
+
-drag
, or
, or
+ spacebar-drag while drawing
-drag
-drag
,
, or
-drag (
-drag to
constrain from center)

Key
Adobe Web Project
Path Editing
Result
Action
(convert-anchor-point tool)
+
Edits existing path
-drag (while drawing over or near selected path)
Closes path over start point
Click start point with the pen
(smooth tool)
Moves anchor point and handles while drawing
+ spacebar
Creates closed path while drawing
or
Connects path to end of another path
Cuts along straight line
Cuts at 45 /90 increments
-drag
-drag
Moves mesh point along path
-drag mesh point
Adds mesh point using existing object color
-click path
Removes mesh point
Command
Shift
Option
-click mesh point
Key
Adobe Web Project
Viewing
Result
Action
Fits imageable area in window
Double-click
100% magnification
Double-click
spacebar (when not in text focus)
+ spacebar
+
Adjusts zoom marquee position
Drag
Hides unselected artwork
Toggles between horizontal and vertical guide

Releases guide
Command
Option
; then press spacebar and continue dragging

+
+3
-drag guide
+
Shift
+ spacebar or
-double-click guide
Key
Adobe Web Project
Type
Result
Action
Aligns left, right, or center
+ L, R, or C
Justifies
+J
Inserts soft return
+ Return
Highlights kerning
+K
Resets horizontal scale to 100%
+X
Resets tracking/kerning to 0
+Q
Increases/decreases point size*
+ > or <
Increases/decreases leading*
Sets leading to the font size
Double-click the leading icon in the Character palette
Increases/decreases kerning/tracking*
Increases/decreases baseline shift*
Selects word, paragraph
Double-click word, triple-click word
Moves pointer left/right one word or up/down one

paragraph
or
**
Switches between type and vertical type, area type

and vertical area-type, and path type and vertical
path-type tools
Toggles between area type and type, path type
and area type, and vertical path-type and vertical
area-type tools
+ click
*Amount is set in File > Preferences > Type & Auto Tracing.
**Press Shift to select or extend existing selection.
Command
Shift
Option
Key
respective owners.
Adobe Web Project
ILLUSTRATOR WINDOWS SHORTCUTS
Selecting and Moving

Result
,
Action
, or
(last used)
Any tool (except selection tools) + Ctrl
or
(last used)
Ctrl + Tab
Alt-click tool
Adds to or subtracts from a selection
, or
Adds to lasso selection
Subtracts from a lasso selection
+ Alt + drag
Constrains to follow mesh line
-drag mesh point
+ drag
Moves selection in user-defined increments

Moves selection in 10x user-defined increments
Locks all deselected artwork
+ Alt + Ctrl + 2
Selects an object that is hidden below another

object
*Press
Shift
Position the selection tool over the top object at a point

directly above the object below. (Be sure that any objects
you want to select are directly below the clicking point of
the selection tool.) Without moving the selection tool,
right-click to open the context-sensitive menu. Then
choose an option from the Select submenu.
to constrain movement to 45 angles (except
).
Key
Illustrator Windows Shortcuts
Adobe Web Project
Painting and Transforming

Result
Action
Alt
Samples intermediate color from gradient
Samples style and appends appearance of

currently selected item
Sets origin point and opens dialog box

Duplicates and transforms selection
Transforms patterns (independent of object)
Rotates selection
Skews selection (after mouse down only)
+ Alt-click
,
,
, or
+ Alt-click
, or
+ Alt-drag
, or
+ ~ -drag
-click and then drag anywhere outside of bounding box

+ Ctrl-drag handles (
skew from center)
+ Alt + Ctrl-drag handles to
Changes perspective (after mouse down only)
+ Alt + Ctrl-drag corner handle
Resizes selection proportionally
or
Resizes selection from center
or
+ Alt-drag bounding box handle
Shift
Key
Adobe Web Project
Shapes
Result
Action
Sets center point and opens dialog box
Shape tools + click
Constrains proportion
Constrains orientation
, or
,
, or
Repositions object while it is being drawn
Changes to minimum/maximum radius
Maintains inner radius
+ Ctrl-drag
Adds/subtracts sides, corner radius, star points, or

spiral coils
Adds/subtracts coils while increasing

spiral length
+ Alt-drag
Changes decay
+ Ctrl-drag
Draws circle, polygon, rectangle, rounded

rectangle, or star from center
Shift
-drag
+
-drag
, or
, or
,
,
,
from center)
+ spacebar-drag while drawing
, or
+ Alt-drag (
+ Alt-drag to constrain
Key
Adobe Web Project
Path Editing
Result
Action
(convert-anchor-point tool)
+ Alt
Alt
+ Alt
Edits existing path

Closes path over start point
(smooth tool)
-drag (while drawing over or near selected path)

Click start point with the pen
+ Alt
Moves anchor point and handles while drawing
+ spacebar
Creates closed path while drawing
or
Connects path to end of another path
+ Ctrl-drag
Cuts along straight line
+ Alt
Cuts at 45 /90 increments
+ Alt-drag
+ Alt
Moves mesh point along path
-drag mesh point
Adds mesh point using existing object color
-click path
Removes mesh point
+ Alt-click mesh point
Shift
Key
Adobe Web Project
Viewing
Result
Action
Fits imageable area in window
Double-click
100% magnification
Double-click
spacebar (when not in text focus)
Ctrl + spacebar
Alt + Ctrl + spacebar or
Adjusts zoom marquee position

Hides unselected artwork
Toggles between horizontal and vertical guide
Releases guide
Shift
Drag
+ Alt
; then press spacebar and continue dragging
+ Alt + Ctrl + 3
Alt-drag guide
+ Ctrl-double-click guide
Key
Adobe Web Project
Type
Result
Action
Aligns left, right, or center
+ Ctrl + L, R, or C
Justifies
+ Ctrl + J
Inserts soft return
+ Enter
Highlights kerning
Alt + Ctrl + K
Resets horizontal scale to 100%
+ Ctrl + X
Resets tracking/kerning to 0
+ Ctrl + Q
Increases/decreases point size*
+ Ctrl + > or <
Increases/decreases leading*
Alt +
Sets leading to the font size
Double-click the leading icon in the Character palette
Increases/decreases kerning/tracking*
Alt +
Increases/decreases baseline shift*
Selects word, paragraph
Double-click word, triple-click word
Moves pointer left/right one word or up/down one

paragraph
Ctrl +
or
**
Switches between type and vertical type, area type

and vertical area-type, and path type and vertical
path-type tools
Switches between area type and type, path type
and area type, and vertical path-type and vertical
area-type tools
Alt + click T
*Amount is set in File > Preferences > Type & Auto Tracing.
**Press Shift to select or extend existing selection.
Shift
Key
Apple Computer, Inc., registered in the United States and other countries. Microsoft, Windows NT and Windows are either registered
respective owners.

Illustrator Web Project

Uploaded by

Copyright:

Available Formats

Illustrator Web Project

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Illustrator Web Project

Uploaded by

Copyright:

Available Formats

Adobe

Adobe Web Project

Lesson 2: Working in Illustrator

Lesson 3: Applying and Using Color

Color Modes and Models

Lesson 4: Graphics for the Web

Lesson 5: Saving, Exporting, and Printing Artwork

Saving Artwork in a Variety of Files

The Movie Project Begins

Adobe Web Project

Other learning resources

Official Adobe Print Publishing Guide

Official Adobe Electronic Publishing Guide

SAMS Teach Yourself Adobe Illustrator 9 in 24 Hours

Adobe Web Project

Adobe Web Project

Summary and Overview

Students will also learn to access Help in the Illustrator program.

To use the Illustrator interface

Adobe Web Project

Teacher Orientation for Lesson One

Adobe Web Project

Exercise One: Tools

Moving the toolbox to optimize the work area:

Showing or hiding the toolbox:

Adding and displaying hidden tools on-screen:

Adobe Web Project

Exercise Two: Palettes

Displaying (showing) or hiding a palette:

To move an entire palette group, drag its title bar.

Adobe Web Project

Adobe Web Project

Exercise Three: Work Area

Opening a new file:

Choose File > New, and then enter a name in

Select the CMYK or RGB color mode. (See Color

If necessary, enter a height and width for the

Opening an existing file:

Choose File > Open.

Select the name of the file you want to open, and

Closing a file and quitting Illustrator:

Showing or hiding the artboard:

Adobe Web Project

Changing the screen mode for illustration windows:

Opening a new window:

When working in Illustrator, students can open additional windows to

Adobe Web Project

Set up the view that is wanted.

Choose View > New View.

Enter a name for the new view, and CLICK! OK.

The view names, along with keyboard shortcuts for

Renaming or deleting a view:

Choose View > Edit Views.

Select the view you want to edit, and

Scrolling the view with the hand tool:

Select the hand tool (

Adobe Web Project

Exercise Four: Working the Artboard

Choose File > Document Setup. Then choose