Shapes and vectors

Studio draws crisp geometry with 13 shape types, a bezier pen tool with node editing, a freehand pencil, and a pressure-sensitive brush for Apple Pencil and other styluses. This page covers each one, plus strokes, dashes, image fills and combining shapes.

Shapes, vector paths and brush strokes all stay sharp at any export size, because they are redrawn at full resolution every time you export.

The 13 shape types

The Add Shape button in the floating toolbar offers the three you reach for most: rectangle, circle and triangle. The other shapes come with templates and the pattern generator, and once they are in a design you can copy, restyle and reuse them like any other layer.

Note: Frame shapes are decorative borders. They are different from the frames you add with Add page (F), which are nested pages that hold other layers. See pages and frames.

Placing a shape

1. Click Add Shape and pick a shape.
2. Click on a page to drop a 120 by 120 pixel shape centered on that point, or drag to draw it at the size you want.

New solid shapes start with a deep red fill (#820000) and no stroke.

Shape properties

Every color can be bound to a design kit color, so changing the kit recolors the shape.

Converting a shape to a vector

Double-click a shape, or right-click it and choose Convert to Vector, to turn it into an editable vector path. From then on it behaves like anything drawn with the pen: you can move its points, bend its sides and give it dashed strokes or an image fill. Double-clicking converts it and drops you straight into node editing.

Combining shapes

Select two or more shapes or vectors, right-click, and choose one of the four combine commands.

The result is a new vector layer named after the lowest shape with "merged" at the end, and it takes that shape's fill, stroke and opacity. The original shapes are removed. Undo if the result is not what you expected.

Combining keeps every part of the result. Separate pieces stay in the one new layer, and holes stay open, so subtracting a circle from the middle of a square leaves a ring you can see through. Rotated and flipped shapes are combined as they appear on the canvas. When you edit points on a combined layer, only its first outline is editable, and the other pieces and holes come along unchanged.

The pen tool

The pen draws vector paths made of anchor points joined by straight lines or curves. Press P or click the pen in the floating toolbar.

1. Click to place a corner point.
2. Click and drag to place a smooth point. The direction you drag pulls out curve handles.
3. Keep clicking to add points.
4. To finish, click the first point to close the shape, press Enter to leave the path open, or click the check button.

Press Esc to throw away the path you are drawing and put the pen down. A path needs at least two points to be kept. Each finished path becomes its own Vector layer, and the pen stays active so you can draw the next one.

The drawing toolbar

While the pen, pencil or brush is active, a small toolbar appears above the floating toolbar.

The pen also shows a reminder: "Click = point, drag = curve, Enter = done".

Editing points

Double-click a vector layer to edit its points. A small toolbar with two modes appears at the bottom of the canvas.

In either mode:

• Drag a curve handle to reshape the curve. Hold Alt (Option on a Mac) as you start dragging to move one handle independently of the other.
• Double-click a point, or Alt + click it, to switch it between a sharp corner and a smooth curve.
• Press Esc, click an empty area, or click Done editing to finish.

Vector properties

Strokes, dashes, caps and joins

New pen paths use round caps and round joins.

Image-filled vectors

Any closed path can be filled with a picture, clipped to its outline. This is how you put a photo inside a star, a hand-drawn blob or a letterform you traced.

1. Select a closed vector.
2. In Fill, choose Image.
3. Click Choose image to pick a file. If the page already has a page image, it is used straight away, and Use page image is there to switch back to it later.
4. Pick how the picture fits: Cover fills the shape and crops the overflow, Contain fits the whole picture inside, Stretch distorts it to the shape's box.

Use Replace to swap the picture, or the small cross to remove it.

The pencil

The pencil draws freehand lines. Press Shift + P, or open the arrow beside the pen and choose Pencil.

Draw a stroke and let go. Studio smooths it into a vector path with curve points, so it stays editable in node editing like any pen path. Every stroke becomes its own vector layer.

The brush

The brush paints filled, tapered strokes whose width follows your pressure, like ink from a nib. Press B, or open the arrow beside the pen and choose Brush.

• With an Apple Pencil on iPad, or any pressure-sensitive stylus, pressing harder makes the stroke wider.
• With a mouse or a finger there is no pressure, so strokes have an even width.
• Once Studio has seen a stylus, finger touches stop drawing, so you can rest your hand on the screen while you paint.

All the strokes you paint in one go collect into a single Brush layer. The layer is created when you click the check button or switch to another tool, so a whole sketch stays together and can be moved, scaled and faded as one piece.

Brush properties

Tip: Stroke width is set before you paint. To make an existing brush layer bolder, scale the layer up, or paint again with a larger W.

Related

• Layers
• Animation and keyframes
• Patterns and auto layout
• Color tools
• Keyboard shortcuts

More documentation

• All documentation
• More in studio
• Open the editor
• Open the studio
• Read the blog