1

Contents
Introduction

Brief Description

Technical Support

Useful Web Resources

BeLight Software Privacy Statement

Workspace and Program Interface

The Main Window

The Tools Panel

The Control Panel

Using Controls with Numeric Input

Program Settings

The Main Menu

Gestures

Keyboard Shortcuts

Working with Documents

Creating Documents

Opening Documents

The Document Browser

Saving Documents

Document Settings
2

Layout

Layout Basics

Sheets

The Grid

Layout Guides

Selecting and Arranging Objects

Select Objects

Delete or Hide an Object

Move, Resize and Rotate Objects

The Geometry Panel

Align and Distribute Objects

Lock an Object

Group and Expand Objects

Align Objects to the Pixel Grid

Working with Layers

Introduction to Layers and Objects

The Layers Panel

Creating and Deleting Layers

Arranging Layers and Objects

Blending Layers

Drawing

Vector Graphics

Path and its Features

Draw a Path with the Pen Tool

3

Create a Path with the Draw Tool

Draw a Path with the Pencil Tool

Draw a Path with the Brush Tool

Edit a Path

Simplify a Path

Draw Lines and Shapes

Stroke

Brush

The Appearance Panel

Color, Gradient and Image Fill

Introduction to Colors

The Usage of the RGB and CMYK Color Models

Fill an Object with a Color, Gradient or Image

The Color Panel

Selecting Colors

Gradients

Image Fill

The Recolor Panel

Working with Text

Introduction to Text Objects

Text in Rectangular Boundary

Distortable Text

Text Along a Path

Text Inside a Shape

Properties of Text
4

Creating Columns with Flowing Text

Creating Effects

The Shadow Effect

The Glow Effect

The Blur Effect

Changing Object's Shape

Introduction to the Object Shape Transformation

The Transform Panel

Transforming Objects

Rounding Corners

The Free Transform Tool

The Path Panel

Combining Objects

Compound Path

Using a Clipping Mask

Cut an Object with the Knife Tool

Cut a Path with the Scissors Tool

Erase a Part of an Object

The Fusion Tool

Importing

Introduction to Importing

Importing Graphics

Exporting and Printing

Exporting Documents

The Export Panel

5

Printing

The Library

Introduction to the Library

The Object Library Panel

Exporting and Importing Libraries

Using Image Stocks

6

Brief Description
The Amadine app is designed for creating and editing vector graphics. Various raster effects
can be used in your designs as well.

You can save your work in the SVG and PDF formats that support vector graphics. You can also
export to raster formats such as PNG and JPEG.

The app is customizable for use with Apple Pencil.

Documents created by the app are compatible with Amadine for macOS and vice versa.

The free version of Amadine is fully operational. However exporting to vector formats is not
available until you purchase the app.

System Requirements

Requires iPadOS or iOS 13 and higher.

7

Technical Support
The developer of Amadine offers free technical support.

By email:
[email protected]

Technical support form on the developer's website:

https://amadine.com/support/

When reporting a problem, please make sure to specify:

The version of Amadine you are using.

The version of iOS or iPadOS on your computer. Open the iOS/iPadOS Settings. Go to
the General section and choose About.
Your actions that could have led to the problem.
If the problem persists, describe how to reproduce it.
When necessary, illustrate your report with screenshots (press and hold the Sleep/Wake
button and immediately press the Home button).
8

Useful Web Resources

Amadine Home - Information about Amadine, links to download, update, or buy the program.

Tutorials - Online video tutorials

Amadine on Facebook

Amadine on Instagram

Amadine on Pinterest

Amadine on Twitter

Amadine on Reddit

Amadine on TikTok

BeLight Software - Learn about other BeLight Software products.

9

BeLight Software Privacy Statement

Your privacy is important to us. This Privacy Statement covers how we collect, use, disclose,
transfer and store your information.

Collection and Use of Personal Information

Personal information is data that can be used to identify or contact a single person.

You may be asked to provide your personal information any time you are in contact with
BeLight Software. We may share and use this information consistent with this Privacy
Statement. We may also combine it with other information to provide and improve our
products, services, content and advertising. You are not required to provide the personal
information that we have requested, but, if you choose not to do so, in many cases, we will not
be able to provide you with our products or services or respond to any queries you may have.

What personal information we collect:

When you purchase a product, download software or an update, register for company or
product newsletters, contact us or participate in an online survey, we may collect a variety of
information, including your name, mailing address, phone number and email address.

How we use your personal information:

The personal information we collect allows us to keep you posted on BeLight Software's
latest product announcements, software updates and upcoming events. If you don't want
to be on our mailing list, you can opt out any time by emailing us at:
[email protected]
We also use personal information to help us create, develop, operate, deliver and improve
upon our products, services, content and advertising, as well as for loss prevention
purposes.
We may use your personal information to verify identity, assist with identification of users
and determine appropriate services.
From time to time, we may use your personal information to send important notices, such
as communications about purchases and changes to our terms, conditions and policies.
Because this information is important to your interaction with BeLight Software, you may
not opt out of receiving these communications.
We may also use personal information for internal purposes, such as auditing, data
analysis and research to improve BeLight Software products, services and customer
communications.
If you enter into a sweepstakes, contest or similar promotion, we may use the information
you provide to administer those programs.
10

Collection and Use of Non-personal Information

We also collect data in a form that does not, on its own, permit direct association with any
specific individual. We may collect, use, transfer and disclose non-personal information for any
purpose. The following are some examples of non-personal information that we collect and
how we may use it:

We may collect information such as occupation, language, zip code, area code, unique
device identifier, referrer URL, location and the time zone where a BeLight Software
product is used so that we can better understand customer behavior and improve our
products, services and advertising.
We may collect information regarding customer activities on our websites and from our
other products and services. This information is aggregated and used to help us provide
more useful information to our customers and to understand which parts of our website,
products and services are of most interest. Aggregated data is considered non-personal
information for the purposes of this Privacy Statement.

If we do combine non-personal information with personal information, the combined

information will be treated as personal information for as long as it remains combined.

Cookies and Other Technologies

BeLight Software websites, online services, interactive applications, email messages and
advertisements may use "cookies" and other technologies, such as pixel tags and web
beacons. These technologies help us better understand user behavior, tell us which parts of our
websites people have visited and facilitate and measure the effectiveness of advertisements
and web searches. We treat information collected by cookies and other technologies as non-
personal information. However, to the extent that Internet Protocol (IP) addresses or similar
identifiers are considered personal information by local law, we also treat these identifiers as
personal information. Similarly, to the extent that non-personal information is combined with
personal information, we treat the combined information as personal information for the
purposes of this Privacy Statement.

If you want to disable cookies, and you're using the Safari web browser, go to Safari
Preferences and then to the Privacy pane to manage your preferences. For other browsers,
check with your provider to find out how to disable cookies. Please note that certain features of
the BeLight Software website will not be available once cookies are disabled.

We use this information to understand and analyze trends, to administer the site, to learn about
user behavior on the site, to improve our product and services and to gather demographic
information about our user base as a whole. BeLight Software may use this information in our
marketing and advertising services.

In some of our email messages, we use a "click-through URL" linked to content on the BeLight
Software website. When customers click one of these URLs, they pass through a separate web
server before arriving at the destination page on our website. We track this click-through data
11

to help us determine interest in particular topics and measure the effectiveness of our customer
communications. If you prefer not to be tracked in this way, you should not click text or graphic
links in the email messages. Pixel tags enable us to send email messages in a format
customers can read, and they tell us whether mail has been opened. We may use this
information to reduce or eliminate messages sent to customers.

Disclosure to Third Parties

At times, BeLight Software may make certain personal information available to strategic
partners that work with BeLight Software to provide products and services or that help BeLight
Software market to customers. Personal information will only be shared by BeLight Software to
provide or improve our products, services and advertising; it will not be shared with third parties
for their marketing purposes.

Service Providers

BeLight Software shares personal information with companies that provide services such as
information processing, fulfilling customer orders, delivering products to you, managing and
enhancing customer data, providing customer service, assessing your interest in our products
and services and conducting customer research or satisfaction surveys. These companies are
obligated to protect your information.

Services we use and their respective privacy policies:

Google Analytics is used to analyze website visitors' behavior and activity:

https://policies.google.com/privacy

Vimeo is used for video content playback:

https://vimeo.com/privacy

Others

It may be necessary - by law, legal process, litigation and/or requests from public and
governmental authorities within or outside your country of residence - for BeLight Software to
disclose your personal information. We may also disclose information about you if we
determine that disclosure is reasonably necessary to enforce our terms and conditions or
protect our operations or users. Additionally, in the event of a reorganization, merger or sale, we
may transfer any and all personal information we collect to the relevant third party.
12

Protection of Personal Information

BeLight Software takes the security of your personal information very seriously. BeLight
Software online services, such as the BeLight Software website store and embedded into
software store, protect your personal information during transit using encryption such as
Transport Layer Security (TLS). When your personal data is stored by BeLight Software, we use
computer systems with limited access and encrypted storage.

When you use some BeLight Software products, services or applications, or post on a BeLight
Software forum, chat room or social networking service, the personal information and content
you share is visible to other users and can be read, collected or used by them. In these
instances, you are responsible for the personal information you choose to share or submit.

Integrity and Retention of Personal Information

BeLight Software will retain your personal information for the period necessary to fulfill the
purposes outlined in this Privacy Statement unless a longer retention period is required or
permitted by law.

Access to Personal Information

Access, correction or deletion requests can be made via email at:

[email protected]

Children

If we learn that we have collected the personal information of a child under 13, or equivalent
minimum age depending on jurisdiction, we will take steps to delete the information as soon as
possible.

Parents can contact us via email at:

[email protected]

Third-party Sites and Services

BeLight Software websites, products, applications and services may contain links to third-party
websites, products and services. Our products and services may also use or offer products or
services from third parties. Information collected by third parties, which may include such
things as location data or contact details, is governed by their privacy practices. We encourage
you to learn about the privacy practices of those third parties.

Commitment to Your Privacy

To ensure that your personal information is secure, we communicate our privacy and security
guidelines to BeLight Software employees and strictly enforce privacy safeguards within the
company.
13

Questions

If you have any questions or concerns about the BeLight Software Privacy Statement or data
processing, or if you would like to make a complaint about a possible breach of local privacy
laws, please contact us at:
[email protected]

BeLight Software may update its Privacy Statement from time to time. When we change the
policy in a material way, a notice will be posted on our website along with the updated Privacy
Statement.
14

The Main Window

The main window is where you preview and edit documents.

1 - Open the Document Browser. It gives you access to saved documents and also to global
settings of the app.

2 - Open the main menu.

3 - The Undo and Redo buttons. You can hide these buttons using the program settings.

4 - Buttons that open the Document, Path, Layers, Geometry and Appearance panels.

5 - The Tools Panel contains drawing and editing tools.

6 - The canvas where you edit your design. One of multiple sheets can be present on the
canvas.

7 - Set of buttons that gives quick access to settings in the Appearance panel. Different options
are available depending on the type of a selected object.

8 - The Control panel can display extra options depending on the currently activated tool.

Canvas and Sheets

The canvas is the space where you can place and edit elements of your design.

Although objects can be placed anywhere on the canvas, your design should fit a sheet. You
can think about sheets as an equivalent to pages in a text editor. A sheet represents a printable
area. Objects placed outside any sheet will not be printed or exported. If a part of an object is
15

located on a sheet, and the rest is on the canvas, the boundary of the sheet will work as the
crop area.

There can be one or multiple sheets on the canvas and, consequently, in your project. This lets
you save several related or completely separate designs as a single document.

How to manage sheets and arrange them over the canvas is described in the Sheets section.

Zooming In and Out

In order to zoom in or out, pinch with two fingers. A small panel at the top of the screen will be
displaying the scale while you are changing it.

A list of gestures for zooming as well as other actions can be found by choosing Help > View
Gestures in the menu.

Rotating the Canvas

To rotate the canvas together with all of the sheets and objects on it, use the two-finger gesture
turning one finger around another. The canvas snaps to ±90 and 180 degree angles.

To be able to rotate the canvas, make sure that the Allow canvas rotation option is enabled in
the Program Settings.

Position the Artwork within the View Area

In order to scroll the canvas, drag it with two fingers.

16

Preview Modes

The canvas can display your document in one of the following preview modes: Normal, Outline,
Pixel Preview or Retina Pixel Preview.

To switch between the modes, use the View Mode popup menu in the Document panel.

Normal Mode

The normal mode is supposed to be used as the main mode for editing vector paths, arranging
objects, etc. In this mode, the program displays all object features such as the stroke, fill and
effects.

Outline Mode

The Outline mode displays object outlines as paths. No Stroke, Brush, Fill or other features are
visible. This mode might be useful when you need to edit paths. Since graphics are displayed in
a very simplified way in the Outline mode, the program should redraw your design faster than in
the normal mode.
17

Pixel Preview Mode

The Pixel Preview mode lets you see how your artwork may look after being rasterized (e.g., if
you export it to a JPEG file). In this mode, the program simulates rasterization. All vector-based
graphic elements in your document remain editable.

The program generates the pixel grid based on the size of the current sheet. For example, if the
sheet is 100x100px, your artwork will be presented by 100 pixels horizontally and 100 pixels
vertically.

To hide or show the pixel grid, use the Preferences panel.

Retina Pixel Preview Mode

The Retina Pixel Preview mode is identical to the Pixel Preview mode, but it will display the
artwork with doubled resolution. In other words, if the sheet is 100x100px, your artwork will be
presented by 200 pixels horizontally and 200 pixels vertically.

Minimalistic Interface

In order to preview your design with minimum distraction, hide most of the interface elements
using the button in the main menu. Tap on this button in order to restore panels and
buttons in the main window. The same can be done by pressing the Tab key on the external
keyboard.
18

The Tools Panel

Tools in the Tools panel are used to select, create and manipulate objects. Some tools have
additional options that can be displayed in the Control panel.

To activate a tool, tap on its icon in the panel.

Several tools that relate to each other can be grouped together in the panel. A small triangle
near the icon indicates that there are more tools available. For instance, tools that add different
shapes share the same button. The button shows the icon of the last used tool. To use this tool
again, just tap on the button. To activate a different tool from the set, long-press on the button
until all of the tools in the set are displayed. Then tap on the tool you need. To display all of the
tools in the set, you can also tap on the current tool two times.

- Move Tool: selects, moves and resizes objects

- Selection Tool: selects and manipulates path elements

- Pen Tool: creates paths with curves or straight lines

- Draw Tool: draws freehand lines

19

- Path Width Tool: creates strokes with variable widths

- Gradient Tool: adds and adjusts gradients

- Text Tool: adds text boxes and activates the text editing mode

- Text on Path Tool: places text along a path and activates the text editing mode

- Text in Shape Tool: adds text inside a shape and activates the text editing mode

- Eraser Tool: erases portions of paths of objects

- Knife Tool: cuts paths or objects

- Scissors Tool: cuts paths at selected anchor points

- Fusion Tool: removes segments and merges shapes

- Eyedropper Tool: copies appearance attributes from one object to another

- Free Transform Tool: moves, rotates, scales or skews objects

- Symmetrical Distort Tool: turns object's bounding box into trapezium

- Free Distort Tool: moves corners of object's bounding box

20

- Rectangle Tool: creates rectangles

- Rounded Rectangle Tool: creates rectangles with rounded corners

- Ellipse Tool: creates ellipses

- Polygon Tool: creates polygons with a customizable number of sides

- Star Tool: creates stars with a customizable number of points

- Circular Sector Tool: creates circular sectors and circular arcs

- Elliptical Arc Tool: creates elliptical arcs

- Line Tool: draws straight lines

- Sheets Tool: adds or deletes sheets and adjusts their size and position

The Tools panel can be displayed in the horizontal mode on iPhone and on iPad in the split
mode. In this case, you may need to scroll the panel to reach all of the tools.
21

The Control Panel

The Control panel, located at the bottom of the screen, displays additional settings for a
currently selected tool. Different tools may have different sets of options, or no options at all.
The settings are described together with tools in the dedicated sections.

The image above shows the Control panel while the Sheets tool is activated.

On an iPhone or iPad in the split mode, the Control panel may become hidden when you open
the Document, Path, Layers, Geometry or Appearance panel.

If the screen is not wide enough to fit the entire Control panel, then some controls may be
hidden. To display them, tap on an arrow icon on the left or right side of the panel.
22

Using Controls with Numeric Input

There are many parameters in the app that have numeric values such as stroke width, object
size, coordinates, etc. Controls that keep such values are operated in the same way. An
example of this type of interface is the Stroke width parameter in the Appearance panel.

Using the Slider to Change the Value

Touch the control and slide to the left to decrease the value, or slide to the right to increase it.

Using the Numeric Keyboard to Change the Value

Tap on a current value to edit it. This brings up the numeric keyboard.

The current value is displayed at the top.

The right-hand column of buttons has two steppers at the top. Use them to increase or
decrease the value with predefined steps.

The C button sets the value to zero. The Del button lets you remove the last digit.

The +/- button switches a positive number to negative and vice versa.
23

The numbers and decimal point are used to input a new value.

In order to apply the current value, tap on the OK button.

24

Program Settings
To open the program settings, choose Preferences in the main menu. If the document browser
is currently open, tap on the menu icon in the document browser and choose Preferences.

Color theme: Choose the appearance of panels, buttons and other elements of the interface.

Guides: Defines the color of guide lines.

Smart Guides: Defines the color of smart guides that appear for a short time when you move
and align objects.

Grid: Defines the color of the grid.

To set a new color, tap on a color circle and then choose a color from the Color panel.
25

Pixel Grid: Shows or hides the pixel grid when the program is working in the Pixel Preview
mode.

Undo/Redo buttons: Shows or hides the Undo and Redo buttons in the main window.

Corner handles: Show or hide handles that are used for rounding corners of shapes.

Tolerance: Sets the tolerance for selection and drawing tools. Greater values make it easier to
tap on a path or anchor point in order to select or grab it.

Pencil double-tap: Choose an action which should be performed after double-tapping with the
Pencil.

Disable touch drawing: Protects your design from being modified with touch gestures. The
drawing tools as well as selection and other editing tools will work only with Apple Pencil.
However, it will be possible to use touches as action modifiers (e.g., to select multiple objects).
Gestures for zooming, scrolling, canvas rotation as well as two- and three-finger taps (undo and
redo) will remain available.

Allow canvas rotation: Allows you to rotate the canvas using the two-finger gesture along with
zooming.

Draw/insert above the selection: Places an object right above the currently selected one in
the stack of objects (see the Layers panel). When the option is deactivated, an object is placed
atop of all of the objects within the current layer.

Skip image fill on creation: Turns off the image fill when a new object is created. Otherwise
the image used to fill one object will be used by default to fill following new objects until you
choose a different fill type.

Layers panel focus on selection: Scrolls the Layers panel up or down to make the name of an
object visible once it is selected on the canvas.

Restore Defaults: Restores the default state of the settings.

26

The Main Menu

In order to bring up the main menu tap the "sandwich" icon near the upper left corner of
the main window.

First row of buttons:

Undo: Reverse the last operation that you performed.

Redo: Reverse the last Undo operation.
Hide Interface: Hide all of the tools, panels and buttons except for one. To restore the
normal interface, tap on again. If a keyboard is connected to your device, you can
also use the Tab key.

Second row of buttons:

Cut: Cut selected object(s) to the Clipboard.

Copy: Copy selected object(s) to the Clipboard.
Paste: Paste the contents of the Clipboard into the document. A pasted object can
appear either above all of the objects in the active layer or above a currently selected
object depending on the Draw/insert above the selection option.
Duplicate: Duplicate selected object(s).
27

The rest of the commands:

Group: Group selected objects. Ungroup a selected group.

Clipping Mask: Apply a clipping mask. Release the clipping mask.
Select All: Select all objects on all sheets except for locked objects. Deselect all that is
currently selected.
Select Same > Appearance: Select objects with exactly the same properties in the same
order in the Appearance panel.
Select Same > Fill & Stroke: Select objects with all the same Fill and Stroke properties
placed in the same order.
Select Same > Fill Color: Select objects whose upper Fill properties have the same color.
Select Same > Stroke Color: Select objects whose upper Stroke or Brush properties have
the same color.
Select Same > Stroke Width: Select objects whose upper Stroke or Brush properties have
the same width.
Transform Again: Apply transformation according to the setting in the Transform panel.
Libraries & Images: Open the Libraries panel.
Import > Photos: Import a picture from Photos to the current document.
Import > File: Import an image from a graphic file to the current document.
Import > Camera: Take a picture using the camera and import that picture to the current
document.
Share > Export: Export the current document to a graphic file.
Share > Print: Print the current document.
Help > View Gestures: Show gestures with their function described.
Help > Tutorials: Open online video tutorials.
Help > Help: Open the online documentation.
Help > What's New: Open release notes on the Amadine website.
Help > Contact Us: Send your feedback to the developer.
Help > About: Find out the version of Amadine on your device. Get quick access to the
app's website and related social media.
Help > Store: Bring up the online store.
Preferences: Open the Preferences of the app.
28

Gestures
Basic Gestures

Undo

Tap with two fingers to reverse the last operation.

Double-tap with the Apple Pencil 2 (this must be enabled in the settings).

Redo

Tap with three fingers to reverse the last Undo operation.

Scrub

Slide over a numeric field to the right or left to increase or decrease its value.

Zoom and Rotate the Canvas

Pinch with two fingers to zoom in or out. You can also rotate the canvas if it is enabled by the
"Allow canvas rotation" option in the Preferences.

Pan
29

Drag the editing area to scroll the view.

Double-Tap

Double-tap on a text to activate the text editing mode. Double-tap on an object to enter the
Isolation mode.

Swipe Right

Slide to the right over the object's name in the Layers panel to select this object. In this way,
you can select multiple objects.

Swipe Left

Slide to the left over an item in a panel to access a panel's menu for this item. The menu may
contain commands like Delete or Copy. Such menus are present in the Layers, Sheets and
Appearance panels which have lists of objects or properties.

Hold and Drag

The Layers, Sheets and Appearance panels let you change the order of items (objects or object
properties) in these panels. To do this, touch an item in the list, wait a few seconds, then drag
the item to a new position.
30

Move Tool

Resize Proportionally

Hold a finger on the screen while you are dragging a handle on the object's frame with another
finger to resize this object proportionally.

Resize from Center

Hold two fingers on the screen while you are dragging a handle on the object's frame with
another finger to resize this object. The center of the object will stay in the same location.

Resize Proportionally from Center

Hold three fingers on the screen while you are dragging a handle on the object's frame with
another finger to resize this object. The object will preserve its aspect ratio while the center of
the object will stay in the same location.

Snap to 15 Degrees

Hold a finger on the screen while you are dragging the rotation handle on the object's frame
with another finger. The object will turn with 15 degrees steps.
31

Move and Selection Tools

Add to Selection

To select multiple objects, hold one finger on the screen and tap with another finger on objects
that you want to select or deselect.

Constrained Movement

To move an object vertically, horizontally or at 45 degrees, hold a finger on the screen while you
are dragging the object with another finger.

Create a Copy

To create a copy of an object, hold two fingers on the screen and drag the object with another
finger.

Pen and Selection Tools

Break Handles

To rotate a direction line independently from the paired one, hold a finger on the screen and
drag the handle of the direction line.
32

Snap Direction Line to 45 Degrees

To snap the direction line to 45 degree angles, rotate it holding two fingers on the screen.

Fusion Tool

Remove a Segment

To delete a segment, hold a finger on the screen and drag with another finger across the
segment.

Shape Tool

Draw Proportionally

To create a shape with the width equal to the height (e.g., circle or square), hold a finger on the
screen while you are drawing the shape with another finger.

Draw from Center

To draw a shape beginning from its center, hold two fingers on the screen. At the same time,
place another finger at the shape's center and drag.
33

Draw Proportionally from Center

To draw a shape beginning from its center, hold three fingers on the screen. At the same time,
place another finger at the shape's center and drag. The shape's height and width will remain
equal.

Apple Pencil 2

Pen Tool

Double-tap to finish drawing. Double-tap again to activate the Move tool. Double-tap once
more to return to the Pen tool.

Other Tools

Switch from the current tool to the Move tool and back.

Text Editing and Isolation Mode

Double-tap to exit the text editing or Isolation mode.

34

Keyboard Shortcuts
The app on iPad can work with a keyboard. This enables you to use keyboard shortcuts. To
bring up the menu with shortcuts, long-press the Cmd key.

File
Edit
Modify
Type
Tools
View

File

Cmd-Opt-I Import a graphic file to the current document.

Cmd-Opt-E Export the current document to a graphic file.
Cmd-Shift-P Bring up the program preferences dialog.
Cmd-P Bring up the standard Print dialog.

Edit

Cmd-Z Reverse the last operation you performed.

Cmd-Shift-Z Reverse the last Undo operation.
Cmd-X Cut a selected object to the Clipboard.
Cmd-C Copy a selected object to the Clipboard.
Cmd-V Paste the contents of the Clipboard into the document.
Cmd-D Duplicate a selected object.
Delete Delete a selected object.
Cmd-Opt-C Copy the style of a selected object.
Cmd-Opt-V Apply the style, copied to the Clipboard, to a selected object.
Shift-D Apply the default style to the selected object.
Cmd-L Lock a selected object.
Cmd-Opt-L Unlock all objects in the document.
Cmd-Shift-N Create a new layer.
Cmd-Shift-D Create a copy of the active layer.
Cmd-A Select all objects on all sheets except for locked objects.
35

Cmd-Opt-A Select all objects on the active sheet except for locked objects.
Cmd-Shift-A Deselect all objects.

Modify

Cmd-G Group selected objects.

Cmd-Shift-G Ungroup a selected group.
Apply the same transformation that was set up and applied using the
Cmd-J
Transform dialog the last time.
Cmd-Shift-] Place a selected object in front of other objects.
Move a selected object by one object forward within the object
Cmd-]
stacking order.
Cmd-Shift-[ Place a selected object behind other objects.
Move a selected object by one object backward within the object
Cmd-[
stacking order.
Cmd-Ctrl-U Combine selected objects using the Union operation.
Cmd-Ctrl-T Combine selected objects using the Intersect operation.
Cmd-Ctrl-S Combine selected objects using the Subtract operation.
Cmd-Ctrl-X Combine selected objects using the Exclude operation.
Cmd-Ctrl-V Divide selected objects into parts.

Type

Cmd-T Bring up the text properties panel.

Cmd-B Make selected text bold.
Cmd-I Turn selected text into italic.
Cmd-U Underline selected text.
36

Tools

V Activate the Move tool.

A Activate the Selection tool.
L Activate the Lasso tool.
P Activate the Pen tool.
D Activate the Draw tool.
W Activate the Path Width tool.
G Activate the Gradient tool.
T Activate the Text tool.
K Activate the Knife tool.
C Activate the Scissors tool.
E Activate the Eraser tool.
I Activate the Eyedropper tool.
Z Activate the Zoom tool.
Q Activate the Free Transform tool.
R Activate the Rectangle tool.
Shift-R Activate the Rounded Rectangle tool.
O Activate the Ellipse tool.
Shift-O Activate the Polygon tool.
Shift-S Activate the Star tool.
/ Activate the Line tool.
F Activate the Elliptic Arc tool.
S Activate the Sheets tool.
37

[ Decrease the diameter of the Pen, Draw and Erase tools.

] Increase the diameter of the Pen, Draw and Erase tools.
Temporarily switch most of the tools to the Move tool. Switch the
Cmd
Draw or Pen tool to the Selection tool.

View

Cmd-+ Zoom in the current view.

Cmd-"-" Zoom out the current view.
Cmd-0 Zoom the current sheet to fit the window.
Cmd-Opt-0 Fit the whole document into the window.
Cmd-1 Display the document at 100% scale.
Cmd-Y Activate the Outline Preview mode.
Cmd-Opt-Y Activate the Pixel Preview mode.
Cmd-Opt-Shift-Y Activate the Retina Pixel Preview mode.
Cmd-' Show the grid.
Cmd-Shift-' Snap to the grid when you are moving or resizing an object.
Cmd-Opt-' Snap to the pixel grid when you are moving or resizing an object.
Cmd-/ Show smart guides when you are moving or resizing an object.
Cmd-; Hide or show guides.
Space Activate the Hand tool which lets you scroll the canvas by dragging it.
Tab Hide or show the toolbar and most of the panels.

Modifier Keys and Shortcuts

When a particular tool or editing mode is activated, the app enables additional modifier keys
and shortcuts. Choose a tool to jump to the related hotkeys:

Eyedropper tool
Draw tool
Rectangle, Rounded Rectangle, Ellipse, Polygon, Star, Circular Sector, Elliptical Arc and
Line tools
Selection and Lasso tools
Pen tool
Path Width tool
Sheets tool
Move tool
Eraser tool
38

Free Transform tool

Fusion tool
Knife tool
Selection tool while rounding corners
Scissors tool
Text tool
39

Creating Documents
To create a new document, tap on the plus icon in the document browser. The New Document
dialog will open. You should set up document properties and tap on the Create button to have
the document created.
40

The New Document Dialog

The combination of the Type and Preset options lets you select one of the predefined
templates. The Type lets you choose a set of presets by usage (e.g., Web). Then you can select
a particular sheet size from the Preset drop-down list.

The Units drop-down menu lets you select measurement units to show the Width and Height.
The same measurement units will be used for sizes and distances on the canvas. You can
change units any time later.

The Width and Height give you an alternative way to set up the sheet size. Instead of choosing
a template, you can set any size you want directly.

The Orientation buttons let you choose either horizontal or vertical orientation of a sheet by
swapping the Width and Height values.

The Mode popup menu lets you choose between the RGB and CMYK color models.

The Profile popup menu defines the color profile for the document.

Notice that the dialog helps you create the first sheet. Your document can consist of multiple
sheets of different sizes. Once a new document is created, you will be able to add more sheets.
41

Opening Documents
To open an existing document, tap on it in the document browser.

Documents can be opened from either your device or on iCloud Drive.

Documents created on macOS, iOS or iPadOS are compatible. In other words, a design
created on Mac can be opened on iPad, and vice versa.
42

The Document Browser

The document browser is used to create new documents and also to open previously saved
ones.

When you run the app for the first time, it displays the document browser with only the plus
icon in the main part. It is used to create a new document.

The main part of the browser can also display saved designs. To open any of them, tap on it.

The document browser supports basic commands for working with files. Long-press on a
document icon to open the context menu. Then you can choose to rename a document as well
as to delete, copy and so on.

The left pane lets you choose the location. To access files on your device, select On My iPad (or
iPhone). If you are using iCloud to store documents, select iCloud Drive.

To find one of recently edited documents, tap on the Recents icon at the bottom of the screen.

There are several buttons near the upper left corner of the screen. The plus button lets you
create a new document.
43

Using the sandwich icon , you can open a menu which gives you access to additional
information about the app and online resources such as video tutorials, social media and store.
The Preferences item opens the app's settings.

The Select button lets you select multiple documents in order to delete, move or do something
else with all of the selected files.

When the main window is open, you can get to the document browser by tapping on in
the upper left corner.
44

Saving Documents
The app saves documents automatically when you open the document browser from the main
window, and also when you switch to another app.

The app stores documents in its own format. Document files have the "amdc" file name
extension. The same format is used on all platforms that are supported by the app. Documents
in this format are compressed. There is another format "amdn" that is used for storing
documents without compression. To save your document in this format, bring up the Export
panel and choose the AMDN format.
45

Document Settings
The Document panel lets you set up your document.

To open the panel, tap on the corresponding icon in the main window.

View Mode: Lets you select one of document view modes. You can choose a mode that is
most suitable for editing your graphics. Or, you can preview how your design might look once it
is exported to a raster format.

Smart Guides: Shows smart guides when you move or resize objects.

Snap to Pixel: Snap objects to the pixel grid. This makes sense when you need to save your
vector graphics in a raster file format. For more details, read Align Objects to the Pixel Grid.

Snap to Grid: Allows the program to snap objects to the grid when you move them.

Grid: The eye icon shows or hides the grid. The gear icon opens the Grid Options panel.

Guides: The lock icon locks or unlocks all guides. The eye icon shows or hides all guides. The
gear icon opens the Guides panel.
46

Units: Defines the measurement units for the current document.

Color Mode: Lets you choose between the RGB and CMYK color models.

Color Profile: Defines the color profile for the document.

Fx (Effects) Quality: Defines how accurately effects such as shadow or glow should be
displayed on the canvas. With higher values, effects will be rendered more smoothly. Smaller
values make the program interface more responsive when you are editing a complex document.
Note that this option does not affect the quality of exported graphics.

Sheets: Opens the Sheets panel.

47

Layout Basics
Your documents can consist of one or multiple sheets and layers. There must be at least one
sheet and one layer at any time, and you can add or delete them as your work progresses.

Layers and sheets help you keep your document structure manageable even with a complex
design by putting together elements that are related to one other.

Sheets

A sheet is an area on the canvas where you create your design. If you are not familiar with
graphic editors, you can think of a sheet as a page in a text editor, or printable area. The
boundary of a sheet defines a crop area. Objects placed outside the sheet partially or
completely will be trimmed.

Sheets are located on the canvas side by side. Frequently, each sheet holds a separate design,
but all of the sheets in a document are linked together as parts of a particular project (e.g.,
pages of a brochure, or different versions of the same design).

It is possible to change the size and position of sheets individually. You can learn about this in
the Sheets section.

An example of how sheets can be used is a design of two states of a button: normal and
pressed. It is useful to store all artwork in the same document. In this case, each button takes a
separate sheet.

Button in the normal state Button in the pressed state

Each state of the button

takes a separate sheet
48

If you already used other graphics software, you could use the artboard term for what we call a
sheet.

Layers

Layers can help you arrange objects within a sheet. A layer serves you like a folder, inside of
which you can place objects. By changing the properties of a layer (such as visibility or
opacity), you can manipulate all objects inside of it.

Objects added to a document are arranged as a layered structure. It becomes clear that, when
you place objects one over another, they overlap. Objects are stacked even if they don't
overlap. The program lets you put the objects in different layers (inside those virtual folders)
without breaking the global stacking order. We can say that layers define the vertical structure
of the document.

Let's have a look at a small example—a button. The artwork consists of three parts organized
as three individual layers: Background, Button and Text. This structure lets us separate the
design of the button from the background and text. The background was added only to preview
the artwork with a certain color around. The background won't be exported because the button
will be used in the interface, which already has the background.

Taking text aside from other objects makes sense if it is a variable part of the design. We may
need to create multiple buttons with different texts (e.g., "Cancel", "OK", etc.). In this case, you
can place all of the text in a separate layer. By hiding all of the text but one, you can get one of
the buttons. To edit the button itself, you hide the whole layer containing the text.
49

You can manage layers using the Layers panel.

50

Sheets
Documents can have one or multiple sheets. You can specify the initial size of sheets in the
New Document dialog when you are creating a new document.

Activate a Sheet

To activate (or select) a sheet, tap on its name in the Sheets panel. If you are going to work with
multiple sheets, then it makes sense to name sheets appropriately in order to distinguish them
in the list.

Another way to activate a sheet is to tap on it with the Sheets tool .

Objects and Sheets

Each sheet has its own coordinate system. The object coordinates are calculated in relation to
the active sheet.

Each object is associated with some sheet. There is no strong linking between sheets and
objects. Once an object is added on top of a sheet, the object becomes associated with this
sheet. Then, any time you select that object, the respective sheet becomes activated.

Later, it will be explained how to rearrange sheets on the canvas. When you change the location
of a sheet, objects can either move along with it, or they can keep their global position. In the
former case, all objects that are placed over the sheet completely or partially will move no
matter which sheet they belong to. After that, all objects that were relocated together with the
sheet will belong to this sheet.

If you choose to move objects together with a sheet, make sure that all of your artwork either
moves or stays. Otherwise, you can break the design apart.

The Move artwork with sheet button controls the ability to move objects when you
relocate a sheet. It is available in the Control panel when the Sheets tool is activated.

Manage Sheets using the Sheets Panel

To open the Sheets panel, open the Document panel. Then tap on the Sheets button.
51

The Sheets panel lists sheets present in the current document. If there are multiple sheets in the
document, give them meaningful names to easily differentiate one sheet from another. In order
to rename a sheet, double-tap on its name in the list.

The panel lets you add and delete sheets. See the Add and Delete Sheets subsection for more
details.

A sheet can be made invisible by tapping on an eye icon near the sheet's name.

To define how sheets should be arranged on the canvas, tap on the button. The Move and
Arrange Sheets section has more details on this topic.

Sheet Properties

Properties of each sheet can be accessed by tapping on the corresponding icon. The Sheet
Properties panel lets you set up the size, orientation, and position of the sheet.

You can choose a pre-defined sheet size by selecting a combination of Type and Preset. You
can also input the width and height directly into the Size fields.

Each sheet can be positioned on the canvas by inputting the X and Y coordinates. Notice that
these fields always operate with the global coordinates.

You can also change the origin point using the 9-point Anchor control. It defines which of the
nine points should appear at the coordinate set by X and Y. For example, if you want to place
the center of the sheet at the zero coordinate, tap on the point in the center of the Anchor
control.
52

The Orientation buttons simply swap the current width and height.

Add and Delete Sheets

In order to add a new sheet, tap on the plus button at the bottom of the Sheets panel.

By default, a new sheet has the same size as one that was previously selected in the list. That
is, if your document already has big and small sheets, and you want to have one more small
sheet, select the small one before tapping on the plus.

To duplicate a sheet, activate the Sheets tool . Place two of your fingers on the canvas.
Swipe over the sheet to have its copy created. Then drag a new sheet to an empty place. If you
want to duplicate the sheet together with objects, activate the Move artwork with sheet
option in the Control panel.

To delete a sheet, swipe along its name to the left, and then tap on the trash icon. You cannot
delete the last sheet.

There is an alternative way to add and delete sheets. This can be done using the Sheets tool
that is described below.

Move and Arrange Sheets

You can select how sheets should be arranged on the canvas by tapping on in the Sheets
panel. This button opens another panel.

The Layout options define how sheets should be arranged on the canvas.

The Right-to-Left Layout option inverses the order of sheets when you add them.

The leftmost button in the Layout settings places sheets in a fixed number of columns and
variable number or rows. The Columns parameter defines how many columns there should be.
53

Identically, you can set up the number of rows when the second Layout button is selected.

The Spacing field defines the distance between sheets vertically and horizontally.

To apply a new setting, simply tap the Rearrange button.

Jump to a Sheet

In a document with multiple sheets, one or several of them may appear outside the editing
area. You can use scrolling in order to access such a sheet. The Sheets panel lets you jump to a
sheet by tapping on the sheet's name. This function scrolls to the sheet and fits it into the
editing area.

Sheets Tool

The Sheets tool lets you add, delete and relocate sheets. To activate this tool, tap on its
icon in the Tools Panel.

Once the tool is activated, the Control panel displays the related settings. Later, we'll discuss
the purpose of each of them.

Select a Sheet

In order to delete, move or resize a sheet, you should select it.

To select a sheet, tap on it with the Sheets tool. You can also tap on the sheet name in the
Sheets panel.

A selected sheet displays a frame with handles. The Sheets panel indicates the selected sheet
in sync with the tool. You can use any of them to select another sheet.

Resize a Sheet

To resize a sheet, tap on it with the Sheets tool. Then drag a side or corner handle.

To input the exact width and height in pixels or other units, use the Sheet Properties panel.

Add a Sheet

There are two ways of adding new sheets using the tool in addition to the method given in the
Add and Delete Sheets section.

To add a new sheet with the same dimensions as the selected one, tap on the plus icon in the
Control panel.
54

You can apply a Preset and change the Orientation of a sheet any time later using the Sheet
Properties panel.

Another way to add a new sheet is to draw it. Activate the Sheets tool. Touch and drag over the
free space on the canvas. Detach your finger when the sheet has a proper size.

Delete a Sheet

To delete a sheet, tap on it with the Sheets tool. Then tap on the trash icon near the left
side of the screen.

Relocate a Sheet

To relocate a sheet, drag it with the Sheets tool.

A more accurate way is to input new coordinates into the X and Y fields in the Sheet Properties
panel.

The Move artwork with sheet option in the Controls panel lets you move objects located
on the sheet together with the sheet. Normally, this option should be activated.

The Coordinate System

There are two independent coordinate systems linked with sheets. The global coordinates are
only used to define the location of sheets on the canvas. Two sheets that have the same
Position and Anchor point overlap at least partially.

Each sheet provides its local coordinate system for objects on it. The coordinates of an object
are defined in relation to the sheet corner which serves as the zero point. Another object on a
second sheet may have the same values for X and Y. But, these objects will have different
locations on the canvas because they exist in different coordinate systems defined by the
respective sheets.

Modifier Keys and Shortcut Summary

With an external keyboard, you can use the following shortcut and modifier keys.

Shortcut:

S activates the Sheets tool.

Sheets tool modifier keys:

Space switches to the Pan mode.

55

Command switches to either Move or Selection tool depending on which of them was
active most recently.
Option lets you duplicate a sheet. Drag a sheet to create its duplicate.
56

The Grid
The grid can help you place objects on a sheet. It can also be useful when you resize an object
or sheet by dragging handles opposing inputting exact dimensions.

To show or hide the grid, use the Document panel. Tap on the eye icon of the Grid option.

To make an object or its part snap to the grid, activate the Snap to Grid option.

Setting Up the Grid

In order to set up the grid in the current document, tap on the respective gear icon in the
Document panel.
57

Spacing: Sets the distance between the grid lines horizontally and vertically.

Subdivisions: Divides each grid cell into several parts. For example, type "3" in the X edit box
to split cells into three parts horizontally.

Show on Background: Defines whether the grid should be displayed in front or behind
everything else on the canvas.

Grid Color: Defines the color of the grid. Notice that the Grid Color in the Preferences
specifies the default color for all new documents. You can use the Grid Options panel to
change the grid color in a particular document.
58

Layout Guides
Guide Lines

Guide lines (or guides) are used to align objects on the canvas. They can also be used to
visually split a sheet into several parts.

To control guides, use the Guides options in the Document panel.

The lock icon locks and unlocks all guides.

Using the eye icon you can hide or show all guides.
59

The gear icon opens the Guides panel.

To add a guide, tap on one of the Add Guide buttons. They add horizontal and vertical guides.
Another way to add a guide is to bring up the context menu of the canvas and select Guides.
Then choose either Add Horizontal or Add Vertical.

To delete all guides, tap on the Delete All Guides button.

In order to delete a particular guide, use the Layers panel where guides are listed among other
objects. The panel can also be used to lock and hide guides individually.

The Make Guide button creates a guide line out of a selected path. The Release button
performs the opposite action turning a guide made from a path back into the path.

To move a guide, drag it on the canvas with the Move tool .

To input an exact coordinate, select a guide by tapping on it, and then type the coordinate into
the X or Y field in the Geometry panel.

To delete a guide use the Layers panel as you do with objects.

In the app's Preferences, you can change the color of guides.

Smart Guides

When you move or resize an object, the program helps you align it with others using smart
guides.
60

A smart guide is a line that looks like a regular guide, but shorter. It appears in your document
automatically when an object you manipulate becomes aligned with something in the design.
The smart guide that is displayed at that moment visually links the object with the point it is
aligned to. If you move the object farther, the alignment will be broken, and the smart guide will
disappear.

When you are moving one of the ends of a line, a smart guide can display the extension of the
line helping you snap to the same angle. A small cross indicates the original location of line's
end.

If you don't need smart guides, turn them off using the Document panel.

Create a Guide from a Path

You can create a guide line from a path. This may be helpful if you need a guide line with unique
properties. For example, a customized guide can have an angle other than 0 or 90 degrees.

To turn a path into a guide, use the Make Guide button in the Guides panel.

You can also convert a guide back into a path by using the Release button.
61

Select Objects
In order to edit an object or its part, you should select it. Then you can use tools or panels to
modify the object's properties, such as the shape, color, size and others. The program lets you
select an object, an object's part or multiple objects using different methods.

If an object is locked, it cannot be selected directly on the canvas.

Select a Single Object

To select an object, activate the Move tool , and then tap on the object.

As a rule, you should tap on a visible part of an object to select it. For example, when a
rectangle has a stroke but there is no fill, you should tap on the stroke. Tapping inside the
rectangle won't select it. On the other hand, if the Fill option is on, you can tap anywhere on the
rectangle.

Select Multiple Objects

To select several objects, activate the Move tool , and then tap on each of the objects
holding a second finger on the screen.

The Select Multiple mode is convenient for selecting multiple objects with just one finger.
Choose the Move or Selection tool. Activate the Select Multiple mode in the Control
panel. Then tap on objects to select them. Or tap on selected objects to deselect them.

Another way to select multiple objects is to outline those objects with the selection frame.
Activate the Move tool. Place your finger at an empty point near one of the objects and drag
toward it. The selection frame will appear between the starting point and the current position of
the tool. Make the selection frame big enough to completely or partially outline the objects you
want to select.

To deselect one of several selected objects keeping the rest of them selected, place one finger
on the screen, then tap with another on that object.

Select All Objects

To select all objects that are not locked, use the Select All command from the main menu.
62

Select an Object in the Layers Panel

You can select an object by tapping on its name in the Layers panel.

Another way to select an object is to swipe over its name to the right. Swiping again will
deselect it.

To select multiple objects, use the swipe gesture as described right above.

Select Objects with Identical Properties

You can select objects that have the same property or a set of properties in the Appearance
panel. This may be useful when a design contains many similar objects (e.g., snowflakes or
flowers on a postcard). You could create one, make it look as you wish and then make its
copies. Once you decide to change their color, you have to select all of them. In such cases,
commands from the Select Same menu come in handy. To bring up those commands, tap on
the main menu icon and then on Select Same.

To select all objects with identical properties:

1. Select one object that will be used as a model to search for others.
2. Choose one of the options in the Select > Select Same menu.

The following selection commands are supported:

Select Same > Appearance selects objects with exactly the same properties in the same
order in the Appearance panel.
Select Same > Fill & Stroke selects objects with all the same Fill and Stroke properties
placed in the same order. Effects such as shadow are ignored.
63

Select Same > Fill Color selects objects whose upper Fill properties have the same
color. Stroke properties (including their location in the list in relation to Fill) as well as
effects are ignored. The transparency of the color is also taken into account.
Select Same > Stroke Color selects objects whose upper Stroke properties have the
same color. Fill properties (including their location in the list in relation to Stroke) as well as
effects are ignored. Notice that stroke width (whether it is constant or variable) doesn't
matter. So, both objects will be selected if one has a black Stroke and the other has a
black Brush property. The transparency of the color is also taken into account.
Select Same > Stroke Width selects objects whose upper Stroke properties have the
same width. Fill properties (including their location in the list in relation to Stroke) as well
as effects are ignored. Notice that Stroke and Brush with the same width are treated as
identical. Strokes with variable width (e.g, created with the Path Width tool) are ignored.

Be cautious with this selection tool. It might select more objects than you expect. Try to make
sure visually that there are no objects that you didn't want to select.

Deselect an Object

To deselect one or multiple objects, tap with the Move tool at any empty space on a sheet
or on the canvas.

Other ways to deselect objects are the Deselect command in the main menu and the Deselect
command in the context menu.

Isolation Mode

The Isolation mode is used to work with a particular object or its part. In this mode, only the
isolated object can be edited. The rest of the objects are locked and displayed in dimmed
colors. As soon as you deactivate the Isolation mode, those objects will become unlocked.

You can isolate a standalone object, an object that is a part of a compound object or group.

To isolate an object, double-tap on it with the Move or Selection tool. If an object is in a group
that itself is a part of another group, tap on the object several times until you reach it.

To exit the Isolation mode, tap on the Exit Isolation Mode button at the top of the screen or
double-tap outside the isolated object.
64

In the Isolation mode, the Layers panel hides the list of layers and objects and shows the
"Isolation Mode" item as the top level object. The isolated object will be shown as its subitem.

Select Objects Inside a Group

It is possible to access an object inside a group without ungrouping it. There are two ways to
do this. One of them is to use the Isolation Mode discussed earlier.

Another way is to make use of the Layers panel. You should tap on a V-shaped icon near the
name of the group to expand it and show the grouped objects. Then tap on the name of the
object you want to select.

Finally, it is possible to select an object in a group by tapping on it with the Selection tool.
Neither the entire group nor other objects in it won't become selected.

Defining the Order of Objects

A currently selected object can define where an object that you add to the design should
appear in the stack of objects. This concerns different types of objects that you can add: paths,
texts, graphics from the built-in libraries, pasted and imported objects. When the Draw/insert
65

above the selection option in the Preferences is activated, a new object will be placed right
above the selected object. When the option is deactivated or none of the objects is selected, a
new object will appear at the upper position in the active layer. The overall order of layers and
objects can be changed using the Layers panel.
66

Delete or Hide an Object

To delete an object, select it and then use any of these methods:

Press the trash bin icon in the main window.

Slide over the object's name to the left in the Layers panel. Then tap on the trash bin icon.

You can delete an object from a group without ungrouping it.

After removing an object, you can restore it by using the Undo command from the menu or by
tapping on the screen with two fingers. To reverse the last Undo operation, tap with three
fingers.

Hide an Object

If you need an object to disappear without deleting it from the document, you can hide it. If you
hide an object that interacts with other objects after applying a blend mode, Boolean operation
(e.g., Subtract) or something else, that interaction will also disappear as if the object doesn't
exist. If you show the object again, effects related to this object will be restored.

To hide an object, tap on the eye icon to the right from its name in the Layers panel.

To show an object, tap on the eye icon again.

You can hide an individual object, group or layer.

67

Move, Resize and Rotate Objects

The geometric properties of an object can be modified directly on the canvas or using the
Geometry panel. The latter has more options, and also lets you input numerical values, which
provides better accuracy. Editing objects right on the canvas is usually faster and more
convenient.

You should select an object before modifying its properties. A selected object displays its
boundary box with handles in the corners at the middle of each side. We will use these handles
later.

Most of the properties discussed below can be adjusted with an individual object, several
objects or a group selected. Multiple selected objects, even not grouped, will respond to
adjusting parameters in the same way as a group. For example, if you select two squares and
change the width in the Geometry panel, the new value will be applied not to each of the
squares but to the selection boundary. In order to apply the same value to all selected objects,
use the Transform panel.

Manipulating an Object on the Canvas

Move an Object

To move an object, activate the Move tool . Then tap on the object and drag it.

As a rule, you should grab a visible part of an object. For example, when a rectangle has a
stroke but there is no fill, you should drag the outline of the object.

Resize an Object

To resize an object, drag a corner or side handle on the object's boundary box using the Move
tool . To preserve the aspect ratio, hold down a second finger on the screen while dragging

a handle. Or activate the corresponding mode .

When you drag a corner or side handle the opposite corner or side of the object's boundary
retains its position by default. To resize an object symmetrically, hold down two fingers on the
68

screen while dragging a handle. Or activate the corresponding mode . In this case, the
center of the boundary will preserve its location.

Rotate an Object

To rotate an object, activate the Move tool . Drag the round handle around the object's
center.

Holding down a second finger on the screen, you can rotate with 15 degrees steps. The same
can be done by activating the corresponding mode in the Control panel.

The default center of rotation coincides with the center of the object's boundary. To set any
other point as the center of rotation, tap on in the Control panel. Then drag a circular
handle, that indicates the rotation center, to a new place.

Controls of the Move Tool

The Move tool can operate in different modes. They are available in the Control panel as soon
as you activate the tool.

1 - Select multiple objects. Tap on objects that you want to select one after another. A tap on a
selected object will deselect it. Also, a gesture is available.

2 - Select a new center of rotation for a selected object.

3 - Resize an object preserving its aspect ratio. Also, a gesture is available.

4 - Resize an object symmetrically in relation to its center. Also, a gesture is available.

5 - Constrain an object to move only vertically, horizontally or along a ±45 degree axis. If you
rotate the object, its angle snaps to 15 degrees steps. Also, a gesture is available.
69

Using the Geometry Panel

The Geometry panel helps you manipulate objects by setting up exact values for the object's
location, size or rotation angle. The Move control on the panel lets you move vertically or
horizontally as you could do using the keyboard arrows.

Modifier Keys and Shortcut Summary

With an external keyboard, you can use the following shortcut and modifier keys.

Shortcut:

V activates the Move tool.

Move tool modifier keys:

Space switches to the Pan mode.

Command switches to the Selection tool.
Shift allows you to select multiple objects.
Shift allows resizing an object preserving its aspect ratio.
Shift lets you rotate an object in 15 degree steps.
Option lets you duplicate an object. Option-drag an object to create its duplicate.
Option lets you resize an object preserving the location of its center.
Option-Shift resizes an object preserving its aspect ratio and location of the center.
70

The Geometry Panel

The Geometry panel lets you adjust an object's size and coordinates, and change its other
properties. To open the panel, tap on the corresponding icon in the main window.

1 - Scale stroke and other effects when the object is resized. For example, making an object
twice as big, you can expect that its stroke and shadow will be two times wider.

2 - The object's width and height. The Maintain Aspect Ratio option can prevent an object's
deformation when you change one of its dimensions. The Maintain Aspect Ratio icon is
located between the width and height controls.

3 - The object's coordinates.

4 - Reference point selector. The coordinate defined by X and Y is the location of the reference
point. The 9-point selector lets you choose a corner, the middle of any side or the center.

With the same coordinates but different reference points, an object will have different locations.
71

5 - The rotation tool. You can either input the angle into the text field or rotate the circular
control.

6 - The Shear tool.

7 - Move an object horizontally or vertically. Taps on any of the arrows will move the object in
steps. If you press on an arrow, the object will move continuously. You can also press on two
neighbouring buttons to move the object diagonally.

8 - Flip horizontally or vertically.

9 - Rotate an object 90 degrees left or right.

10 - Reset the boundary of a selected object. For example, once you rotate an object, its
boundary turns accordingly. The command creates a new boundary whose top and bottom are
horizontal.
72

11 - Open the Transform panel.

Move and Rotate an Object with the Geometry Panel

To move an object to a new location, change its X, Y or both coordinates. Notice that, by
default, X and Y coordinates define the location of the top left corner of the object's boundary.
You can choose one of nine points using the Reference Point selector.

The Align buttons in the Arrange section let you move an object to the center or edges of the
current sheet. Normally, these commands require that you select several objects that should be
aligned. If you select one object, it will align to the sheet.

In order to resize an object, change its dimensions. Use the Maintain Aspect Ratio button to
preserve the object's aspect ratio while you are modifying either the width or height.

To rotate an object, input a new value by tapping on the angle field, or simply drag the handle
on the circular rotation tool.

In order to rotate an object with 90 degree steps to the left or right, tap on the corresponding
bent arrow icon.

Apart from rotation, you can also mirror objects using the vertical and horizontal flip buttons.
73

Align and Distribute Objects

In order to access the Align, Distribute, Spacing or Arrange tools, open the Arrange section of
the Geometry panel.

Align Objects

This section explains how to align objects to one other. If you want to align an object to the grid
or guide line, go to the corresponding page.

To align objects, select two or more of them. If only one object is selected, it will be aligned to
one of the edges or center of the active sheet.

1 - Align to the leftmost object.

2 - Align objects' centers horizontally.

3 - Align to the rightmost object.

74

4 - Align to the upper object.

5 - Align objects' centers vertically.

6 - Align to the lower object.

Let's take the first tool to explain the alignment principle. The program finds an object whose
left side or a single point is the most far to the left compared to other objects. We can call this
object a key object. Then the rest of the objects are moved to the left until they reach the
leftmost point of the key object. The key object always retains its position. Notice that the
program considers only the path. Strokes, shadows or other properties that may visually affect
the objects' dimensions are not taken into account.

When you choose to align objects' centers, the centers take the same horizontal or vertical
coordinate. This coordinate is calculated as the center of the boundary of all currently selected
objects.

Distribute Objects

The Distribute tools equalize the distance between sides or centers of selected objects. You
should select three or more objects in order to distribute them.

To distribute objects, the program finds two key objects. These are the rightmost and leftmost
objects to distribute horizontally, or the upper and lower objects to distribute vertically. The key
objects retain their positions. All the remaining objects will be relocated in order to comply with
the selected Distribute command.
75

Make equal distances between:

7 - Left sides of objects.

8 - Centers of objects horizontally.

9 - Right sides of objects.

10 - Tops of objects.

11 - Centers of objects vertically.

12- Bottoms of objects.

The image below demonstrates the original location of the objects at the top, and the result of
the Distribute centers of objects horizontally tool.

Set Up Spacing

The Spacing tools are used to set up an exact distance between objects. You should select two
or more objects in order to set up spacing between them.

13 - Specify spaces between objects horizontally.

14 - Specify spaces between objects vertically.

76

In order to set new spacing, the program defines a key object (e.g., the leftmost for horizontal
spacing). The position of this object will be fixed. All the remaining objects can be moved in
order to make spaces between them equal to the value you set.

The image below shows what happens with the objects' locations when you set the horizontal
spaces between them to a particular value.

Arrange Objects

Unlike the tools described earlier, the Arrange buttons don't change the location of objects on
the canvas. They let you change the order in which objects overlap each other. Let's imagine
that we have a circle placed behind a square. They overlap so that the square hides a part of
the circle. Now, if we swap the order of the objects in the stack, the circle will appear in front of
the square. This is what the Arrange buttons do.

15 - Place a selected object one level higher in the stack.

16 - Place a selected object one level lower in the stack.

17 - Make a selected object the upper in the stack.

18 - Make a selected object the lower in the stack.

Notice that the Arrange buttons change the order objects within their layer. If layer A is above
layer B in the Layers panel, then any object from B cannot appear in front of any object from A
on the canvas.

Align and Distribute Anchor Points

The Align, Distribute and Spacing tools can also work with individual anchor points including
those that belong to different paths. The Select Anchor Points subsection describes how you
can select anchor points.
77

Lock an Object
You can lock an object to prevent it from moving or being edited. In fact, locking prevents the
object from being selected. As a consequence, you won't be able to modify it by mistake.

To lock an object, select it and tap on the Lock icon in the Layers panel.

It is possible to lock not only an individual object but a group or layer.

To unlock an object, tap on its Lock icon in the Layers panel.

78

Group and Expand Objects

Group or Ungroup Objects

Grouping objects lets you combine them into a single piece of design. The created group can
be moved, rotated and resized as you could do with a single object. Some other manipulations
like adding Fill and Stroke or applying distortion are also possible. This may be useful if your
whole design or its part is created out of several primitive objects, and you don't want it to fall
apart when you move or rotate it. For example, you can create a keyboard as a number of keys
and the body. Then you group them together to have the keyboard as a single unit.

The item in the Layers panel that represents a group is named Group by default. You can tap on
the V-shaped icon near the group name to access the grouped objects.

A group can include another group and so on. In this case, we say that groups are nested.

To group objects, select them. Then choose Group in the main menu.

To ungroup, select the group and choose Ungroup in the main menu.

It is possible to select an individual object in a group on the canvas without ungrouping it. To do
that, use the Selection tool.

The Group and Ungroup commands can also be found in the Path panel.

There are two other types of groups. Compound groups are explained in one of the following
sections. Clipping groups are related to the clipping masks which are described in the Using a
Clipping Mask section.
79

Using the Layers Panel for Grouping and Ungrouping

In order to ungroup objects, select one or several of them in the Layers panel. Then drag the
selected objects outside the group. Objects moved in this way outside the group will become
ungrouped. Once a group is empty it disappears. This method also works with compound and
clipping groups. The latter though have a small difference. If you move all but one object
outside a clipping group, the last object will be moved outside automatically and the clipping
group will disappear.

To group objects, drag the name of one object in the Layers panel and drop it onto a second
one. In this way, you can create a clipping group. The second object will become a clipping
mask for the object that you have dropped.

In order to add a new object to an existing group of any type, drag the object into the group in
the Layers panel.

Compound Group

By applying one of the Combine commands (e.g., Union) to multiple objects, you can create a
compound group. Like groups discussed earlier, a compound group serves as a container that
includes the original paths. This means that you are still capable of modifying these paths and
therefore updating the result. For example, we can create a hole in a shape using the Subtract
operation. Then the original objects will appear inside a compound group, which can be
operated mostly like a regular object. But, at the same time, you can reach the original shapes
using the Isolation mode or the Layers panel, and change the location or size of the object's
body or whole.

Original Shapes

Compound Group
80

Expand Objects

The Expand button, located in the Path panel, turns an object into a number of typically more
primitive objects. Those objects together look exactly like the original one. This kind of
"disassembling" of an object lets you use tools that can work only with the entire object but
cannot work with its parts.

The following image shows an arrow with a stroke and gradient fill expanded into two objects:
an arrow with gradient and the arrow outline. All created objects were manually moved apart for
the illustration.

The result of expanding is a group of objects. After expanding in the example above, the outline
and gradient are grouped. This is the most common case.

The Expand feature has many different use cases. They often rely on the fact that vector
objects are expanded into paths that you could access independently. This enables object
editing that is not possible in other ways. For example, the Rounded Rectangle tool creates a
parametric object. The shapes of its corners are defined by respective settings. But these
settings limit your capabilities to adjust the object's shape. Once you have reached that limit,
you can expand a rounded rectangle and edit it as a path using the Selection or other tools.

Another case is text. Once it is expanded, you can make letters look differently from the original
font. For instance, rotate individual letters, turn the "O" letters into smiley faces and so on.

There is no way to switch back and forth between the expanded object's state and the original
one. That can be done using the Undo command by canceling all the editing you did after
expanding. Before expanding, it is useful to create a duplicate of your original object or text just
in case you need it later.

In certain cases, you have to apply Expand more than once to actually expand an object. This
is linked with the corner rounding feature. After adjusting a corner radius, expanding at the first
time will apply a new radius. At the second time, the object will be expanded.
81

Align Objects to the Pixel Grid

Create a Pixel-Aligned Object

To create a pixel-aligned object, activate the Snap to Pixel option in the Document panel.

As you draw a standard shape or create a path using the Pen tool, the path will snap to pixels.
As a result, all anchor points of the created path will be aligned to the pixel grid.

Align an Object to the Pixel Grid

To have a rasterized line look sharp, its width should be a whole number in pixels (no fractions).
Also, this line should be aligned to the pixel grid.

In many cases, when you align an object to the pixel grid, you want to align vertical and
horizontal lines to the pixel grid. This can be done by aligning anchor points to the grid. To do
this, activate the Snap to Pixel option in the Document panel. It can also be useful to display
the pixel grid by setting the View Mode option to Pixel or Retina. Then slightly move anchor
points near their locations with the Selection tool to snap them to the grid.

The pixel grid becomes visible at a zoom of 1000% or higher.

The Pixel Preview mode is also discussed in The Main Window section.

Why should you Align Objects to the Pixel Grid?

The alignment of objects to the pixel grid may make a big difference if your graphics are going
to be exported in a raster format.

In the following example, we have two identical vector rectangles. The one on the right is
aligned to the pixel grid. The left one is not aligned to the pixel grid horizontally. Its offset is 1/2
pixel. Both rectangles have 1 pixel wide black stroke.

In the normal preview mode, both rectangles have a perfect look as it is expected from vector
graphics.
82

Two identical rectangles in the normal mode

The Pixel Preview mode reveals the appearance of the rectangles once they have been
rasterized. Vertical lines of a misaligned left rectangle become blurred. This happened because
1 pixel vector line was mapped not on one but on two columns of pixels.

The same rectangles in the Pixel Preview mode

To activate the Pixel Preview mode, set View Mode option to Pixel.
83

Introduction to Layers and Objects

Using Layers to Organize Objects

Complex designs can consist of hundreds or thousands of elements. Even if you name all of
them appropriately in the list of objects, it would still be difficult to manage them. Layers
provide a way to organize objects into sets. A layer serves as a folder on your disk that contains
some number of items in isolation from others.

A new document has only one layer. All objects appear in this layer by default. You can add
more layers with meaningful names, and organize elements of your design into groups by type,
color or other principle. You can also add sublayers inside a layer. This can be used to keep
together identical items.

A layer lets you manipulate objects that are inside as a whole by switching the visibility on or
off, locking them or adjusting their transparency.

Let's see how we can use layers for a flower design. We can place all parts of the flower into a
single layer. Also, we can add two sublayers for leaves and petals.

Any layer can include one or multiple objects or sublayers.

Objects are not bound to layers. You can relocate an object to another layer by a simple drag-
and-drop in the Layers panel.
84

About the Layers Panel

The Layers panel is a complete list of layers and objects that you have in the document. This
list is presented as a structure where layers appear as top level items. You can look inside of a
layer and see objects and sublayers in it. The whole list from top to bottom represents exactly
the same order in which objects appear in the document. If some object is behind others on the
canvas, this object will be lower than others in the Layers panel.

In order to visually link objects on the canvas with layers, the object's boundary, when it is
selected, has the same color as the color that marks the corresponding layer in the Layers
panel. This works only if a single item is selected.

More details about the panel can be found in The Layers Panel section.
85

The Layers Panel

The Layers panel helps you organize objects in your document. It displays objects as a list. The
top-level items in this list can only be layers. Each layer serves as a folder that can store
objects and sublayers. In complex designs, you can place related objects into the same layer to
keep them together. A simple design can have a single layer.

To open the Layers panel, tap on the corresponding icon in the main window.

1 - Opacity of a layer or object.

2 - Layer's color.

3 - Add a new layer.

4 - Reveal a selected object in the list. The opposite is possible as well. Double-tapping on the
icon of an object in the panel reveals this object on the canvas.

5 - Move a selected object one step up the list. This makes it appear in front of one more object
on the canvas if they overlap.

6 - Move a selected object one step down the list. This makes it appear behind one more
object on the canvas if they overlap.

7 - Place a selected object in front of all other objects in its layer.

8 - Place a selected object behind all other objects in its layer.

9 - Open the menu.

86

10 - Blend mode of a layer or object.

11 - Visibility option.

12 - Lock option. You can lock an individual object, or a layer with everything inside it.

Each line in the list relates to one layer or one object (or compound object or group).

Items in the list have default names. To edit a name, double-tap on it.

Autoscroll to the Selected Object

The Layers panel focus on selection checkbox in the Preferences defines two modes in
which the panel can operate. If you select an object on the canvas when the checkbox is on,
the panel will scroll the list of objects to make the selected object visible. If other layers are
present in the panel, their contents will collapse. If you deselect the selected object, all of the
layers become collapsed. When the checkbox is switched off, the Layers panel doesn't change
its state when you select or deselect objects.

The Menu of the Layers Panel

New Layer: Create a new layer.

Duplicate: Create a copy of a selected layer or object. You can also use Option-drag for that.

Delete: Delete a selected layer or object.

Reveal Object: Show a selected object in the list.

Selection Color: Choose the color of the selected object's frame. The same color will be
applied to the tag of the layer which contains that object.

Hide: Hide a selected object or layer. It is the same as the Visibility option in the panel.

Show All: Make all objects and layers unhidden.

Lock: Lock a selected object or layer.

Unlock All: Unlock all objects and layers.

Select All Layers: Select all top-level layers.

Select All on Layer: Select the contents of the active layer including paths, groups and
sublayers. If you select one object and then run the command, all the rest objects on the same
layer will become selected. You can also select a layer directly. If several layers are selected,
the command will select the contents of these layers.

Collapse All: Display only top-level layers. This command makes the Layers panel as compact
as possible.
87

Merge Selected: Create one layer out of multiple ones. This command puts the contents of
selected layers in one layer, and deletes the rest of the selected layers.

Isolate Active Layer: Make accessible on the canvas only objects of the active layer.

Select Layers and Objects

To select a layer or object, tap on its name in the Layers panel.

In order to select several layers or objects, slide over their names to the right in the Layers
panel.

To select all layers, use the Select All Layers command in the panel's menu.

To select all objects in all layers, use the Select All command in the main menu.

Delete Layers

To delete a layer, slide over its name in the list. Then tap on the trash bin icon. At least one layer
must be present in the document. So, you cannot delete the last layer.

Also, you can select one or several layers and choose the Delete command in the menu of the
panel.

Active Layer

At any given time, one layer is active. If you add an object, the latter will be placed into the
active layer. The currently active layer has the darker background in the Layers panel. Only one
layer can be active.

Do not confuse the active and selected layer terms. You can select multiple layers, but only one
of them will be active.

To activate a layer, tap on its name or icon in the Layers panel. A layer also becomes active
when you select any object in it.

Visibility of Layers and Objects

Objects you add to the design are visible by default. To hide an object or layer, tap on the eye
icon near its name.

Hiding a layer is equivalent to hiding all objects in this layer.

Hidden objects do not appear on the canvas and are not visible in the exported or printed
graphics. Invisible objects do not interact with other objects. For example, there will be no
effect from an applied blend mode or a combine option.
88

Opacity of Layers and Objects

You can make an object or layer transparent or semi-transparent by changing the Opacity
value.

Setting a certain level of opacity for a layer gives a result similar to setting the same level of
opacity for all objects in this layer.

Locking Layers and Objects

You can lock an object or layer by tapping on its lock icon. A locked item cannot be selected on
the canvas and therefore it is protected from editing by mistake.

By locking a layer you lock everything in it.

Notice that guide lines have another way to be locked or unlocked using the Document panel.

Layer's Color

Each layer has a color associated with it. It is used to establish the relationship between a layer
and items in this layer. Once you select an object on the canvas, its boundary or path has the
same color as the layer it belongs to. This color doesn't affect your design.

The color of each layer is shown as a vertical color bar along the left-hand side of the Layers
panel.

To change the color, tap on the Selection Color option in the menu of the panel.

Find an Object on the Canvas

As soon as you zoom in to work with one object, the others may appear outside the editing
area. So to get to another object, you may need to zoom out and then scroll. You can also jump
to a particular object by double-tapping on its icon in the Layers panel. This function fits the
object into the editing area and selects it. In a design with many elements, this way may be
faster than scrolling and zooming.

Double-tapping on the layer's icon in the panel fits all objects of the layer into the editing area.
89

Creating and Deleting Layers

You can use the Layers panel to add and delete layers.

Create a Layer

To add a new layer, tap on the plus button at the bottom of the Layers panel.

You can create a sublayer inside some other layer. Just create a new layer and drag it inside
another layer.

You can also create a copy of an existing layer. To do this, select that layer, open the menu in
the Layers panel and select Duplicate.

Delete a Layer

To delete a layer, slide over its name in the Layers panel. Then tap on the trash bin icon.

Attention! When you delete a layer, all objects in it will be deleted as well.
90

Arranging Layers and Objects

Layers and objects stack one over another while you are adding them to the document. The
stacking order of objects on the canvas is identical to the order in the Layers panel. If two
objects overlap on the canvas, then the same object would be the upper on the canvas and in
the list. This was discussed in the Layout Basics section.

The order of items in the Layers panel is important because it defines whether each individual
object or layer should be behind or in front of another one. The Layers panel helps you reorder
layers and objects.

The Initial Order of Objects

When you add (e.g., draw, paste or import) an object to the design that contains other objects,
they appear one over another forming a stack. The order of objects in the stack is defined by
one of two possible methods:

A new object becomes the upper object in the active layer. The Draw/insert above the
selection option in the Preferences should be deactivated in this case.
A new object appears right above a currently selected object. To make this happen, there
must be a selected object in your document, and the Draw/insert above the selection
option should be activated.

Change the Order of Layers

To reorder layers, drag a layer to a new position in the list.

You can also use drag and dropping to place a layer inside another layer or to move a sublayer
outside its parent layer.
91

Change the Order of Objects

To reorder objects, drag an object to a new position in the list.

An alternative way to change the order of objects is to use buttons in the Layers panel.

The two buttons on the left move an object one step up or down the list. Another two buttons
on the right place an object at the top or at the bottom of the list.

The same functions are present in the Geometry panel.

Move an Object to Another Layer

You can move objects between layers. To do this, drag and drop an object from one layer to
another. You can also select several objects on the canvas, then grab them in the Layers panel
and drag them together to a new location in the list.

Another way is to cut an object. Activate a destination layer and then paste the copied object.
92

Blending Layers
A blend mode determines how pixels of the upper layer interact (or blend) with pixels of a lower
layer. Blending applies to objects in the same way as to layers. So, to make the page easier to
read, we'll only talk about layers.

To select a blend mode, use a pop-up menu at the top of the Layers panel. The Normal blend
mode is selected by default.

To see any visual effect from applying a blend mode or transparency, the upper layer should
overlap the lower layer(s).

Transparency

Making a layer transparent is one of the ways to mix the color of its pixels with the pixels of the
layer beneath.

When you decrease the Opacity parameter in the Layers panel, you make the contents of the
layer more transparent. This increases the impact of the lower layer pixels on the result.

Opacity 100% Opacity 70% Opacity 20%

93

Layer Blending

The default blend mode is Normal. If the top layer is opaque, then only that layer determines
the color. Otherwise, the result depends on the color of the top layer pixel, on the level of its
transparency, and on the color of the underlying layer pixel.

The rest of the blend modes calculate color in a more complicated way, but they always take
the transparency into account.

Let's consider a few examples.

Normal blend mode

In the earlier subsection, we can see the Normal blend mode with different levels of opacity
applied to the upper layer.

Multiply blend mode

The Multiply blend mode makes the overlap area darker. Within grayscale, if we use 0 for black
and 1 for white, then two gray colors with level 0.5 will blend into a dark gray at 0.25.

Screen blend mode

The Screen blend mode produces brighter colors. In the same example as we used for Multiply,
two gray colors at 0.5 each will create light gray with level 0.75.

Difference blend mode

94

The Difference blend mode creates lighter colors when the colors you blend are different.
Blending similar colors makes the overlap area dark. Blending identical colors creates black.
Blending with black produces no change.

It is recommended that you use the blend modes with RGB colors applied to the objects and
the document. With the CMYK color model, you may have less predictable results.

If you wish to read about other blend modes, please read the Blend modes article on Wikipedia.
95

Vector Graphics
Graphics in your designs are primarily based on vector objects (paths and shapes). These
objects appear on the canvas as anchor points and curves. Internally, they are mathematically
defined via coordinates of anchor points and curvature of lines that pass through those points.
Due to this, vector graphics can be scaled with no quality loss.

Original image

Zoomed in vector image

Zoomed in raster image

All drawing tools in the program create objects that are based on paths. A path is a thin vector
line that enables you to edit it. Paths are explained in detail in the Path and its Features section.

You can apply a number of properties such as stroke or fill to a path to make the object look as
you need. Although the path itself is vector, some effects that you can apply to it can be raster-
based (e.g., gradient fill or shadow). In the case of such a combination of vector and raster
graphics, you should take into account the resolution of the raster parts.

Text is also vector. It is based on glyphs provided by a selected font. You can convert text to
paths in order to edit the shape of individual characters.
96

Path and its Features

Drawing tools create objects that are based on paths. Although a line, brush stroke or
geometrical figure may look very different, their shape is defined by a thin line called the path.
The path itself is invisible on the canvas unless you select it. The object becomes visible thanks
to an applied stroke, brush, fill or other properties.

Path with all properties turned off

You can see it only because it is selected

Path with Stroke

Path with Brush

All paths are made up of anchor points and segments (lines that link points). So, the simplest
path consists of one segment and two anchor points at its ends. We can say that a path is
closed if it starts and ends at the same point.

Paths are listed in the Layers panel as items named Path.

The color of a path on the canvas (don't confuse it with a stroke) coincides with the color of the
layer the path belongs to. This color is indicated in the Layers panel as a vertical line to the right
97

from the check boxes. The same color is used to display the selection frame.

Features of a Path

1 - Straight segment.

2 - Corner rounding handle.

3 - Direction point. A direction point works as a handle to manipulate the respective direction
line.

4 - Direction line.

5 - Anchor point.

6 - Curved segment.

Segments

Depending on the way you draw a segment, it can be straight or curved. You can change the
shape of segments by editing the path.

Anchor Points

Anchor points define the shape of a path in two ways. Primarily, they are intermediate points for
the path. So, by changing the location or amount of the intermediate points, you can
significantly change the shape of the path.

The location of an anchor point defines the shape of the path

Also, anchor points can have direction lines that let you adjust the curvature of the
corresponding segments. In this case, anchor points in the middle of the path have two
direction lines because two segments are attached to this point. An end point can have only
one direction line.
98

Corner Points and Smooth Points

Any anchor point is either smooth or corner point. The Edit a Path section explains how to turn
an anchor point from one type to another.

Corner point

Smooth point

At a corner point, a path breaks, creating a corner. Corner points often have no direction lines.
At a smooth point, the path creates no corner. This happens because the angle between the
direction lines is 180 degrees. With any other angle, the segments will create a corner. The
segments that are attached to the same corner point can be straight or curved in any
combination.

A corner anchor point will not show direction lines by default even if you select it. The direction
points of a corner point and the corner point itself have exactly the same location. Because of
this, the direction lines have zero length and, consequently, are not visible.

The Change the Type of an Anchor Point subsection explains how to convert a smooth point to
a corner point and vice versa.

Rounding Corners

The app can display a handle near a corner point when the Selection tool is activated. This
handle lets you change the corner radius. Read the Rounding Corners section for more details.
99

Direction Lines and Direction Points

Direction lines let you change the direction and curvature of a segment. To operate a dimension
line, you should drag its direction point. You can adjust the angle and length of direction lines.

Changing the direction line angle

Changing the direction line length

The Manipulate Direction Lines subsection explains how to work with direction lines.
100

Draw a Path with the Pen Tool

The Pen tool lets you draw both straight and curved lines. To draw a path, you should add
one segment after another. If any of the added anchor points or segments require adjustments,
you can edit the path after it is created.

The Disable touch drawing option can make your work with drawing tools more convenient if
you are using Apple Pencil.

Controls of the Pen Tool

The Pen tool displays several options in the Control panel. They let you choose different modes
of the tool. The use of those modes is discussed further in this section and also in Edit a Path.

1 - Draw a path. In this mode, you add anchor points to create a new path.

2 - Add an anchor point to an existing path. Tap on the path with this tool.

3 - Delete an anchor point. Tap on the anchor point with the tool.

4 - Change the type of an anchor point from smooth to corner, and vice versa. This tool lets you
manipulate the direction points in order to adjust the curvature of path segments. In this mode,
you can simply select anchor points in order to delete or edit them using other tools.

5 - Convert a selected anchor point to the corner point type.

6 - Convert a selected anchor point to the smooth point type.

7 - Delete an anchor point. You should select the anchor point with the Pen tool and then tap
on this button.

You can change the anchor point type from smooth to corner or vice versa by double-tapping
on that point with the Pen tool. To remove a direction line (actually make its length equal to
zero), tap on its direction point with the Pen holding two fingers on the screen.

The button temporarily appears in the Control panel while you are drawing a path. It lets
you finish drawing the current path without deactivating the Pen tool. The tool will finish
drawing automatically if you close the path.
101

Draw a Straight Line

1. Activate the Pen tool.

2. Tap at the point where the line should start.
3. Tap at the point where the line should end.
4. To stop drawing, tap on in the Control panel. Or, activate any other tool (for example,
Move).

Draw a Polygon

1. Activate the Pen tool.

2. Tap at the point where one of the polygon's corners should be located.
3. Tap several times at points where other corners should appear.
4. Tap on the first point to close the outline of the polygon.

Draw Curved Line

In order to draw a curved line, you should touch the screen with the Pen tool activated, and
drag off the initial point. The direction line will follow your finger. The direction line bends the
segment you are drawing near the corresponding anchor point. Using this method, you can set
the initial direction of the curve near each anchor point. Later, you can adjust direction lines to
make the shape of the curve more precise.

Draw Curved Path

1. Activate the Pen tool.

2. Touch the screen and hold at the point where the line should start.
3. Move your finger aside to see the direction line. Set the length and angle of the direction
line. Both of them will affect the curvature of the line you draw. Detach your finger.

4. Touch and hold at the next point.

5. Repeat the two preceding steps.

6. Tap on the first point if you want to close the shape.
or
Tap on in the Control panel to stop adding more segments to the path.

Notice that you can combine curved and straight segments.

102

As an alternative technique of drawing a curved path, you can create it out of straight
segments. Then make them curved as explained on the Edit a Path section.

While you are drawing a path, you can switch the type of a segment, that you are about to add,
from curved to straight. To do this, tap on the point that is currently the last point of the path.

Continue Drawing an Existing Path

After you have finished drawing a path, it is possible to add more segments at one of its ends.
To do this, select the path and then activate the Pen tool. The anchor point that was added the
last may have an additional circle around indicating that a new segment will begin at this point.

If no point was selected by default, or you want to choose the opposite end of the path, select
the respective point with the Selection tool. Then activate the Pen tool to draw a segment.

Rotating Direction Lines

The Pen tool in its default mode lets you rotate direction lines by dragging the corresponding
direction points. If the angle between the two adjoining direction lines is 180 degrees, they will
rotate together preserving this angle.

To change the angle from 180 degrees to any other, rotate a direction line holding one finger on
the screen. The second direction line will preserve its position. If you perform this operation
with an arbitrary angle, the direction lines will snap to 180 degrees and rotate together again.

By holding two fingers on the screen, you rotate the direction lines together preserving 180
degree angle between them no matter what the original angle was.

Stroke Width and Color

To change the stroke width and color, use the Appearance panel.

Modifier Keys and Shortcut Summary

With an external keyboard, you can use the following shortcut and modifier keys.

Shortcut:

P activates the Pen tool.

Pen tool modifier keys:

Space switches to the Pan mode.

Command switches to the Selection tool.
Option activates the Convert Anchor Point tool.
103

Shift-tapping lets you select multiple anchor points.

To remove a direction line (make a corner), tap on the respective direction point holding
down the Option or Shift key.
[ decrements the stroke width.
] increments the stroke width.
104

Create a Path with the Draw Tool

The Draw tool is a freehand tool. It creates a curved path that follows your finger as you
draw. You can use it to create graphics that resemble a hand-drawn image. It is possible to edit
the created path.

Unlike the Pen tool, with which you place anchor points directly, the Draw tool adds anchor
points automatically depending on the curvature of the path. An almost straight path may
require only two anchor points on its ends, while a zigzag requires an anchor point every time it
changes its direction. Another factor that determines the amount and location of anchor points
is the Smooth parameter. We will discuss it later.

The Draw tool operates in two modes. Any time you draw, you are actually using either the
Pencil or Brush tool. The Draw tool creates a path. How this path looks depends on whether
the Stroke or Brush property is applied to the path. You can switch between Stroke and Brush
using the Appearance panel.

When you are using the Draw tool, the app hides the Fill property of the object that you draw.
This helps you see the object and surrounding design more clearly. As soon as you finish
drawing, the Fill can appear on the object. This happens, if the Allow filling option is activated
in the Preferences dialog, and if the current style includes the Fill property.

To continue drawing a path that you created earlier, select this path using the Move or
Selection tool. Then activate the Draw tool and draw beginning from one or another path end.
Such use of the tool requires that the path is open and the Allow to continue the Path option
is enabled in the Preferences dialog.

The Disable touch drawing option can make your work with drawing tools more convenient if
you are using Apple Pencil.

Settings of the Draw Tool

Settings of the Draw tool are located in the Control panel.

The Smooth parameter defines the amount of smoothing applied to the path. Higher values
make the curve more smooth. If you want to create a path that follows the tool as accurately as
possible, set the parameter to "0".

The Close Radius (Close Path Within Radius) automatically closes the path that you draw. This
happens only when the end point is placed within the specified distance from the start. The edit
box lets you set that distance. The distance is measured in "screen pixels" and, consequently,
doesn't depend on the canvas zoom level.
105

The gear icon opens two more options.

The Allow filling switch allows the Draw tool to apply the Fill property to the path while you are
drawing it. This requires that you enable a Fill property in the Appearance panel.

The Allow to continue the Path switch enables the possibility to continue drawing a selected
path with the Draw tool.

Stroke Profile

The Profile pop-up menu lets you choose one of three modes of the tool: Uniform, Pressure
and Custom.

The Uniform profile lets you create a Stroke with constant width. It is used for the Pencil tool.

The Custom profile allows variable width strokes. It can be used with both Pencil and Brush
tools. The Brush tool changes the stroke width depending on the direction of the path. The
Pencil tool can produce lines with variable width if you select a non-uniform profile in the
Stroke settings.

The Pressure profile lets you control the Stroke width using an Apple Pencil, which has a
pressure sensor. The more pressure you apply, the thicker the stroke becomes. It doesn't
support Brush strokes.

The Width parameter defines the maximum stroke width. It mirrors the Width parameter for a
stroke in the Appearance panel.

The Variation parameter defines how much the stroke width changes depending on the
pressure.

With lower values of Accuracy, the program normalizes the stroke width depending on the
length of the path. So, while you are drawing, the already drawn part of the path can re-adjust
its stroke width automatically. To make the stroke width remain exactly as you have drawn it,
set the Accuracy to 100%.

Modifier Keys and Shortcut Summary

With an external keyboard, you can use the following shortcut and modifier keys.

Shortcut:

D activates the Draw tool.

Draw tool modifier keys:

Command switches to the Selection tool.

106

[ decrements the stroke width.

] increments the stroke width.
107

Draw a Path with the Pencil Tool

Pencil is a freehand drawing tool. It creates a path that follows your finger as you draw. The
Pencil tool is, in fact, the Draw tool that draws with a stroke.

To activate the Pencil tool, tap on the Draw icon in the Tools panel. Before using it, make
sure that a stroke is selected in the Appearance panel.

Settings of the Pencil tool are located in the Control panel. They are described in the Create a
Path with the Draw Tool section.

The Pencil tool supports all of the profiles that you can select in the Profile pop-up menu.

The Pencil tool can work with an Apple Pencil that has a pressure sensor. By applying different
pressure, you can change the thickness of the stroke while you are drawing. To enable the
pressure sensitivity, activate the Pressure option in the Control panel. Parameters that
influence drawing with variable pressure are located in the Control panel.

Once you finish drawing, you can modify the created graphic. To edit the path, use tools and
methods described in the Edit a Path section. To change how your graphic element looks, use
the Appearance panel.
108

Draw a Path with the Brush Tool

Brush is a freehand drawing tool. It creates a path that follows your finger as you draw. The
Brush tool is, in fact, the Draw tool that draws with a Brush stroke.

To activate the Brush tool, tap on the Draw icon in the Tools panel. Before using it, make
sure that a Brush is selected in the Appearance panel.

Settings of the Brush tool are located in the Control panel. They are described in the Create a
Path with the Draw Tool section.

Brush requires that you select the Custom profile in the Control panel. Brush does not use the
pressure information when you draw with the Apple Pencil. For that reason, the Pressure profile
cannot be used with the Brush tool. If you select an incompatible profile, the active tool will
switch from Brush to Pencil.

Once you finish drawing, you can modify the created graphic. To edit the path, use tools and
methods described in the Edit a Path section. To change how your graphic element looks, use
the Appearance panel.
109

Edit a Path
Choose the View Mode

Objects in your document can be displayed with all their features or as wireframes.

In many cases, the regular view mode is convenient for editing a path. If you prefer a clear view
when no strokes, fills or other effects are visible, you can activate the Outline Preview mode in
the Document panel.

Object is not selected Path is selected in Normal mode

Path is selected in Outline Preview mode

Select a Path

To work with a path or anchor point, you should select it. You can select either the entire path,
individual anchor points or all anchor points.

To select the entire path, tap on it with the Selection tool . You can also tap on the object's
stroke, or even filled area, depending on what is visible and easier to reach.

The Selection tool lets you select a path by drawing a selection frame around it. To do this,
place your finger on an empty space. Slide with your finger toward the object. Once the
selection frame touches the path, the latter becomes selected. Notice that you can select
several paths in this way. Also notice that this method selects all anchor points that you outline.

Select Anchor Points

In order to select an anchor point, select the path first. Then tap on the anchor point with the
Selection tool. To select several anchor points, activate the Add to Selection mode by tapping
110

on in the Control panel. Another way to select multiple points is to hold one finger on free
space on the screen and tap on points with another finger.

You can also select multiple anchor points using the selection frame as explained above.

Sometimes it may be difficult to select certain anchor points using the selection frame because
anchor points that shouldn't be selected also appear inside the frame. If there are only a few of
those that were selected unintentionally, you can deselect those anchor points by holding one
finger on free space and tapping on the points with another finger.

Selecting Points the Lasso Tool

The Lasso tool can help you select anchor points when the selection frame is not
effective. Outline one or more anchor points that you want to select with Lasso. This tool lets
you select extra points in addition to those that are already selected. To do this, press and hold
with your finger on free space before using the Lasso tool. Or activate the Add to Selection
mode before outlining a new group of points. An opposite technique is also supported.
You can select all of the object's anchor points and then deselect those that you don't need.
This can be done by selecting a range of anchor points with any suitable tool. After that,
holding two fingers on free space, outline points that you want to deselect with the Lasso tool.

With the Lasso tool, you can also select handles that are used for rounding corners.

Controls of the Selection Tool

The Control panel displays the following options when the Selection tool is activated.
111

1 - The Lasso tool that lets you select points by outlining them.

2 - Activate the Add to Selection mode.

3 - Edit a segment by dragging. You can grab and bend the segment at any point. The ends of
the segment will preserve their locations.

4 - Convert a selected anchor point to the corner point type.

5 - Convert a selected anchor point to the smooth point type.

6 - Delete a selected anchor point.

7 - Link anchor points with a straight segment.

8 - Cut the path at a selected anchor point. The tool does not create any visible gap because
the ends of the path will coincide at the cut point.

Add an Anchor Point

1. Activate the Pen tool .

2. Tap on a path where you want to add a new anchor point. Adding an anchor point will not
change the shape of the path.

The same can be done in the Add Point mode selected in the Control panel.

Delete an Anchor Point

You can use either the Pen or Selection tool to delete anchor points.

Delete an Anchor Point Using the Selection Tool

1. Activate the Selection tool .

2. Select an anchor point.
3. Tap on the Remove Point button in the Control panel in order to delete the selected
anchor point.

You can select multiple anchor points using the Selection or Lasso tool in order to delete them
together.

Delete an Anchor Point Using the Pen Tool

1. Activate the Pen tool .

2. Tap on the Remove Point button in the Control panel.

3. Tap on an anchor point that should be deleted.
112

Link Anchor Points

You can link end points of the same path or end points of two independent paths. In both
cases, the points will be connected with a straight segment.

To close a path, select it with the Selection tool . Then tap on the Link button .

To link two independent paths, make sure that none of them is closed. Using the Selection tool
, select one end point of each path that should be linked. Then tap on the Link button
.

Set the Type of an Anchor Point

Anchor points can be of smooth or corner type.

To set the type of an anchor point:

1. Activate the Selection tool .

2. Select an anchor point.
3. Choose one of the options in the Control panel.

You can also convert an anchor point to another type while the Pen is activated. It has the
anchor point type buttons in the Controls panel.

Another way to change the anchor point type is to double-tap on it with the Selection or Pen
tool.

Finally, you can turn a smooth point into a corner point by changing the angle between the
direction lines from 180 degrees to any other angle. To do this, use the method described in the
Adjust Direction Lines of a Corner Point subsection.

Change the Shape of a Corner

One more way to reshape a path is to change the shape of the corner created by this path. For
example, you can turn a sharp corner into a rounded one.

Sharp corner Rounded corner

How to do this is explained in the Rounding Corners section.

Manipulate Direction Lines

You can change the length and angle of direction lines using the Pen and Selection tools. To
do this, drag the respective direction point to a new position. The difference between the two
113

tools will be explained further.

You should select an anchor point in order to access its direction points. If a selected anchor
point displays neither direction lines nor direction points, read the Show Direction Lines of a
Corner Point subsection.

It is possible to move one or two direction points at the same time. By manipulating only one
direction point, you can change the angle between direction lines attached to the same anchor
point. In this way, you will convert the latter to a corner anchor point. By moving both direction
points synchronously, you can keep the angle between the direction lines equal to 180 degrees.
As a result, the anchor point will remain smooth. Note that the second case is possible only if
the original anchor point is smooth.

Adjust Direction Lines of a Smooth Point

Activate the Selection tool . Select an anchor point. Then drag one of its direction points.
In this way, you can adjust the length of the direction line whose point you are moving, and you
can also change the angle of both direction lines. The anchor point will remain smooth.

Adjust Direction Lines of a Corner Point

Activate the Selection tool . Select an anchor point. Place and hold one finger on free
space on the screen. Then drag one of the direction points. In this way, you can adjust the
length and angle of the direction line whose direction point you are moving. The other direction
line will not be affected.

If you use this technique against a smooth anchor point, you will convert it into a corner point.
114

The same result can be achieved using the Pen tool . Just activate the tool and select the

option. Drag a direction point in order to adjust the angle and length of its direction line.

Show Direction Lines of a Corner Point

Direction lines become visible when you select an anchor point. However, direction lines may
not be visible when the direction points are located exactly over the respective anchor point.
This makes the length of the direction lines equal to zero. This is true for corners of a polygon.

Direction lines are not visible

Smooth point displays its direction lines

You can drag a direction point off its anchor point in order to work with direction lines. By doing
this, you will set the length and angle of the direction lines.

Modifier Keys and Shortcut Summary

With an external keyboard, you can use the following shortcuts and modifier keys.

Shortcuts:

A activates the Selection tool.

L activates the Lasso tool.

Selection tool modifier keys:

Space switches to the Pan mode.

Command switches to the Move tool.
Shift-tapping lets you select multiple anchor points.

Lasso tool modifier key:

Space switches to the Pan mode.

115

Shift lets you select more anchor points in addition to already selected ones.
116

Simplify a Path
You can create several paths that have the same shape using different numbers of points. This
is possible because points may make different impacts on the shape depending on their
location and also on properties of their direction lines.

When we talk about simplifying a path, we mean removing unnecessary anchor points trying to
preserve the original path shape.

You may want to simplify paths because it is easier to edit a path which has less points. Also,
reducing the number of points might increase the performance of the app with complex
designs.

Some paths cannot be simplified because most or all of the points are important for the path
shape. For example, a rectangle has four points. Removing any of them would affect the shape
significantly.

To simplify a path select it. If you wish to see points of the path, select it with the Selection tool
. Then tap on the Simplify button in the Path panel. The Simplify panel will open up.

Use the Curve Precision slider to adjust the number of points. Check how much the path
shape changed in your design. It is useful to compare the shapes of the original and current
paths making sure that the difference between them is acceptable. To display the original path,
activate the Show Original Path option. Your goal is to make the Current number of points less
than the Original.
117

Here is an example of a simplified path.

Original path Simplified path (blue)

36 points 12 points
118

Draw Lines and Shapes

There is a set of tools in the Tools panel that lets you draw lines and primitive shapes.

- Rectangle Tool: creates rectangles

- Rounded Rectangle Tool: creates rectangles with rounded corners

- Ellipse Tool: creates ellipses

- Polygon Tool: creates polygons with a customizable number of sides

- Star Tool: creates stars with a customizable number of points

- Circular Sector Tool: creates circular sectors and circular arcs

- Elliptical Arc Tool: creates elliptical arcs

- Line Tool: draws straight lines

The Rectangle, Rounded Rectangle and Ellipse tools have two drawing modes. By default,
they create a rectangle or ellipse as it is suggested by their names. If you hold one finger on the
screen and then start drawing with another finger, the created shape will have its width and
height equal. In this mode, you can create a square, rounded square or circle.

Smart Shapes

The tools create objects of different types. The Line, Rectangle, Ellipse, Arc and Sector tools
create regular objects (paths) as those you can draw using the Pen tool. The other objects are
119

smart shapes: Star, Polygon and Rounded Rectangle. These are parametric objects that let you
vary their shape after an object has been drawn.

If you tap on a smart shape with the Selection tool, you won't see anchor points. Instead,
smart shapes have round handles. The handles are pre-programmed to change the object's
shape in a particular way such as adjusting rounded corners. If you drag a handle of a rounded
rectangle, you will edit all of its corners because all of the handles are selected by default. In
order to manipulate only one handle, you should tap on it, and then all the rest will become
deselected. You can select several handles by holding one your finger on free space on the
canvas and tapping on handles that you want to select. Or use the Add to Selection mode
.

In addition to that, smart shapes display their properties in the Control panel.

More information about editing corners can be found in the Rounding Corners section.

You can turn a smart shape into a regular object using the Expand button in the Path panel.
Then you will be able to edit the object by working with anchor points. Notice that it is not
possible to convert a path into a smart shape.

Line

Draw a Line

1. Activate the Line tool.

2. Touch the screen and move your finger on it to start drawing.
3. Detach your finger to finish drawing.

Basically, a line created with the Line tool is no different from a single straight segment of a
path drawn using the Pen tool.

The Line Tool Modes

The Control panel lets you select different modes for the Line tool.
120

- Draw a line starting from its center.

- Snap the tool to fixed angles such as 0, ±15, ±30, etc.

You can activate both modes at the same time.

Star

Draw a Star

1. Activate the Star tool.

2. Touch the screen and move your finger on it to start drawing.
3. Detach your finger to finish drawing.

Properties of the Star Object

The Control panel lets you change the number of points, the Inner Radius and Corner (corner
radius) parameters.

You can adjust the size of the space taken by the body of a star using the Inner Radius
parameter.

By making the corner radius greater than zero, you can make the points of the star rounded or
to have other predefined shape. You can choose the shape using the pop-up menu in the
Control panel.

Polygon

Draw a Polygon

1. Activate the Polygon tool.

2. Touch the screen and move your finger on it to start drawing.
3. Detach your finger to finish drawing.
121

Properties of the Polygon Object

The Control panel lets you change the number of sides of a polygon.

By making the Corner parameter (corner radius) greater than zero, you can make the corners of
the polygon rounded. The corners can be not only rounded, but they can have other shapes as
well. You can choose the shape using the pop-up menu in the Control panel.

Rectangle

Draw a Rectangle

1. Activate the Rectangle tool.

2. Touch the screen and move your finger on it to start drawing.
3. Detach your finger to finish drawing.

The Rectangle Tool Modes

The Control panel lets you select different modes for the Rectangle tool.

- Make the width and height equal. That is, create a square.

- Draw a rectangle starting from its center.

You can activate both modes at the same time.

Rounded Rectangle

Draw a Rounded Rectangle

1. Activate the Rounded Rectangle tool.

2. Touch the screen and move your finger on it to start drawing.
3. Detach your finger to finish drawing.

Properties of the Rounded Rectangle Object

The Control panel lets you change the radius of the rounded corners.
122

You can also choose different shapes for the corners using the pop-up menu.

The Control panel lets you select different modes for the Rounded Rectangle tool.

- Make the width and height equal. That is, create a square.

- Draw a rectangle starting from its center.

You can activate both modes at the same time.

Ellipse

Draw an Ellipse

1. Activate the Ellipse tool.

2. Touch the screen and move your finger on it to start drawing.
3. Detach your finger to finish drawing.

The Ellipse Tool Modes

The Control panel lets you select different modes for the Ellipse tool.

- Make the width and height equal. That is, create a circle.

- Draw an ellipse starting from its center.

You can activate both modes at the same time.

Arc and Sector

Draw an Elliptical Arc

1. Activate the Elliptical Arc tool.

2. Touch the screen and move your finger on it to start drawing.
3. Detach your finger to finish drawing.

The Elliptical Arc Tool Modes

The Control panel lets you select different modes for the Elliptical Arc tool.
123

- Change the direction of an arc.

- Make the width and height equal. That is, create a circular arc.

- Draw an arc starting from its center.

Draw a Circular Arc or Sector

1. Activate the Circular Sector tool. Then choose either the Circular Sector or Circular

Arc mode from the Control panel.

2. Touch the screen and move your finger to create a circle that defines the size of a future
shape.
3. Detach your finger to stop changing the size of the circle.
4. Touch the circle where the sector should start.
5. Move your finger to define the angle of the arc or sector.
6. Detach the finger to stop drawing the shape.

The Circular Sector Tool Modes

The Control panel lets you select different modes for the Circular Sector tool.

- Draw a circular sector.

- Draw a circular arc.

- Snap the tool to fixed angles such as 0, ±15, ±30, etc.

Further Editing

Primitive shapes might be the basis for creation of more complex graphics.

You can combine shapes using Boolean operations.

To edit the path of a shape, use tools and methods described in the Edit a Path section. To
change how your graphic element looks, use the Appearance panel.
124

Modifier Keys and Shortcut Summary

With an external keyboard, you can use the following shortcuts and modifier keys.

Shortcuts:

R activates the Rectangle tool.

Shift-R activates the Rounded Rectangle tool.
O activates the Ellipse tool.
Shift-O activates the Polygon tool.
Shift-S activates the Star tool.
/ activates the Line tool.
F activates the Elliptic Arc tool.

Shape tools' modifier keys:

Space switches to the Pan mode.

Option lets you draw a shape around the specified center.
[ decrements the stroke width.
] increments the stroke width.

Elliptical Arc modifier key:

X inverses the direction of the arc.

125

Stroke
You can apply one or multiple strokes to a path using the Appearance panel. For a complete
description of the panel's interface, refer to the Appearance Panel section.

To open or hide the Appearance panel, To open the panel, tap on the corresponding icon in the
main window.

1 - Strokes are listed in the Appearance panel among other properties.

2 - Add stroke.

3 - Stroke width.

4 - Open stroke properties.

5 - Stroke color. Tapping on this button opens the Color panel.

The Opacity and Blend Mode parameters are the same as you can find in the Layers panel.

Add and Delete a Stroke

Before adding or deleting a stroke, you should select a path in your design.

To add a stroke, tap on the ring icon in the bottom bar of the Appearance panel.

To delete a stroke, select it in the Appearance panel. Then slide over its name to the left. Then
tap on the trash bin icon.

It is possible to hide a stroke without actually removing it. To do this, use the respective eye
icon in the Appearance panel.
126

Edit Stroke Width

The Path Width tool lets you customize the Stroke width.

The path that you are going to edit must have a Stroke applied. Its original width doesn't
matter, but you can decrease the amount of work to do in the following way. If the most part of
the path should have a certain width, let's say 20 px, you can start from the Stroke width set to
20 px.

To modify the width, select a path, and then activate the Path Width tool. Press with your finger
and hold at a point where the width should be changed.

Drag the finger off the path to set a new width at the selected point. This point will have three
handles. If you drag the handle in the middle, the point that defines the width will move along
the path. If you drag any of the handles on the sides, you will adjust the stroke width.

While holding down two fingers on free space, you can move a handle on only one side. This
lets you create non-symmetrical strokes.

If you deactivate the tool, the handles will disappear until you activate the tool again.

The Path Width tool lets you manipulate only the stroke width handles. For other operations
like selecting, moving or resizing objects, you should activate an appropriate tool.
127

Modifier Keys and Shortcut Summary

With an external keyboard, you can use the following shortcut and modifier keys.

Shortcut:

W activates the Path Width tool.

Path Width tool modifier keys:

Space switches to the Pan mode.

Command switches to either Move or Selection tool depending on which of them was
active most recently.
Option lets you move a handle on one side keeping the position of the opposite handle
unchanged. This makes the stroke asymmetrical in relation to the path.

Properties of a Stroke

The Appearance panel gives you direct access to the width and color of strokes. The Color
panel is described in the Color Panel section. To access all available properties, tap on the gear
icon.

The Width parameter is the same as the width you can set in the Appearance panel.
128

The Cap options define whether the stroke should end where the path ends, or it
should go a half-width farther. In the second case, you can choose if the stroke should be
rounded. The option applies to a solid line as well as to individual elements of dashed or dotted
lines.

The Corner options let you select how the stroke looks at corners. You can make
it sharp, rounded or clipped.

The Limit parameter lets you set up the miter limit. It defines the appearance of thick strokes in
sharp corners. This parameter has no effect with rounded or clipped corners, as well as when
Align is set to the right option.

Thin vs. thick stroke at low limit

Thin vs. thick stroke at high limit

129

Notice that, by setting certain limits, we can either clip spikes or let them be as long as they can
at the given angle and thickness.

Let's take a closer look at one of the spikes. The path was selected to be able to see its
location in relation to the stroke.

With higher limits, spikes at corners can go far beyond the area outlined by the path (compare
images above). This is one of the reasons you might want to set some limits.

Clipping takes into account the stroke width and the angle. The wider the stroke or the smaller
the angle, the quicker the corner will be clipped at the same level of Limit. In the zoomed in
image, the angle of the outer corner is smaller than the inner one. This is why the outer corner
was clipped, but the inner one wasn't.

The Align options let you align a stroke to the center of the path, or outside or
inside of the shape. Notice that the alignment options can work only with closed paths.

The following set of controls lets you create dashed and dotted lines.
130

At the top, there are patterns that have different combinations of dots and dashes. You can
start the creation of that kind of line by choosing the appropriate pattern.

Any dashed line can be described as a sequence of dashes and gaps of a particular length. So,
in order to create your own pattern, you can fill in the Dash and Gap fields at the top. For
example, to create a pattern like "long dash - gap - dot - gap", you can type in 10 - 5 - 1 - 5
starting from the leftmost dash field.

These settings

create this pattern

The Phase parameter moves the pattern along the path. With this slider, you can place dashes
at corners of your shape or align the pattern to other features of the path.
131

The two pairs of identical controls let you add arrowheads and other elements to path ends.
Each set of controls relates to one of the path ends.

To add an arrowhead to a path, choose one using the pattern picker. In order to adjust the
arrowhead's size, change the numeric value below the pattern. Arrowheads and dashed
patterns are supported only with the Uniform profile. They will not be applied to the path if you
choose a variable-width profile.

You can change the profile of a Stroke using the Profile button in the Appearance panel. It
defines how the stroke width changes along the path.

By default, strokes have the Uniform profile that creates lines with constant width. However,
there are other options as well. For example, the stroke width can gradually change from max
to min value along the path.
132

You can add your own profile to the list if you wish to reuse it. To do this, you create a new
profile using the Path Width tool. Keep an object with the customized profile selected. Bring up
the list of profiles. Tap on the menu icon to the right from the panel's title and choose Add. To
delete a custom profile from the list, select this profile and tap on Remove in the menu.
133

Brush
You can apply one or multiple brush strokes to a path using the Appearance panel. For a
complete description of the panel's interface, refer The Appearance Panel section.

To open or hide the Appearance panel, tap on the corresponding icon in the main window.

1 - Brush strokes are listed in the Appearance panel among other properties.

2 - Add a brush stroke by tapping the plus button.

3 - Brush stroke width.

4 - Open brush stroke properties.

5 - Brush stroke color. Tapping on this button opens the Color panel.

Add and Delete a Brush Stroke

Before adding or deleting a brush stroke, you should select a path in your design.

To add a brush stroke, tap on the plus icon in the bottom bar of the Appearance panel and
choose Brush from the drop-down menu.

To delete a brush stroke, slide over its name to the left in the Appearance panel. Then tap on
the trash bin icon.

It is possible to hide a brush stroke without actually removing it. To do this, use the respective
eye icon in the Appearance panel.

Properties of a Brush Stroke

The Appearance panel gives you the direct access to the width and color of brush strokes. The
Color panel is described in the Color Panel section. To access all available properties, tap on
134

the gear icon.

The top of the panel displays an oval on the left (we'll discuss later), and a sample line on the
right that displays how your stroke would look in the design.

The Width parameter is the same as the width you set in the Appearance panel. Since a brush
stroke may have variable width, the value you set is the maximum width.

Note that to see features of a brush stroke, its width should be set to several pixels or more.
Otherwise, it will look like a regular stroke.

The Angle parameter lets you rotate the brush.

Roundness can make the brush either round or oval.

The oval at the top of the panel is actually a tool that can change the Angle and Roundness at
the same time. In order to change the values, drag the blue handle around the center.

Using Presets

At the bottom of the panel, you can see the library of presets.

To apply a preset, tap on its icon.

135

To save the current brush parameters as a preset, tap on the plus button.

To delete a preset, long-press on its icon and choose the Delete command.
136

The Appearance Panel

The Appearance panel lets you manage the object's Fill, Stroke and other effects. To open the
panel, tap on the corresponding icon in the main window.

1 - Each line contains one effect, such as Stroke or Shadow.

2 - Hide or show an effect. Hide an effect to remove it from the design but still have the ability
to easily re-apply it again.

3 - Add an effect. You can choose from a list of all supported effects: Fill, Stroke, Gradient,
Brush, Inner Glow, Outer Glow, Inner Shadow, Shadow and Blur.

4 - Add a stroke.

5 - Add a fill.

6 - Swap the colors of a stroke and fill. If an object has multiple strokes or fills, only the upper
stroke and upper fill exchange their colors. The rest remain unchanged.

7 - Show a panel with the effect's settings. Some of the settings, such as the color or stroke
width, can be accessed from the Appearance panel directly.

8 - Change the color.

Menu Commands

By tapping the menu button , you can access these commands:

137

Add Fill adds a new Fill effect.

Add Stroke adds a new Stroke.
Add Effect opens a list of raster effects as Shadow and Glow.
Copy Style copies the style of the selected object.
Paste Style applies a copied style to a selected object.
Reset Style restores the default object's appearance. As a rule, an object will look as it
was originally created using a drawing tool.
Swap Stroke/Fill swaps the colors of the object's stroke and fill.
Recolor opens the Recolor panel.

Delete an Effect

To delete an effect, slide over its name to the left. Then tap on the trash bin icon.

Duplicate an Effect

To duplicate an effect, slide over its name to the left. Then tap on the duplicate icon.

Changing the Order of Effects

Effects in the Appearance panel are ordered in the same way as they were applied to an object.
138

The arrangement of effects atop one other defines how the object looks on the canvas. Two
rectangles below have identical paths, stroke and color fill. The only difference is that the left
one has the stroke below the fill. The rectangle on the right has the opposite order of effects. As
you can see, when the stroke is behind the color fill, half of the stroke width is invisible, making
it look two times thinner.

To change the order of effects, drag one to a new position.

The ability to place certain effects above or below others in the list depends on their type.
These types are presented in the Appearance panel as sections separated with lines. Let's see
how those types would be arranged if all possible effects were present in the panel at the same
time.

The Text entry occupies the top of the list. Then Stroke and Fill would go. You can place Stroke
and Fill entries in any order you like, but you cannot place any of them above Text. The rest of
the entries such as Shadow and Glow, appear in the bottom section. Again, you can rearrange
them within their own section, but placing them into another section is not possible.

The Style of an Object

Any object in your design has particular effects set up in a certain way. We call such a
combination of effects "style".

In order to apply exactly the same style to a second object, you can copy this style. To do this,
select the first object and choose Copy Style from the menu of the Appearance panel. Then
select the second object and use the Paste Style command.
139

Introduction to Colors
Most objects allow you to choose colors for Stroke, Fill and effects such as drop shadow.

Color Models

The app supports the RGB, CMYK and HSB color models (color spaces). They use different
ways to create a color out of components.

You can choose a color model in the New Document dialog when you are creating a new
document. To change the color model later on, use the Document panel. You should take into
account that the CMYK color space supports less color tones than RGB does. As a result,
switching from RGB to CMYK may make some parts of your design look darker and more dull.
The Usage of the RGB and CMYK Color Models page will help you decide which of the color
models to choose.

The Color panel allows you to select the CMYK color space for particular object properties
such as Fill or Stroke in an RGB document. Such technique ensures that your document will
look in the same way after printing or converting to CMYK. It is preferable to use the same color
model for all objects in your document to make colors in it more predictable.

RGB

RGB is based on the mixture of the red (R), green (G) and blue (B) colors. The RGB color model
is commonly used to display colored graphics on the screen. Sources of red, blue and green
light optically mix their lights to create a final color. As a consequence, the more that each
component is present, the brighter the result. RGB images are frequently used on the Web.

The amount of each color component is measured as a value between 0 (no color) to 255
(max). Notice that the same composition of RGB colors can be represented in the hexadecimal
format.

Here are several examples of combinations of primary colors:

Red Green Blue Result

0 0 0
255 0 0
0 255 0
0 0 255
255 255 255
241 255 73
140

When the red, green and blue have equal values, the result is a tint of gray. All colors set to zero
create black. All colors set to 255 create white.

CMYK

The CMYK color model, most commonly used in publishing, uses the cyan (C), magenta (M),
yellow (Y) and black (K) to create the entire range of colors. The final color is created by mixing
inks or dyes of the primary colors: cyan, magenta and yellow. Consequently, the more ink you
add, the darker color you will have all the way to black. To create pure black, it is preferred to
use only the black ink.

We measure the amount of each component as values from 0 to 100%.

Cyan Magenta Yellow Result

100% 100% 100%
100% 0% 0%
0% 100% 0%
0% 0% 100%
0% 0% 0%
9% 0% 57%

Adding a portion of black to a mix of cyan, magenta and yellow just makes the final color
darker, keeping the basic tint unchanged.

Note that the CMYK color space cannot cover all colors supported by RGB. This mostly affects
bright colors and tints of green. For example, the yellow shown in the RGB table has no
equivalent in the CMYK color space. The CMYK table displays a yellow that is close but not
exactly the same as in the RGB table. If you are going to create graphics for printing, it may be
reasonable to use CMYK colors in your design. In this case, you can ensure that your graphics
will look the same way when you print it.

HSB

The HSB (hue, saturation, brightness) color model takes into account how the human eye
perceives colors. Unlike the previous models, HSB is a combination of qualities that together
determine a specific color.

Saturation and brightness are measured from 0 to 100%. Hue is measured in degrees.

The brightness might be the easiest one to understand. While you are changing the brightness
from maximum to zero, the color varies from the tint, specified by Hue (H) and Saturation (S), to
black.

Hues can be visually represented as a color wheel.

141

If we pick the red color as the starting point and move along the edge, we will pass through all
colors of the spectrum. Any color can be defined by an angle from the starting point. Having
red as the zero point, we can say that green takes the sector near 120 degrees.

When you move a point from the center to the circle's edge, you change the Saturation from 0
(pale colors) to 100% (colorful).

Grayscale

Grayscale represents tints of black. Values are measured from 0% (black) to 100% (white).

Grayscale colors can be reproduced using the RGB, CMYK and HSB color models.

Representing Colors in the Hexadecimal Format

Colors can be represented in the hexadecimal format. A hexadecimal number can consist of
numbers 0-9, and letters A, B, C, D and F. In software, hexadecimal values are frequently
preceded by the # sign, or they can be labeled as "Hex" or "Hex color".

The hexadecimal format is mostly used to indicate RGB colors for the Web and some other
applications.

Each primary color (red, green, or blue) is encoded as a two-digit number, so any arbitrary color
is represented as a six-digit number. For example, the yellow color in the RGB table above can
be represented as F1FF50. Here, the value of red is F1, green is FF and blue is 50.

You don't have to learn how to convert RGB colors to the hexadecimal format because graphic
software usually displays values of colors in both formats.
142

The Usage of the RGB and CMYK Color Models

Why do we have RGB and CMYK?

The RGB and CMYK color models have different approaches to create a color because they
were designed for particular purposes.

In most cases, you can see an image on one of two types of surfaces. The first type includes
screens of computers, phones, TV sets and so on. Their common feature is the capability to
emit light. The RGB color model perfectly suits such devices because higher values of red,
green and blue components make brighter colors in the same way as raising the screen
brightness does.

An example of the second type is an image printed on white paper. Such a surface reflects light
but cannot emit it. Areas with no ink remain white (the paper color). This corresponds to zero
quantity of cyan, magenta, yellow and black inks. The more ink droplets cover a particular area,
the darker and more saturated color we get. A mix of all inks, even without black, can
completely screen the paper making a very dark color.

How to Choose a Color Model?

Let's begin with more simple cases when the purpose of your design is obvious. Graphics that
are intended to be displayed on the screen should be RGB. That includes digital art, user
interface designs for Web and apps, graphics to be used in video clips, content for social media
and so on.

CMYK is often used for designs that will be printed. However this doesn't apply to all cases.
Print shops may have their own requirements for customer's materials including color space,
file format and others.

If your design is intended for displaying on a screen and for printing, you should choose RGB. It
supports a wider color range and therefore better suits both use cases. So why use CMYK at
all? This is necessary to be able to verify your design colors before printing. Once you convert
an RGB design to CMYK, certain colors (often greens) can become dull. You might prefer to
discover this sooner in order to make corrections in the design if necessary. If you send an RGB
file to a printer, the printer driver will make the RGB to CMYK conversion for you. However you
won't see the result until it is printed.

Unless you definitely know that you need CMYK, design in the RGB color space. Check how
your design looks in CMYK if you care about how the design will look after being printed.

Switching Between Color Models

The New Document dialog lets you select a color model before a new document is created.
Later on, use the Document panel.
143

In order to see how your RGB design looks in the CMYK color space, temporarily select CMYK
in the Document panel. Then you can switch back to RGB.

Note that each color model comes together with a list of supported color profiles. If you are not
familiar with profiles, keep the default one.

Which of the File Formats Support CMYK?

Since RGB is supported by barely all graphic file formats, let's pay more attention to CMYK.

PDF is the most popular format for CMYK because it also supports multi-page documents, it is
capable of containing vector elements and text. The EPS format has capabilities similar to PDF.
Among raster formats, TIFF is one that supports CMYK.

Color Profiles

Different devices (e.g., computer display or phone screen) may reproduce the same color with
slightly different tints. In order that colors look uniformly, manufacturers calibrate their devices
(monitors, printers, scanners) and save that information as a device's profile.

A color profile can be embedded into a graphic file to ensure that the image looks the same on
different devices.

To select a new profile to your document, use the Document panel.

144

Fill an Object with a Color, Gradient or Image

An object can be filled with a plain color, gradient or image. The Appearance panel is used to
choose those options and adjust their properties.

If an object has no Fill property or you want to add more, you can do this by tapping on the
plus icon and choosing Fill. A quick way is to tap on the circle icon. Tapping on the ring adds a
stroke; don't confuse these two icons.

Fill properties are listed in the Appearance panel. The column of eye icons on the left lets you
hide any Fill or other property. The color icon in the right column opens the Color panel.

In order to choose a color, set up a gradient or select an image, tap on the color icon. The Color
panel will open up. Tap on the Color, Gradient or Image tab.
145

These sections explain how to select a color or work with gradients or images:

Selecting Colors
Gradients
Image Fill
146

The Color Panel

The Color panel lets you choose plain colors, create gradients or select an image to use as a
texture. To open the panel, tap on the appropriate color button. For example, each Stroke item
in the Appearance panel has its own color button.

The Color panel has individual sections for plain color, gradient and image. You can apply only
one of these features at a time. You may need to use more than one feature, for example, an
image and a color that tints that image. In this case, you should add two Fill attributes to the
object: one for the image and another for the tint color.

Color

The Color tab lets you select a plain color.

1 - Opacity. You can set up the opacity of the selected color. Unlike the opacity of an object or
layer, here you can adjust the transparency of an object's part, for example, the object's body,
while the stroke will remain opaque.

2 - Blend mode. If you wish to select a blend mode for the whole object, use the Layers panel.
147

3 - Eyedropper tool. It helps you copy colors from other objects. Read Selecting Colors for
more details.

4 - Sample of the currently selected color.

5 - Hexadecimal representation of the current color. By long-pressing, you can bring up the
context menu that lets you copy or paste the value.

6 - Color mode. You can select RGB, CMYK or HSB. There is also an option to choose
Grayscale.

7 - Values of the primary colors that create the final color. The Grayscale color model has only
one parameter here. If you select the HSB color model, the panel will show the Hue, Saturation
and Brightness parameters. You can tap on the numeric value of any color to the right from the
slider in order to edit it.

8 - Opacity of the current color. This opacity will be preserved if you save this color as a
swatch.

9 - Save the current color as a swatch.

10 - Library of color swatches. You can save a color to the library in order to use it at a later
time.

Using Swatches

You can save a color as a swatch in order to use it later. The library of swatches can save you
time when you need to apply the same color many times. The library contains a number of
colors by default.

To save the current color as a swatch, tap on the plus button.

To restore a color from a swatch, tap on that swatch.

In order to delete a swatch, long-press it and choose Delete.

The library of swatches works with gradients in the same way as described above.

Gradient

You can create either a linear or radial gradient. To select one of the types, tap the
corresponding button that is located above the gradient preview field. The Gradient Fill section
explains how to create and modify gradients.
148

Linear Gradient

1 - Opacity of the whole gradient. You can also adjust the opacity of the colors that create your
gradient. This lets you create a transition from some color to a fully transparent area.

2 - Blend modes. If you wish to select a blend mode for the whole object, use the Layers panel.

3 - Buttons to select the linear or radial gradient type.

4 - Reverse the direction of the gradient. The result will be similar to rotating the gradient by
180 degrees.

5 - Gradient preview field. This is not only a preview but a tool to adjust your gradients. We will
describe later how to use it.

6 - Scale adjusts the width of the color transition area in relation to the whole size of the
gradient.
149

Scale: 100% Scale: 20%

With 20% scale, the pure black and red colors took up most of the image space.

Note that the preview doesn't change when you adjust this parameter. You should use an
object with your gradient applied in order to see the result.

7 - The angle of the gradient. You can rotate a gradient in relation to the object it was applied
to. Changing the angle doesn't affect the gradient preview field.

8 - Offset of the gradient from the centered position. Drag the round handle and preview the
result on the object to which the gradient was applied.

Centered Off the center

9 - Save the current gradient as a swatch.

10 - Library of swatches. You can save a gradient to the library in order to use it later.

Radial Gradient

Radial gradients share most options with linear gradients. Let's look at those that are specific to
radial gradients.
150

1 - Scale adjusts the width of the color transition area in relation to the whole size of the
gradient. By adjusting this parameter, you can create objects that look like a sphere under
different lighting conditions.

Scale: 99% Scale: 46%

151

Note that the preview doesn't change when you adjust this parameter. You should use an
object with your gradient applied in order to see the result.

2 - Roundness changes the aspect ratio of the gradient. It is circular at 100%. If you decrease
the value to 50%, the gradient will look like an oval with the height two times smaller than the
width.

3 - The angle of the gradient. You can rotate a gradient in relation to the object it was applied
to. Changing the angle doesn't affect the gradient preview field.

4 - Offset of the gradient from the centered position. The original transition between colors will
be preserved. Drag the round handle and preview the result on the object to which the gradient
was applied.

5 - Offset of the gradient from the centered position. The transition between colors will change.
Drag the round handle and preview the result on the object to which the gradient was applied.

Image

The Image tab lets you use an image as a texture. There are various options that define the
position and size of the image inside the object boundary.

For more details, read the Image Fill section.

152

Selecting Colors
There are several ways to select a color for Stroke, Fill or some other effect.

Using the Color Panel

Select a Color Directly

The most universal way to select a color is to set it from scratch. First, select a color model,
such as RGB or CMYK. If you already know the numeric values for color components, for
instance, red, green and blue, set them using the sliders or text fields.

If necessary, adjust the opacity.

Using Swatches

If a color or gradient that you need is present in the library of swatches, tap on the
corresponding swatch.
153

Using the Eyedropper Tool

You can copy a color from almost any spot visible on the screen. To do this, tap on the
eyedropper icon in the Color panel. The app will show a magnification glass. You should drag it
in order to place its center over the color you want to choose.

Copying Object's Style

You can copy the style of another object.

Note that a style is not only a single color. By copying a style, you can copy a combination of
the stroke and fill colors, and also effects like shadow depending on what has been applied to
the source object.

To copy an object's style:

1. Select the source object.

2. Choose Copy Style from the main menu of the Appearance panel.
3. Select the destination object.
4. Choose Paste Style in the menu of the Appearance panel.

You can also copy a style with the help of the Eyedropper tool:

1. Select the destination object.

2. Activate the Eyedropper tool located in the Tools panel.
3. Tap on the source object.

Modifier Keys and Shortcut Summary

With an external keyboard, you can use the following shortcut and modifier keys.

Shortcut:

I activates the Eyedropper tool.

Eyedropper tool modifier keys:

Space switches to the Pan mode.

Command switches to either Move or Selection tool depending on which of them was
active most recently.
154

Gradients
There are two ways to fill an object with a gradient:

Use the Gradient tool to add and adjust a gradient directly on the canvas.
Use the Color panel.

Note that any of these methods does not exclude another. You can do part of the work with the
help of one method and then finish using another.

Using the Gradient Tool

Add Gradient

To fill an object with a linear gradient:

1. Select the object.

2. Activate the Gradient tool on the Tools panel.
3. Slide with your finger over the object.

The point, where you first touch the screen, gets the first base color. The point where you
detach the finger, has the second base color. In-between colors gradually change from one
base color to another.

Adjust Gradient Colors

Let's see how a gradient is created. We'll talk about linear gradients for simplicity. In order to
edit a gradient on the canvas, activate the Gradient tool.

Any gradient has two predefined colors at its ends. Let's call such predefined colors "base
colors". Base colors are shown inside circles. The default gradient is based on two base colors.
We'll see later how to add more.

All colors in the middle are generated by the software to create a smooth transition between the
base colors.

The direction along which colors change is shown by a line that links the base colors. There are
white and black handles at the ends of the line.
155

To add an intermediate base color, tap on the line.

The third base color will be shown in a new circle attached to the line.

You can drag colors in order to change the distribution of colors over the given area.

To delete an intermediate color, drag it off the line.

Only intermediate base colors can be deleted.

In order to change a base color, tap on the corresponding circle. Then use a simplified version
of the Color panel to select a new color.

Adjust Gradient Position

The black and white handles let you rotate the gradient and also change the distance between
the base colors at the ends.

To move the gradient in relation to the object, drag the line which links the two handles.
Alternatively, drag the white and black handles to new positions.

To rotate the gradient, drag either black or white handle around the opposite one.
156

To change the width of the color transition area, move one handle to or away from another
handle.

Using the Color Panel

Add Gradient

When you open the Gradient tab of the Color panel, you automatically apply a default gradient
to the currently selected object.

Adjust Gradient Colors

You can add and delete base colors in the same way as you can do on the canvas. See the
Adjust Gradient Colors subsection for details.

In order to change a base color, tap on the corresponding circle.

Drag circles that define the location of base colors to make different color tints take up more or
less space.
157

You can set all colors at once by tapping on a predefined or custom swatch.

Adjust Gradient Position

The Scale parameter lets you change the distance between the base colors at the ends. The
result is equivalent to moving the black handle on the canvas closer or farther from the white
one.

Use the rotation control to change the direction of the gradient.

To move the whole gradient relative to the object, use the square control or change the X and Y
values. Note that it is more convenient to move and rotate gradients directly on the canvas.
158

Image Fill
You can use raster and vector images in your document. They may be used as textures,
backgrounds or for other purposes.

Add an Image

In order to fill a shape with an image, you should use the Color panel:

1. Select an object.
2. Tap on the color icon of the Fill property to open the Color panel. Then select the Image
tab.
3. Tap on the Image… button and select an image.
4. Adjust image properties if necessary.

You can also copy an image from other software.

Whatever way you have added an image, you can come back to the Color panel and re-adjust
the settings there.

The Color Panel

159

1 - Opacity. Unlike the opacity of an object or layer, here you can adjust the transparency of the
image itself, keeping the stroke or other effects with their own opacity.

2 - Blend modes. If you wish to select a blend mode for the whole object, use the Layers panel.

3 - Image thumbnail.

4 - Tap to load an image from a file, Photos or Camera.

5 - The Fill Type options define how the image should fit the object. For details, see the Fill
Type section.

6 - Rotate the image inside the object.

7 - Offset of the image from the centered position in relation to the object. Drag the round
handle and preview the result on the object in your document.

8 - Set the image offset using numeric values. These edit boxes work together with the square
offset control.

9 - The horizontal and vertical scales of the image. You can make the image bigger or smaller
without resizing the object which contains the image. At a scale higher than 100%, the image
will get cropped. In order to change the both values simultaneously, lock them using the icon
between the fields.

10 - Shear the image. This parameter transforms the image into a parallelogram.

11 - Flip the image inside the object.

Note that when the Fill Type is set to Stretch, the program sets most of the parameters
automatically. Consequently, most of the controls are not available.

Fill Type

The Fill Type drop-down menu lets you choose the Fill, Stretch and Tile options.

At 100% scale, and when the boundary has the same aspect ratio as the image, all of the
options can yield the same result. The difference will become visible if you change the aspect
ratio of the boundary or if you scale the image.
160

Original image

To see how the Stretch option works, we can decrease the height of the object. With Fill, the
image will keep its aspect ratio, but some image parts that don't fit can be invisible. Stretch will
reshape the image to fit it for the new width and height.

Fill: Stretch:
image is cropped image is deformed

The Tile option makes a difference when the image is scaled down. Many copies of the image
will take up the whole available space. With Fill, you'll still have a single small copy.

Fill: Tile:
single copy many copies

Note that to create a texture, you may need to use a specially designed image that can be tiled
seamlessly. Creation of such images is outside the scope of this documentation.
161

The Recolor Panel

The Recolor panel is used to adjust object colors. To open the panel, select Recolor in the
menu of the Appearance panel. Another way is to choose Recolor from the popup menu below
the Appearance buttons on the right screen side.

The panel is designed to change many different colors of one or multiple objects at once. This
is useful when you need to try different color schemes. The panel is also capable of decreasing
the variety of colors by using one color tone instead of several similar ones. The key part of the
panel is the list of colors where you map the original colors into new ones.

1 - Shows how objects on the canvas would look if you apply new colors.

2 - Changes the Hue of all output colors.

162

3 - Changes the Saturation of all output colors.

4 - Changes the Brightness of all output colors.

5 - Merge Tolerance defines a threshold for merging close color tones into one color.

6 - Input color which is one of the object's original colors. Several original colors may appear in
the same line if they were set to be replaced with one output color.

7 - The lock icon lets you prevent an original color from being changed by any tool in the panel.

8 - The menu of the Recolor panel.

9 - Changes the order of colors in the list (e.g., by lightness).

10 - Output color that an object's element will receive if you apply changes.

Tapping on an original color in the list lets you select it. To select multiple lines with colors,
swipe over each of them horizontally. Selecting colors is needed to manipulate them directly.

The panel lists stroke and fill colors, as well as base colors of raster effects. If an object has a
gradient with several base colors, all of them will appear in the list.

The panel cannot recolor an image used to fill a shape.

The panel has a menu with these commands:

Merge merges selected input colors.

Split splits input colors that are displayed in the same line. This command does the
opposite to Merge.
Lock lets you keep the output color unchanged. This command repeats the function of
the lock icon.
Unlock deactivates the lock option.
Restore makes the output color identical to the corresponding input color. This command
also splits input colors if they were merged.
Reset All restores the original object colors.

Change the Hue, Saturation and Brightness

The Hue, Saturation and Brightness sliders affect all of the output colors. If you don't want a
certain output color to be modified, lock it using the lock icon.

Set an Output Color Directly

You can set an output color directly. To do this, tap on the circle with the output color. This
opens the Color panel. The field with the Hex color representation allows you to copy or paste a
value. To do this, long-press on the field and choose a command from the context menu.
163

In order to make the output color the same as the corresponding input color, choose the
Restore command from its context menu.
164

Merging Colors

Merging colors lets you represent input colors with a smaller number of output colors. This can
be done by replacing multiple similar input colors with the same output color. This is an
equivalent for the posterize function from raster graphics editors.

You can merge colors automatically or manually. Also you can combine these two methods.

Once two or more colors have been merged, they appear in the same line, and consequently
have the same output color. The new output color is the same as one of output colors before
merging.

The following image shows two green colors merged. The output color was taken from the
second green color.

Merging Colors Automatically

To merge colors automatically, just move the Merge Tolerance slider to the right. The Merge
Tolerance set to 0% turns the automatic merging off. By increasing the tolerance, you allow
more different color tones to get into the same group.

To prevent a particular color from being merged, lock it.

Merging Colors Manually

In order to merge input colors manually, drag one of them on top of another. The output color
will be taken from the input color onto which you drop other colors. In other words, if you drag
a red color onto a blue one, the output color of this group will be the same as the blue color
had before merging.

Another way to merge colors is to select multiple of them in the list. Then choose the Merge
command from the menu.

In order to separate merged colors, select Split in the menu. Or just drag one of merged colors
to a new line.
165

Introduction to Text Objects

You can add text to your design. The Text tool is used to add text. The tool has several
modes that create different types of text. These modes are explained in the following sections.

A new text object contains the default text. You can type in your own text or paste it from the
clipboard.

Types of Text Objects

Rectangular Text Boundary

Text can be placed inside a rectangular text box. This is the most common type. You can use
this type of text object for a few words as well as for several paragraphs.

If you resize a text box, or edit text, the latter automatically wraps to the container boundary.
The size of the text box doesn't depend on the amount of text inside or on the font size. It is
possible to create text inside a non-rectangular boundary.

Distortable Text

You can add distortable text. Text inside this text object fits the width and height of the
bounding box. If you change the text box size, the text will squeeze or stretch in order to fit the
new width and height. On the other hand, if you change the font size, the text box will adapt to
new dimensions of the text.

Such text won't wrap to the next line automatically. If you wish to create another line, you
should place the cursor at a certain position and tap on Return.

This type of text object is useful for small pieces of text or for headings.
166

Text Along a Path

Text can be placed on a path. Text starts at one of the end points. In the case of a closed
shape, one of the anchor points will play the role of the beginning of the path. You can edit the
path using standard path editing tools.

This text object type can be used for small portions of text.

Text Inside a Shape

A path can serve as the boundary for text. Like a regular text box, it outlines the area that can
be taken by text. You can edit the path using standard path editing tools.

Presenting Text as Columns

A single piece of text can be distributed within several text boxes. This kind of layout is
frequently used to create columns of text. The text can flow from one text box to another
because the text boxes are linked. This feature is supported by the rectangular text and text
inside a shape objects.

Converting Text to Paths

You can convert text to path using the Expand button in the Path panel. This command turns a
text object into a group of paths that will look like the original letters. You will be able to modify
those paths using the Selection and other tools. It will not be possible to use the text editing
and formatting tools any more. There is no way to convert paths back to text, unless you use
the Undo command. For that reason, prefer to work with text objects when you need to display
text in your design.
167

Text in Rectangular Boundary

Adding Text

To add a text box:

1. Activate the Text tool in the Tools panel.

2. Touch the screen and move your finger on it to start drawing the text box.
3. Detach your finger to finish drawing.
4. Type in or paste new text.

To exit the text editing mode, activate the Move tool.

Editing and Formatting Text

To edit text in your document, double-tap on it with the Move or Selection tool. Alternatively,
you can start editing text by tapping on it with the Text tool. The built-in text editor provides
basic capabilities for editing and formatting text.

Apart from the text itself, you can change its font, color and other properties as described in the
Properties of Text section.

Editing Text as Paths

You can convert a text object to paths using the Expand button in the Path panel. Then you
can edit each character as paths and anchor points using the respective tools. Note that after
expanding a text object it will not be possible to edit it as text nor change its formatting.

Modifying the Boundary

To resize or rotate the boundary, drag the corresponding corner or side handle as explained in
the Move, Resize and Rotate Objects section.

The boundary of a text box can also be modified as a path with the Selection, Pen and other
tools. So, you can create a "text in a shape" object by customizing a rectangular text box.
168

Modifier Keys and Shortcut Summary

With an external keyboard, you can use the following shortcuts and modifier keys.

Shortcuts:

T activates the Text tool.

Shift-T activates the Text on Path tool.
Option-T activates the Text in Shape tool.

Text tool modifier key:

Command switches to either Move or Selection tool depending on which of them was
active most recently.
169

Distortable Text

Adding Text

To add a text box:

1. Activate the Text tool in the Tools panel.

2. Tap on the canvas.
3. Type in or paste new text.

To exit the text editing mode, activate the Move or other tool.

Editing and Formatting Text

To edit text in your document, double-tap on it with the Move or Selection tool. Alternatively,
you can start editing text by tapping on it with the Text tool. The built-in text editor provides
basic capabilities for editing and formatting text.

When you add or remove a portion of text, the text box resizes automatically to hold the
present amount of text.

Apart from the text itself, you can change its font, color and other properties as described in the
Properties of Text section.

Distorting Text

You can squeeze or stretch text by changing the width or height of the text box with the Move
tool. To do that, drag its side or corner handle. Text won't wrap to another line when the
amount of space inside the text box decreases or increases. Instead of that, the size of
characters changes to make the text fit the currently available space.

To resize text without distorting it, touch and hold one finger on the screen while dragging a
corner handle of the text box with another finger. Or activate the corresponding mode in
the Control panel.

Editing Text as Paths

You can convert a text object to paths using the Expand in the Path panel. Then you can edit
each character as paths and anchor points using the respective tools. Note that after
170

expanding a text object it will not be possible to edit it as text nor change its formatting.

Modifying the Boundary

To resize or rotate the boundary, drag the corresponding corner or side handle as explained in
the Move, Resize and Rotate Objects section.

The boundary of a text box cannot be modified as a path.

171

Text Along a Path

Adding Text

We assume that a path is already present in your document.

To place text along a path:

1. Activate the Text on Path tool located in the Tools panel.

2. Tap on the path (not fill or shadow). The app will display a text editor containing the
default text.
3. Type in or paste new text.

To exit the text editing mode, activate the Move or other tool.

If the path is not long enough to display the entire text, the object's frame has a red square. It is
visible when the object is selected.

Editing and Formatting Text

To edit text in your document, double-tap on it with the Move or Selection tool. Alternatively,
you can start editing text by tapping on it with the Text tool. The built-in text editor provides
basic capabilities for editing and formatting text.

Apart from the text itself, you can change its font, color and other properties as described in the
Properties of Text section.

Aligning Text with the Path

Text starts at the beginning of the path by default. It is the point from which you begin drawing
a path with the Pen or Pencil tool. It is less obvious, but all curves and shapes created with
tools like Rectangle or Star also have the start and end points. There are several settings that
let you change the position of the text in relation to the path. By combining those settings, you
can produce different results.

Let's take a look at a few typical cases. We use a standard oval whose path begins at the upper
point and goes in the clockwise direction.
172

Example 1

The default oval was used as the path for the default text.

Example 2

The text was aligned with the end of the path using the text alignment buttons in the text
properties panel.
173

Example 3

Create a gap between the start point of the path and text by increasing the indent width.
174

Example 4

The start and end points of the path were swapped using the Reverse button in the Path panel.

Example 5

The start and end points of the path were swapped using the Reverse button in the Path panel.
Additionally, the text was aligned with the middle of the path.

Editing Text as Paths

You can convert a text object to paths using the Expand button in the Path panel. Then you
can edit each character as paths and anchor points using the respective tools. Note that after
expanding a text object it will not be possible to edit it as text nor change its formatting.
175

Modifying the Path

To resize or rotate the path that defines the text's shape and direction, drag the corresponding
corner or side handle of the object's boundary as explained in the Move, Resize and Rotate
Objects section.

The path can also be modified with the Selection, Pen and other tools.
176

Text Inside a Shape

Adding Text

We assume that a shape (either closed or open path) is already present in your document.

To add text inside a shape:

1. Activate the Text tool in the Tools panel.

2. Tap on the shape. The app will display a text editor containing the default text.
3. Type in or paste new text.

To exit the text editing mode, activate the Move or other tool.

Note that properties of the original path, such as stroke, fill or effects, will not be preserved
after adding text inside the shape.

Editing and Formatting Text

To edit text in your document, double-tap on it with the Move or Selection tool. Alternatively,
you can start editing text by tapping on it with the Text tool. The built-in text editor provides
basic capabilities for editing and formatting text.

Apart from the text itself, you can change its font, color and other properties as described in the
Properties of Text section.

Editing Text as Paths

You can convert a text object to paths using the Expand button in the Path panel. Then you
can edit each character as paths and anchor points using the respective tools. Note that after
expanding a text object it will not be possible to edit it as text nor change its formatting.
177

Modifying the Boundary

To resize or rotate the boundary, drag the corresponding corner or side handle as explained in
the Move, Resize and Rotate Objects section.

You can modify the boundary of your text as a path with the Selection, Pen and other tools.

Rotate a Shape in Relation to Text

To rotate a shape in relation to the text inside it:

1. Select the shape by tapping on it with the Selection tool .

2. Rotate the shape using the Free Transform tool .

178

Properties of Text
The Appearance panel lets you change text properties such as color, font and more. To open
the panel, tap on the corresponding icon in the main window. Notice that the Appearance panel
lets you change the font size and color directly.

To access all of the properties, tap on the gear icon of a text object.

1 - Select a font.

2 - Select a typeface.
179

3 - Set up the text color.

4 - Set up the font size.

5 - Make text bold, italic or underlined.

6 - Select the text alignment.

7 - Change the kerning.

8 - Set up the line spacing.

9 - Change the baseline.

10 - Set up the amount of space after a paragraph. If the whole text box is selected, this control
affects all paragraphs. In the editing mode, you can select one or several paragraphs. In this
case, spacing after selected paragraphs will be changed.

11 - Set up the paragraph indent width.

12 - Set up the amount of space before a paragraph. If the whole text box is selected, this
control affects all paragraphs. In the editing mode, you can select one or several paragraphs. In
this case, spacing before selected paragraphs will be changed.

13 - Tapping on this button lets you create and set up a list. You can choose numbers or letters
for ordered lists, or bullet-like symbols.

List Properties

1 - Set the distance from the bullet symbol to the text box border.
180

2 - Set the distance between the bullet symbol and the beginning of the text.

3 - Decrease or increase the indent level to create a nested list.

4 - Options to create either numbered or bulleted list.

181

Creating Columns with Flowing Text

You can split your text into several parts to make it easier to read or to combine it with images.
Columns of text are an example of such a layout. Text boxes that contain such text are linked
into a chain. When the first text box becomes full, the text automatically flows into the second
one, third one and so on. The same happens when you change the size of the text box or font.

Most commonly, the rectangular boundary is used for flowing text. Text inside a shape also
supports this feature.

The text object boundary indicates whether a particular text box is single or linked with others.
A linked text box has a tag at the top that displays the number of this text box in the chain.
Once you select any text box in the chain, the rest will display their boundaries and numbers. A
single text box has no tag.

The boundary of a selected text box has a square control on each side. The functions of these
controls are explained in the table. Consider the left control as the input point and the right
control as the output point.
182

Control Functions Actions

Create a linked
A blank control on the left side of the frame
text box or link an
means that there is no other text box linked to
existing text box
this side. The text box is either single or the first
to the current
one in the chain.
one.

Blank

Unlink the
An arrow directed inside indicates that text preceding text
begins in another text box and continues in the box or add a
current one. The text box is a part of a chain but linked text box
not the first one. before the current
one.

Arrow inside

Create a linked
A blank control on the right side of the frame
text box or link an
means that there is no other text box linked to
existing text box
this side. The text box is either single or the last
to the current
one in the chain.
one.

Blank

Unlink the
An arrow directed outside indicates that text following text box
continues in another text box. The current text or add a linked
box is a part of a chain but not the last one. text box after the
current one.

Arrow outside

A red plus on the right side of the frame means Create a linked
that the text doesn't fit the given space. The text text box or link an
box can be either a single one or a part of a existing text box
chain. In the second case, it is the last text box to the current
in the chain. one.

Red plus
183

Adding Linked Text Boxes

To create a chain of linked text boxes, add the first text box. Tap on its right-hand control. Draw
the second text box. Alternatively, you can tap on the control and then tap on the canvas. In
this case, the second text box will have exactly the same size as the first one. You can continue
doing this in order to create a chain of multiple text boxes.

Linking Text Boxes

To link two text boxes, use the controls on their sides. You can link the control on the right-hand
side of one text box to the control on the left side of another text box. Or vice versa. It is only
possible to link either two blank controls or a red plus and a blank control.

In order to link two text boxes, tap on a square control of one of the text boxes. To make this
text box the first in the chain, choose its right control. To make it the second, choose its left
control. Tap on the other text box to complete the operation.

Linking Two Chains of Text Boxes

In order to link two chains of text boxes, you should link the right control of the last text box of
one chain to the left control of the first text box of a second chain. This requires the same
actions as you take to link individual text boxes.
184

Unlinking Text Boxes

To unlink a text box from the preceding one, tap on its left control. To unlink from the following
text box, tap on the right-hand control of the current text box. Then tap on the text box to
finish. Alternatively, the second tap can be made on a text box that you want to unlink from the
current one.

Inserting a Text Box in the Middle of a Chain

To add a text box in the middle of a chain, after a particular text box, tap on its right-hand
control with an arrow directed outside. Then draw a new text box. The new text box will be
automatically linked to the preceding and following text boxes.

To insert a text box before a particular one, use its left control.

Removing a Text Box from a Chain

To delete a text box from your design, just delete it as you would do with any object. If a text
box is located in the middle of the chain, the program will automatically relink the text boxes
before and after it.

If you want to remove a text box from a chain but preserve it in the design, unlink this text box
and relink other text boxes if necessary.
185

The Shadow Effect

You can add a Shadow effect to an object to create a drop shadow. You can also add an Inner
Shadow effect.

Shadow Inner Shadow

The Appearance panel is used to add and adjust the effects.

1 - Visibility of an effect.

2 - Add a new effect.

3 - Open settings of an effect.

5 - Tap to adjust the color of an effect. This button opens the Color panel.

In order to add a shadow, tap on the plus button in the Appearance panel. Select Shadow or
Inner Shadow. Then tap on the gear icon of the effect and set up its properties. You can also
186

change the color of the shadow.

To delete a Shadow effect, slide over it in the Appearance panel to the left. Then tap on the
trash bin icon.

The Shadow effects create raster graphics. If you plan to export a high-resolution image, or, if
the exported image might be enlarged in other software, make sure that your export settings
are sufficient for that.

Settings of the Shadow Effect

1 - Opacity of the shadow.

2 - Blend mode that defines how the effect's colors interact with underlying colors. Blending is
explained with examples in Blending Layers.

3 - The direction in which the shadow is casted.

4 - The base color of the shadow.

5 - The offset of the shadow in relation to the object.

6 - Amount of blur.
187

The Glow Effect

You can apply the Inner Glow and Outer Glow effects to objects.

Outer Glow

The Appearance panel is used to add and adjust the effects.

1 - Visibility of an effect.

2 - Add a new effect.

3 - Open settings of an effect.

4 - Tap to adjust the color of an effect. This button opens the Color panel.

In order to add a glow effect, tap on the plus button in the Appearance panel. Select Inner Glow
or Outer Glow. Then tap on the gear icon of the effect and set up its properties. You can also
188

change the color of the glow.

To delete a Glow effect, slide over it in the Appearance panel to the left. Then tap on the trash
bin icon.

The Glow effects create raster graphics. If you plan to export a high-resolution image, or, if the
exported image might be enlarged in other software, make sure that your export settings are
sufficient for that.

Settings of the Glow Effect

1 - Opacity of the glow effect.

2 - Blend mode that defines how the effect's colors interact with underlying colors. Blending is
explained with examples in Blending Layers.

3 - The thickness of the glow.

4 - Amount of blur.

5 - The base color of the glow.

189

The Blur Effect

You can add a Blur effect in order to soften an object's edges.

Original object Blur effect

The Appearance panel is used to add and adjust the effects.

1 - Visibility of an effect.

2 - Add a new effect.

3 - Open settings of an effect. Blur lets you adjust its width directly in the Appearance panel.

4 - Tap to adjust the color of an effect. This button opens the Color panel.

In order to add a blur effect, tap on the plus button in the Appearance panel. Select Blur. Then
adjust the blur width.
190

To delete a Blur effect, slide over it in the Appearance panel to the left. Then tap on the trash
bin icon.

The Blur effect creates raster graphics. If you plan to export a high-resolution image, or, if the
exported image might be enlarged in other software, make sure that your export settings are
sufficient for that.
191

Introduction to the Object Shape Transformation

The following methods can be used to modify objects:

Resize or rotate using the bound box

Editing tools: the most powerful, but, at the same time, the most labor-consuming way
Smart shape-specific methods: easy-to-use, they apply pre-programmed object
transformations
Rounding of the object's corners
Transform panel: gathers the resize, rotation and other tools in one place
Free Transform tool: lets you distort an object
Combine objects
Apply clipping mask
Fusion tool: lets you create a new object from several others

In this chapter, we are going to learn about special tools that help you change the shape of
objects, such as the Transform panel and Free Transform tool. Others are described in the
dedicated chapters.

Combining objects as well as applying a clipping mask change the visual representation of
objects. At the same time, these methods provide you certain access to the original objects.
192

The Transform Panel

The Transform panel is used to adjust the geometric properties of objects. To open the panel,
tap on the Transform button in the Geometry panel.

To transform a selected object, set new values in the dialog. Then tap on the Apply button.

The dialog saves settings after the last transformation. To apply these settings again, select an
object and choose Transform Again from the main menu. Or use the Apply button in the
Transform panel once more.

In order to restore the default values in the dialog, tap on the Reset button.

When you change one of the values, an outline displays a new shape or position of the object.
In the image below, we moved the object to the right but didn't tap Apply so far.

The controls in the Transform panel resemble controls from the Geometry panel.
193

1 - Scale the width or height. You scale up or down from the current object size. The width and
height can be changed independently. The chain icon between the fields allows you to preserve
the object's aspect ratio.

2 - Move the object horizontally or vertically by the specified distance.

3 - Reference point selector. The 9-point selector lets you choose a corner, the middle of any
side or the center. The reference point preserves its location when you resize or rotate the
object.

4 - The rotation tool.

5 - Shear the object. A transformation that can be done with the left tool can also be performed
using the combination of the right tool and rotation. The same applies to the right-hand tool.

6 - Flip the object horizontally or vertically.

7 - Transform each. When multiple objects are selected, you can select whether to apply a
transformation to each object individually (activated) or to all of them as if they were a single
object (deactivated). For example, two selected objects can rotate around the center of the
common bounding box (deactivated), or each can rotate around its own center (activated).
194

Rotation when Rotation when

Transform Each is off Transform Each is on

9 - Transform a copy of the object. Instead of applying a transformation to the original object,
the program creates its copy. Then it transforms the copy. As a result, you will have two
objects. This feature can be used to create a series of objects with one or several properties
changing.

In the following example, we move the square horizontally and vertically and rotate it at the
same time. The Copy Objects option should be activated. To repeat the image shown below,
you should apply the transformation using the Transform panel. Then repeat it by using
Transform Again in the main menu multiple times.

Doing this manually would take much more effort.

195

Transforming Objects
Scale Objects

Scale Using the Bounding Box

To resize an object, drag a corner or side handle on the object's bounding box using the Move
tool . To preserve the aspect ratio, do that by holding another finger on the screen. Or

activate the corresponding mode in the Control panel.

Scale Objects to a Particular Size

If you know the new size of the object, you can input it into the width and height fields of the
Geometry panel.

Scale Objects by a Particular Percentage

In order to scale an object by a certain percentage, set the W and H values in the Transform
panel.

Shear Objects

In order to shear an object, use either the Transform or Geometry panel.

Shear tools in the Transform panel

To shear an object, set the amount of transformation using one of the Shear controls. An icon
near each tool shows the corresponding transformation pattern.
196

In some cases, an object can be aligned to the grid or some other object. To preserve the
alignment, you can select a reference point using the 9-point control. The selected point will
retain its position after transformation. For example, you can align the top left corner of a
rectangle to the grid. Then tap on the upper left dot of the 9-point control. After transformation,
that corner will still be aligned to the grid.
197

Rounding Corners
User interfaces and websites often use elements with rounded corners. The most convenient
way to create objects with rounded corners is to use the features described below.

Note that some anchor points create corners on a path and others don't. These two cases are
explained in the Corner Points and Smooth Points section. We are going to make rounded
corners at Corner Points.

Rounded Corners in Smart Shapes

Smart Shapes are objects that are created using specialized tools. If you select a Smart Shape
with the Selection tool, the Control panel will let you set the radius and select the shape of the
corner in the popup panel.

Refer to the following subsection for details.

Rounding Corners in Arbitrary Paths

When a path is selected and the Selection or Lasso tool is activated, the app displays handles
near corner points. In order to create a rounded corner, move the handle. To hide or show the
handles, use the Show corner handles option in the Program Settings.

1 - Corner point.

2 - Corner rounding handle.

198

3 - Points that create a rounded corner.

As soon as you drag the handle off its original position, the corner radius will start increasing.
The corner radius is displayed in a popup panel while you are dragging the handle. You can
also see and edit the value of the radius in the Corner edit box.

To create a bevel, the app replaces the original point with two points and a segment. Strictly
speaking, when you are adjusting the corner radius or the bevel shape, you actually change the
location of these points and the shape of the new segment. Although the path got an extra
segment and point, the app remembers the position of the original point. At certain conditions
explained later, the new segment can become permanent and the rounding handle will
disappear.

If a path or Smart Shape was selected using the Selection tool, you can adjust radiuses of all
corners by moving just one corner handle. This is possible because all of the handles become
selected by default. In order to adjust only particular corners, you should select the
corresponding handles. To select or deselect several handles individually, tap on them holding
another finger on the screen. A second way to select or deselect multiple handles is to activate
the Add to Selection mode in the Control panel and then tap on the handles with the
Selection tool. The selected and deselected handles have different colors in the center.

1 and 3 - Selected corner handles.

2 - Not selected handle.

When the handles aren't visible, you still can adjust the corner radius using the Control panel.
199

Changing the Bevel Shape

By default, a rounded bevel is created. This concerns arbitrary paths as well as Smart Shapes.
To select a different bevel type, use the Control panel.

Concave bevel

Straight bevel

Round bevel

Elliptic bevel

The slider below the presets lets you set intermediate values.

Converting a Rounded Corner into a Path Segment

As it was mentioned earlier, the app adds an extra segment in order to make a corner rounded.
At the same time, it keeps information about the original corner point. Due to this, the handle
can change the radius or restore the original point.
200

If you transform the path or Smart Shape, the rounded corners will be replaced with the curved
segments permanently. The corresponding corner rounding handles will disappear. Then, if you
select the object with the Selection tool again, the app will detect currently present corners
and display their handles. The mentioned transformations include: non-proportional resizing,
flipping, distorting with Free Transform and Shear tools, applying the Expand and other
operations.

Modifier Keys Summary

With an external keyboard, you can use the following modifier key.

Selection tool modifier key:

Shift-tapping lets you select or deselect multiple handles to adjust the radius of particular
corners.
201

The Free Transform Tool

The set of transformation tools in the Tools panel includes Free Transform, Symmetrical
Distort and Free Distort.

In order to use any of these tools, you should select an object or several objects before
activating the tool. Once a tool is activated, you cannot select or deselect objects.

These tools can work either with the whole object, or with some of the object's anchor points.

Free Transform

The Free Transform tool can scale, shear and rotate objects.

Scale an Object

To scale an object, move the bounding box corner handle. By default, the width and height will
change independently.

Original image Image scaled vertically

Holding one or several fingers on the screen while working with the tool, you can change its
behaviour. When you hold one finger, it preserves the object's aspect ratio. When you hold two
fingers, it transforms an object symmetrically. When you hold three fingers, it transforms an
object symmetrically preserving the object's aspect ratio.

Shear an Object

To shear an object, move the handle in the middle of the bounding box side. This side will move
along its current axis.
202

Original image Shear-like distortion

For symmetrical distortion, hold two fingers on the screen.

Rotate an Object

To rotate an object around an arbitrary point, drag a pink circular handle to that point. Then
rotate the object by dragging the rotation handle.

Original image Rotation around an arbitrary point

Symmetrical Distort

The Symmetrical Distort tool can turn the rectangular bounding box of the object to
trapezium. The object will be distorted accordingly. This distortion lets you show an object in
perspective.

To perform the symmetrical distortion, drag a corner handle of the bounding box along one of
the sides. The handle located on the same side will move in the opposite direction by the same
distance.
203

Original image Symmetrical distortion

Free Distort

The Free Distort tool lets you move each corner handle independently from the others.

To distort an object, drag one of the corner handles to a new position.

Original image Free Distort tool used

Holding a second finger on the screen, you can transform an object symmetrically.

Modifier Keys and Shortcut Summary

With an external keyboard, you can use the following shortcut and modifier keys.

Shortcut:

Q activate the Free Transform tool.

Free Transform tool modifier keys:

Space switches to the Pan mode.

Option allows you to transform an object symmetrically.
Shift lets you maintain the object's aspect ratio.
204

The Path Panel

The Path panel lets you manipulate the entire object rather than operate on anchor points or
direction lines. To open the panel, tap on the corresponding icon in the main window.

1 - The Explode button splits a selected path into separate segments keeping the result looking
as the original path.

2 - Open a closed path. This button disconnects the two ends of the path. No path segments
will be removed.

3 - Reverse the direction of the path. This button can move an arrowhead from one end of the
path to another.

4 - The Expand button splits an object into several parts that look together as the original.

5 - Boolean operations.

6 - The Expand Boolean option lets you create a single object instead of a compound group
when you use Boolean operations.

7 - Group objects.
205

8 - Ungroup objects.

9 - Join two selected paths to create a single path. A new segment can be added to fill the gap
between the original paths.

10 - Connect the ends of a selected path. A new segment can be added to fill the gap between
the ends of the original path.

11 - Simplify a path by reducing the number of points it consists of.

12 - The Make Compound Path button creates a compound path out of selected objects.

13 - The Release Compound Path reverses the creation of a compound path. Paths that were
parts of the compound path will be separate again.

14 - The Make Clipping Mask button creates a clipping group from selected objects.

15 - The Release Clipping Mask button turns a clipping group into a set of individual objects.

16 - Fill a path that crosses itself so that holes are created according to the Even-Odd Fill Rule.

17 - Non-Zero Winding Fill Rule. Fill a path that crosses itself so that no holes are created.
206

Combining Objects
Introduction

You can combine objects using Boolean operations: Union, Intersect, Exclude and Subtract.
These operations can be applied to two or more objects. They also require that objects overlap
partially or completely.

The program finds overlapping and non-overlapping areas. Then it decides to hide or show
those areas depending on the selected operation. Later on this page, we'll see how this works
in a simple case with only two objects.

To combine objects, select two or more objects. Then tap on the Union, Intersect, Exclude,
Subtract or Divide button in the Path panel.

The result of combining objects is a compound group. If you need to create a single object with
a Boolean operation, activate the Expand Boolean option.

In some cases, the creation of a complex object by combining primitive ones is easier than
drawing the same object from scratch.
207

Union

The result of Union is an object that includes the area of all original objects.

Original images Union

The created object takes on the style of the original object that is in front of all others.

Intersect

The result of the Intersect operation is an object that includes only the area where all of
the original objects overlap.

Original images Intersect

The created object takes on the style of the original object that is in front of all others.

Subtract

The result of the Subtract operation is a part of the background object that is not covered
by any other object.

Original images Subtract

The created object takes on the style of the original object that is behind all others.

Exclude

The result of the Exclude operation depends on the number of objects that overlap at
every single point. A hole appears in the area where two objects overlap.
208

If more than two objects cover the same spot, then only an even number of objects creates a
hole.

Original images Exclude

The created object takes on the style of the original object that is in front of all others.

Divide

The Divide operation has a few significant differences from the rest. It is often used not to
combine shapes but to cut them. You can utilize it as a sophisticated Knife tool.

The result of the Divide operation is a regular group, not a compound group as with other
operations. So, to separate parts of the created group you just need to ungroup them.

When you apply the Divide operation to overlapping objects, all paths act as cut lines. The
result looks the same as you applied the Join operation. But inside the created group, there are
multiple objects.

All shapes in the group will have the same color as the upper of the original objects. In the
illustration below, the shapes were given different colors artificially.

Original images Divide

To illustrate a possible usage scenario for the Divide operation, let's create a pie chart showing
1/8 of something (or a pizza, if you like, with one slice separated). In order to cut a sector off a
circle, we can use a triangle that has an appropriate angle at one of its corners. In our case, it
must be 45 degrees.
209

We need to place the corner of the triangle in the center of the circle.

Then we select both of them and apply Divide. Once the result is ungrouped, we can delete the
part of the triangle that is outside of the circle. Finally, we pull the sector off the center of the
circle.

Compound Groups

A compound group can be created by combining objects.

In the Layers panel, a compound group is presented as an object named CompoundGroup

whose sub-items are the original objects. It is similar to groups. You can access and edit those
210

sub-objects individually. The program will instantly update the compound group.

You can change the properties of a compound group as you do with basic objects: apply
stroke, fill or effects.

To split a compound group back into the objects that compose it, use the Release button
in the Path panel.

To edit a compound group, use the Selection tool as you do to edit separate paths. Apart from
editing anchor points, this tool lets you move individual objects inside the compound group.

It can be helpful to double-tap on the compound group on the canvas in order to enter the
Isolate mode. In this mode, you can move, resize, rotate and transform the original objects.
211

Compound Path
You can combine objects using compound paths. After creating a compound path, the original
objects can be operated as a single one. A compound path can be created from two or more
objects. Areas where paths overlap create holes if the object is filled with a color, gradient or
image. A new compound path takes on the style of the original object that was in front of all
others.

To create a compound path, select two or more paths. Then tap on the Make Compound Path
in the Path panel.

A compound path can be converted back into the original objects. To do this, use the Release
Compound Path button in the Path panel.

The Layers panel displays a compound path as a basic object like a single path. Unlike a
compound group, you cannot access the original paths in the Layers panel. The Selection tool
still lets you edit anchor points of the original paths.

By using a compound path, you can cut holes in objects (prevent a particular area from being
filled) or create a complex object out of several simple ones.
212

To cut a hole, you should place one object over another. Select them. Then tap on the Make
Compound Path button. It doesn't matter if the smaller object is in front or behind the bigger
one. The same result can be achieved by applying the Exclude Boolean operation, followed by
Expand.

A path may outline some area in the middle of the object. The program uses certain rules to
determine if such an area is inside a shape, and therefore should be filled, or it is outside and
shouldn't be filled. These rules are Non-zero Winding Fill Rule and Even-Odd Fill Rule

. To choose a rule, tap on one of the Fill Mode buttons in the Path panel. The Even-Odd
rule is used by default because it creates more predictable results.

The following images demonstrate the difference between the two methods.

Non-zero Winding Fill Rule Even-Odd Fill Rule

Let's see in detail how the rules work.

Non-Zero Rule

The non-zero rule determines whether a point is inside or outside the shape body by going from
this point to the infinity in any direction. While going from the selected point toward infinity, we
should count how many times we crossed paths. Each time we cross a path drawn clockwise,
we should subtract 1. If we cross a path drawn counterclockwise, we add 1. The counted
number is called a winding number.

The rule: if the winding number is zero, the point is outside the shape, so we don't fill it (cut a
hole).

Notice that the direction of paths is a key thing in the non-zero rule.

Let's count the winding number (WN) for two cases. In the first, paths have the same direction.
In the second example, directions will be opposite.
213

Same direction

a: WN = 0. The a point is outside.

b: WN = +1. The b point is inside.

c: WN = +2. The c point is inside.

Opposite directions

d: WN = 0. The d point is outside.

A more complex example where the internal path changed its direction.

Different directions
214

Even-Odd Rule

The even-odd rule is more straightforward. To determine if a point is inside or outside, we

should go from this point toward infinity at any direction. We count how many paths we
crossed.

The rule: if the number of crossings is even, the point is outside. If odd, the point is inside.

Even-Odd Rule

e: 0 crossings - even. The e point is outside.

f: 1 crossing - odd. The f point is inside.

g: 2 crossings - even. The g point is outside.

215

Using a Clipping Mask

About Clipping Masks

A clipping mask is an object whose outline masks another object. You can treat such a mask as
an infinite surface with a hole defined by the clipping path through which you can see a masked
object.

You might be familiar with the crop tool that is present in any photo editing software. A
rectangular clipping mask can do the same, but it is much more flexible. It can have any other
shape and can also be applied to multiple separate objects. In addition to that, you can still edit
the mask and masked objects after the mask has been applied.
216

Use Clipping Mask to Hide Parts of Objects

To apply a clipping mask to an object:

1. Create a vector object that will be used as a clipping mask. Only the shape of its path
matters.
2. Place the clipping path over the object you want to mask.
3. Select both the mask and object.
4. Tap on the Make Clipping Mask button in the Path panel.

The result is a Clipping Group object that includes the clipping path and masked object.
217

Only a vector object can be used as a clipping path. If you try to create a clipping mask out of a
raster image, the rectangular boundary of this image will be used to create a clipping path.

You can mask any artwork.

A clipping mask created as explained above has no fill or stroke. It doesn't retain any style that
the original object could have. If you want the mask to retain its original style, use the method
explained below.

With help of the Layers panel, you can create a Clipping Group preserving the styles of the
object(s) and mask. To do this, open the Layers panel and make sure that the object and its
future mask are visible. Drag the object in the panel and drop it onto the object that should
become the mask. The app will create a Clipping Group with both objects inside it. If the group
should contain more objects, drag them into the group as well.

Edit a Clipping Mask

To edit a clipping mask, you can modify the clipping path using vector editing tools.

In order to outline the visible part of the masked object, apply a stroke to the clipping path.

Edit a Masked Object

In order to edit a masked object, select it in the Layers panel. The object can be found inside
the corresponding Clipping Group. Then you can modify the masked object using regular
methods and tools.

Release Objects from a Clipping Mask

To release objects from a clipping mask, select the respective Clipping Group in the Layers
panel or on the canvas. Then use the Release Clipping Mask button in the Path panel.

Notice that the clipping mask will turn into an invisible object if it has no stroke nor fill.
218

You can also release the clipping mask directly in the Layers panel. Expand the Clipping Group
item in the panel to see its contents. Then drag the object and drop it outside the group. If the
clipping group contains multiple objects, drag them one after another. Or select all of them and
drag them together. Once there are no objects in the group, it will disappear.
219

Cut an Object with the Knife Tool

The Knife tool can cut paths and objects into parts. This tool also works with groups and
compound groups.

To activate the Knife tool, tap on the Knife icon in the Tools panel.

To cut an object or path, select it. Then draw a cut line over that object or path.

Drawing with the Knife tool The object was split into two parts

If you cut a closed path, paths of created objects will also be closed. The program will
automatically add new path segments where they are needed.

Modifier Keys and Shortcut Summary

With an external keyboard, you can use the following shortcut and modifier keys.

Shortcut:

K activate the Knife tool.

Knife tool modifier keys:

Space switches to the Pan mode.

Command switches to either Move or Selection tool depending on which of them was
active most recently.
Option lets you make a straight cut.
Option-Shift allows you to make a straight cut directed at 45 and 90 degrees.
220

Cut a Path with the Scissors Tool

The Scissors tool can cut paths.

To activate the Scissors tool, tap on the Scissors icon in the Tools panel.

To split a path, tap on the path at the point where it should be cut. You can cut the path at any
point.

Modifier Keys and Shortcut Summary

With an external keyboard, you can use the following shortcut and modifier keys.

Shortcut:

C activates the Scissors tool.

Scissors tool modifier keys:

Space switches to the Pan mode.

Command switches to either Move or Selection tool depending on which of them was
active most recently.
221

Erase a Part of an Object

The Eraser tool can remove a part of an object. This tool also works with groups and
compound groups.

To activate the Eraser tool, tap on the Eraser icon in the Tools panel.

In order to erase a portion of an object, select this object. Then drag the tool over the object's
part you want to remove.

If the original object is created by a closed path, the program will keep it closed. After applying
the Eraser tool to the path, the latter will either change its shape or split into two closed paths.

The Eraser tool was dragged over the path.

The Eraser tool was dragged across the rectangle.

To change the diameter of the Eraser, use the Control panel.

Modifier Keys and Shortcut Summary

With an external keyboard, you can use the following shortcut and modifier keys.

Shortcut:

E activates the Eraser tool.

Eraser tool modifier keys:

Space switches to the Pan mode.

Command switches to either Move or Selection tool depending on which of them was
active most recently.
Option lets you erase along a straight line.
Option-Shift allows you to erase along a straight line directed at 45 and 90 degrees.
[ decrements the diameter of the Eraser tool.
] increments the diameter of the Eraser tool.
222

The Fusion Tool

The Fusion tool is designed to create objects with complex shapes from simpler ones. With
this tool, you can merge particular parts of original objects and remove unnecessary parts. You
can do similar work with help of the Boolean operations. However, the Fusion tool is more
interactive. It provides you with convenient visual feedback on what is going to happen with the
objects that you edit.

To activate the Fusion tool, tap on the Fusion icon in the Tools panel.

The tool operates on selected objects only. You must select two or more of them.

Controls of the Fusion Tool

The Control panel displays the following options when the Fusion tool is activated.

1 - Merge mode.

2 - Erase mode.

3 - Use the current object's appearance, or set up a new Stroke and Fill.

4 and 5 - The colors of new Stroke and Fill. Tap to set up the color or other properties.

How the Tool Works

The tool works with objects' paths. Let's select two overlapping objects, place a finger inside
one of them and slightly move it without crossing any of the paths.

The tool will find all nearest segments, no matter which of the objects they belong to, and try to
define the area those segments outline. Then it will highlight this area. When you detach the
finger, the Fusion tool will assemble a new path from the segments. So, the highlighted area
gives you the idea of the object's shape that will be created.
223

In our example, we have created a new shape that is filled with a gray color. The rest of the
segments formed a second shape.

Now, let's go to another example. We start with the same two ovals. But in this case, we'll
move the tool from the middle of one oval to the middle of the second oval.

Note that when we move the tool it draws a temporary line. This line indicates areas, the finger
passed through, which might be affected by the tool. When we cross a path segment with the
line, we tell the program to remove this segment and merge the areas the segment separates.

The Fusion Tool Modes

The Fusion tool has two modes that can be selected in the Control panel. We have just learned
about the default merge mode . In this mode, the tool creates a bigger area from several
smaller areas that touch each other.

The button in the Control panel activates the erase mode. You can also activate it by
touching the screen with a second finger. This mode uses different colors to highlight object
parts that will be removed.

Similarly to the merge mode, you can draw across one or multiple segments in order to remove
them.
224

Notice that after using the Fusion tool, you may have a number of separate segments instead
of a closed path.

To turn them into a single object, use the Fusion tool in the merge mode. Just drag with the
tool inside the area. You can also use the Selection tool to link anchor points manually.

Usage Example

Let's create a flower using seven circles and the Fusion tool.

Remove the external parts of circles. By the way, you don't have to do a lot of work in one
single step. Delete one segment at a time if this way is easier for you.

Remove everything inside the circle in the center.

225

We actually remove the unnecessary segments in the center, but we could do the same by
merging the central part of the flower.

Merge two parts of each petal.

This is what we finally have.

226

Modifier Keys Summary

With an external keyboard, you can use the following modifier keys.

Fusion tool modifier keys:

Space switches to the Pan mode.

Command switches to either Move or Selection tool depending on which of them was
active most recently.
Option switches from the Merge to Erase mode.
227

Introduction to Importing
It is a common practice to create more complicated projects using simple designs or images as
building blocks. For example, you can create a vector pattern and place it as a decoration in a
greeting card design. Or, you can import a raster image in order to create the background from
it. Adding graphics from an external source can be done by importing.

Imported graphics preserves many of its properties, such as raster or vector format, or color
model. You should remember this because it may be impossible to change those features once
an image is imported. This means that you may need to prepare graphics before importing.

Importing graphics can also influence your work or the final design in a way that you may not
originally expect. For example, you may have a design in which all colors used belong to the
CMYK color model. If you then import an RGB image, you will no longer have a pure CMYK
document. As another example, you may import a photo to serve as a texture or background in
a completely vector design. This can limit the ability to scale up your design without quality loss
because that photo will become pixelated at certain large scales.
228

Importing Graphics
To import graphics, open the main menu and select Import. Then choose the source. Photos
lets you import from your photo collection. The Camera option lets you take a picture using
your device camera. You can also import a graphic file using the File option. The app supports
SVG, TIFF, PNG, JPEG, PDF, HEIC and AI formats.

Raster graphic files that you import appear in your document as a rectangle filled with the
imported image. When you import an image in a vector format such as SVG or PDF, the app
works with it differently.

An imported SVG image becomes a Clipping Group. To access or edit the elements that are
parts of the image, use the Layers Panel. You can also split the Clipping Group into separate
objects. To do that, use the Release Clipping Mask button in the Path panel.

When you import a PDF, you can see it in your document as one object. To edit it, you have to
split it into parts with help of the Expand button located in the Path panel. The object will turn
into a Clipping Group. Then use the Release Clipping Mask button in the Path panel.

If you want to fill a shape with an image, open the Color panel and choose the Image tab. Then
select a graphic file. Note that the Color panel does not support the SVG format.
229

Exporting Documents
Supported File Formats

You can export your document to the SVG, PDF, PNG, TIFF and JPEG formats. SVG and PDF
let you export vector graphics that can be scaled without quality loss. SVG, PNG and JPEG are
frequently used for Web. PDF can be used to send your design to a print shop.

Export Your Design

To export the whole document or its part:

1. Open the main menu. Choose Share and then Export to open the Export panel.

2. Select a file format at the top.

3. Choose what you want to export using the Scope pop-up menu. You can choose to
export the Entire Document, Selection or particular Sheets.
4. Set up the rest of the export settings. They are explained in the Export Panel section.
5. Tap on the Save button and type in a file name in order to complete exporting.
230

Export Scope

The Scope pop-up menu helps you select what part of your design should be exported. With
Entire Document, you will export the entire document (all the sheets if you have many of them).
The Selection option will export a selected object or multiple selected objects. If you choose
Sheets, you can export particular sheets by selecting them in the list.

When the Scope is set to Sheets, the app exports each selected sheet to a separate file. The
Use Sheets Names option defines file names for exported files. They have automatically
generated names when the option is deactivated. If you switch it on, each file will be named
exactly as the corresponding sheet. Just make sure that there are no sheets with the same
name.

The Scope also defines the default size of the image that will be exported. If you export a
sheet, the size of the sheet will be used although the contents don't take up all of its space. If
you export a selected object, the object's boundary will define the size of the image. If you
choose to export the entire document, the image size will be set according to the area on the
canvas that includes all sheets together with gaps between them. In such cases, you may get a
huge image if you have several Letter-sized sheets in your document.
231

The Export Panel

The Export panel displays settings for different export formats: JPEG, PDF, PNG, SVG and
TIFF. Some of the settings are shared between the formats.

JPEG

Scope: Choose whether to export the entire document or a part of it. The Scope option is
described in the Export Scope subsection.

Resolution: Resolution of the output image. You can select one of the predefined options.

Width and Height: Set the absolute size of the output image.

Scale: Set the output image size in relation to the original dimensions. When you change the
Scale, the program shows the corresponding Width and Height.

Quality: Set the output image quality. By decreasing the value, you can have a smaller file, but
the image will preserve less details, and it may have artifacts.
232

PDF

Scope: Choose whether to export the entire document or a part of it. The Scope option is
described in the Export Scope subsection.

Resolution: Resolution of raster elements of the design. This option doesn't affect vector
elements. You can select one of the predefined options.

PNG

Scope: Choose whether to export the entire document or a part of it. The Scope option is
described in the Export Scope subsection.

Resolution: Resolution of the output image. You can select one of the predefined options.

Width and Height: Set the absolute size of the output image.

Scale: Set the output image size in relation to the original dimensions. When you change the
Scale, the program shows the corresponding Width and Height.
233

Transparent Background: Keep transparency in areas that contain no visible objects in your
design. When this option is turned off, a white background is used to fill such areas.

SVG

Scope: Choose whether to export the entire document or a part of it. The Scope option is
described in the Export Scope subsection.

Resolution: Resolution of raster elements of the design. This option doesn't affect vector
elements. You can select one of the predefined options.

Unique ID as object's name: Use unique IDs for paths, groups, etc. Otherwise, the app
exports the names which were used for naming objects, groups and layers in the Layers panel.
Turning this option on can be useful if you are going to use the exported image for Web
applications.

Text as curves: Convert text objects to paths. This option lets you avoid issues with missing
fonts. Note that using curves to display text can significantly increase the size of exported files.

Responsive: Create an SVG file in format that better fits responsive web pages.
234

TIFF

Scope: Choose whether to export the entire document or a part of it. The Scope option is
described in the Export Scope subsection.

Resolution: Resolution of the output image. You can select one of the predefined options or
type your own value.

Width and Height: Set the absolute size of the output image.

Scale: Set the output image size in relation to the original dimensions. When you change the
Scale, the program shows the corresponding Width and Height.

Transparent Background: Keep transparency in areas that contain no visible objects in your
design. When this option is turned off, a white background is used to fill such areas.

LZW Compression: Activate this option to decrease the output file size. Note that not all
software supports compressed images.

AMDN

The AMDN is an alternative format that is used for saving documents without compression.
235

Printing
You can print your design directly from the app. As an alternative, you can export your
document to a graphic file and then print it using any other software.

To print a document:

1. Open the main menu. Choose Share and then Print to open the Print panel.

2. Choose whether to print all or particular sheets. The panel treats each sheet as an
individual page.
3. Set the number of copies.
4. Tap on the Print button to start printing.
236

Introduction to the Library

Built-in Collection of Objects

The app provides you with a collection of different arrows, signs and so on that you can use in
your designs. All of these images are in vector format. You can edit them with the same tools
that you use for creation of your own graphics.

The objects can be found in the Libraries panel. To open it, bring up the main menu and
then choose Libraries & Images.

Images related to a certain subject area are located in the same category (e.g., Science). Such
categories are also called libraries in the program. Thus you have a library of arrows, a library of
symbols and so on.

Users cannot change the contents of the standard libraries. If you wish to store your own
objects, create a new library.

User's Libraries

The Libraries panel can serve you as a storage for reusable objects created in the app. User's
libraries can store almost any object type from a single path to objects with multiple effects
applied, or groups.

You can create as many libraries as you need. It is possible to add and delete objects from your
libraries. Objects in a user's library can also be reordered. Finally, you can delete a library if it is
not needed any more. All of this you can do with help of the Libraries panel.

Unlike the standard libraries, user's libraries can be exported and imported. This is useful for
sharing a library between multiple users or multiple devices.
237

The Libraries Panel

The Libraries panel has two main purposes. It gives you access to a collection of vector images
that you can add to your documents. The panel also lets you store your own objects so that
they can be reused later.

To bring up the panel, open up the main menu and then choose Libraries & Images.

1 - Open a built-in library or image stock.

2 - Open the panel's menu.

3 - Choose a library.

4 - Object's preview.

To add a library object to your design, drag the object onto the canvas. Another way is to tap
on the object's preview in the library.

Working with Libraries

To manage user's libraries, you can use the panel's menu. It is not possible to make any
changes in the standard libraries.

In order to create a new library, select New in the menu and type in a name. If you wish to
change the name, use the Rename command.

To delete a library that is currently displayed in the panel, choose the Delete command from
the menu. Note that the library will be removed together with all objects inside it.

Working with Objects

To add an object to a user's library, you need to create or open a library that should store the
object. Select the object and choose Add Object from the menu of the Libraries panel.
238

In order to remove an object from the user's library, select Edit Content in the menu. Then tap
on the minus icon in the corner of the object's preview. Tap on Done in order to exit the editing
mode.

To reorder objects, select Edit Content in the menu. Then drag one of the objects to a new
position in the library.

It is possible to export a user's library to a file that can be imported later on the same or
different device.
239

Exporting and Importing Libraries

You can export and import the contents of the user's libraries. This feature lets you create a set
of objects (e.g., components for a design) on one device and then use these objects on another
device to finalize the design. Exporting is also a convenient way to share your object with other
people.

Another use of exporting and importing is the possibility to create a backup copy of your
libraries outside the app.

Exporting

When you export one or all libraries, the app creates an *.amdl file. To import, you need to
provide a file in the same format. This format is supported on all platforms where you can run
the Amadine app.

To export one particular library, choose it in the Libraries panel. Then select Export in the menu
of the panel.

In order to export all of the user's libraries, use the Export All command in the menu of the
panel.

Importing

To import libraries from a file, use the Import command in the menu of the Libraries panel.

Libraries that you import should appear as separate items in the drop-down list of libraries in
the panel. If you import a library with the same name as one already present in the panel, both
of them will be listed. The program doesn't merge or delete libraries automatically.
240

Using Image Stocks

The app can import images from online image stocks directly into your document. The Internet
connection is required for that. The following stocks are supported: Pexels, Pixabay and
Unsplash.

The Libraries panel is used to access the image stocks. To bring up the panel, open up the
main menu and then choose Libraries & Images. Then choose a particular image stock
in the upper drop-down menu. By default, the panel displays the built-in image collection under
the Amadine title.

Type in keywords into the Search box and press Return to find images. The panel's menu
button lets you filter images by the orientation (e.g., portrait or landscape).
241

The panel displays previews of images. To add one to your design, drag and drop it. That can
also be done by tapping on a preview.
242

Each image has its author's name at the bottom. You can tap on it to open that particular
author's page in your browser.
243

Table of Contents
Contents 1
Brief Description 6
System Requirements 6
Technical Support 7
Useful Web Resources 8
BeLight Software Privacy Statement 9
Collection and Use of Personal Information 9
Collection and Use of Non-personal Information 10
Cookies and Other Technologies 10
Disclosure to Third Parties 11
Protection of Personal Information 12
Integrity and Retention of Personal Information 12
Access to Personal Information 12
Children 12
Third-party Sites and Services 12
Commitment to Your Privacy 12
Questions 13
The Main Window 14
Canvas and Sheets 14
Zooming In and Out 15
Rotating the Canvas 15
Position the Artwork within the View Area 15
Preview Modes 16
Minimalistic Interface 17
The Tools Panel 18
The Control Panel 21
Using Controls with Numeric Input 22
Using the Slider to Change the Value 22
Using the Numeric Keyboard to Change the Value 22
Program Settings 24
The Main Menu 26
Gestures 28
Basic Gestures 28
Move Tool 30
Move and Selection Tools 31
Pen and Selection Tools 31
Fusion Tool 32
Shape Tool 32
Apple Pencil 2 33
Keyboard Shortcuts 34
244

File 34
Edit 34
Modify 35
Type 35
Tools 36
View 37
Modifier Keys and Shortcuts 37
Creating Documents 39
The New Document Dialog 40
Opening Documents 41
The Document Browser 42
Saving Documents 44
Document Settings 45
Layout Basics 47
Sheets 47
Layers 48
Sheets 50
Activate a Sheet 50
Objects and Sheets 50
Manage Sheets using the Sheets Panel 50
Add and Delete Sheets 52
Move and Arrange Sheets 52
Jump to a Sheet 53
Sheets Tool 53
The Coordinate System 54
Modifier Keys and Shortcut Summary 54
The Grid 56
Setting Up the Grid 56
Layout Guides 58
Guide Lines 58
Smart Guides 59
Create a Guide from a Path 60
Select Objects 61
Select a Single Object 61
Select Multiple Objects 61
Select All Objects 61
Select an Object in the Layers Panel 62
Select Objects with Identical Properties 62
Deselect an Object 63
Isolation Mode 63
Select Objects Inside a Group 64
Defining the Order of Objects 64
Delete or Hide an Object 66
245

Move, Resize and Rotate Objects 67

Manipulating an Object on the Canvas 67
Using the Geometry Panel 69
Modifier Keys and Shortcut Summary 69
The Geometry Panel 70
Move and Rotate an Object with the Geometry Panel 72
Align and Distribute Objects 73
Align Objects 73
Distribute Objects 74
Set Up Spacing 75
Arrange Objects 76
Align and Distribute Anchor Points 76
Lock an Object 77
Group and Expand Objects 78
Group or Ungroup Objects 78
Using the Layers Panel for Grouping and Ungrouping 79
Compound Group 79
Expand Objects 80
Align Objects to the Pixel Grid 81
Create a Pixel-Aligned Object 81
Align an Object to the Pixel Grid 81
Why should you Align Objects to the Pixel Grid? 81
Introduction to Layers and Objects 83
Using Layers to Organize Objects 83
About the Layers Panel 84
The Layers Panel 85
The Menu of the Layers Panel 86
Select Layers and Objects 87
Delete Layers 87
Active Layer 87
Visibility of Layers and Objects 87
Opacity of Layers and Objects 88
Locking Layers and Objects 88
Layer's Color 88
Find an Object on the Canvas 88
Creating and Deleting Layers 89
Create a Layer 89
Delete a Layer 89
Arranging Layers and Objects 90
The Initial Order of Objects 90
Change the Order of Layers 90
Change the Order of Objects 91
Move an Object to Another Layer 91
246

Blending Layers 92
Transparency 92
Layer Blending 93
Vector Graphics 95
Path and its Features 96
Features of a Path 97
Segments 97
Anchor Points 97
Direction Lines and Direction Points 99
Draw a Path with the Pen Tool 100
Controls of the Pen Tool 100
Draw a Straight Line 101
Draw a Polygon 101
Draw Curved Line 101
Draw Curved Path 101
Continue Drawing an Existing Path 102
Rotating Direction Lines 102
Stroke Width and Color 102
Modifier Keys and Shortcut Summary 102
Create a Path with the Draw Tool 104
Settings of the Draw Tool 104
Modifier Keys and Shortcut Summary 105
Draw a Path with the Pencil Tool 107
Draw a Path with the Brush Tool 108
Edit a Path 109
Choose the View Mode 109
Select a Path 109
Select Anchor Points 109
Selecting Points the Lasso Tool 110
Controls of the Selection Tool 110
Add an Anchor Point 111
Delete an Anchor Point 111
Link Anchor Points 112
Set the Type of an Anchor Point 112
Change the Shape of a Corner 112
Manipulate Direction Lines 112
Show Direction Lines of a Corner Point 114
Modifier Keys and Shortcut Summary 114
Simplify a Path 116
Draw Lines and Shapes 118
Smart Shapes 118
Line 119
Star 120
247

Polygon 120
Rectangle 121
Rounded Rectangle 121
Ellipse 122
Arc and Sector 122
Further Editing 123
Modifier Keys and Shortcut Summary 124
Stroke 125
Add and Delete a Stroke 125
Edit Stroke Width 126
Modifier Keys and Shortcut Summary 127
Properties of a Stroke 127
Brush 133
Add and Delete a Brush Stroke 133
Properties of a Brush Stroke 133
Using Presets 134
The Appearance Panel 136
Menu Commands 136
Delete an Effect 137
Duplicate an Effect 137
Changing the Order of Effects 137
The Style of an Object 138
Introduction to Colors 139
Color Models 139
Grayscale 141
Representing Colors in the Hexadecimal Format 141
The Usage of the RGB and CMYK Color Models 142
Why do we have RGB and CMYK? 142
How to Choose a Color Model? 142
Switching Between Color Models 142
Which of the File Formats Support CMYK? 143
Color Profiles 143
Fill an Object with a Color, Gradient or Image 144
The Color Panel 146
Color 146
Gradient 147
Image 151
Selecting Colors 152
Using the Color Panel 152
Modifier Keys and Shortcut Summary 153
Gradients 154
Using the Gradient Tool 154
Using the Color Panel 156
248

Image Fill 158

Add an Image 158
The Color Panel 158
The Recolor Panel 161
Change the Hue, Saturation and Brightness 162
Set an Output Color Directly 162
Merging Colors 164
Introduction to Text Objects 165
Types of Text Objects 165
Presenting Text as Columns 166
Converting Text to Paths 166
Text in Rectangular Boundary 167
Adding Text 167
Editing and Formatting Text 167
Editing Text as Paths 167
Modifying the Boundary 167
Modifier Keys and Shortcut Summary 168
Distortable Text 169
Adding Text 169
Editing and Formatting Text 169
Distorting Text 169
Editing Text as Paths 169
Modifying the Boundary 170
Text Along a Path 171
Adding Text 171
Editing and Formatting Text 171
Aligning Text with the Path 171
Editing Text as Paths 174
Modifying the Path 175
Text Inside a Shape 176
Adding Text 176
Editing and Formatting Text 176
Editing Text as Paths 176
Modifying the Boundary 177
Rotate a Shape in Relation to Text 177
Properties of Text 178
List Properties 179
Creating Columns with Flowing Text 181
Adding Linked Text Boxes 183
Linking Text Boxes 183
Linking Two Chains of Text Boxes 183
Unlinking Text Boxes 184
Inserting a Text Box in the Middle of a Chain 184
249

Removing a Text Box from a Chain 184

The Shadow Effect 185
Settings of the Shadow Effect 186
The Glow Effect 187
Settings of the Glow Effect 188
The Blur Effect 189
Introduction to the Object Shape Transformation 191
The Transform Panel 192
Transforming Objects 195
Scale Objects 195
Shear Objects 195
Rounding Corners 197
Rounded Corners in Smart Shapes 197
Rounding Corners in Arbitrary Paths 197
Changing the Bevel Shape 199
Converting a Rounded Corner into a Path Segment 199
Modifier Keys Summary 200
The Free Transform Tool 201
Free Transform 201
Symmetrical Distort 202
Free Distort 203
Modifier Keys and Shortcut Summary 203
The Path Panel 204
Combining Objects 206
Introduction 206
Union 207
Intersect 207
Subtract 207
Exclude 207
Divide 208
Compound Groups 209
Compound Path 211
Non-Zero Rule 212
Even-Odd Rule 214
Using a Clipping Mask 215
About Clipping Masks 215
Use Clipping Mask to Hide Parts of Objects 216
Edit a Clipping Mask 217
Edit a Masked Object 217
Release Objects from a Clipping Mask 217
Cut an Object with the Knife Tool 219
Modifier Keys and Shortcut Summary 219
250

Cut a Path with the Scissors Tool 220

Modifier Keys and Shortcut Summary 220
Erase a Part of an Object 221
Modifier Keys and Shortcut Summary 221
The Fusion Tool 222
Controls of the Fusion Tool 222
How the Tool Works 222
The Fusion Tool Modes 223
Usage Example 224
Modifier Keys Summary 226
Introduction to Importing 227
Importing Graphics 228
Exporting Documents 229
Supported File Formats 229
Export Your Design 229
Export Scope 230
The Export Panel 231
JPEG 231
PDF 232
PNG 232
SVG 233
TIFF 234
AMDN 234
Printing 235
Introduction to the Library 236
Built-in Collection of Objects 236
User's Libraries 236
The Libraries Panel 237
Working with Libraries 237
Working with Objects 237
Exporting and Importing Libraries 239
Exporting 239
Importing 239
Using Image Stocks 240