The Drawing Editor

Table of Contents


User Interface

Drawing Tools

Modifying Shapes

Selecting Colors

Using the Frame Sequencer

Tips and Tricks

Creating Vector Art

User Interface

There are four primary areas in the Drawing Ediitor:

  1. The Upper Toolbar contains an assortment of controls for managing editor settings, drawing properties, and layers in your drawing. It also holds the play button, used to preview your animations.
  2. The Canvas is where you’ll create your drawings. It shows the currently selected frame in your drawing sequence.
  3. The Lower Toolbar contains all the tools you’ll need to create and edit your drawings.
  4. The Frame Sequencer contains thumbnail images for each frame in your drawing sequence. You’ll scroll the frame sequencer to select a drawing to work on. The Frame Sequencer also holds tools for adding, deleting, and copying frames.

Drawing Tools

The tool palette on the lower toolbar includes several tools for creating new shapes. Some tools offer precision, others are great for sketching out ideas quickly, and still others are dedicated to specific geometric shapes.

The Drawing Editor produces “vector” shapes, using mathematically defined paths to create each shape’s outline. You’ve probably used other drawing apps that produce “raster” shapes, which are defined on a pixel-by-pixel basis. Vector artwork is particularly useful for creating animations. To learn more, see Creating Vector Art

The Brush Tool

The brush tool creates a shape by laying down a blob of “paint”, using the currently selected color. It’s totally free-form and easy to use – just touch and drag on the canvas to color in the shape you want. The brush tool even smooths out any rough edges for you automatically!

Selecting the brush tool opens a properties panel that lets you control the size of the brush. The brush tool also supports pressure sensitivity with Apple Pencil.

The Rectangle Tool

Touch and drag with the rectangle tool to create a rectangular shape. The initial touch defines one corner of the rectangle, and the release location defines the opposite corner.

Touch with a second finger to constrain the shape to a square.

The Ellipse Tool

Touch and drag with the ellipse tool to create a elliptical shape. The initial location defines one corner of the enclosing rectangle, and the release location defines the opposite corner.

Touch with a second finger to constrain the shape to a circle.

The Polygon Tool

Touch and drag to create a polygon or a star shape with straight edges. The initial location defines the center of the shape, and the release location defines its size and orientation.

Selecting the polygon tool opens a properties panel that lets you control the number of vertices (from 3 to 60) and the “inner radius percentage”, which determines whether the shape is a simple polygon (at 100%) or a pointed star shape (less than 100%).

The Flower Tool

Touch and drag to create a “flower” or “gear” shape with curved edges, or a polygon or star shape with straight edges. The initial location defines the center of the shape, and the release location defines its size and orientation.

Selecting the flower tool opens a properties panel that lets you control the number of vertices (from 3 to 60), the “inner radius percentage”, the “inner curve percentage”, and the “outer curve percentage”. You can create a wide variety of geometric shapes with this tool – experimenting with the controls is the best way to learn how it works.

The Fill Tool

Unlike all other drawing tools, which define the shape’s outline manually, the fill tool creates shapes automatically with a single tap on the canvas. The shape that’s created depends on where you tap:

You can create complex shapes using the fill tool by making a “template” from simple shapes, then filling the template to create a new shape, and finally deleting the template shapes. For example, you could create a ring shape by drawing a circle (using the ellipse tool), then drawing a smaller circle in its center, then filling the outer ring using the fill tool.

The Eraser Tool

Use the eraser tool to erase a region on the canvas. You define the erased region just as you would using the brush tool, by “painting” its interior. Shapes that partially overlap the erased region are modified to remove the erased region; shapes that overlap the erased region completely are removed.

Selecting the eraser tool opens a properties panel that lets you control the size of the eraser.

The eraser tool is an easy way to create complex shapes. Create a simple shape using any of the drawing tools, then use the eraser to cut holes in the shape.

Advanced Tools: Modifying Shapes

The preceding section covered the tools used to create new shapes. This one discusses the tools used to modify existing shapes. It’s helpful here to have a basic understanding of how vector paths are constructed – take a look at Creating Vector Art for an overview.

The advanced drawing tools are disabled and not visible by default. To enable them, return to the Gallery, open the App Settings panel, and enable the “Advanced drawing tools” switch.

The Transform Tool

The transform tool is the Swiss Army knife of drawing tools. Use it to select, move, resize, and rotate shapes on the canvas. Use the tools in the tool panel to copy and paste shapes, delete them, move them behind or in front of other shapes, flip them over, and group them together.

Selecting Shapes

The transform tool works on selected shapes. To select or deselect shapes:

Selected shapes are outlined in red. You’ll also see a blue rectangle enclosing all of the selected shapes.

Transforming Selected Shapes on the Canvas

On the drawing canvas, the selected shapes are enclosed by a blue box with circular handles at the corners and rectangular handles along the sides.

Here are few more tricks and tips for using the transform tool:

Using the Transform Tool Panel

When you activate the transform tool, you’ll see a panel containing various supplemental tool buttons. These tools act on the currently selected shapes and paths.

SELECT
* selects all shapes in the drawing.
* deselects all shapes.

EDIT
* cuts the selected shapes to the pasteboard.
* copies the selected shapes to the pasteboard.
* pastes shapes from the pasteboard onto the canvas.
* duplicates the selected shapes.
* deletes the selected shapes.

GROUP
* groups the selected shapes. Groups are discussed in detail below.
* ungroups the selected shapes.

ARRANGE
* brings the selected shapes to the front.
* brings the selected shapes one step toward the front.
* sends the selected shapes one step toward the back.
* sends the shapes element to the back.

FLIP
* flips the selected shapes horizontally.
* flips the selected shapes vertically.

Groups

A group is a collection of shapes that are treated as a single object by the selection tools. When you tap on any of the shapes in the group with a selection tool, all of the shapes in the group are selected. That’s really all there is to it – the shapes in the group aren’t modified in any way, and you can easily “ungroup” the shapes at any time. Groups make it easier to move, transform, copy, and arrange related shapes, because you only need to tap once to select the shapes.

Groups can be “nested” – that is, a group can contain other groups. Also note that shapes in a group must be contiguous in the front-to-back ordering of the drawing, and in the same layer. The app handles these requirements automatically, meaning that when you create a group, the front-to-back ordering of other shapes in the drawing may be adjusted.

The Node Tool

Use the node tool to modify an existing shape in any way and with a great deal of precision. It is an advanced tool that may take some practice to use, but it will enable you to create shapes that wouldn’t be possible using the basic drawing tools.

To use the node tool, it’s important to understand how vector shapes are constructed. See Creating Vector Art for more information.

To begin, let’s review terminology. Each shape is made up of one or more paths, which define the edges of the shape. Each path is constructed from a series of connected segments, which may be straight lines or curves. Each segment has two nodes, one at each end, which determine the location of the segment. Each node may have control points, which determine the curvature of the node’s segment.

The node tool lets you modify shapes, segments, and nodes in a variety of ways. You can:

Selecting Shapes and Nodes

To use the node tool, you first need to select one or more shapes to modify. Selecting and deselecting shapes with the node tool works in exactly the same way as with the transform tool. Tap a shape to select it, tap and hold (long press) to select or deselect a shape without deselecting other shapes, tap the canvas to deselect all shapes, or, with no shapes selected, touch and drag on the canvas to select shapes with a selection box.

Selected shapes are outlined in red, and the nodes are shown as red circles.

Once you have selected one or more shapes, you can then select one or mode nodes. Selecting nodes is very similar to selecting shapes. You can:

Selected nodes are shown as blue circles that are a bit larger than the unselected nodes. Any control points associated with a selected node are show as smaller blue circles connected to the node by a straight blue line.

Modifying Shapes on the Canvas

You can modify a shape directly on the canvas manipulating the nodes, the control points, and segments between the nodes. Here’s how:

This is the easiest way to adjust a segment’s shape without moving its end points. You don’t need to select any nodes or fiddle with the control points. Just touch and drag anywhere along the red segment between any two nodes (but not directly on a node or control point). Give it a try!

Nodes can be “locked” or “unlocked”. When a node is locked, moving either of its control points automatically adjusts the opposite control point’s position to keep the curve smooth at the node. When a node is unlocked, moving a control point has no effect on the opposite one, so you can produce a “corner” at that node. To unlock a locked node, or to lock an unlocked one, tap with a second finger while dragging either of the node’s control points.

Adding and Removing Nodes

To add a new node, simply tap on the segment where you want the node to be located.

To remove a node, tap the node to select it, then tap the button on the node tool panel. You may select multiple nodes and remove them all with a single operation.

Using the Node Tool Panel

In addition to the delete tool, the node tool panel provides a couple of additional tools:

Selecting Colors

When you create a new shape with any of the drawing tools, it is filled using the fill color. To select a new fill color, tap the circular color button on the lower toolbar, which opens the color chooser.

The color chooser gives you two ways to select a color. Select the method you prefer using the tab bar at the bottom of the color chooser.

The color sample at the top of the panel shows the original fill color on the left and the current fill color on the right.

Changing a Shape’s Color

In addition to selecting the color to use for new shapes, you can also change the colors of existing shapes. There are two steps:

  1. Select the shape (or shapes) you want to change using either of the selection tools (the transform tool or the node tool).
  2. Open the color chooser and select a new color. The selected shapes will change to that fill color.

Notice that after you select a shape (step 1, above), the current fill color is updated to match the fill color of the selected shape.

Using the Color Picker

The color picker tool “picks up” the fill color of any existing shape, then updates the current fill color and applies it to any selected shapes. To use the color picker, touch the color button on the lower toolbar and drag your finger up onto the canvas. You’ll see a ring that shows the fill color of the top-most shape at your current touch location. When you release, the current fill color and any selected shapes are updated.

Using the Frame Sequencer

The drawing editor isn’t just for making drawings. You can use it to create frame-by-frame animations – sequences of drawings, which, when displayed in rapid succession one after another, create the illusion of motion. To create an animated drawing sequence, you’ll need a separate drawing for each frame in the animation. The frame sequencer tool, located at the bottom of the drawing editor, is where you’ll go to create new frames and to select the current frame for editing.

To add a new frame, tap the button on the right side ofthe frame sequence panel. The new frame is inserted immediately after the current frame.

When you have more than one frame, scroll the frame sequencer horizontally to view and edit any of the frames. The current frame is shown at the center of the frame sequencer, and the thumbnail images for the other frames are dimmed. While you scroll the frame sequencer, you’ll see a red box just above it showing the index number of the current frame.

To copy, duplicate, or delete a frame, first select the frame by scrolling to it on the frame sequencer. Then, tap the selected frame’s thumbnail image on the frame sequence to show the edit menu. When you paste a copied frame, it is inserted after the currently selected frame.

To rearrange frames, touch and hold (long press) on the frame’s thumbnail, then drag it to the new position on the frame sequencer.

Tips and Tricks

Adjusting the Frame Rate

The frame rate determines the number of frames displayed per second when the animation is played. For example, when the frame rate is set to 15 frames per second, you’ll need 15 frames in your drawing sequence to create a one second of animation.

To set the frame rate, tap the button on the upper toolbar to open the animation settings panel.

Using Ghost Frames

When you’re working on a multi-frame drawing sequence, it’s often helpful to see how the current frame compares to the frames that come before or after it. Having a view of the preceding or suceeding frames makes it easier understand how changes in the current frame will affect the animation. The app supports up to three ghost frames preceding the current frame, and another three following the current frame. The ghost frames are rendered semi-transparently on the canvas, with increasing transparency as the ghost frames become more distant from the current frame.

To set the number of ghost frames, tap the button on the upper toolbar to open the animation settings panel.

Panning and Zooming the Canvas

You can focus on a particular are of the drawing canvas by panning and zooming. “Panning” is when you slide the canvas to put a different location at the center of the view, and “zooming” is when you magnify the canvas to focus on a particular area. Use a two-finger gesture to pan and zoom the drawing canvas.

Panning and zooming the canvas doesn’t change your artwork in any way. You’re just adjusting your view to get a better look at things.

Tap the button on the upper toolbar to reset the drawing canvas to its “home” state.

Previewing Your Drawing Sequence

Tap the play button on the lower toolbar to preview your drawing sequence. Your animation will play and then automatically loop back to the beginning and play again. Use the pause button to pause the animation.

Creating Vector Art

In order to use the Drawing Editor effectively, it’s important to understand the basics of “vector art”. This style of drawing is less commonly used than the primary alternative, “raster art”, but it offers significant benefits for creating animations. Tools for creating raster art enable you to modify the drawing canvas on a pixel-by-pixel basis, and they’re great for producing a wide range of artistic styles and effects. Vector tools don’t provide as much artistic range, but they do have a compelling advantage: vector art can be transformed with no loss of precision, making it easy to reuse in many different situations. When you import your artwork into the Composition Editor, it will continue to look great no matter how you scale or rotate it. Raster-based artwork becomes pixelated and grainy when subjected to these operations.

With vector drawing tools, you don’t manipulate the canvas on a pixel-by-pixel basis; instead, you create and edit shapes. Drawings are simply a collection of shapes, which may overlap each other, and which are displayed in a specific order. A shape is defined by its edges and by various properties, such as its fill color. The edges of a shape are paths; you’ll use the drawing editor’s tools to create and modify these paths.

Here’s an example of how you can combine shapes to make a complete drawing:

There are seven shapes in the drawing. Six of them are simple shapes, with a single path that defines the outer edge. One of the shapes uses two paths: the outer edge, and another inner path that makes a “hole” in the shape. Can you find the shape with the hole?

The Anatomy of a Vector Shape

Shapes are composed of one or more paths, which define the edges of the shape. A path is a close loop composed of one or more connected segments, each of which may be curved or straight. Here’s an example of a simple path with three curved segments and two straight segments:

We’ll refer to the connection points at the ends of each segment as nodes; there are five nodes shown in the example above, identified by the blue dots along the path. Nodes may have control points associated with them. The control points determine the slope of the curve at the node, as well as the amount of curvature across the attached segments.

In the example above, only nodes 1 and 2 have control points. Notice that node 1’s control points are directly across from each other, meaning that the curve makes a smooth transition between the two segments that connect to that node. Node 2 also has control points, but they are not across from each other; consequently, the shape has a “corner” at that node. Nodes 3, 4, and 5 don’t have control points, so the segments between them are straight lines.

Let’s look at one more example:

The shape shown above contains three separate paths – one that defines the outer edge of the shape, and two that create holes. You can create shapes with holes in them using the brush tool, and you can also use the eraser tool to make a hole in an existing shape.