GRAPHIC - User Guide Graphic for iPhone - Amazon S3
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
GRAPHIC User Guide Graphic for iPhone
Welcome to Graphic 6
Vector Illustration 6
Getting Started 8
Creating a New Document 8
Managing Documents 10
Interface Overview 12
Toolbar 13
Canvas 14
Titlebar 15
Colors and Gradients 16
Stroke and Fill Colors 16
Color Panel 16
Color Palette 17
Eyedropper Tool 17
Gradient Panel 18
Layers panel 20
Creating Layers 21
Duplicating Layers 21
Deleting Layers 21
Arranging Layers 21
Merging Layers 21
Moving Objects Between Layers 22
Clipping Paths 22
Layer Effects 23
Blending Modes 24
Tools 27
Move Tool 28
The Bounding Box 29
1
Editing Fills 30
Path Selection Tool 31
Tool Modes 32
Modifying Curves 33
Deleting Path Points 34
Rotate Tool 35
Scale Tool 37
Shear Tool 39
Brush Tool 41
Pencil Tool 42
Eraser Tool 43
Pen Tool 44
Tool Modes 44
Appending an Existing Path 45
Creating a Line Segment after a Curve 45
Creating a Curve after a Line Segment 46
Adding Path Points 46
Deleting Path Points 47
Cutting Paths 47
Line Tool 48
Arrowed Line Tool 49
Dimension Line Tool 50
Arc Tool 51
Rectangle Tool 52
Rounded Rectangle Tool 53
Ellipse Tool 54
Polygon Tool 55
Star Tool 56
Text Tool 57
Gradient Tool 59
Image Tool 60
2
Appearance Panel 61
Stroke Pane 62
Brush Pane 63
Fill Pane 64
Image Pane 64
Label Pane 65
Text Pane 67
Effects Pane 69
Fill 70
Stroke 71
Drop Shadow effect 73
Inner Shadow effect 74
Outer Glow effect 75
Inner Glow effect 76
Blur effect 77
Styles Pane 78
Applying a Style 78
Using a Style 78
Removing a Saved Style 79
Copy/Paste Style 79
Properties Panel 80
Geometry Pane 81
Arrange Pane 82
Align Pane 83
Align 83
Distribute 84
Group/Ungroup 84
Combine Pane 85
Combine Paths 85
Compound Path 86
3
Path Tools Pane 87
Join/Connect 87
Modify 88
Text 89
Grid Pane 90
Grid 90
Snapping 91
Rulers 91
Canvas Pane 92
Shape Libraries Panel 94
Using Shapes 94
Creating a New Shape Library 94
Saving Shapes 95
Removing a Saved Shape 95
Removing a Shape Library 96
Renaming a Shape Library 96
Preferences 97
Exporting Designs 98
4
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.
5
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
6
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.
7
Getting Started
When launching Graphic for the first time, you will be presented with the Documents Browser
displaying a few example documents. This screen is where you will view and organize your
saved documents. The titlebar at the top has options to create new documents, open/
duplicate/remove existing documents, or share/export your designs.
New Document - create a new
document or import one using iTunes,
Dropbox or iCloud Drive.
When creating a new document, you will be
presented with a variety of canvas styles to
choose from – including graph paper,
notebook paper, and blueprint.
All canvas styles are created using
variations of the built-in grid and background settings, making them fully customizable.
Customize your document further using the Canvas and Grid panes.
8
New document canvas styles
Share - export your designs as Graphic files, or
as another format (PDF, SVG, PSD, PNG or JPEG).
Send a design via email, copy it as an image, save it
to Photos/Dropbox, or print it using AirPrint.
Simply choose the desired export destination and
then select the desired documents to export.
Settings - here you can find a link to a series of
detailed tutorials, manage imported fonts or enable/
disable the syncing of documents to iCloud. New font files can be imported easily from
Dropbox or iCloud using the same import commands that are used to import other files.
9Edit - delete or duplicate one or more of your documents. First, tap the Edit button to
begin editing and then tap each target document to select it. Next, use the Trash icon to
remove the selected documents or the Duplicate icon to duplicate them.
Sort - select between sorting existing documents by name or by date. To view this
control, simply swipe down from the top of the documents list.
Renaming Documents
To rename a document, simply tap on its name label in the Documents Browser.
10Creating Folders
Documents can be kept as separate files or grouped inside folders. To create a folder, simply
drag one document on top of another. Tap and hold on a document’s thumbnail until it ‘pops
up’ to begin dragging. When one document is being dragged on top of another, a dark
outline will appear to show the drop target. Once you lift your finger, a new folder will be
created with these two documents.
Creating a folder New Folder
New documents can be added or removed from a folder using the same tap, hold and drag
technique. To rename a folder, simply tap on its name.
Note: folders are automatically deleted once you remove all of the documents inside it.
11Interface
Overview
Graphic uses a primarily
single-canvas interface, with a
few accompanying inspector
panes for additional settings Titlebar
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.
Canvas
Fill Color
Line Color
Toolbar
12Toolbar
The toolbar allows you to choose between the various drawing and editing tools available in
Graphic. You’ll find nineteen tools divided in five groups. Using the different tools you can:
• Position and resize objects using the Move tool.
• Edit paths, anchor points or curves with the Path Selection tool.
• Scale, rotate and shear objects using the transform tools.
• Create new paths and shapes using the Pen tool or erase them
using the Eraser tool.
• Draw smooth paths using the Brush or Pencil tools.
• Create line segments, arrowed/dimension lines using the Line
tools.
• Create perfectly curved lines using the Arc tool.
• Create rectangles, rounded rectangles, ellipses or polygons
using the shape tools.
• Create various star shapes using the Star tool.
• Add editable text objects using the Text tool.
13Canvas
The Canvas is the visible area that defines a
design. It is where illustrations are created;
where objects are drawn and edited.
The grey 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
either a solid color, gradient, or image – also
using the Canvas pane.
Rulers and Grid
The rulers and grid are helpful when positioning and aligning objects. The Snapping features
or the Smart Guides can also ease your work. When selecting objects, highlights appear on
the rulers showing the bounds of the current selection.
You can enable, disable or customize these features using the Grid pane.
14Titlebar
On the left side of the titlebar you can find quick shortcuts to the save, undo, redo and delete
commands. On the right side are four icons which open sliding panes with additional
features. Each pane has a distinct role, from changing various object settings to saving and
reusing styles and object libraries.
Save/Close
Import Image Shape
Preferences Delete Libraries
Redo Properties Layers
Pane Pane
Undo
Appearance
Pane
15Colors and Gradients
Each object in Graphic is composed of one or more vector
paths. Object paths are drawn by drawing the stroke
around the path (Line) and drawing the area inside of the
path (Fill). Fill
Strokes are drawn based on their width and color. Fills can Line
be either a solid color, a gradient, or an image.
Line and Fill Colors
The Line 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 line and fill color wells update to the colors used by those
objects. Changing the line or fill colors while objects are selected will change those objects’
colors.
Color Panel
The Color Panel can be used to select custom colors.
Colors can be selected using three different color picker
interfaces: Color Spectrum, RGB sliders and HSB sliders.
The Alpha slider at the bottom of the panel can be used
to make colors semi-transparent.
The currently selected color is shown at the top left
corner of the Color Panel.
16Color Palette
The Color Palette can be used to quickly
choose a color, as well as save and reuse
frequently used colors.
Aside from the Line and Fill color wells, other
color wells appear throughout Graphic’s
interface. These color wells can be used to set
the color for a specific setting, from grid line
colors to the document’s background color.
Tapping on a color well will bring up the
floating Color Panel.
Colors can be added to the color palette by
dragging the active color to one of the palette
slots. You can add new colors inside empty
slots or replace an existing color by dragging a
new color on top of it.
To choose a new color to add, you can use one
of the color picker interfaces.
To disable an object’s stroke or fill
color, you can set the color to ‘none’.
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, tap on its icon in the Color
Panel ( ). You’ll get a cross icon surrounded by a circle
where you can see the currently selected color which will allow
you to easily pick the desired color.
17Gradient Panel
Unlike strokes, fills can be set to gradients as well as colors. The panel for the Fill color well
has options for choosing either a color or a gradient. Switch between color and gradient fills
using the control at the top of the panel.
Gradient Well - preview of the current
gradient.
Gradient Type - choose the style of the
gradient: Linear, Radial or Angle.
Angle - set the angle of rotation of the
gradient.
Reverse Gradient - reverse the order of
the color stops in the gradient.
18Gradient Editor - create and edit new gradients using the gradient editor. Add gradient
color stops by tapping on a location along the gradient bar. Tap a gradient color stop to
change its color. Simply move a color stop to get its precise location. Drag a color stop away
from the bar to remove it.
Add color stop Get location of color stop Remove color stop
Gradient Palette - gradients can be saved by dragging from the gradient preview to one
of the slots that lie below the gradient slider. You can add new gradients inside an
empty slot or you can replace one of the previously saved gradients.
To remove a gradient applied to an existing shape simply tap the ‘none’ button.
19Layers 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.
Layers also offer the ability to
create unique effects through
the use of their opacity
settings. These settings
determine how a layer will
blend with the layers below it. Show/Hide
Layers Layer
The Layers pane can be used Action
to create, duplicate, arrange, Menu
Lock/Unlock
delete, and select layers.
Layer
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 Selected
in the Layers list, and is the Layer
active layer; newly created
objects will be added to this
layer, and the objects in this
layer can be selected and
modified. To edit in a different
layer, simply tap to select it. Add
Layer
The visibility of a layer can be
toggled using the small eye
icon next to each layer.
Layers can also be locked to
prevent their contents from
being edited.
20Creating Layers
To create a new layer, tap the Add Layer button. A new empty layer
will be created above the currently selected layer.
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, select it and then choose ‘Duplicate’ from
the layers action menu.
Deleting Layers
To delete the currently selected layer, select it and then choose ‘Delete’ from the layers
action menu.
Arranging Layers
You can change the order of a layer by dragging it to a
new position in the Layers list. Tap and hold on the
thumbnail of the layer you’d like to move, and then
drag it to a new position. While dragging, a blue
indicator line will show the destination of the
dragged layer.
Merging Layers
The contents of two layers can be merged into one single layer. To merge two layers, select
the layer on top and choose ‘Merge’ from the layers action menu.
21Moving Objects Between Layers
You can move objects from one layer to another using cut and paste commands. Select the
objects you’d like to move and then tap and hold anywhere on the canvas until the context
menu appears (with the Cut, Copy, Select All, Paste and Delete commands). Tap the Cut
command and then select the destination layer from the Layers panel. Finally, tap and hold
again to reopen that context menu and choose the Paste command.
Alternatively, you can use the Paste in Place command to paste your object in its original
location.
The Select All command will select all the
shapes from your active layer.
Using the Copy command and subsequently
the Paste command, you can easily duplicate
any selected object.
Clipping Paths
Using the Paste Inside feature,
vector shapes and images can be
clipped as a group inside another
vector shape.
Select the objects that you want to
be clipped and simply copy them
using the Copy command from the
context menu or cut them using
the Cut command.
22Select the object that you plan to use as a mask, reopen that menu and tap the Paste Inside command. Keep in mind that when you’re using the Paste Inside command, newly pasted objects will always end up in their original location. The mask and the clipped shapes remain fully editable – you can select any of these shapes to move or edit their appearance. Clipping groups can ungrouped using the Ungroup command from the Properties panel. 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 ‘Opacity’ command from the layers action menu.
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
24Overlay Soft Light Hard Light
Vivid Light Linear Light Pin Light
Hard Mix Difference Exclusion
25Subtract Divide Hue
Saturation Color Luminosity
26Tools
Move Tool Line Tool
Select, move, and resize objects Create straight line segments
Path Selection Tool Arrowed Line Tool
Edit path points and curves Create arrowed line segments
Rotate Tool Dimension Line Tool
Rotate objects Create dimension line segments
Scale Tool Arc Tool
Scale objects Create elliptical arcs
Shear Tool
Slant objects Rectangle Tool
Create rectangles
Brush Tool Rounded Rectangle Tool
Draw brush strokes Create rectangles with rounded corners
Pencil Tool Ellipse Tool
Draw freeform paths Create circles and ellipses
Eraser Tool Polygon Tool
Erase portions of objects or paths Create polygon shapes
Pen Tool Star Tool
Create paths with lines and curves Create stars with varying points
Text Tool
Add text objects
27Move Tool
The Move tool is used to select and move objects or groups. Besides being the
primary tool for selecting objects, it can also be used to quickly resize and
rotate a selection of objects. Select an object by simply tapping on it.
To move a selected object, simply drag it to the new position.
To select multiple objects, simply tap on an empty part of the canvas and then drag to create
a selection rectangle. Objects touched by the selection rectangle will become selected.
Tap 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, tap and hold with
a second finger on the canvas while dragging the selection area with the first.
28Dragging a selection rectangle while Objects inside the selection rectangle
pressing with a second finger are selected
The Bounding Box
The bounding box is the box that appears around the selected objects.
Aside from showing the bounds of the selection, it allows you to quickly
transform the selected objects. Draggable handles are located at the
corners and sides of the bounding box. You can drag any of these handles
to resize or rotate the bounding box and the selected objects.
The blue draggable handles can be used to resize the currently selected
objects in different directions. Tap and drag one of these handles to easily
resize the objects.
Tap and drag to resize selected objects Resized objects
The orange handles at the sides of the bounding box can be used to rotate the
selected objects. Tap and drag one of these handles to easily rotate objects. Tap
and hold with a second finger on the canvas while dragging to snap to 15 degree
increments.
29Tap and drag to rotate selected objects Rotated objects
Editing Fills
The Move tool can also be used to activate the Gradient Tool or the Image Tool, when
editing objects with those types of fills. To edit an object’s fill, simply tap on it once to
select the object, and then tap a second time to activate the Gradient or Image tool.
When finished, tap elsewhere on the canvas to return to the Move tool.
30Path Selection Tool
The Path Selection tool can be used to select and modify the points and curves
of a path. This tool allows you to modify shapes by moving or deleting path
points, or by adjusting the curved sections of a path. The Path Selection tool has
three different editing modes - Select, Add to Selection and Convert.
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.
Tap an anchor point to select it, and then drag to move it.
Moving a selected anchor point 31Direction 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. Tap
and drag on a direction handle to modify a curve.
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 tap and drag on the canvas to create a selection rectangle or activate the Add
to Selection Mode and then tap on each point.
Selecting points using a selection Selecting points using the Add to
rectangle Selection mode
Add to Selection Mode can also be used to quickly select multiple objects, which can be
very helpful when working with complex documents.
32Modifying 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 single direction handle
independently using the Convert Mode.
Dragging a direction handle using Resulting sharp corner at
the Convert Mode the anchor point
Convert Mode can be used to 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 tap the point with Convert Mode active and drag to
create direction handles around the point.
Star shape with corner points Corners converted to smooth points
33To convert a smooth point to a corner point, simply tap the point with the Convert Mode
which will remove the direction handles.
Tapping 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
Deleting Path Points
Selected anchor points can be removed from a path by tapping the Delete button in the
Titlebar.
34Rotate 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, tap and drag anywhere on
the canvas to rotate the objects clockwise or counterclockwise.
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 tap (without dragging) to
set it at that new location.
Selected object Set the reference point Tap and drag to rotate
35To constrain the rotation to 15˚ increments, tap and hold with a second finger on the canvas
while dragging the selection.
Objects can be rotated numerically using
Geometry pane or the Tool Options pane.
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 Using the Copy buttonScale 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, tap and drag anywhere on the canvas to
resize the selected objects.
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 tap (without dragging) to
set it at that location.
Original objects Tap and drag to resize the objects
37To constrain the width, the height or both attributes while performing the scaling, tap and
and hold with a second finger on the canvas while dragging the selection.
Objects can be scaled numerically using the
Geometry pane or the Tool Options pane.
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 buttonShear 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, tap and drag anywhere on the canvas to shear the objects.
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 tap (without dragging) to
set it at that location.
Selected objects Tap and drag to shear
39To slant your selected object on only one axis (horizontally or vertically), tap and hold with a
second finger on the canvas while dragging the selection.
Objects can be sheared numerically using
the Geometry pane or the Tool Options
pane. 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 buttonBrush Tool
The Brush tool can be used to create calligraphic brush strokes. Calligraphic
brushes appear as if they were drawn using a calligraphic pen or paintbrush.
With the Brush tool active, tap and drag to draw a brush stroke.
You can adjust the brush width and the
amount of smoothing that will be
applied to drawn strokes using the
settings pane that appears whenever
you select the Brush tool.
Brushes can be customized using the
Brush pane from the Appearance
panel.
41Pencil 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 one segment at a time as with the Pen tool. Tap and drag to
draw a path.
As with the Brush tool, the Pencil tool
displays a settings pane where you can
adjust the width and the amount of
smoothing applied to paths that you are
about to create.
Sketch created by tracing an image
with the Pencil tool
42Eraser Tool
The Eraser tool can be used to erase portions of paths, or even entire shapes.
As you tap 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 from the settings pane that
opens whenever you select the Eraser tool.
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 after
tool to remove a portion erasing
of an object
43Pen 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
Graphic’s drawing tools to learn and become proficient using.
The Pen tool offers four different editing modes - Pen, Add Point, Delete Point and Cut
Path.
The Pen tool can be used to create straight line segments by simply tapping on the canvas.
To finish editing a path, simply tap on the first point of the path to close it, or double-tap the
newest point if you do not want to close your path.
Creating a series of line segments by Closing an in-progress path by tapping
tapping to add path points the first point in the path. 44To create curved segments, tap and drag to create anchor points with direction handles.
Tapping 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. Tap one of the
endpoints of the path to begin editing (or tap and drag to create a direction handle) and
then start adding the new points or close the path.
An existing path, Tapping 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
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 tap on the last anchor point to remove the direction
handle.
45After creating a curve Tapping the last path point Tapping (without dragging)
segment, direction handles removes the end direction now creates a line segment
appear at each side 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 tap the end anchor point and then drag to create a direction handle.
A straight line segment Tapping on the last path A curved segment is added
without direction handles point and dragging to after the line
create a direction handle
Adding Path Points
You can add points to any shape or path using the Add Point Mode. After choosing this
mode, simply tap anywhere on the selected path to add a new anchor point.
46Deleting Path Points
You can delete points on any shape or path using the Delete Point Mode. After choosing
this mode, simply tap on the anchor point you wish to remove from the selected path.
Cutting Paths
You can cut any type of path using the Cut Path Mode. After choosing this mode, simply tap
anywhere on the selected path to cut it.
47Line Tool
The Line tool can be used to create line segments. Simply tap and drag to
create your line. Line segments can be easily turned into arrowed line
segments or dimension line segments using the Stroke pane or the Label
pane from the Appearance panel.
For perfect horizontal, vertical or oblique lines tap and hold with a second finger while
dragging to draw a perfect line.
Tap and drag to create random line Tap and drag and then tap and hold with a
segments second finger to create perfect line segments
48Arrowed Line Tool
The Arrowed Line tool can be used to create arrowed line segments. Simply
tap and drag to create your arrowed line. The line endings and the line dash
styles for created lines can be customized using the Stroke pane from the
Appearance panel.
As with the Line tool, to create perfect arrowed lines tap and drag to create your starting line
and then tap and hold with a second finger to turn your arrowed line into a perfect one.
Tap and drag to create random arrowed Tap and drag and then tap again to create
line segments perfect arrowed line segments
49Dimension Line Tool
The Dimension Line tool can be used to create dimension line segments.
Simply tap and drag to create a dimension line.
As with the Line tool and the Arrowed Line tool, to create perfect dimension
lines tap and drag to begin drawing the line, and then tap and hold with a second finger to
turn the drawn dimension line into a perfectly straight one.
The line endings and the line dash styles for created
dimension lines can be customized using the Stroke pane
from the Appearance panel.
The position and style of the dimension labels can be
customized using the Label pane from the Appearance panel.
Create intricate drawings, such as floor plans or architectural
designs, using lines, arrowed lines and dimension lines.
Design with varying line
styles
50Arc Tool
The Arc tool can be used to create arc segments. Simply tap 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 the line tools, to create perfect arcs tap and drag to create your starting arc and then
tap and hold with a second finger to turn your arc segment into a perfect one.
You can customize the appearance of arcs using the Stroke pane or the Label pane.
Default arc object Arc with arrows Arc with dimension styles
51Rectangle Tool
The Rectangle tool can be used to draw rectangles or squares. Simply tap and
drag to create a new rectangle. Tap and drag, and then tap and hold with a
second finger to easily create a square.
Tap and drag to create a rectangle Tap and drag, and then tap
and hold with a second finger
to create a square
52Rounded Rectangle Tool
The Rounded Rectangle tool can be used to draw rectangles with rounded
corners. Simply tap and drag to create a new rounded rectangle. Tap and
drag, and then tap and hold with a second finger to easily create a square
with rounded corners.
You can vary the roundness of the corners by adjusting the Radius setting in the tool pane
that opens whenever you select the Rounded Rectangle Tool.
Tap and drag to create a Tap and hold with a second finger to
rounded rectangle create a square with rounded corners 53Ellipse Tool
The Ellipse tool can be used to draw ellipses or circles. Simply tap and drag to
create a new ellipse. Tap and drag, and then tap and hold with a second
finger to easily create a circle.
Tap and drag to create an ellipse Tap and drag, and then tap
and hold with a second finger
to create a circle
54Polygon Tool
The Polygon tool can be used to draw polygons with various numbers of
sides, including triangles, hexagons, octagons, etc.
You can vary the number of sides by adjusting the Sides setting in the tool pane that opens
whenever you select the Polygon Tool.
A variety of polygons, with a different number of sides
55Star 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 pane that opens whenever you select the Star Tool.
A variety of star shapes, with differing numbers of points and edge lengths
56Text Tool
The Text tool can be used to add new text objects to a design. To create a new
text field simply tap on the Text Tool icon in the toolbar.
Text fields have bounding boxes
allowing you to easily move, rotate or
resize them.
To add text inside a text field simply
double tap it and the keyboard will
appear. Using text options pane
above the keyboard, you can set the
font, size and alignment that should
be used for the text that you are
about to add.
To deselect a text field tap anywhere
on your canvas, outside the selected
text field.
To edit an existing text field, double
tap it and make the changes.
You can change the text properties,
such as font, size or alignment of an
existing text object using the Text
pane from the Appearance panel.
57To change the color of text, simply set the Fill color for the object.
Text in Graphic can be styled like any other path object. This means that text can also be
filled with gradients or images, 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 tap that text to select it and
then tap it a second time to activate the Gradient Tool or the Image Tool.
Text object with a stroke and gradient fill Text object with a stroke and image fill
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.
To turn your selected text field into an editable path use the Create Outlines command from
the Path Tools pane of the Properties panel.
Editable text object Text object converted to vector paths
58Gradient 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, tap once to select an object which has a gradient
fill and then tap a second time on the object to edit its gradient fill.
The start and end points of the gradient will appear on the selected shape, and the Gradient
Fill pane will open. The gradient handles can be moved by
simply dragging them. To reset the start and end points to their
default positions, tap the Reset button from that pane.
Linear gradient Moved handles
Radial gradient Moved handles
59Image Tool
The Image tool can be used to scale and position an image fill inside of a
shape’s bounds, effectively cropping the image.
x2
With the Move tool active, tap once to select an object which has an image
fill. Tap a second time on the object to edit the image.
A draggable resize handle will appear on the bottom, right corner of
the selected shape, and the Image pane will open.
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, tap the Reset button from that pane.
When finished, tap anywhere on the
canvas to end editing and revert to the
Move tool.
Original image and bounding shape Dragging the handle to resize the image
Enlarging the image further Dragging the image
60Appearance Panel
The Appearance panel includes several panes of settings
for modifying the appearance of objects.
Stroke
Modify an object’s stroke width and color. Add line endings or set
custom line dashes.
Brush
Apply a calligraphic brush stroke to a path. Edit settings for brush
roundness, angle, and diameter.
Fill
Set and customize an object’s fill. Choose from color and gradient.
Image
Add an image as a fill for an object.
Label
Set object labels, with adjustable position and alignment settings.
Choose between dimension and custom text labels.
Text
Set the font, style and size attributes of text objects.
Set the alignment of text or the spacing between lines and
characters.
Effects
Adjust the opacity of an object, add, edit or multiply Drop
Shadows, Inner Shadow, Outer Glows, Inner Glows and Blurs.
Styles
Save and reuse the appearance settings of an object. Styles can be
applied to any type of object, including lines, shapes, and text
objects.
Copy/Paste Style
Easily copy and paste the appearance attributes from one object
to another.
61Stroke pane
The Stroke pane can be used to adjust a path’s stroke
width and style. Changes are applied to the currently
selected objects.
Width - adjust the stroke’s thickness using the width slider or the input field.
Start Point Style - sets the style of the starting points of you selected path. Choose from
a variety of line endings using the popup menu.
Line Style - sets the dash of the
Line endings and
selected path. Choose from a variety of dash style popups
preset line dash styles using the popup
menu.
End Point Style - sets the style of
the end point of you selected path.
Choose from a variety of line endings
using the popup menu.
62Brush 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 tapping on it. If objects are
selected, the chosen brush will be applied to those object’s strokes.
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.
63Fill pane
Using the Fill pane you can edit an object’s fill settings.
It’s basically a second method that can be used to open
the Color panel.
Image pane
The Image pane allows you to add an image fill for your
selected object using images from your Photos.
When adding an image fill for an object with multiple fills the image will replace the
attributes of the bottom fill from the Effects pane.
Once added, the image can be edited using the Image Tool.
Object with color fill Object with image fill
64Label 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 Canvas settings for units and scale.
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%
65Position - 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 - enable or disable the visibility of the units of measurement. The unit value can
only be changed using the Canvas pane.
Precision - set the level of precision of your
dimension labels.
Text Style - change the appearance of the
label by setting the text and background colors,
as well as the border’s margin and corner
roundness.
The margin setting adjusts the size of the box
bordering the text, adding space between the
text and edges. The corners setting determines
the roundness of the text box.
66Text pane
The Text pane replaces the Label pane whenever you
select a piece of text and it can be used to set the font,
style and size attributes of that selected text.
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.
Font - change the font or the font style
for a selected text object.
Simply tap the existing font to replace it.
Use the blue info button that
stands for your font to open the list
of styles.
Fonts without this buttons do not have
different styles available.
To add new fonts go to the starting page.
Tap that plus button and then simply
import your font using Dropbox or iCloud.
67Font Size - set the font size of the text. Increase or decrease the values using the plus
and minus buttons or the input field.
Text Alignment - align the text within the text object’s bounding box. Choose from
right-aligned, centered, left-aligned or justify.
Left Center Right Justify
Line Spacing - set the amount of space that should be left between text lines
Line Spacing: 1 pt Line Spacing: 2 pt
Character Spacing - set the amount of space between text characters.
Character Spacing: Auto Character Spacing: 1.5
68Effects pane
The Effects pane can be used to change an object’s
opacity and to edit or add fills, strokes and effects.
In addition to fills and strokes objects 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 top, right 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 tap 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
circle with a check mark is the symbol for an active attribute while the empty circle
is the symbol of an inactive attribute. Simply tap an empty circle 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 has a color well
that represents the color used for that
specific attribute. Simply tap this color
well to change the color or adjust the
Alpha percentage.
A grey color well with a red, oblique
line means that the Alpha slider is set to
0% for that color.
69Using the cogwheel button you can duplicate, remove, edit or change the blending
mode of an existing attributes from the Effects pane. Simply tap this icon to open
the tooltip menu and then tap the command that you wish to apply.
Fill
The Fill attribute is used to adjust an object’s color. Changes are applied to the currently
selected objects. Colors, gradients or images can be added to fills. When you add an
image to a fill the appearance of its color well will not change and it will keep showing
the previously used color.
You can add multiple fills using the plus button and then change their blending mode
using the cogwheel button.
Object with three types of fills: color,gradient and image
70Stroke
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 Cap - set the style of path
endpoints (caps) to Butt, Rounded or
Projecting.
Butt Cap Rounded Cap Projecting Cap
71Line Join - Set the style of path corners (joins) to Miter, Rounded or Beveled.
Miter Join Rounded Join Beveled Join
Alignment - Set the style of path alignment to Center, Inside or Outside.
Center Alignment Inside Alignment Outside Alignment
72Drop 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.
The X and Y offset correspond to the distance from the object, X represents the horizontal
axis while Y represents the vertical axis.
Using the blur 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
73Inner 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.
The X and Y offset correspond to the distance from the object, X represents the horizontal
axis while Y represents the vertical axis.
Using the blur 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 inner shadow.
X: 0 Y: 5 Blur: 5 X: 0 Y: 10 Blur: 20 X: 0 Y: -10 Blur: 0
74Outer 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.
Using the blur 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 outer glow.
Blur: 30 Blur: 10 Blur: 5
75Inner 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.
Using the blur 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 inner glow.
Blur: 5 Blur: 10 Blur: 30
76Blur 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
77Styles pane
The Styles pane 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, tap 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. Tap on
the plus button at the top of the Styles panel ( ). A new style item will appear in the Styles
pane matching the appearance settings of the selected object.
78Removing a Saved Style
To remove a saved style, simply tap the edit button, select the style you wish to remove and
then tap that trash button. You can remove one or more styles at the same time.
Copy / Paste Style
The Copy Style and Paste Style commands can be used to
easily copy the Appearance attributes from one object
and paste it unto another one.
It can be used for any type of object. You can copy and
paste any type of fill, stroke or effect (even image fills),
any kind of label or font attributes.
Copy Style Paste Style
79Properties Panel
The Properties pane 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
Numerically set the position and size of an object or group. Apply
a rotation transformation, flip horizontally/vertically or lock/
unlock your objects.
Arrange
Easily send to back or bring to front your shape or simply adjust
the shape order.
Align
Align object positions relative to one another and distribute them
horizontally or vertically.
Group/Ungroup
Group multiple objects to easily manipulate them together as a
single object.
Combine
Combine multiple object/paths using union, subtract, intersect,
exclude and divide commands. Create compound paths.
Path Tools
Join/Connect/Disconnect paths. Close paths or reverse their
direction and turn strokes/text into editable paths. Place text on
path or remove it from the path.
Grid
Customize the canvas grid. Adjust X and Y spacing, subdivisions,
and margins. Use color settings to create different styles. Enable/
disable the grid, activate the Snap to Grid, the Snap to Points or
the Smart Guides features.
Canvas
Set the canvas size and units. Use a scale factor to customize the
display of measurements for ‘to-scale’ designs.
80Geometry pane
The Geometry pane can be used to numerically change
the position, size and rotation of the selected objects. It
can also be used to lock selected objects or to flip them horizontally or vertically.
Position - the position, in X and Y, of the selection’s bounding box. X represents the
horizontal axis while Y represents the vertical axis.
Size and Aspect Ratio - set the width and height of the selection’s
bounding box. To lock the aspect ratio while entering values, tap the
aspect ratio lock icon .
Lock - lock or unlock the selected object. Locked objects can’t be
moved or edited.
Flip - flip selected objects horizontally or vertically.
Flip Horizontally Flip Vertically
Rotation - rotate the selection using the rotation angle field.
81Arrange pane
The Arrange pane can be used to change the order of
the existing objects from a layer.
Using the simple slider that shows up whenever you access the Arrange pane you can bring
to front, bring forward, send to back or send backward your selected objects.
Bring red object to front Bring yellow object forward
Send red object to back Send yellow object backwards
82Align pane
The Align pane is divided into two sections, the Align
section and the Distribute section.
Align
Using the commands from the Align section you can align selected object’s positions relative
to each other.
Align Left Align Right
Align Top Align Bottom
Align Horizontal Align Vertical
83Distribute
Using the commands from the Distribute section you can get an even amount of space
between your selected objects.
Distribute Horizontal Distribute Vertical
Group / Ungroup pane
The Group command can be used to group multiple
objects and to easily manipulate them together as a
single object.
The Ungroup command ungroups an existing group.
84Combine pane
The Combine pane is divided into two sections, the
Combine Paths section and the Compound Path section.
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
85Compound 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.
86Path Tools pane
The Path Tools pane is divided into three sections, the
Join / Connect section, the Modify section and the Text
section.
Join / Connect
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 tap the Join Paths
button. The paths will be joined
at the two endpoints nearest to
each other.
Connect Paths - Use this
command to link two open
paths together into a single
closed shape. To connect, select
the two open paths and simply
tap the Connect Paths button.
This will generate another two
paths connecting the end
points of the selected paths.
Disconnect - Use this command
to disconnect any type of path
or shape. To disconnect, select
your shape and simply tap the
Disconnect button. This will cut
your shape and you will get all
the path sections that make up
your selected shape.
87Modify
Open / Close Path - 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 tap the Open Path
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
tap the Close Path button.
Reverse Path - Use this
command you can easily reverse
the starting and and the ending
point of a selected path.
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.
88You can also read
