Editor Help

The Drawn editor lets you create animations frame-by-frame (as in traditional animation). Individual drawings can be stretched to cover more than one frame (by selecting them and clicking and dragging their left or right borders), allowing you to reuse a drawing across multiple frames without having to redraw it. Any edits applied to that drawing are also displayed on every frame that drawing stretches across.

Layers are similar to traditional cel animation, where each piece is transparently overlaid on the last, combining to make a scene. In the Drawn editor, the layers at the bottom of the list are drawn first, and those at the top are drawn last. A good use of layers is to draw the outline of your object/person/whatever on one layer, and colour the object/person/whatever on a lower layer. Since the outline is drawn overtop of the colouring you don't have to worry about perfectly staying in the lines. Layers also support masking.

Masking Tutorial

Layers that are hidden will not be shown in the final published version of the animation.

Grouped Drawings

Grouped drawings is a powerful new features in Drawn that lets you create tiny tweened animations within your animation. To help understand these features there are several tutorial animations.

User Interface Help

Below is a cheatsheet of keyboard shortcuts and tricks when using the editor:

Toolbar

Key Function
1 Switch to the Pencil tool .
  • Shift+Click allows you to draw straight lines
  • Ctrl+Click allows you to pan when zoomed in
2 Switch to the Eraser tool .
  • Shift+Click allows you to erase straight lines
  • Ctrl+Click allows you to pan when zoomed in
3 Switch to the Translate (move/tween) tool .
  • W, A, S, D nudges the currently-selected tool up, left, down, and right (respectively) when Translate is the selected tool.
4 Switch to the Text tool .
  • Double-click to place a new text object in a drawing.
  • Click and drag existing text objects to move them.
  • Double-click existing text objects to edit them.

Editing

Key Function
F Toggle between fullscreen editing mode.
C Copy the current drawing that is selected.
V Paste a copy of the drawing that was copied (this only brings over the drawing information, not how many frames the original drawing stretched over).
Z Undo the last drawing operation on the currently-selected drawing.
Y Redo the last undone drawing operation on the currently-selected drawing.
R Show/Hide the grid.
+ Increase the brush size.
- Decrease the brush size.
I Zoom in.
O Zoom out.
0 (zero) Zoom to 100%.

Timeline

Key Function
Left Arrow Move to the previous frame.
Right Arrow Move to the next frame.
Up Arrow Move up one layer.
Down Arrow Move down one layer.
Space Play/Pause the animation.
Enter Return to the start (either the first frame or playback start).
[ Set animation playback start (for looping small sections).
] Set animation playback end (for looping small sections).
Delete Deletes the currently-selected drawing.