Drawing layers

Draw lets you paint by hand, right in your animation: speed lines, impact flashes, smoke, scribbles, even whole characters. You paint on a drawing layer, one drawing per frame, and it plays with your stick figures. In this guide you draw speed lines for a punch, then learn every brush, tool and option.

Draw speed lines for a punch

Blue is throwing a punch. A few quick lines behind his fist will make it feel fast. You will draw them on their own layer, so they never touch Blue, and on two frames, so they flicker when the animation plays.

A drawing layer is a layer that holds paint instead of figures. Each drawing on it lasts until the next one: that stretch of frames is its exposure.

1. Click Draw in the workspace switch at the top of the window, between Animate and Build. The tool bar on the left now shows the drawing tools, and the bar above the canvas shows the brush settings.
2. Click + at the top of the tool bar (New drawing layer). A layer called Drawing appears in the timeline above Layer 1, with an orange ring on frame 1: an empty drawing, ready for paint.
3. In Properties, under Preset, click Brush pen. Its lines start and end thin, even with a mouse, which is just right for speed lines.
4. Click the black square in the bar above the canvas. The colour picker opens: drag in the big square or type a HEX code. The new colour shows in the square straight away.
5. Drag three or four quick lines from Blue’s fist backwards. For a perfectly straight line, click where it starts, then hold Shift and click where it ends.
6. Too long? Press E for the Eraser, rub out the extra bit, then press B to go back to the brush. Ctrl+Z undoes a whole line.
7. Press A (Blank frame in the timeline). The playhead moves to frame 2, which is empty. Your first lines show in light red: that is the onion skin. Draw new lines a little to the side of them.
8. Press Space to play. The lines jump between the two drawings, and that flicker reads as speed.

Try it here

This is the Draw workspace with its real controls. Follow the steps above: each task ticks itself off when you do it. Point at the playground first, so the keys go to it and not to the page.

Try itDraw workspace

BrushInk

Size8 px

Opacity100 %

Flow100 %

Smooth0 %

Paint on the canvas, or click +

Add frame

00:00:00fps

Layers

Camera

Scene

Layer 1

1510152025303540

1

0 of 7 done

1. Click + on the tool bar for a new drawing layer.
2. Choose Brush pen under Preset.
3. Pick a colour: click the black square above the canvas.
4. Draw three speed lines behind the fist.Click, then Shift-click, for a straight one.
5. Press E and erase part of a line.
6. Press A, then draw new lines on frame 2.
7. Press Space to play.

On a phone or tablet, draw with your finger and use the tool bar under the canvas. The playground has Brush, Eraser, Fill, Shapes and Pan; Select pixels and Transform are explained below.

Find your way around Draw

Draw is the same editor as Animate, set up for painting. Switching to it does not change your animation.

• The tool bar on the left of the canvas: + (New drawing layer), Brush, Eraser, Fill, Select pixels, Shapes, Transform and Pan canvas. A small corner tick means the tool has variants: click the tick to choose one.
• The brush bar above the canvas: the settings you change all the time for the current tool, like the preset, colours, size and opacity. It names the tool on the left.
• Properties on the right: everything else about the tool, like the preset grid, hardness, blend mode, tip, texture and pen pressure.
• The timeline: drawing layers have a small brush after their name. Each drawing is an orange ring where it starts.

Paint on the canvas and StykAnimate uses the selected drawing layer. If a figure layer is selected instead, it switches to your last drawing layer (“Painting on Drawing.”) or, if there is none, creates one (“Created Drawing for your painting.”). A layer that is hidden or locked is never painted: show it and unlock it with the eye and lock in the timeline.

The drawing tools

These keys work in Draw. Elsewhere the same letters do other things: L draws a line in the Figure Builder, for example. You can change every key in custom shortcuts.

The pop-up palette holds the colour pair, your colours, the brush presets and Size and Opacity sliders, right where you are painting. Choosing a preset or a colour, clicking elsewhere or Esc closes it.

Brushes and presets

A preset is a ready-made brush. Each one sets the whole tip: size, hardness, texture, pressure and blend. Pick one in Properties under Preset, from the preset button in the brush bar, or from the pop-up palette.

The brush bar

The four fields in the bar are sliders: press or drag in one to set it, use the arrow keys (with Shift for bigger steps) or the mouse wheel, or double-click to type a number. A readout on the canvas confirms the new value.

• Size: 0.5 to 2,048 px.
• Opacity: 0 to 100 %. It is the most a stroke can cover: crossing your own stroke never makes it darker.
• Flow: 1 to 100 %. How much paint each touch of the tip adds. Low flow builds up slowly, like an airbrush.
• Smooth: 0 to 95 %. Steadies a shaky hand by trailing the line behind the pointer.

Next to the preset are the main and second colours. Click one to open the colour picker: drag in the square, pick a hue, type a HEX code or use the Eyedropper to take a colour from the canvas. Under it, Recent lists the last twelve colours you painted or picked, Project the colours saved in this project, and Mine your own palettes, which stay on your computer for every project. The swatches beside the colour pair are the first eight colours of that palette, and + saves the brush colour to Project colors. X swaps the two colours.

Change a brush and save it

Change any brush setting and the preset button says Custom: you are no longer using the preset exactly. To keep your version:

1. Set the brush up the way you like it, in the bar and in Properties.
2. Click Save brush under the preset grid. A new tile appears at the end of the grid, named after the preset you started from and a number (“Ink 1”), and it is selected.
3. To remove a brush you saved, select it and click Delete brush. The built-in presets cannot be deleted.

Saved brushes and the pen pressure curve stay on your computer and appear in every project.

Every brush setting in Properties

The live stroke at the top of the panel shows what the brush paints now. Hardness (0 to 100 %) goes from a soft, fuzzy edge to a sharp one. Tip, Stroke, Texture, Dynamics and Pen pressure are folded: click a title to open it.

Drawings on the timeline

Each drawing lasts until the next drawing on its layer, or until the layer ends. These commands are in the timeline header while a drawing layer is selected. They change only that layer: your other layers keep their timing.

A held drawing is one drawing. If a drawing lasts frames 1 to 8 and you paint on frame 5, you change it on all eight frames. To change it from frame 5 only, go to frame 5 and choose Copy drawing here first: frames 1 to 4 keep the original. With Auto key on in the Advanced timeline, painting inside a hold makes that copy for you.

The onion skin (O) shows the drawings around the current one: before it in red, after it in blue. Erasing everything leaves an empty drawing in place, so the timing does not change. See onion skin for its settings.

Fill and shapes

Fill (G) floods the area you click with the main colour. Its settings are in the brush bar:

• Tolerance (0 to 255, default 16): how different a colour can be and still be filled.
• Close gaps (0 to 8 px, default 0): bridges small holes in an outline so the paint does not leak out.
• Expand (0 to 16 px, default 1): grows the fill under the edge of the line, so no white rim is left.
• Sample all layers in Properties: uses everything you can see as the edges, while still painting only on this drawing.

Shapes (U) drags out a Line, Rectangle (the default) or Ellipse: choose in the brush bar or from the tool’s corner tick. Outlines are real brush strokes with the current brush. Turn on Fill in the bar to fill the shape instead. Hold Shift for lines at 45° steps, squares and circles.

Select and transform pixels

1. Press L for Select pixels and choose Lasso, Rectangle, Ellipse or Wand in the bar. Drag around what you want. Shift adds to the selection, Alt takes away from it, and a click without dragging deselects. Wand selects by colour, with Tolerance, Close gaps and Sample all layers.
2. Drag inside the selection to move it, drag a corner to scale it, or drag the top handle to rotate it (Shift snaps to 15°). Properties shows its exact Scale and Angle.
3. Press Enter or click Apply to keep the change, or Esc to cancel it.

While something is selected, brushes and fills stay inside it. Properties also has Deselect, Invert, Fill, flip buttons, and copy, cut and delete.

With Select pixels or Transform, Properties has Filters: Blur, Invert colors, Hue, Saturation and Lightness (Apply color) and Brightness and Contrast (Apply tone). They change the selection, or the whole drawing when nothing is selected, as one step you can undo. Transform (V) moves, turns or scales the whole drawing instead.

Pen, touch and mirror painting

A pen (a graphics tablet or a stylus) gives you pressure: press harder for a thicker line, and with some presets a darker one. A mouse always paints at full pressure. Pen tilt can steer the tip (Tip follows: Pen tilt), and the eraser end of the pen erases.

Fingers: in the touch interface on a phone or tablet, a finger draws until you use a pen, and two fingers always pan and zoom. In the desktop layout a finger pans. Change it in Settings › Interface › Draw with a finger: Until a pen is used, Always, or Never (a finger pans). See touch screens.

Mirror painting (Shift+M, or the button at the end of the brush bar) paints every stroke twice, mirrored across the middle of the scene: one side of a face, both sides drawn. Mirror vertically in Properties mirrors top to bottom. To only check your drawing back to front, press M: it flips the view and never changes the drawing.

Resolution and sharp edges

Drawings are made of pixels, so decide how sharp they need to be before you paint. Under Resolution in Properties:

• New drawings: 1×, 2× (the default) or 4×. 2× has four times the pixels of 1×, and 4× sixteen times. Choose more if the camera will zoom in on the drawing.
• Resample drawing changes an existing drawing to the chosen resolution, as one step you can undo. Making it bigger cannot add detail that was never painted.
• Pixel filtering: Nearest (pixel art) keeps hard pixel edges when pixels are scaled or moved; Smooth softens them.

Zooming the view never changes your pixels, and exports always use the drawing’s full resolution.

Common problems

• Nothing paints and a red message says “Insert a Blank drawing or Copy drawing here before painting.” The playhead is after the layer’s last drawing. Press A, or go back to a frame with a drawing.
• “Show and unlock Drawing before drawing.” The layer is hidden or locked. Click its eye and its lock in the timeline.
• Painting changed other frames too. The drawing is held over several frames. Undo, then use Copy drawing here or A on the frame you want to change.
• The brush only paints in some places. Lock alpha is on, or part of the drawing is selected. Turn Lock alpha off, or press Ctrl+Shift+A to deselect.
• A stroke went wrong halfway. Press Esc before you let go: the drawing goes back to how it was. After you let go, use Ctrl+Z.
• The preset button says Custom. You changed a setting. Click the preset again to go back to it, or Save brush to keep your version.

Related