User Guide: Graphic For Mac v3.0.1

User Guide
Graphic for Mac v3.0.1
1
Welcome to Graphic 7
Vector Illustration 7
Getting Started 9
Creating a New Document 9
Managing Documents 11
Interface Overview 13
Toolbar 14
Canvas 15
Titlebar 16
Colors and Gradients 18
Stroke and Fill Colors 18
Color Panel 18
Color Palette 19
Eyedropper Tool 20
Gradient Panel 21
Layers panel 23
Opening Layers 24
Creating Layers 24
Deleting Layers 24
Arranging Layers 24
Selecting Multiple Layers 25
Duplicating Layers 25
Merging Effects 25
Copying and Pasting Layers 25
Renaming Layers 25
Moving Objects Between Layers 26
Layer Effects 26
Blending Modes 27
2
Tools 30
Move Tool 31
The Bounding Box 32
Editing Fills 33
Path Selection Tool 34
Tool Modes 34
Modifying Curves 35
Deleting Path Points 37
Pen Tool 38
Tool Modes 38
Appending an Existing Path 39
Creating a Line Segment after a Curve 39
Creating a Curve after a Line Segment 40
Adding Path Points 40
Deleting Path Points 41
Cutting Paths 41
Text Tool 42
Brush Tool 38
Brush Settings 45
Using Saved Brushes 47
Saving Brushes 47
Removing Saved Brushes 47
Pencil Tool 48
Eraser Tool 49
Line Tool 50
Tool Modes 50
Arrowed Line 51
Dimension Line 52
Arc Tool 53
Ellipse Tool 54
Rectangle Tool 55
3
Rounded Rectangle Tool 56
Polygon Tool 57
Shape Libraries Panel 59
Using Shapes 59
Creating a New Shape Library 60
Saving a Shape 60
Removing a Saved Shape 61
Removing a Shape Library 62
Renaming a Shape Library 62
Photos Tool 63
Rotate Tool 64
Scale Tool 66
Shear Tool 68
Gradient Tool 70
Image Tool 71
Appearance Panel 72
Stroke Pane 73
Brush Pane 73
Arrows Pane 74
Dash Pane 75
Creating Dash Styles 75
Removing Dash Styles 76
Label Pane 77
Text Pane 79
Importing Fonts 80
Fill Pane 81
Image Pane 81
Shadow Pane 82
Opacity Pane 83
Effects Panel 84
Fill 86
4
Stroke 87
Drop Shadow effect 89
Inner Shadow effect 90
Outer Glow effect 91
Inner Glow effect 92
Blur effect 93
Styles Panel 94
Applying a Style 94
Saving a Style 94
Removing a Saved Style 95
Geometry Panel 96
Arrange Panel 97
Order 97
Group/Ungroup 98
Align 99
Distribute 99
Combine Panel 100

Combine Paths 100
Compound Path 101
Path Panel 102

Join/Connect 102
Modify 103
Text 104
Canvas Panel 105

Canvas Panel 105
Grid & Ruler Panel 102
Grid 87
Snapping 88
Rulers 88
5
Preferences panel 94
Toolbar Location 87
Selection Color 88
Outline Mode 88
Exporting Designs 95
Thank you for using Graphic! 96
6
Thank you for purchasing Graphic!
This user guide will help you become familiar with the powerful set of drawing tools and
features available in Graphic, getting you up and running quickly. Graphic has been designed
from the start to have a beautiful, clean, and easy to use interface - with the goal of creating
a powerful drawing application which takes advantage of the native features in Mac OS X
and iOS, and is both fun and rewarding to use. 
Graphic for iPad
Graphic for Mac OS X
Graphic for iPhone
Create, edit, and share designs between the

Mac, iPad and iPhone versions of Graphic.
7
Welcome to Graphic
Graphic is a feature-packed vector illustration application, with all the tools you need to
create everything from intricate designs to beautiful works of art. Graphic was created from
the ground-up as a native iOS application, fully taking advantage of UIKit, Core Graphics,
Core Text, and many of the powerful technologies in iOS.
Vector Illustration
Unlike bitmap drawing applications, which focus on editing the individual pixels of an image,
vector designs are created using objects and paths. Vector paths - consisting of points, lines,
and curves - can be painted and filled. Multiple paths can be used together to create detailed
intricate objects, while multiple objects can then be arranged to create a larger design. 
Original - 100% Scaling a bitmap image vs. scaling a vector image.

The original vector image remains crisp when enlarged,
without any loss of quality. A bitmap version of the
same image loses quality when enlarged.
Bitmap Image - 400% Zoom
Vector Image - 400% Zoom

8
One of the many benefits of vector drawing is that each drawn object remains fully editable
throughout the entire process of creating a design. Object paths are always modifiable, while
the colors and fill styles applied to a path can be changed at any time to alter the look of a
design.
This is in contrast to bitmap painting applications, in which each drawing tool directly
changes the pixels of an image. For example, modifying the color of a brush stroke in a
bitmap painting after it has been drawn is not possible without redrawing that portion of the
design.
Vector object, consisting of Object paths shown selected,

Finished design
multiple individual paths filled with colors/gradients.
Vector illustrations are resolution-independent. Objects, or entire designs, can be resized to

larger or smaller sizes without any loss of quality.
Even if you are unfamiliar with vector drawing this guide will help you become comfortable
with creating your own designs using the various tools available in Graphic. 
9
Getting Started
When launching Graphic for the first time, you will be presented with the Welcome window.
From this window you have the option to create a new document or open an existing
Graphic document.
Creating a New Document

To create a new document, you can choose ‘Create a New Document’ from the Welcome
Screen, or select File > New [ ⌘-N ] from the menu bar.
The New Document panel allows you to select the canvas style, size, and measurement units
for the new document.
Canvas Style - Choose from a variety of canvas styles - including graph paper, notebook
paper, and blueprint - for the perfect canvas for a particular project.  
10
All canvas styles are created using variations of the built-in grid and background color
settings, making them fully customizable. Customize your document further using the
Canvas and Grid panes.
Presets - Quickly choose the size for the new document from a
list of preset sizes. Simply choose a preset from the list, such as
Letter or A4, and the dimensions of that preset automatically fill
the width and height fields.
Color Mode - Select the color mode to be

used in the document, RGB or CMYK.
Orientation - Select the orientation mode

to be used for the canvas, landscape or
portrait.
Width and Height - Enter values for the width and height of
the new document. Landscape or portrait documents can be
created by varying the width and height values. Documents can
have a maximum canvas size of 16,000 x 16,000 pixels. The size of
the document can be changed later in the Canvas pane.
Units - Select the measurement units to be used for the new

document. The possible unit types include pixels, inches, centimeters,
and millimeters. The width and height field values are specified in these
units. The measurement units can also be changed later in the Canvas
pane. 
11
Interface Overview
Graphic uses a primarily single-canvas interface, with a few accompanying inspector panes
for additional settings and features.
The Toolbar provides access to the available drawing and editing tools.
The options in the Titlebar can be used to return to the Documents Browser, undo/redo
actions, delete selected objects or open one of the four main settings panes.  
Document Tabs Inspector Panels
Toolbar
Color Wells
Canvas Layers
12
Document Tabs
Rather than require you to constantly swap between many scattered windows - one for each
open document - Graphic uses an elegant tab-based interface for switching between open
documents. Document tabs are shown in the Tab Bar (directly below the window’s title bar).
Each open document is

represented by a tab, with the
current document shown as a
lighter-colored ‘selected‘ tab.
Document Tabs Current Document
Close Tab/Document
Switching Between Documents

You can switch between open documents by clicking on a particular document’s tab in the
Tab Bar. The document for the clicked tab is then selected and shown in the Canvas area of
the document window.
The documents popup can also be used to

Documents Popup switch between open documents. Access the
popup by clicking on the double-arrow
button on the right side of the Tab Bar.
Closing Documents Keyboard Shortcuts

You can close any open document by
clicking on the close button in its tab.
Close Document
To close the currently active
document, you can choose File >
Close Window
Close Document from the menu bar
or use the ⌘-W keyboard shortcut.
13
Toolbar
The toolbar on the left side of the document window allows you to choose between the
various drawing and editing tools available in Graphic. Using the different tools you can:
• Position and resize objects using the Move

tool. Selected Tool
• Edit paths, anchor points, and curves using the

Path Selection and Convert Anchors tools.
• Create new paths and shapes using the Pen,

Brush, Pencil, and shape drawing tools.
• Scale, rotate, and shear objects using the

transform tools. Tools
• Pan and zoom the canvas using the Hand and

Zoom tools.
• Change the current stroke and fill colors using

the toolbar color wells.
To select and use a tool simply click on its icon in

the toolbar. The name of the currently selected
and active tool is shown in the indicator above
the toolbar. Fill Color
Below the tools are the Stroke and Fill color

Stroke Color
wells, which can be used to change the current
stroke and fill settings.
Tip:
Quickly switch between the different tools by using
their keyboard shortcuts.
Hover over each tool with the mouse to view a tooltip
showing its name and keyboard shortcut. 
14
Tool Options
Many of the tools in Graphic have customizable settings that allow you to adjust their
behavior. The settings for the currently selected tool appear in the Tool Options Bar above
the Canvas area.
The tool options for the Polygon Tool
Selected Tool - The name of the currently selected tool appears on the left side of the
Tool Options Bar.
Selection Properties - The Selection Properties are shown to the right of tool’s name.
When no objects are selected, this indicator simply displays the X and Y position of the
mouse on the Canvas. When one or more objects are selected, this displays location and size
of the bounding box surrounding the current selection
Selected Tool Settings - The settings for the currently selected tool are displayed to the
right of the Selection Properties.
- For selection tools, including the Move and Path Selection
tools, this area will display additional information about
the current selection.
- For drawing tools, this area will display settings that can be used to customize the
objects that are created by that tool.
- For editing tools, such as the Rotate and Scale tools, this area will contain controls that
allow you to numerically 
15
Canvas
The Canvas is the visible area
that defines a design. It is
where illustrations are created;
where objects are drawn and
edited.
The grey patterned area

surrounding the canvas is non-
printable ‘scratch’ space.
Objects can overlap into this
area, or they can be placed here
while a design is being edited,
however anything outside of
the canvas will not be visible
when printing or exporting the
design.
Canvas Size
The size of the canvas can be changed at any time from the Canvas pane. The measurement
units used for dimensions can be set to pixels, inches, millimeters, or centimeters.
Background
The background of the canvas can be set to be either a solid color, gradient, or image (using
the Canvas pane).
Rulers and Grid

The Rulers and Grid are helpful when positioning and aligning objects. When selecting
objects, highlights appear on the rulers
showing the bounds of the current Keyboard Shortcuts
selection. To toggle the rulers, choose
View > Show / Hide Rulers [ ⌘-R ]. To
enable grid snapping choose View > Show/Hide Rulers
Snap to Grid [ ⌘-Shift-’ ].

Show/Hide Grid
You can customize the grid using the

Toggle Snap to Grid
Grid pane. 
16
Colors, Gradients and Patterns
Each object in raphicGraphic is composed of one or more
vector paths. Object paths are drawn by drawing the line
around the path (Stroke) and drawing the area inside of the
path (Fill). Fill
Strokes are drawn based on their width and color. Fills can be Stroke
either a color, a gradient, or an image.
Stroke and Fill Colors

The Stroke and Fill color wells in the toolbar can be used to set the current stroke and fill
colors. Drawing tools will use these colors when creating new objects.
When objects are selected, the stroke and fill color wells update to the colors used by those
objects. Changing the stroke or fill colors while objects are selected will change the objects’
colors.
To disable the drawing of an object’s stroke or fill, you can set the color to ‘none’ ( ).
Color Palette
The Color Palette can be used to quickly choose a
color, as well as save and reuse frequently used
colors. Aside from the Stroke and Fill color wells,
color wells appear throughout Graphic’s interface
which can be used to set the color for a specific
setting, from grid line colors to the document’s
background color.
Clicking on a color well will bring up the floating
color palette.
Colors can be added to the color palette by

clicking on the add button ( ) at the bottom
of the palette. You can use the Color Panel to
choose new colors that can be added. To remove
a color simply right-click on it and choose
Remove Color.
17
Color Panel
To choose a custom color not available in the
Color Palette, the Color Picker can be used. To
show the Color Picker open the drop-down menu
and simply select it.
The Color Panel can select colors using a variety

of different color picker interfaces, from a Color
Wheel to RGB, CMYK, HSB, and Grayscale sliders.
The Alpha slider at the bottom of the panel can

be used to make colors semi-transparent.
The color setting being modified is shown as the

title of the Color Panel.
Eyedropper Tool
The Eyedropper Tool can be used to
select a color by picking the color of any pixel
on the screen.
To activate the Eyedropper Tool, click on its

icon in the Color Panel. The cursor will become
an Eyedropper that shows a magnified area of
the pixels underneath it. Clicking on any pixel
on the screen will choose that color. 
18
Gradient & Pattern Palettes
Unlike strokes, fills can be set to gradients and patterns as well as colors.
The palette for the Fill color well has options for choosing either a color, a gradient or a
pattern. Switch between color, gradient and pattern fills using the control at the top of the
palette. 
Gradients can be added to the gradient Patterns can be added to the pattern
palette by clicking on the add button palette by clicking on the add button
( ) at the bottom of the palette. ( ) at the bottom of the palette.
Create new gradients using the gradient You can adjust existing patterns using the
editor in the Fill pane in the Appearance pattern editor in the Fill pane in the
Panel. Appearance Panel.
To remove a gradient simply right-click on To remove a pattern simply right-click on it

it and choose Remove Gradient. and choose Remove Pattern.
Fill (X)
Shows the selected fill, the color,gradient or pattern used to fill areas enclosed by
paths.
Stroke Color (X)

Shows the selected stroke color, the color used to draw paths.
19
Recoloring Artwork
The Adjust Colors… options makes it easier for you to recolour several object or the entire
artwork at once.
Select the objects and simply go to Modify

> Adjust Colors or use the ⌘-3 keyboard
shortcut to open the Adjust Colors window.
Recolour Method - choose between

three recolour methods: Hue / Saturation,
Color Balance and Brightness / Contrast.
Moving those sliders will adjust the colors
used for your artwork.
Preview color changes - Check this box

for a live preview with the changes.
Reset - Hit the Reset button to return to the original colors from your atwork.  
Adjust colors using the Hue / Saturation method
20
Adjust colors using the Color Balance method
Adjust colors using the Brightness / Contrast method
21
Inspector Panels
In addition to the main document window, Graphic also offers four floating inspector panels
with additional features. Each panel has a distinct role, from changing various object settings
to saving and reusing styles and object libraries.
Show / hide each Inspector Panel

using the toolbar buttons, or using
the Window menu.
Appearance Panel Styles Panel

Layers Panel
Properties Panel Shape Libraries
The Properties and Appearance panels both

have multiple panes of settings. You can switch
between settings panes using the tab bar at the
top of the panel.
Each floating inspector panel can be moved

anywhere on screen. A panel can be collapsed
by clicking on its title bar, and snapped to the
top or bottom of another inspector panel.
Arranging Windows
To automatically snap and arrange the
inspector panels on the right side of the
The Properties panel with the
main screen choose Window > Arrange
Geometry Settings tab selected.
Inspectors from the menu bar.
To automatically resize and position the

document window alongside the
inspector panels on the main screen,
choose Window > Arrange Windows.
To bring your document window Multiple inspector panels collapsed

alongside the inspector panels into one and snapped together
single window, choose Window > Single
Window Mode.  
22
Layers panel
Layers offer the ability to manage and organize complex designs easily, by
separating a large design into sections of related objects.
Each layer is like a sheet of transparent paper drawn on top of the layers below it. Layers are
drawn as a ‘stack’, with the layer at the bottom of the list drawn first and each following layer
drawn on top of the previous one.
Show/Hide
Layer
Lock/Unlock
Layer
Selected
Layer
Blending/Opacity
of Selected Layer
Add Layer Layer

Actions
Delete Layer
Menu
Layers also offer the ability to create unique effects through the use of their opacity and
blending mode settings. These settings determine how a layer will blend with the layers
below it.
The Layers list on the right side of the document window can be used to create, rename,
arrange, delete, and select layers. 
23
Creating Layers
To create a new layer, click on the ‘Add Layer’ button ( ). A new empty layer will be
created above the currently selected layer.
To change the name of a layer, simply

double-click on the layer’s name field, to
the right of its thumbnail.
Working with Multiple Layers

When a document has more
than one layer, you can
choose the layer you wish to
edit by selecting it. The
currently selected layer is
shown in blue in the Layers
list, and is the active layer;
newly created objects will be
added to this layer, and the
objects in this layer can be
selected and modified. To
select a different layer,
simply click on it in the
Layers list. A common example for using multiple layers is tracing an
imported image. When tracing, it can be helpful to draw in a
Layers can be toggled layer on top of the image. Toggling the visibility of the image
layer underneath can then be used to occasionally check the
between hidden and visible
current progress of the drawing.
using the visibility checkbox
(to the left of the layer’s
thumbnail).
Duplicating Layers
At times it can be useful to create an exact duplicate of an existing layer, including copies of
the objects within that layer. To duplicate a layer, choose ’Duplicate Layer’ from the layers
action menu ( ), or Arrange > Duplicate Layer from the menu bar.
24
Deleting Layers
To delete the currently selected layer, click on the ‘Delete Layer’ button ( ). This will
remove the layer and all of its objects.
Arranging Layers
You can change the order of a layer by
dragging it to a new position in the Layers list.
Click and drag the layer you’d like to move, and
drop it in a new position. While dragging, a
blue indicator line will show the destination of
the dragged layer.
Merging Layers
The contents of two or more layers can be
merged into one single layer. To merge two
layers, select all those layers and choose
‘Merge Layers’ from the layers action menu ( ), or choose Arrange > Merge Layers
from the menu bar. You can also access the layers action menu by right-clicking on a layer. 
25
Moving Objects Between Layers
You can move objects from one layer to another using cut and paste. Select the objects you’d
like to move and choose Edit > Cut [ ⌘-X ]. Next, select the destination layer from the Layers
list by clicking on it. Finally, paste the copied objects into the new layer using Edit > Paste in
Place [ ⌘-Shift-V ], which will paste the objects using their exact previous positions.
Layer Effects
The Opacity and Blending Mode settings of a layer affect how it will blend with the layers
underneath it. You can change these settings for the currently selected layer using the
controls at the bottom of the Layers list.
Keyboard Shortcuts
Create New Layer
Some of the commands from the
Layers panel can also be
Duplicate Layer
performed using keyboard
shortcuts.
Merge Layer Down
Try to get used with this key
combinations to ease your work Delete Layer
and increase your speed.  
26
Blending Modes
Examples showing the result of applying each available Blending Mode setting. 
Normal Darken Multiply
Color Burn Linear Burn Lighten
Screen Color Dodge Linear Dodge
27
Overlay Soft Light Hard Light
Vivid Light Linear Light Pin Light
Hard Mix Difference Exclusion
28
Subtract Divide Hue
Saturation Color Luminosity
29
Shapes Library Panel
The Shapes Library panel manages libraries of reusable shapes. You can create
your own libraries, save shapes, and reuse them throughout multiple projects.
Graphic includes a few built-in example libraries to help you get you started. The included
shapes can be used to add symbols or annotations
to an existing design, create floor plan layouts, and
even design iPhone app mockups.
Using Shapes
Saved shapes can be organized into libraries of
related objects. To switch between libraries, simply
select one from the popup menu. The shapes for the
selected library appear in the pane below.
To add a shape to a design simply drag it from the

list onto the canvas.
Creating a New Shape Library

To create a new empty shape library, choose New Shape Library... from the action button to
the right of library popup ( ). You will be prompted to enter a name for the new library
and pick a background color for this same library.
30
Saving a Shape
To save a shape to a custom shape library, simply select an object the canvas and click on the
add button ( ) at the bottom of the Shapes Panel.
Note: Shapes can be added to custom shape libraries, but not to the built-in libraries.
Removing a Saved Shape

You can remove a shape that was previously
added to a custom library by right-clicking on it in
the shapes pane and choosing Remove Shape
from Library from the context menu.
Note: Shapes that are part of the the built-in

libraries can’t be removed.
Removing/Renaming a Shape Library

To delete or rename a shape library you need to
first select it and then choose Rename/Delete…
command from the context menu. 
Note: The built-in shape libraries cannot be

renamed or removed.
31
Styles Panel
The Styles panel can be used to save and reuse the appearance settings of an
object. Styles can be applied to any type of object, including lines, shapes,
and text objects.
Applying a Style
To apply a style to an object in your document,
first select the target object. Next, click on the
desired style in the Styles pane. The
appearance of the selected object will change
to match the picked style.
Saving a Style
To save the appearance settings of a particular object as a style, first select the object. Click
on the add button at the bottom of the Styles panel ( ). A new style item will appear in
the Styles pane matching the appearance settings of the selected object. 
32
Removing a Saved Style
To remove a saved style, simply right-click on it
in the Styles pane and choose Remove Style
from the context menu. 
33
Tools 
Move Tool (V) Rectangle Tool (M)
Select, move, and resize objects Create rectangles
Rounded Rectangle Tool

Path Selection Tool (Shift-M)
Edit path points and curves Create rectangles with rounded corners
Convert Tool (Shift-C) Ellipse Tool (O)

Modify path curves Create circles and ellipses
Pen Tool (P) Polygon Tool (Shift-O)

Create paths with lines and curves Create polygon shapes
Brush Tool (B) Star Tool (J)

Draw brush strokes Create stars with varying points
Pencil Tool (N) Rotate Tool (R)

Draw freeform paths Rotate objects
Eraser Tool (E) Scale Tool (S)

Erase portions of objects or paths Scale objects
Text Tool (T) Shear Tool (Shift-S)

Add text objects Slant objects
Line Tool (L) Hand (H)

Create straight line segments Move the visible area of the canvas
Arc Tool (K) Zoom Tool (Z)

Create elliptical arcs Select, move, and resize objects
34
Move Tool
The Move tool is used to select and move objects or groups.
Besides being the primary tool for selecting entire objects, it can also be used
to quickly resize and rotate a selection of objects.
Select an object by simply clicking on it. Multiple objects can be selected by holding down
the SHIFT key while clicking on them. 
Click an object to select it SHIFT + Click to select multiple objects

35
Another way of selecting multiple objects is by clicking on an empty part of the canvas and
dragging to create a selection rectangle. Objects touched by the selection rectangle are
selected.
Click and drag to create a selection Objects touched by the selection

rectangle rectangle are selected
To instead select only the shapes that are inside of the selection rectangle, click and hold the
OPTION key while dragging the selection area.
Dragging a selection rectangle while Objects inside the selection

holding the OPTION key rectangle are selected
Moving Objects
Objects can be moved by clicking on them and dragging to a new position. To constrain
movement to a single direction, hold down the SHIFT key while dragging
36
Selection Info
When one or more objects are selected with the Move tool, the Tool Options bar will display
information about the current selection, including the position, size, and types or number of
objects selected.
Tools Options bar displaying the position, size and type of your select object
Tools Options bar displaying the position, size and number of objects selected
The Bounding Box

The bounding box is the box that appears around the currently
selected objects. Aside from showing the bounds of the selection, it
also allows you to quickly transform the selected objects.
Draggable handles are located at the corners and sides of the

bounding box. You can click and drag any of theses handles to resize
the bounding box and the selected objects.
Dragging a corner handle to resize the selected objects
Tip: Holding down the SHIFT key while resizing will maintain the proportions of the objects. 
37
Moving the mouse pointer slightly outside of a bounding box handle will change the cursor
to a curve with arrows at each end. Clicking and dragging in this mode will rotate the
selected objects.
Rotating objects using by dragging a bounding box handle
Tip: Holding down the SHIFT key while rotating will constrain the rotation to 15˚ increments.
Nudging Objects
Selected objects can be nudged slightly in any direction by using
the arrows keys on the keyboard.
Editing Fills
The Move tool can also be used to activate the Gradient Tool or Image Tool, when editing
objects with those types of fills. To edit an object’s fill, simply click once to select the object
and then click a second time to activate the Gradient or Image tool. When finished, click
elsewhere on the canvas to return to the Move tool. 
Editing a gradient fill Editing an image fill
38
Path Selection Tool
The Path Selection tool can be used to select and modify the points and
curves of a path.
It allows you to modify shapes by moving and deleting path points, and
adjusting the curved sections of a path.
Objects in Graphic are composed of vector

paths. Paths themselves are made up of anchor
points connecting straight lines and curved
segments. Anchor points are shown on a path
as empty squares, while selected anchor points
are shown as filled squares.
Click on an anchor point to select it, and then

drag to move it. 
Moving a selected anchor point
39
Direction handles that appear on either side of
a selected anchor point control the curvature
of the path at that location. Moving a direction
handle will modify the shape of the curve at
that anchor point.
Direction handles are shown as a filled circle

with a line extending to the anchor point. Click
and drag on a direction handle to modify a
curve.
Selecting Multiple Points Dragging a direction handle

to modify a curve
Multiple points on a path can be selected and
edited at the same time. To select multiple
points, either click and drag on the canvas to create a selection rectangle or hold down the
SHIFT key while clicking on each point.
Selecting points using Using SHIFT + click to

a selection rectangle select multiple points
Note: The Path Selection tool can also be used to select multiple paths at once. However, to edit the
anchor points of a path, only a single path (or compound path) should be selected. 
40
Modifying Curves
Moving a direction handle with the Path
Selection tool will adjust the curvature of the
path segment at a specific point. Anchor points
with two direction handles, one at each side,
are smooth points. Moving the direction
handle on one side of these points will
automatically move the opposite direction
handle to maintain the smoothness of the
curve at that point.
To create a sharper angle at an anchor point, you can move a direction handle while holding
down the OPTION key:
Dragging a direction handle & Resulting sharp corner at the

holding the OPTION key anchor point
Moving an anchor point while

Resulting sharp curve
holding the OPTION key
Deleting Path Points

Anchor points can be removed from a path by
simply selecting them with the Path Selection
tool and pressing the DELETE key. 
41
Convert Anchor Tool
The Convert Anchor Tool can convert path points to either
smooth points (anchor points with direction handles) or
corners (anchor points without direction handles).
To convert a corner point to a smooth point, simply click on the

point with the Covert Tool and drag to create direction handles around the point.
Star shape with corner points Corners converted to smooth points
Dragging to create
Clicking an a corner point Final result
direction handles
To convert a smooth point to a corner point, simply click on the point with the Covert Tool to
remove the direction handles.
42
Clicking a smooth point to convert it to a corner
You can also adjust the curvature of the path around a smooth point by dragging its
direction handles separately.
Dragging direction handles with the Convert Mode to create a sharp angle at the anchor point
43
Pen Tool
The Pen tool can be used to draw any kind of shape, using a combination of
straight lines and curves. Because of its versatility, it is the most important of
Graphics’s drawing tools to learn and become proficient using.
The Pen tool can be used to create straight line segments, by simply clicking
on the canvas. 
Creating a series of line segments by Closing an in-progress path by clicking

clicking to add path points the first point in the path.
44
To finish editing a path, simply click on the first point in the path to close it. Alternatively,
pressing the ESC key will end editing the current path without closing it.
After closing the current path, or ending editing by pressing the ESC key, the Pen tool can be
used to create a new path.
To create curved segments, click and drag to create anchor points with direction handles.
Clicking and dragging to create an Direction handles are used to create a

anchor point with direction handles curved segment on a path
Appending an Existing Path

The Pen tool can append additional segments to an existing unclosed path. First select the
path to edit using the Move or Path Selection tools, then select the Pen tool. Click on one of
the endpoints of the path to begin editing (or click and drag to create a direction handle). 
An existing path, Clicking one of the path’s

A curved segment is
selected with the Path endpoints with the Pen
added to the path
Selection tool tool to begin editing
45
Creating a Line Segment after a Curve
A straight line segment can be drawn after a curve segment by removing the direction
handle at the end of the path. Simply click on the last anchor point to remove the direction
handle.
After creating a curve Clicking on the last Clicking (without dragging)

segment, direction handles path point removes the now creates a line segment
appear at each side end direction handle after the curve
Creating a Curve after a Line Segment

A curved segment can be drawn after a line segment by creating a direction handle at the
end of the path. Simply click on the end anchor point and drag to create a direction handle.
A straight line segment Clicking on the last path A curved segment is added
without direction handles point and dragging to after the line
create a direction handle
Tip: Finish editing the current path without closing it by pressing the ESC key.
46
The Pen tool can also be used to add or remove
points from any path. The Pen mode control in
the Tool Options bar can be used to change the
Pen tool from the default path creation mode, to
the ‘Add Points’ or ‘Delete Points’ modes. Create Paths Cut Paths
Add Points Delete Points

First select the path to edit using the Move or
Path Selection tools.
Adding Path Points

After choosing the ‘Add Points’ mode, simply click anywhere on the selected path to add a
new anchor point.
Adding an anchor point to a path
Deleting Path Points

After choosing the ‘Delete Points’ mode, simply click on any anchor point in the selected
path to delete that point. 
Deleting and anchor point from a path

47
Cutting Paths
You can cut any type of path using the ‘Cut Paths’ mode. After choosing this mode, simply
click anywhere on the selected path to cut it.
48
Brush Tool
The Brush tool can be used to create calligraphic brush strokes.
Calligraphic brushes create brush strokes which appear as if they were
drawn using a calligraphic pen or paintbrush.
Brush width and smoothing settings
You can adjust the brush width and the amount of smoothing that will be applied to drawn
strokes by editing the settings that appears in the Tool Options bar whenever you select the
Brush tool.
Clicking the brush preview button from the Tool Options bar will open
the Brush Settings pane.
Using the drop-down menu sitting right next to the brush preview
button you can enable or disable the pressure sensitive feature.  
49
Brush Editor - you can use the
Brush Editor to edit and customize
brushes. Edit a brush manually by
dragging the blue circular handles to
change its angle and roundness, or edit the
brush numerically by inputting values into
the brush parameter fields.
Roundness - this setting determines

the roundness of the brush. Higher values
create a rounder brush, while lower values
create a flatter brush.
Angle - the brush angle refers to the

angle of rotation of the brush. 0˚ will create
a horizontal brush, 90˚ will create a vertical
brush.
Minimum Width - the minimum width

refers to the minimum width of the brush
according to the brush width. A Minimum
Width set to 50% will make sure that the
brush size for your path will not go below 50% of the pre-set brush width. The brush width
on an existing path can be easily edited using the Stroke pane from the Appearance panel.
Min. Width: 0% Width : 10 pt Min. Width: 50% Width : 10 pt
Contour - Using the white draggable handles that make up the orange path you can
create complex brushes that simulate pressure sensitivity.
Simply double click the orange path to add new draggable handles or double click existing
draggable handles to easily remove them.
Placing a handle to the top of the frame brings the brush width to 100% while placing it in
the bottom of the frame lowers the width to the Minimum Width percentage. 
50
Various brush settings
Brush Preview - a simple preview of your new brush based on the introduced properties.
Reset - Resets the brush properties from the Contour frame.
Save Brush - quickly save the existing brush in the top of the Saved Brushes pane.
51
Using Saved Brushes
Click the Saved Brushes button
and you will be presented with a
list of already saved brushes. Simply click
one of these brushes to activate it. You can
use as it is, edit it using the Brush Settings
pane, save the edited version or simply
remove it.
Saving Brushes
As mentioned in the previous page, brushes
can easily be saved and used in other
designs.
Once you have your new brush, click the
Save Brush button from the Brush Settings
pane and then switch to the Saved Brushes
pane - your newly saved brush will show up
in the top of the list.
Removing Saved Brushes

To remove a brush, simply right click on that specific brush and then click Remove Brush. 
52
Pencil Tool
The Pencil tool can be used to draw freeform paths.
It can be a great tool for creating a quick sketch of a design, since it can create
paths quickly without needing to draw a segment at time as with the Pen tool.
Click and drag to draw a path.
Path width and smoothing settings

Sketch created by tracing an
image with the Pencil tool
As with the Brush tool, the Pencil tool has a

smoothing setting which can be used to control
the amount of smoothing applied to newly
drawn paths.
Adjust the line width and the amount of

smoothing using the Tool Options bar settings. 
53
Eraser Tool
The Eraser tool can be used to erase portions of paths, or even entire shapes.
As you click and drag with the eraser, a dark semi-transparent brush stroke will
be drawn to show the areas to be erased.
You can change the eraser’s

brush size using the width
setting in the Tool Options bar.
When one or more objects are selected, the

eraser will only modify the selected objects. If
there are no objects selected, the eraser can
be used to modify any object in the current
layer.
Text objects must first be converted to paths

before they can be modified by the eraser.
Locked objects will not be modified by the

Eraser tool. 
Erasing a portion of a path.
Original grouped object Dragging with the Eraser The modified paths
tool to remove a portion after erasing
of an object
54
Text Tool
The Text tool can be used to add text objects to a design, or edit previously
created text objects.
Create a new text field by clicking and
dragging on the canvas or simply click on
your canvas and start adding the text.
To edit an existing text object, simply click on it with the

Text tool active to begin typing or double click on it using
the Move Tool or the Path Selection Tool.
Clicking and dragging to
To deselect a text field click anywhere on your canvas,
create a text box
outside the selected text field.
You can change the text properties, such as font, size, alignment, character and line spacing
of a text object using controls in the Tool Options bar or the Text pane from the Appearance
panel. 
55
To change the color of text, simply set the Fill color for the object. Text in
Graphic can be styled like any other path object, meaning that text can also
be filled with gradients, images, patterns or have a stroke by setting the
stroke width and color.
To edit a gradient or an image applied to a piece of text, first click that text to select it and
then click it a second time to activate the Gradient tool or the Image tool.
Text objects can also be converted to editable vector paths. This allows you to edit each
individual glyph, and edit the paths that make up the text using the Path Selection tool.
Text object with a stroke Text object with a stroke Text object with a stroke
and gradient fill and image fill and pattern fill
Choose Modify > Convert Text to Outlines with a text object selected to convert it. A second
method to achieve a similar result would be the Convert Text to Outlines button located in
the Text pane from the Appearance panel. 
Editable text object Text object converted to vector paths
56
Placing Text on Path
Simply go to Modify > Place Text
on Path to place a text on any
type of shape or path.
To place a text on a path, select

your text and the path on which
you wish to place your text and
simply Modify > Place Text on
Path.
Placing text on a path
Use the black handle to move the text on the path or use the Reverse Path to flip it on
the other side.
Text on a path is fully editable. Simply double click it to change its content or its attributes.
Moving text on a path Changing side location Editing text on a path
Releasing Text from Path

Simply go to Modify > Release Text from Path to release a text from a path. Select your text
on a path and simply go to Modify > Release Text from Path to easily separate your text
from the path. 
57
Line Tool
The Line tool can be used to create line segments.
Besides creating plain lines, it can also be used to create lines which are styled
with arrows and dimension lines. Simply click and drag to create your line.
The Line mode control in

the Tool Options bar can be
used to change the Line tool from the
default line creation mode, to the
Plain Line Dimension Line ‘Arrowed Line’ or ‘Dimension Line’ modes.
Arrowed Line
The line endings for created lines can be

customized using the Stroke pane from the
Appearance panel.
When creating lines with the ‘Arrowed Line’

mode, the previously selected line endings
will be used. 
58
For dimensions lines, the position and style of the dimension labels can be customized using
the Label pane from the Appearance panel while the line ending and the dash style can be
customised using that same Stroke pane from the Appearance panel.
For perfect horizontal, vertical or oblique lines, arrowed lines or dimension lines click and
drag to create the new line segment while holding the SHIFT key from your keyboard. 
Click and drag to create a Click and drag while holding the
random line segments SHIFT key to create perfect line segments
59
Arc Tool
The Arc tool can be used to create arc segments. Simply click and drag on the
canvas to create a new arc.
The arc tool creates circular arcs, however you can edit the start and end
points of an arc’s path with the Path Selection tool.
As with lines, and other paths, you can customize the appearance of arcs using the Stroke
pane and the Label pane from the Appearance panel. 
Default arc object Arc with arrows Arc with dimension styles
60
For perfect arcs, click and drag to create the arc segment while holding the SHIFT key from
your keyboard.
The Arc mode control in the Tool Options

bar can be used to change the Arc tool from
the default arc mode, to the ‘Circular Arc’
mode. Using the drop-down menu that lies
next to those buttons you can set you new Arc Mode Circular Arc
arcs to be opened or closed.
When using the Circular Arc you need to first click and drag to create the path that will be the
radius of your circle arc -the starting point will be the centre. Release the mouse button and
then drag your cursor around this path to get an outline of the circle arc that you are about
to create. Holding down the SHIFT key while moving your cursor will constrain the angle to
15˚ increments. Simply click once you are happy with the look of your circular arc.
Click and drag to create Move the cursor Simply click once to
the radius of the circle around the radius create the circle arc
Easily create pie charts

and circular graphs.
61
Rectangle Tool
The Rectangle tool can be used to draw rectangles or squares. Simply click
and drag to create a new rectangle.
Hold the SHIFT key while dragging to create squares. 
Click and drag to create Click and drag while holding the
a rectangle SHIFT key to create a square
62
Rounded Rectangle Tool
The Rounded Rectangle tool can be used to draw rectangles
with rounded corners. Simply click and drag to create a new
rounded rectangle.
Vary the roundness of the corners using the Corner Radius setting in the Tool Options bar.
As with the Rectangle Tool, holding the SHIFT key while dragging will allow you to create
squares with rounded corners. 
63
Ellipse Tool
The Ellipse tool can be used to draw ellipses or circles. Click and drag to create
an ellipse.
Hold the SHIFT key while dragging to create squares. 
Click and drag while holding the

Click and drag to create an ellipse
SHIFT key to create a circle
64
Polygon Tool
The Polygon tool can be used to draw polygons with various
numbers of sides, including triangles, hexagons, octagons, etc.
Vary the number of sides by adjusting the Sides setting in the Tool Options bar. 
A variety of polygons, with a different number of sides
65
Star Tool
The Star tool can be used to draw star shapes. You can create simple star
shapes or more complex objects with numerous rays and long sides.
You can adjust the number of points, and the length of each edge, using the
settings in the Tool Options bar. 
A variety of star shapes, with differing numbers of points and edge lengths
66
Rotate Tool
The Rotate tool can be used to rotate objects around a reference point.
To rotate one or more objects, first select the objects to be rotated and choose
the Rotate tool. With the Rotate tool active, click and drag anywhere on the
canvas to rotate the objects clockwise or counterclockwise.
To constrain the rotation to 15˚ increments, hold the SHIFT key while dragging.  
Rotating an object while holding the SHIFT key
67
Objects can be rotated numerically
using the Tool Options bar. Set a
rotation angle in the field and click
‘Rotate’ to apply the rotation. Clicking ‘Copy’ will duplicate the objects first and then apply
the rotation to the copied objects.
Using the Rotate button Using the Copy button
By default, the reference point will be located in the center of the selected shapes.
To use a different location for the reference point, simply click (without dragging)
to set it at that new location. 
Selected object Set the reference point Click and drag to rotate
68
Scale Tool
The Scale tool can be used to resize objects relative to a reference point.
To scale one or more objects, first select the objects to be scaled and choose
the Scale tool. With the Scale tool active, click and drag anywhere on the
canvas to resize the selected objects.
To constrain the width, the hight or both attributes while performing the scaling, hold the
SHIFT key while dragging. 
Rotating an object while holding the SHIFT key
69
Objects can be scaled
numerically using the
Tool Options bar. Set
the percent to scale in the width and height fields and click ‘Scale’ to apply the scaling.
Clicking ‘Copy’ will duplicate the objects first and then apply the scale transform to the
copied objects.
Using the Scale button Using the Copy button
to set it at that location. 
Original objects Click and drag to resize the objects
70
Shear Tool
The Shear tool can be used to slant objects relative to a
reference point, to give the appearance of a perspective.
To shear one or more objects, first select the objects to be

transformed and choose the Shear tool. With the Shear tool
active, click and drag anywhere on the canvas to shear the objects.
To slant your selected object on only one axis (horizontally or vertically), hold the SHIFT key
while dragging. 
Slanting an object while holding the SHIFT key

71
Objects can be sheared
numerically using the
Tool Options bar. Set
the angle of shear in the width and height fields and click ‘Shear’ to apply the transform.
Clicking ‘Copy’ will duplicate the objects first and then apply the shear transform to the
copied objects.
Using the Shear button Using the Copy button
to set it at that location. 
Selected objects Click and drag to shear
72
Hand Tool
The Hand tool can be used to move the visible area of the canvas by clicking
and dragging.
Unlike scrolling with the scroll bars, the Hand tool can be used to reveal areas
beyond the borders of the canvas.
Holding the SPACEBAR key will automatically switch to the Hand tool regardless of the type
of tool or selection that is active at that moment. Simply release the Spacebar key and you
will return to original tool.
 
73
Zoom Tool
The Zoom tool can be used to zoom in or zoom out the view of the canvas.
Simply click on the canvas with the zoom tool selected to zoom
in. Hold the OPTION key down while clicking to zoom out.
Click and drag to create a zoom area if you wish to zoom in on a
specific spot from your canvas. The smaller the zoom area the bigger the
zoom level.
The popup button on the bottom left of the canvas can also be used to change the zoom
level ( ).
100% Zoom 300% Zoom 500% Zoom
Keyboard Shortcuts
You can also use keyboard shortcuts to Zoom In
zoom in and out or to perform specific
types of zooms. Zoom Out
Zoom to Fit - brings the zoom to a level

that makes entire canvas visible. Zoom to Fit
Zoom to Actual Size - brings your zoom

Zoom to Actual Size
level to 100%.
Zoom to Selection - zooms in on the Zoom to Selection

currently selected objects. 
74
Gradient Tool
The Gradient tool can be used to position the start and end points of a
gradient fill relative to a shape’s bounds, changing the angle and spread of the
gradient.
x2
With the Move tool active, double click the object to edit its gradient fill.
The start and end points of the gradient will appear on the selected shape,
and ‘Gradient Tool’ will display as the selected tool in the Tool Options bar.
The gradient handles can be moved by simply dragging them.

To reset the start and end points to their default positions, click the ‘Reset
Gradient’ button in the Tool Options bar. 
Linear gradient Dragging to move the gradient points
Radial gradient Dragging to move the gradient points
75
Image Tool
The Image tool can be used to scale and position an image fill inside of a
shape’s bounds, effectively cropping the image.
With the Move tool active, double click the object which has an image fill to x2
be able to edit that image.
A draggable resize handle will appear on the bottom right corner of the selected shape,
and ‘Image Tool’ will display as the selected tool in the Tool Options bar.
The image can be scaled, and

positioned within the shape’s
bounds by dragging. To reset
the image’s size and position to the defaults, click ‘Reset’ in the Tool Options bar. When
finished, click anywhere on the canvas to end editing and revert to the Move tool. 
Original image and bounding shape Dragging the slider to resize the image
Enlarging the image further Dragging the image

76
Pattern Tool
The Pattern tool can be used to scale and position a pattern fill inside of a
shape’s bounds.
With the Move tool active, double click the object which has an pattern fill to x2
be able to edit that pattern. The ‘Image Tool’ will display as the selected tool in
the Tool Options bar.
The pattern can be scaled,

and positioned within the
shape’s bounds by dragging.
To reset the pattern’s size and position to the defaults, click ‘Reset’ in the Tool Options bar.
When finished, click anywhere on the canvas to end editing and revert to the Move tool. 
Object filled with a pattern Enlarging and dragging the pattern
77
Appearance Panel
The Appearance panel includes several panes of settings for modifying the
appearance of objects. 
Stroke Brush Fill

Modify an object’s stroke width Apply a calligraphic brush stroke Set and customize an object’s fill.
and color. Add line endings or set to a path. Edit settings for brush Choose from color, gradient,
custom line dashes. roundness, angle, and diameter. pattern and image fills.
Label Text Effects

Set object labels, with adjustable Select font, size, and alignment Adjust the opacity of an object,
position and alignment settings. settings for text objects. Convert and apply and edit drop
Choose between dimension and a text object to editable paths. shadows.
custom text labels.
78
Stroke pane
The Stroke settings pane is used to adjust a
path’s stroke color, width, and style.
Changes are applied to the currently
selected objects.
Stroke Color - Set the color of the

stroke.
Line Weight - Adjust the stroke’s

thickness using the line weight slider, or
input field.
Line Style - Choose from a variety of line

endings and preset line dash styles using
the line style popups.
Position - Set the position of the stroke to
Centre, Inside or Outside. 
Position
Center
Position
Inside
Line endings and dash style popups

Position
Outside
79
Caps & Joins - Set the style of path endpoints (caps), and the path corners (joins). The
Miter Limit field controls the maximum possible length of miter joins, with larger values
allowing for longer join lengths.
Butt Cap Rounded Cap Projecting Cap
Miter Join Rounded Join Beveled Join
Custom Line Dash - Create a custom line dash

2 pt
style using the dash and gap fields.
3 pt 3 pt
Dash fields adjust the length of a dash, while gap
Custom line dash: 3 pt dash, 2 pt gap
fields adjust the space between dashes. 
80
Brush pane
The Brushes pane allows you to choose the
brush stroke to use when drawing with the
Brush tool, or apply a calligraphic brush to
any path object’s stroke.
Saved Brushes - Select one of the

saved brushes by simply clicking on it. If
objects are selected, the chosen brush will
be applied to those object’s strokes.
Add Customized Brush - Click the add

button to add a customized brush to the
Saved Brushes list. To remove a brush from
the list, right-click on it and choose Remove
Brush from the context menu.
Brush Preview - Small preview of the currently chosen brush.
Brush Editor - You can use the Brush Editor to edit and customize brushes.
Edit a brush manually by dragging the blue circular handles to change its
angle and roundness, or edit the brush numerically by inputting values into
the brush parameter fields.
Roundness - This setting determines the roundness of the brush. Higher

values create a rounder brush, while lower values create a flatter brush.
Angle - The brush angle refers to the angle of rotation of the brush. 0˚ will
create a horizontal brush, 90˚ will create a vertical brush.
Diameter - The elliptical diameter of the brush. The thickness of a stroke

will be determined by the stroke’s line weight and the brush diameter. 
Brush
angles
20% 70% 45˚ 90˚ 5pt 10pt
81
Fill pane
Each path object can be filled with a color,
gradient, pattern or image. The Fill pane
allows you to choose and customize the fill
style of selected objects.
The Fill pane pane can also be used to

create and edit gradients or to adjust the
properties of a patterns. Although the
Gradient Palette allows you to select from
pre-made gradients, you can create new
gradients to use from this pane.
None - No fill. Removes any previously set fill style.
Color - Color fill. Select a fill color from the color well.
Gradient - Linear,Radial or Angle

gradient fill.
Gradient Well - Preview of the
current gradient; click to access the
gradient palette.
Angle - Determines the angle of
rotation of the gradient.
Gradient Editor - Create and edit
new gradients using the gradient editor.
Add gradient color stops by clicking a
location on the gradient bar. 
Click on the gradient bar to add a color pointer
82
Click on a gradient color stop to change its color. Drag a color stop away from the bar to
remove it.
Click on a color stop and drag it down to remove it
Reverse Gradient - Reverse the order of the color stops in the gradient. 
Original gradient Reversed gradient
83
Pattern - Pattern fill. Select a pattern to
use as the object’s fill.
Pattern preview - Preview of the

chosen pattern; click to access the
Patterns palette.
Width & Height - Increase or

decrease the space between the tiles
that make up your pattern.
A percentage over 100% will add space
between the tiles while a percentage
under 100% will decrease it, which will
make the tiles overlap.
W:100% H:100% W:50% H:50% W:150% H:150%
Angle - set the angle of rotation of the pattern.
Angle: 0˚ Angle: 45˚ Angle: 15˚
Scale- Scale a pattern within the parent shape’s bounds. Alternatively, you can use
the Pattern Tool to scale and position an image within a shape.
Opacity - Using the opacity slider or field, you can adjust the transparency of the
pattern 
84
Image - Image fill. Select an image to
use as the object’s fill.
Image preview - Preview of the

chosen image.
Scale or Stretch to Fit - Images that

are larger or smaller than the parent
object’s bounds can either be scaled to
fit inside of the bounds (maintaining the
image’s aspect ratio) or stretched to
completely fill the the shape’s bounds.
Change or Remove - Select ‘Change

Image...’ to choose a different image
using the Open Panel, or select ‘Remove Image’ to remove the image fill.
Image Scale - Scale an image within the parent shape’s bounds. Alternatively, you
can use the Image Tool to scale and position an image within a shape.
Opacity - Using the opacity slider or field, you can adjust the transparency of the
image. 
Scale to Fit Stretch to Fit
85
Label pane
Dimension labels are useful for creating
designs such as floor plans, diagrams, or
other technical illustrations. Use labels to
measure the area of a room or label a series
of objects.
Label - Add a label to any line or path

object. A label can be set to display a
dimension value (of the parent object’s
length, width, height, or area), or any text.
Choosing ‘None’ will remove any previously
set label.
Dimension values are displayed based on

the current settings for units and scale from
the Canvas pane.
Choosing ’Text’ allows you to set a custom label by typing the desired text into a text field. A
few special variables can be used to create custom text labels that include dimension values.
For example, if you wish to show both the width and height of a rectangle in one label, use
the string: %width% x %height%. 
Tip:
Use the following variables in custom text
labels to show dimension values:
%length% %width% Using variables in a custom text label

%height% %area%
86
Position - Set the position of a label on its parent path using location, offset, and the
alignment settings.
Location - The location of the label along

the path.
Offset - The perpendicular offset of the

label from the path.
Alignment - Alignment of the label

relative to the path. Choose from one of the
possible alignment settings using the
alignment popup.
Label alignment settings
Units - Adjust the visibility of the units of measurement using the ‘Show units’ checkbox.
The unit value can only be changed using the Canvas pane from the Properties panel.
Label pointing the area of an object using different unit values
Precision - Set the level of precision of your dimension180 pt labels.You can trim the
unnecessary zeros using the ‘Trim zeros’ checkbox. 
87
Style - A label’s text font, size and style
can be changed using the Text pane from
the Appearance panel.
Font - Choose the font to be used

for your label. Also., pick a style if the
font allows it.
Font Size - Set the font size to be

used for the label.
Label - Choose the color for the

text.
Border - Set the color for the

background. Set the color to ‘none’ if
you wish to make this invisible.
Margin - The margin setting adjusts

the size of the box bordering the text,
adding space between the text and
edges.
Corners - Determines the roundness

of the text box. Set this to 0 pt if you
wish to turn your background into a
simple rectangle.
88
Text pane
The Text pane can be used to set the font,
style and size attributes of text objects and
labels.
Other settings from this pane allow you to

set the text alignment or the spacing
between lines and characters within a small
piece of text or an entire paragraph; or to
convert text objects into editable vector
paths.
Font - Change the font for a selected text object.
Font Style - Select the style of the chosen font.
Text Alignment - Align the text within the text object’s bounding box. Choose from
right-aligned, centered, or left-aligned.
Left Center Right Justify
Font Size - Set the font size of the text.
Line Spacing - Set the amount of the space that should be left between text lines 
Line Spacing: 1 pt Line Spacing: 0.7 pt Line Spacing: 1.3 pt
89
Character Spacing - Set the amount of the space between text characters.
Character Spacing: Auto Character Spacing: -1 pt Character Spacing: 1 pt
Convert Text to Outlines - Convert the text object to editable vector paths. This allows
you to edit each individual glyph, and edit the paths that make up the text using the Path
Selection tool. 
Editable text object Text object converted to vector paths
90
Effects pane
The Effects pane can be used to change an
object’s opacity or blend mode and to edit
or add fills, strokes and effects.
Choose from the twenty three blend mode
options and adjust the opacity using the
Opacity slider, or input field.
In addition to fills and strokes object can

have effects applied to them. Using the
Effects pane you can add five types of such
attributes: Drop Shadow, Inner Shadow,
Outer Glow, Inner Glow and Blur.
Using the plus button located in

the bottom, left corner of the
Effects pane, you can add more
than one fill, stroke or effect,but not over twelve attributes in total.
The button made out of three horizontal lines let’s you move an existing attribute in
the Effects pane. Simply click the button which stands for the attribute that you
wish to be moved and then drag it wherever you want.
By default, new shapes will have a fill, a stroke and the five effects, but inactive. The
rounded square with a check mark is the symbol for an active attribute while the
empty rounded square is the symbol of an inactive attribute. Simply click an empty
square to easily turn an inactive attribute into an active one and vice-versa. Editing
an inactive attribute will automatically make it active.
Each fill, stroke or effect (except Blurs) as a color wheel that represents the color
used for that specific attribute. Simply click this color wheel to change the color or
adjust the Alpha percentage.
A white color wheel with a grey, oblique line means that the Alpha slider is set to
0% for that color.  
91
Fill
The Fill attribute is used to adjust an object’s color. Changes are applied to the currently
selected objects. Colors, gradients, patterns or images can be added to fills.
You can add multiple fills using the plus button and then change their attributes. Simply
click on an existing fill to open it.  
Object with four types of fills: color,gradient, pattern and image
92
Stroke
Stroke attribute is used to adjust a path’s stroke color, width, and style. Changes are
applied to the currently selected objects.
Stroke Color - Set the stroke color.
Width - Adjust the stroke’s thickness

using the width slider, or input field.
Line Style - Choose from a variety of

line endings and preset line dash styles
using the line style popups.
Position - Set the position of the stroke

to Centre, Inside or Outside.
Blend - Pick a blend mode for your

stroke from the twenty three options.
93
Drop Shadow effect
The Drop Shadow effect is used to add a shadow effect and to adjust its color, offset and
blur. Changes are applied to the currently selected objects.
Blend - Pick a blend mode for your drop

shadow from the twenty three options.
Preview - A preview of your drop

shadow based on the introduced
properties.
Various drop shadow previews
Offset - The X and Y offset correspond

to the distance from the object, X represents
the horizontal axis while Y represents the vertical axis.  
94
Size - Using the size slider you can set the amount of blur that should be added for this
effect. A higher blur value will result in a larger and blurrier shadow.
X: 0 Y: 5 Blur: 5 X: 2 Y: 5 Blur: 10 X: -10 Y: -10 Blur: 0
Clip - Using the size slider you can set the amount of blur that should be added for this
effect. A higher blur value will result in a larger and blurrier shadow. 
Clip shadow by shape disabled Clip shadow by shape enabled
95
Inner Shadow effect
The Inner Shadow effect is used to add an inner shadow effect and to adjust its color,
offset and blur. Changes are applied to the currently selected objects.

inner shadow from the twenty three
options.
Preview - A preview of your inner

shadow based on the introduced properties.
Offset - The X and Y offset

correspond to the distance
from the object, X represents
the horizontal axis while Y
represents the vertical axis.
Size - Using the size slider

you can set the amount of blur
that should be added for this
effect. A higher blur value will
result in a larger and blurrier
shadow.  X: 0 Y: 10 Blur: 20 X: 0 Y: -10 Blur: 0
96
Outer Glow effect
The Outer Glow effect is used to add an outer glow effect and to adjust its color, and
blur. Changes are applied to the currently selected objects.

outer glow from the twenty three options.
Size - Using the size slider you can set

the amount of blur that should be added for
this effect. A higher blur value will result in a
larger and blurrier shadow. 
Blur: 30 Blur: 10 Blur: 5
97
Inner Glow effect
The Inner Glow effect is used to add an inner glow effect and to adjust its color, and blur.
Changes are applied to the currently selected objects.

inner glow from the twenty three options.
Size - Using the size slider you can set

the amount of blur that should be added
for this effect. A higher blur value will result
in a larger and blurrier shadow. 
Blur: 5 Blur: 10 Blur: 30
98
Blur effect
The blur effect is used to add a blur effect. Changes are applied to the currently selected
objects.
Using the blur slider you can set the

amount of blur that should be added for
your selected shape.A higher blur value will
result in a larger and blurrier object.
Blur effects can also be applied to objects

with image fills. 
Blur: 5 Blur: 15 Blur: 3 Image Fill
99
Properties Panel
The Properties panel includes several panes of settings that allow you to
position, align, and modify objects. The last two sections contain settings for
customizing the grid and canvas. 
Geometry Alignment Path Tools

Numerically set the position and Arrange objects from front to Combine multiple paths using
size of an object or group. Apply back, create groups, and align union, subtract, intersect,
the shear and rotation object positions relative to one exclude, and divide operations.
transformations. another. Create compound paths.
Grid Canvas
Customize the canvas grid. Adjust Set the canvas size and units.
X and Y spacing, subdivisions, Use a scale factor to customize
and margins. Use color settings to the display of measurements for
create different paper styles. ‘to-scale’ designs. Adjust the
canvas background.
100
Geometry pane
The Geometry pane can be used to
numerically change the position, size,
rotation, and shear of the selected objects.
Position - The position, in X and Y, of the

selection’s bounding box.
Size and Aspect Ratio - The width and

height of the selection’s bounding box. To
lock the aspect ratio while entering values,
click on the aspect ratio lock icon ( ).
Shear - Apply horizontal and vertical

shears to the selection.
Rotation - Rotate the selection using the rotation angle field.
Transform panel
Alternatively, you can move, rotate, scale
and shear objects using the Transform
panel. Select the object that you wish to
transform and simply go to Modify >
Rotate & Transform > Transform or use the
⌘-Shift-T keyboard shortcut to open the
Transform panel.
Move - Numerically change the

position of your object using the Horizontal
and Vertical settings.
Rotate - Rotate your object using the

angle field and set the reference point.
Scale - Resize your object, set the reference point and check the box if you want to scale
the styles and effects along with your objects.
Shear - Shear your object using the angle fields and set the reference point. 
101
Alignment pane
Arrange, group, align or flip the selected
objects.
Arrange - Bring the selected objects to

the front, bring them forward, or send
them backwards behind other objects.
Keyboard Shortcuts
Alternatively, you can perform all the
Arrange commands using keyboard
shortcuts.
Bring objects to front using the ⌘-

Bring to Front
Shift-] or bring them forward using
⌘-], send objects to back using ⌘-
Shift-[ or send them backwards Bring Forward
using ⌘-[.
Send to Back
Try to get used with this key
combinations to ease your work Send Backwards
and increase your speed.  
Original objects Bring red object to front Bring yellow object forward
102
Group / Ungroup - Group
multiple objects to manipulate
Group
them together as a single object.
Alternatively, you can perform both

Ungroup
grouping commands using
keyboard shortcuts.
Align - Align the selected object’s positions relative to each other or flip them using the
‘Flip Horizontal’ and ‘Flip Vertical’ buttons. 
Align Bottom Edges Align Top Edges
Align Left Edges Align Right Edges
Align Horizontal Centers Align Vertical Centers
103
Flip Horizontal Flip Vertical
Alternatively you can flip your objects by going to Modify > Rotate & Transform >
Flip Horizontal or Modify > Rotate & Transform > Flip Vertical.
Distributing Objects
You can easily distribute objects and get an even amount of space between your selected
objects by going to Arrange > Distribute Objects and pick one of the two available options:
Horizontally and Vertically. 
Distribute Horizontally Distribute Vertically
104
Path Tools pane
The Combine pane is divided into three
sections, the Combine Paths, the Modify
Paths and the Compound Path sections.
Combine Paths
Using the commands from the Combine
Path section you can create new paths by
combining the shapes of multiple closed
paths in different ways using Boolean
operations.
Union, subtract, intersect, exclude, or divide

two or more paths to create new and
unique shapes.The resulting shape will
keep the appearance attributes of the
rearmost select shape. 
Original Shapes Union Subtract
Intersect Exclude Divide
105
Modify Paths
Join Paths - Use this command
to link two open paths together
into a single continuous path. To
join, select the two open paths
and simply click the Join button.
The paths will be joined at the
two endpoints nearest to each
other.
Open / Close - A path is

considered open if its start and
end points are not together,
connected by a line or curve
segment.
To open a closed path, select it
and simply click the Open
button. This will disconnect the
starting points from the ending
points and you’ll be able to
move them separately.
Closing an open path will

connect the path’s start and end
points with a line segment.To
close a path, select it and simply
click the Close button.
Outline Stroke - Use this

command to convert the styled
stroke of an object into an
editable filled path.
If the target object also has a fill,
the result will be a group
containing both the previous fill
and the converted stroke object. 
106
Compound Path
Using this command you can combine multiple paths into a single object. Compounded
paths are treated as a single path, and share the same Appearance attributes. When you turn
shapes with different attributes into one compound path your resulting compound path will
keep the attributes of the rearmost selected shape.
Original Separate Shapes Compound path
Holes are created in areas where the paths overlap.

You can use compound paths to clip a single image or gradient fill across multiple disjoint
shapes; a single fill is applied across all the paths in a compounded path object.
Using compound paths to Holes appear in areas where the

create holes paths overlap
The Separate command divides the shapes that make up an existing compound path into
separate editable shapes.  
107
Simply go to the Modify section from the menu bar and you will find another three
commands that can be used to modify your paths.
Connect Endpoints - Use this

command to link two open
paths together into a single
closed shape. To connect, select
the open paths and simply click
the Connect Endpoints
command. This will generate
new paths connecting the end
points of the selected paths.
Disconnect Path - Use this

command to disconnect any
type of path or shape. To
disconnect, select your shape
and simply click the Disconnect
command. This will cut your
shape and you will get all the
path section that make up your
selected shape.
Reverse Path Direction - Using

this command you can easily
reverse the starting and the
ending point of a selected path 
108
Grid pane
The canvas grid is fully customizable, with
adjustable settings for spacing, gridline
colors, subdivisions, margins, and more.
Show Grid - Use this checkbox to

enable or disable the visibility of the grid.
Alternatively, you can enable/disable the
grid by going to View > Show Grid or using
the ⌘-’ keyboard shortcut.
Snap to Grid - Enable this setting to

snap objects and points to the nearest grid
position when moving them. Alternatively,
you can enable/disable this feature by
going to View > Snap to Grid or using the
⌘-Shift-’ keyboard shortcut.
Spacing - The X and Y spacing settings

set the spacing between each gridline, X
represents the horizontal axis while Y
represents the vertical axis.. For grids
without X or Y lines (to create a notebook paper style, for example), you can set the spacing
to zero. Change the colors used to draw the gridlines using the color wells next to each
setting.
Subdivisions - The subdivisions setting determines how many gridlines are drawn
between each thicker major gridlines. Change the colors used to draw the subdivision
gridlines using the color wells next to this setting. 
Various grid settings
109
Margins - Set the width and color of each margin. Set the size to 0 to move the margin
lines on the edge of your document or simply remove the color to make the margin lines
invisible.
Extend Grid Lines - This setting allows Margins Offset Origin - If checked, the
you to extend the drawing of the origin point of the rulers will be offset by the
gridlines beyond the edges of the margins. If width of each margin. If unchecked, the
checked, the gridlines extend over the origin point will be at the top left corner of
margins, or if unchecked the gridlines end at the printable canvas.
each margin.
Extend Grid Lines over margins Margin Offset Origin

enabled and disabled enabled and disabled
Snapping to Point
Enable this setting to snap objects and points to the nearest anchor point position when
moving them. Simply select an anchor point, drag it near another point and you’ll know that
it snapped when the outline color of your anchor point changed.
You can enable/disable the Snap to Point feature by going to View > Snap to Point or using
the ⌘-Alt-’ keyboard shortcut. 
Using the Snap to Point feature
110
Working with Guides
Guides are straight, vertical or horizontal lines that make it easier for you to align text and
objects. Guides do not print.
Adding Guides
To add a guide in a specific spot from your
canvas go to View > Guides > New Guide and
the New Guide window will open. Using these
options you can pick the type and the exact
position of your guide.
To add guides manually you need to first

enable the Rulers (View > Show Rulers). Simply click on the rulers and drag the cursor on
your canvas to add a new guide. Use the vertical rulers to add vertical guide and the
horizontal rulers to add horizontal guides.
Adding a vertical guide Adding a horizontal guide
Hiding Guides
To hide your existing guides simply go to View > Guides > Hide Guides or use the
Command-; keyboard shortcut. Use the same keyboard shortcut to make the guides visible
again.  
111
Locking Guides
You can always lock your guide and make them un-selectable. Simply go to View > Guides >
Lock Guides or use the ⌘-Shift-; keyboard shortcut. Use the same keyboard shortcut to
unlock the guides.
Removing Guides
You can remove a guide manually by dragging it outside the document’s
bounds where you should get to see the Remove Guide tooltip.
To remove all guides at once simply go to View > Guides > Clear Guides.
Smart Guides
Smart guides are straight, dotted lines (vertical or horizontal) that show up whenever you
create a new object or move the existing ones making it easier to align text or objects.
You can enable/disable the Smart Guides feature by going to View > Smart Guides or using
the ⌘-U keyboard shortcut. 
Using Smart Guides to perfectly align a circle
112
Canvas pane
You can customize the canvas size, scale,
and background using the Canvas pane.
Canvas - enter values to change the

width and height of the canvas. Documents
can have a maximum canvas size of 16,000
x 16,000 pixels.
Base Units - set the measurement units

to be used for rulers and dimension values
from: pixels, inches, centimeters and
millimeters.
Orientation - Select the orientation

mode to be used for the canvas, landscape
or portrait.
Scale - create ‘to-scale’ technical

designs using the canvas scale setting.
Rulers and dimension values are scaled by
the factor set in this field. Changing the
scale units allows you to create designs
measured in feet, miles, meters, kilometers, etc. The actual paper size of the document does
not change, only the displayed values and units are adjusted by this setting.
Background - the canvas background

can be set to either a color, a gradient, or an
image. You can modify the background
settings in the same way as editing a fill. 
113
Resizing Canvas
Besides the Canvas pane technique, a more
complex method to adjust the size of your
canvas would be the Resize Canvas
command.
Simply go to Modify > Canvas Size or use

the ⌘-Alt-K keyboard shortcut to open the
Canvas Size window.
Using the arrows buttons from that square

you can add or remove space from your
canvas in a specific side of your existing
canvas.
Resizing Artwork
Changing the size of your artwork will
adjust the size of your canvas along with
the existing objects. Simply go to Modify >
Artwork Size… or use the ⌘-Alt-A
keyboard shortcut to open the Artwork Size
window.
You can choose to scale your work

proportionally or to scale the styles and
effects applies to the existing objects. 
114
Preferences
The Preferences panel can be used to adjust
a few settings to customize your workflow.
To access the panel choose Graphic >
Preferences... or use the ⌘-, keyboard
shortcut.
Color Picker - Pick the type of your

color picker between: Color Popup and
Standard Color Panel.
Selection Color - The color used for

drawing selected points, paths, and the
bounding box around selected objects can be
changed using this setting. To reset the color
back to the default blue selection color simply
click the ‘Reset’ button. 
Various Selection Colors
Standard Color Panel
115
Align Strokes to Pixel Grid - When this setting is enabled, stroked objects are offset
slightly to ensure that the stroke is drawn aligned to the pixel grid. Pixel-alignment ensures
that a 1 pt stroke line positioned on exact integer coordinates will be drawn as a crisp 1 pixel
line. This feature is typically useful for designs that are intended for image export, but may
not always be the desired behaviour.
Note: The Align Stroke to Pixel Grid feature is a per-document setting and
changes are applied to the current document.
To notice the effects of this setting you need to enable the Show Pixels feature. Simply go to
View > Show Pixels or use the ⌘-Alt-P keyboard shortcut.
Align Stroke to Pixel Grid: Align Stroke to Pixel Grid: Align Stroke to Pixel Grid:
Enabled Disabled Enabled
Show Pixels: Disabled Show Pixels: Enabled Show Pixels: Enabled
Outline Mode
The Outline Mode options makes sure that shapes and objects (new or already created) are
drawn only as simple outlines. This can significantly improve performance when working on
large complex documents. With this setting disabled, objects are fully redrawn as they are
being moved, resized, rotated, etc.
Simply go to View > Outline Mode or use the ⌘-3 keyboard shortcut to enable this feature. 
116
Working with Scripts
Scripts are lines of codes that perform a sequence of operations. You can use the built-in
code editor (Plugins > Plugin Editor) to create, test, and run custom scripts. Previously time-
consuming tasks can be automated easily with a few lines of code.
If coding is not your thing or if you want to learn how it works you can find more information
and a set of neat plugins on this webpage: Graphic Plugins.
Storing and Using Plugins

You can only use plugins that are stored inside the Plugins
folder. It can be easily opened by going to Plugins >
Manage Plugins…. Move a plugin inside this folder and it
will show up whenever you open the Plugins menu.
Using the Add Anchor Points plugin
Removing Plugins
Simple remove a plugin from your Plugins folder when you don’t need it anymore.  
117
Exporting Designs
Once finished with a design, you can export it as an image or vector-based file. When ready
to export, go to File > Export... or use the ⌘-Option-E keyboard shortcut to bring up the
Export window.
File Format - Pick the file format to be used for the document you are about to export.
Include - Select the content that your exported file should include.
Select ‘Entire Canvas’ to include the grid and the background in your exported file.
Select ‘All Objects’ to export only your artwork. Using this

option you can export a design with a transparent
background. Certain formats do not support transparent
backgrounds, such as JPEG. When exporting to these
formats, the background color will be white in transparent areas.
Selecting ‘Select Objects’ will only export the objects selected before opening the Export
window.  
118
Exporting a design with a purple
Exporting the same design using
background and grey grid using
Include: All Objects
Include: Entire Canvas
Scale - Scale of your exported document.
Image Resolution - Set the image resolution to be used for your exported file.
Quality - Set the quality of the exported file. This options is only available when you’re
exporting your document as a JPEG file.
Image Export
Export a design as an image using the PNG, GIF, JPEG or TIFF formats.
Vector Export
Export a design as an SVG or PDF file. These vector-based files can be imported and edited in
other vector illustration applications.
PSD Export
Export a design as a Photoshop PSD file. 
119
Exporting Layers
Alternatively, you can export your design layer by layer or object by object as an image or
vector-based file. When ready to export, go to File > Export Layers... or use the ⌘-Shift-
Option-E keyboard shortcut to bring up the Export Layers window.
File Format - Pick the file format to be used for the layer/object you are about to export.
Export - Set which layers to be exported. Select ‘Layers’

to export all layers or ‘Tagged Layers and Objects’ to export
only the tagged layers and objects. To tag a layer or an
object go to the Layers panel and simply add the file
extension to the name of that object/layer.
Size - Set the size of the exported files. Select ‘Canvas

Size’ to export layers/objects using the canvas size or select
‘Layer Size’ to export layer/object using their actual size.
Scale - Set the scale of your exported files.
Copies - Set the number of copies of your exported files.

Check one box to add one copy, check both boxes to add
two copies.
Include Hidden Layers - Check this box to also export

hidden layers. 
120
Thank you for using Graphic!
With the information in this guide, you are ready to create your own amazing designs and
illustrations with Graphic.
For additional help, please visit our website at graphic.com or contact us at:
support@indeeo.com 
121
122
123
124

User Guide: Graphic For Mac v3.0.1

Uploaded by

Copyright:

Available Formats

You might also like

User Guide: Graphic For Mac v3.0.1

Uploaded by

Document Information

Original Description:

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

User Guide: Graphic For Mac v3.0.1

Uploaded by

Copyright:

Available Formats

User Guide

Graphic for Mac v3.0.1

Combine Panel 100

Path Panel 102

Canvas Panel 105

Graphic for iPad

Graphic for Mac OS X

Graphic for iPhone

Create, edit, and share designs between the

Original - 100% Scaling a bitmap image vs. scaling a vector image.

Bitmap Image - 400% Zoom

Vector Image - 400% Zoom

Vector object, consisting of Object paths shown selected,

Vector illustrations are resolution-independent. Objects, or entire designs, can be resized to

Creating a New Document

Color Mode - Select the color mode to be

Orientation - Select the orientation mode

Units - Select the measurement units to be used for the new

Document Tabs Inspector Panels

Each open document is

Document Tabs Current Document

Switching Between Documents

The documents popup can also be used to

Closing Documents Keyboard Shortcuts

• Position and resize objects using the Move

• Edit paths, anchor points, and curves using the

• Create new paths and shapes using the Pen,

• Scale, rotate, and shear objects using the

• Pan and zoom the canvas using the Hand and

• Change the current stroke and fill colors using

To select and use a tool simply click on its icon in

Below the tools are the Stroke and Fill color

The tool options for the Polygon Tool

The grey patterned area

Rulers and Grid

Snap to Grid [ ⌘-Shift-’ ].

You can customize the grid using the

Stroke and Fill Colors

Colors can be added to the color palette by

The Color Panel can select colors using a variety

The Alpha slider at the bottom of the panel can

The color setting being modified is shown as the

To activate the Eyedropper Tool, click on its

To remove a gradient simply right-click on To remove a pattern simply right-click on it

Stroke Color (X)

Select the objects and simply go to Modify

Recolour Method - choose between

Preview color changes - Check this box

Adjust colors using the Hue / Saturation method

Adjust colors using the Brightness / Contrast method

Show / hide each Inspector Panel

Appearance Panel Styles Panel

The Properties and Appearance panels both

Each floating inspector panel can be moved

To automatically resize and position the

To bring your document window Multiple inspector panels collapsed

Add Layer Layer