Fill and stroke

Two paints, one active at a time

Fill is the interior. Stroke is the outline. Either can be a flat colour, a gradient, a pattern, or nothing at all. A shape with no fill and a black stroke is an outline drawing; a shape with a fill and no stroke is a solid silhouette. Both are normal, and "none" is a real, deliberate choice rather than an absence.

At any moment one of the two is the active paint. That is what the paint keys and the paint buttons act on. Getting used to which one is active is most of the learning curve here.

The paint proxy on the rail

Near the bottom of the tool rail sits a small cluster that mirrors Illustrator's proxy. It has five parts:

• Fill swatch and stroke swatch, overlapping. Clicking either makes it the active paint and opens the Fill and Stroke panel on it.
• Swap arrows, top right. This swaps the actual colours between fill and stroke.
• Default, bottom left. White fill, black stroke.
• A row of six paint buttons: None, Flat colour, Linear gradient, Radial gradient, Conic gradient, Pattern. Each one applies to the active paint.
• Below that, the three Drawing Mode buttons, which are not paint controls.

The swatches are a live preview, not a control surface for stops. A gradient or a pattern shows as a small placeholder ramp in the swatch; the real stops live in the panel.

The paint keys

These six are the ones worth committing to memory. All of them act on the active paint unless stated otherwise.

X and Shift+X are different actions and people mix them up constantly. X changes which paint you are aiming at and touches no colour. Shift+X leaves your aim alone and exchanges the two colours.

D also resets the stroke width to 1, not just the two colours. If your stroke suddenly got thinner, that was D.

Pressing . does two things: it builds a linear gradient seeded from the current colour and it opens the picker on the gradient tab so you can edit the stops immediately. If your seed colour is white, the far stop ends on black instead of white so you can actually see the result.

The Fill and Stroke panel

This is the colour picker, and it lives in the right-hand dock. It is the panel that is open when you first load the editor. Click a rail swatch, press ,, or use Object ▸ Fill and Stroke to bring it up on the paint you want.

It has three main tabs:

• Fill and Stroke paint, which are the same set of controls aimed at different paints.
• Stroke style, which is geometry rather than colour.

Inside Fill and Stroke paint you get six sub-tabs: none, Flat colour, Linear gradient, Radial gradient, Conic gradient and Pattern fill. Flat colour offers a colour model dropdown, so you are not stuck in one notation. Each of the gradient and pattern tabs can also list what you have saved before.

Stroke style

The Stroke style tab is where a line stops being a generic line. It holds:

• Width with a unit (px, %, em, rem, pt). Switching the unit converts the number so the drawn width does not jump.
• Profile: uniform, ellipse, spindle, taper start, taper end, bulge. This varies the width along the stroke without destroying the element, so a rectangle stays a rectangle.
• Dashes: a preset dropdown with previews, a dash offset, and a Custom field if you want to type a pattern like 4 2.
• Markers for the start, middle and end of the path, each with its own options.
• Join (miter, round, bevel) with a miter limit, Cap (butt, round, square), and paint Order.

Picking a dotted dash preset switches the cap to round automatically, because dots drawn with a butt cap read as tiny dashes rather than dots.

You can save the whole stroke style, colour, width, dashes, caps, joins, markers and profile together, into your assets library from the save icon in that tab's header.

Common questions