Vector Graphic
Essentials
V I S U A L M E D I A D E S I G N 10 5
ADOBE ILLUSTRATOR
Adobe Illustrator is digital illustration software. It is used primarily to
create scalable vector artwork such as logos, charts, info-graphics,
character models and creative digital illustrations.
VECTOR GRAPHICS
Vector graphics are comprised of points and paths. Unlike their
pixel counterparts, vector graphics are generated mathematically
and can be scaled to any size without distortion. This makes a
program like Illustrator perfect for projects like logos that may
require output in different sizes.
Another advantage to working in Illustrator is that it generates
object oriented fles where each element in the illustration is a
separate object. Illustrator fles are also usually compact, both in
memory and in storage.
97
Visual Media Design 105 > Digital Skills for Visual Media
ADOBE ILLUSTRATOR: ESSENTIAL CONCEPTS
WORKING AREA
The main working area in Illustrator is called the Artboard, Illustrator
fles can use multiple artboards in a single document.
UNDOS
Illustrator supports unlimited undos and redos via Cmd-Z.
WORKING WITH LAYERS
Illustrator uses layers to organize complicated fles, just like
Photoshop. Unlike Photoshop, Illustrator automatically generates
layers for the objects in a fle. Layers can be organized further into
Folders which work just like Layer Groups in Photoshop.
Layers are less important in simple Illustrator fles since the program
keeps track of objects separately.
98
Visual Media Design 105 > Digital Skills for Visual Media
WORKING WITH VECTOR FILES
FILE FORMATS
The native Illustrator fle format is .AI.
IN AND OUT
Illustrator can import most common graphic fles for use in
illustrations. You can import graphics into Illustrator through the
Place command or via copy and paste.
Illustrator can export into raster fle formats for screen and print.
Here are the most commonly used vector fle formats:
AI (Illustrator Document)
Native Illustrator fle. You can place native .ai fles into
applications like Photoshop or InDesign.
SVG (Scalable Vector Graphics)
For screen. Vector web graphics.
PNG | JPEG | TIFF
You can export vector ai fles into most common pixel formats.
99
Visual Media Design 105 > Digital Skills for Visual Media
ILLUSTRATOR INTERFACE: KEY COMPONENTS
Our exploration of Illustrator will focus on a few key panels:
TOOL PANEL
Contains all the Illustrator tools. Some tools share the same pane in
this panel.
PROPERTIES
Use the Properties Panel to format objects and type. This is the
context-sensitive hub of the Illustrator interface
PATHFINDER
Allows you to make simple shapes interact to create more complex
shapes.
LAYERS
Just like Photoshop, Illustrator uses layers to manage complex fles.
SWATCHES
This panel is used to create and manage colors, tints, gradients and
patterns.
100
Visual Media Design 105 > Digital Skills for Visual Media
VECTOR GRAPHICS: IMPORTANT TERMS
Path. A path is what defnes an object. Paths are composed of
anchor points and segments.
Anchor Point. Controls the direction of a path. Paths flow from
one anchor point to another much like a “connect the dots”
drawing. Every click with the Pen tool creates a new anchor point
and connects the point to the previous anchor point with a line
segment. There are two types of anchor points—smooth anchor
points and corner anchor points. An anchor point can also have
Bezier Control Handles for creating a curved segment.
Segment. The part of a path between anchor points. There are two
types of segments— straight segments and curved segments.
Bezier Control Handles. Handles that extend from an anchor
point to create and control a curved segment. The handles can
work in unison (smooth), or separate from each other (corner).
Smooth Point. An anchor point that creates a smooth or invisible
transition between segments. If the direction of one handle is
changed, the opposite handle will change as well.
Corner Point. An anchor point that creates a corner in a path. A
corner point can have one, two or no bezier handles. The Bezier
handles work independently of each other—if you change the
direction of one handle, it will not affect the other.
Fill. Color applied to the inside of paths. A fll can be a solid color, a
pattern or a gradient.
Stroke. Color applied to a path. Only solid colors should be applied
as strokes. Strokes can be of any thickness. The thickness of a stroke
is called its weight.
Anchor Point
Segment
Bezier
Control
Handle
Smooth
Point
Corner
Point
101
Visual Media Design 105 > Digital Skills for Visual Media
THE PATHFINDER FILTERS
The pathfnder flters allow you to make simple shapes interact
in order to create more complex shapes. These commands are
accessed from the Pathfnder Panel [Window > Pathfnder].
Pathfnder operations require two or more closed paths to be
selected in order to work properly.
UNITE
New shape will take front color.
MINUS FRONT
Front object knocks out background.
INTERSECT
Overlapping area is selected.
102
Visual Media Design 105 > Digital Skills for Visual Media
DRILL: ILLUSTRATOR SETUP
You’ll need to confgure Illustrator in a sensible way before you
jump in and start working in the program. This exercise will make
some suggestions for an uncluttered setup, and build on the
process you already went through with Photoshop in the previous
section.
CREATE SHORTCUTS
Jump into the Applications folder and fnd the program icon for
Illustrator.
£ Drag this icon into the Dock to create a launch shortcut.
£ Now hold down Cmd and drag the icon into the Sidebar for
even easier access.
£ Use one of these shortcuts to launch the program now.
SET PREFERENCES
£ Enable the Application Frame by going to Window >
Application Frame.
£ Go to Illustrator > Preferences. This should be your frst stop
when learning a new application.
£ Use the left sidebar to jump into the Interface section and
choose the Light option for Brightness. That way your screen
will always match the screenshots you see in the reader.
£ Poke around in the other program preferences and take note
of all the ways you can confgure the application.
103
Visual Media Design 105 > Digital Skills for Visual Media
DRILL: CREATING AND SAVING ILLUSTRATOR FILES
This drill will introduce you to basic techniques for creating and
saving fles in Illustrator.
£ Go to File > New to bring up the new document dialogue;
£ Make a fle that is 1280 x 800 pixels.
£ Equip a basic shape tool and add some geometry to your fle.
£ Go to File > Save to save the document.
£ Give the fle a descriptive name. Be sure to save it to the
Desktop as a native Illustrator fle [AI].
104
Visual Media Design 105 > Digital Skills for Visual Media
PROJECT: A SIMPLE LOGO
This exercise will introduce you to Illustrator’s suite of basic
geometric shape tools and show you some simple ways to
manipulate them. You’ll combine 2 rectangles, an elipse and some
type to create a simple logo design.
Scenario: You’ve been hired to design a simple logo for a new
clothing company called Cargo. You will deliver a native Illustrator
fle [.ai] suitable for a range of different branding projects.
GETTING STARTED
£ Jump into Adobe Illustrator.
£ Go to File > New [Cmd-N] and make a new document that is
1000 x 1000 pixels.
£ Type Cmd-S on your keyboard and save the fle to the
Desktop.
£ Name your fle LastName_Firstname_Cargo.ai
CREATE THE SHAPE
£ Equip the Rectangle Tool [M]
£ Click a single time in the artboard. A dialogue will appear
that allows you to enter precise numerical dimensions for the
shape you need. You can also simply click and drag out the
shape if you wish.
£ Create a rectangle that is 200 x 700 pixels.
£ Use the Selection Tool [black arrow] to roughly position this
shape in the middle of your artboard.
£ Save your fle.
105
Visual Media Design 105 > Digital Skills for Visual Media
FILLS AND STROKES
Objects in Illustrator can be assigned two essential properties: fll
and stroke. You can use the Properties Panel to easily assign these
properties to any selected object.
£ Be sure your shape is selected.
£ Use the Appearance pane in Properties to assign it a deep red
fll and a black stroke that is 4 points wide.
DUPLICATE THE SHAPE
Illustrator makes it easy to duplicate existing fle elements.
£ Select the rectangle with the Selection Tool [black arrow]
£ Now, hold down Option and drag out a copy.
£ Move your cursor to one of the corner handles and drag
to rotate the new rectangle until it is perpendicular to the
original shape you generated [holding down Shift will usefully
constrain your rotation].
£ Save your fle.
ALIGN THE TWO SHAPES
You can use Align to align these two shapes relative to each other.
£ Select both rectangles with the Selection Tool.
£ You will see a new Align pane in the Properties panel.
£ Use the alignment controls to align the shapes vertically and
horizontally.
UNITE THE SHAPES
You can use Illustrator’s Pathfnder feature to combine these two
rectangles into a single more elegant shape.
£ Select both rectangles with the Selection Tool.
£ You will see a new Pathfnder pane in the Properties panel.
£ Click on the Unite option [left-most icon]. You should see the
two shapes combine into a single unit.
£ Save your fle.
106
Visual Media Design 105 > Digital Skills for Visual Media
ADD AN ELIPSE
The Elipse Tool shares space with the other simple shape tools.
You can use it to create circles and other eliptical shapes.
£ Equip the Elipse Tool.
£ Hold down Shift on your keyboard, and drag out a circle
that is big enough to contain the cross shape in your fle.
£ Use Properties to assign a fll of None and a 1 point black
stroke.
£ Use Align to center the two shapes on your Artboard.
£ Save your fle.
ADD THE TYPE
You can use Copy and Paste to move elements between
different Illustrator fles, just as we did in Photoshop.
£ Open the fle CargoType.ai
£ Use the Select Tool to select the type in this fle
£ Type Cmd-C to copy the text to the Clipboard
£ Return to your working logo fle
£ Type Cmd-V to paste the type into this document.
£ Save your fle.
SCALE THE TYPE
The type needs to be scaled to ft inside the logo shapes. You can
transform objects in Illustrator just as you did in Photoshop.
£ Position the cursor over one of the corner handles of the
type.
£ Hold down Option and Shift and drag inwards to make the
type smaller.
£ Scale the type until it fts inside the red shape.
£ Save your fle.
FINISH UP!
Feel free to experiment with Fill and Stroke; make any changes
you want to the working logo fle. When you’re happy with the
design, move on to the next project.
107
Visual Media Design 105 > Digital Skills for Visual Media
PROJECT: AN APPLICATION ICON
This project will give you more practice working with shapes. You’ll
also learn about guides, opacity, and about exporting artwork for
screen projects.
Scenario: You’ve been hired to design an application icon for a
new game called Kats. The icon will be used to market the game on
the web, and as an app icon for phones and tablets. You will deliver
a screen-ready fle with a transparent background [.PNG].
GETTING STARTED
£ Jump back into Adobe Illustrator.
£ Go to File > New [Cmd-N] and make a new document that is
1024 x 1024 pixels.
£ Type Cmd-S on your keyboard and save the fle to the
Desktop.
£ Name your fle LastName_Firstname_Kats.ai
CREATE THE BACKGROUND SHAPE
£ Go to the View Menu and make sure the Smart Guides option
is checked.
£ Equip the Rectangle Tool [M]
£ Click once in the artboard and make a rectangle that is 512 x
512 pixels.
Shapes in Illustrator are “live” when you create them. This means
that they can be edited without switching tools.
£ Drag the dot in the center of the rectangle to reposition the
shape roughly in the middle of the artboard.
£ The target shapes on each corner allow you to adjust the
corner radius of the shape. Click and drag inward on one of
these to make a rounded corner rectangle.
£ Save your fle.
108
Visual Media Design 105 > Digital Skills for Visual Media
ADD THE KAT ARTWORK
Now, you’ll add the Kat illustration and experiment with stroke and
fll setiings.
£ Locate and open the fle Kats.ai
£ Copy and paste the Kat illustration into your working fle
£ Shift-drag on a corner handle to scale the artwork so that it
fts into the rectangle shape.
£ Equip the Selection Tool and drag to position the cat face in
the center of the icon. You will see magenta Smart Guides
that alert you when you’re dead center!
EXPERIMENT WITH FILL AND STROKE
£ Select the background rectangle and give it an orange fll.
£ Now increase the stroke weight to 4 points
£ Click on the word “stroke” in the Properties Panel to bring up
the Stroke Panel.
£ Enable the “Dashed Line” option and set the dash to 8 points.
£ Select the cat shape with the Selection Tool
£ Use Properties to lower the opacity to 80%. This makes the cat
blend with the background orange.
£ Save your fle.
EXPORT THE DOCUMENT
The Export command lets you export from Illustrator into
screen-ready fle formats. You will use this command to export a
transparent PNG version of the icon.
£ Go to File > Export > Export for Screens
£ Make sure that PNG is specifed as the fle format in the lower
right of the dialog.
£ Click Export Artboard to export the fle.
£ Locate this document on your desktop.
£ Rename this fle LastName_Firstname_Kats.png
FINISH UP!
For this project, you will submit both the native Illustrator fle and
the PNG fle we created at the end. Locate both fles and put them
inside an enclosing folder before you move on.
109
Visual Media Design 105 > Digital Skills for Visual Media
PROJECT: ALIEN INVADERS!
This exercise will take you through the way Illustrator’s different
selection tools work. It will also offer you a unique challenge at the
end!
Scenario: You’ve been hired to create a playful illustration to
accompany a childen’s book about an alien invasion. You will
deliver a native illustrator fle to your client.
GETTING STARTED
£ Navigate to the exercise folder for today’s session; fnd and
open the fle Alien.ai . You’ll make some edits to the alien
and then bring her into a new background.
EXPLORE THE FILE
This fle has many separate shapes all sitting on top of each other.
In complex documents like this, it is sometimes useful to look at the
shapes without flls and strokes.
£ Go to View > Outline to go into Outline mode [Cmd-Y]
£ Type Cmd-Y to toggle back to Preview Mode
Interesting to see the anatomy of this fle!
Illustrator has a number of different selection tools, all clustered at
the very top of the Tool Panel. The two primary tools you’ll explore
here are the Selection Tool [black arrow, V] and the Direct Selection
Tool [white arrow, A].
The Selection Tool is useful in moving and transforming entire
shapes; the Direct Selection Tool allows you to select individual
anchor points in a shape. Let’s see how this works!
MAKE EDITS WITH THE SELECTION TOOL
£ Equip the Selection Tool and select the air dome in the alien’s
suit.
£ Go to Object > Arrange > Bring to Front to bring this to the
top of the object stack.
£ Use Properties to give this shape an opacity of 40%. This
makes it partially transparent.
£ Save your fle
Making edits like this to entire shapes require the Selection Tool.
110
Visual Media Design 105 > Digital Skills for Visual Media
MAKE EDITS WITH THE DIRECT SELECTION TOOL
If you need to edits the anchor points or control handles that make
up a path in Illustrator, you mnust frst select the shape with the
Direct Selection Tool.
£ Equip the Direct Selection Tool [A]
£ Click on the very end of the alien’s right arm. You’ll select the
anchor point at the end of that line.
£ Drag that point inwards a bit to change the curve of the arm.
£ Do the same for the left arm
£ Now, click on the shape for the air dome.
£ Click again on the upper anchor point and drag this point
upwards to enlarge the shape.
£ Save the fle.
These are minor edits, but they can only be accomplished using the
Direct Selection Tool.
ADD A FEW DETAILS
Now you’ll add the claws to the fle.
£ Equip the Selection Tool [V]
£ Select the claws and drag them into position so that they
overlap the end of the right arm.
£ Hold down Option and drag out a copy of the claws
£ Move your cursor just outside one of the corner handles; drag
to rotate the claws so that they ft over the end of the left arm.
£ Save your fle.
These edits to overall shapes [move, transform] can only be
accomplished with the Selection Tool. Hopefully you now
understand the difference between both tools.
111
Visual Media Design 105 > Digital Skills for Visual Media
MOVE THE ALIEN INTO THE BACKGROUND FILE
Now, you’ll move the alien into a new background to complete the
project.
£ Type Cmd-A to select all the paths in this fle.
£ Go to Object > Group [Cmd-G] to group all the different
shapes into a single element.
£ Type Cmd-C to copy the paths to the Clipboard
£ Locate and open the fle AlienBackground.ai
£ Type Cmd-V to paste the paths into this new fle.
£ Go to File > Save As to save a copy of this document to the
Desktop.
£ Name this fle LastName_Firstname_Aliens.ai
CHALLENGE PROJECT!
Now that you have your alien in a new background, I want you
to complete the project on your own without step-by-step
instructions. A few suggestions:
• Duplicate the alien. Use scale and rotate to make the copies
blend into the background.
• Edit flls and strokes; experiment with opacity.
• Add type
• Add other elements to the scene
FINISH UP AND SUBMIT
£ Review your fle and make sure you’re happy with the fnal
illustration.
£ Submit these projects to your instructor in the method that
they prefer. This may be to the class server or to Canvas. Ask
your instructor if you are unsure.
112
Visual Media Design 105 > Digital Skills for Visual Media