Layers
Everything on the canvas is a layer: a piece of text, an image, or a shape. Layers stack, and the top of the Layers panel is the front-most layer - the one drawn over everything else.
The left rail keeps your layouts pinned at the top, with two tabs underneath:
Layers
Every layer in the template, front to back. Each one expands to the variables bound to it
Variables
Every variable in the template, whichever layer it belongs to. See Variables
Adding a layer
Use the toolbar under the canvas.
Text
Drag a box on the canvas. The text editor opens straight away so you can type
Image
Opens the asset picker. Choose an image from your library and it is placed on the canvas
Shape
Choose Line, Oval or Polygon, then drag on the canvas
Select
The default pointer, for selecting and moving what is already there
A new layer is added to every layout at the same position and size, in pixels - it is not scaled to each canvas the way layers are when you create a layout. Add a layer while working on a 1080 x 1080 canvas and it can sit outside the visible area of an 800 x 400 one, so check your other layouts and reposition it there.
Selecting and arranging
Click a layer on the canvas, or its row in the Layers panel.
Press Esc to deselect.
Drag a row up or down in the panel to restack. Dragging a row to the top brings that layer to the front.
Use the collapse control at the top of the panel to fold or unfold every layer's variables at once.
Moving, resizing and rotating
Move
Drag the layer, or use the arrow keys
Resize
Drag one of the four corner handles
Rotate
Drag the handle above the selection. Hold Shift to snap to 15 degrees
Precise values
Type into X, Y, Width, Height and Rotation in the properties panel
Common properties
Select a layer and the properties panel on the right shows its Name, then a Transform section shared by every layer type. Text, image and shape layers add their own sections above it.
Naming layers pays off as soon as a template has more than a handful, and a Name belongs to the layer itself: rename it once and it is renamed in every layout.
X, Y
Position of the layer's top-left corner, in pixels
Width, Height
Size in pixels. The lock between them keeps the proportions
Opacity
0 to 100 percent
Rotation
Angle in degrees, with buttons for a quick -90 and +90
Everything under Transform belongs to the layout you are working in. Switch layouts and you are editing a different set of numbers for the same layer.
Layer actions
Hover a row in the Layers panel and open its menu:
Rename
Edit the name in place. Enter keeps it, Esc abandons it
Duplicate
Copies the layer, offset slightly, in every layout
Add variable
Turns part of the layer into a variable. See Variables
Hide / Show
Hides the layer from the canvas and from the rendered image
Delete
Removes the layer from every layout, after a confirmation
Keyboard shortcuts
Arrow keys
Nudge the selected layer by 1 px
Shift + arrow keys
Nudge by 10 px
[ / ]
Rotate 15 degrees counterclockwise or clockwise
Shift + [ / ]
Rotate 1 degree
Delete or Backspace
Delete the selection
Ctrl/Cmd + Z
Undo
Ctrl/Cmd + Shift + Z, or Ctrl + Y
Redo
Ctrl/Cmd + C, Ctrl/Cmd + V
Copy and paste a layer
Ctrl/Cmd + D
Duplicate a layer
Esc
Deselect
Ctrl/Cmd + scroll
Zoom towards the pointer
Ctrl/Cmd + plus, Ctrl/Cmd + minus
Zoom in and out
Ctrl/Cmd + 0
Fit the canvas to the window
Space + drag
Pan the canvas
Scroll, or swipe on a trackpad
Pan the canvas, once you have zoomed in past the fitted view
Shortcuts are ignored while you are typing in a field or in the text editor.
Zoom and pan
The zoom control sits in the header, between the canvas dimensions and the undo buttons. Use the minus and plus buttons for fixed steps, or open the percentage to choose Fit size, Actual size (100%) or a preset level. Zooming and panning never change the design.
Where to go next
Last updated