image composer

The image composer is a layered still, drawn in a full-window studio: shapes, vector paths, type, pictures and groups, stacked like a design file. Its output is a PNG that other nodes can use.

open the studio

Add a composer from the dock: Image composer. A New composition dialog asks for a name, a size and a background. Sizes come in tabs: Recent, Saved, Social, Photo, Print, Art & Illustration and more. Print sizes keep their own unit and resolution (A4 is 210 × 297 mm at 300 ppi). Double-click a preset, or press Create.

The card on the canvas shows a layer count, a count of referenced nodes, a live preview beside it, and an output row. Open the studio with Open composer, the expand icon in the card header, or by double-clicking the preview.

The studio has four parts:

• Header — the name, an Image chip, a status pill (not exported, exported, changed since export), the stage size and layer count, undo and redo, an Export menu and Save & close. Changes save as you work, so Save & close (or <kbd>Esc</kbd>) only takes you back to the canvas.
• Ribbon — tools in four groups: Select, Draw, Insert and AI.
• Left panel — Layers and References.
• Right panel — three tabs: Layer, Canvas and History.

Press <kbd>?</kbd> for every shortcut.

draw layers

Tools and their keys: Select <kbd>V</kbd> · Rectangle <kbd>R</kbd> · Ellipse <kbd>O</kbd> · Pen <kbd>P</kbd> · Brush <kbd>B</kbd> · Lasso <kbd>L</kbd> · Text <kbd>T</kbd> · Picture <kbd>I</kbd> · AI edit <kbd>E</kbd>.

With the Pen, click points; click the first point or press <kbd>Enter</kbd> to close the shape, <kbd>⇧</kbd> <kbd>Enter</kbd> to leave it open. Convert to path (in a shape's properties) turns a rectangle, ellipse or point shape into an SVG path layer you can edit as Béziers, with holes by even-odd fill.

Every drawn layer can carry:

• a fill and stroke that are a colour or a CSS gradient (linear-gradient(135deg, #ffd166, #ef476f), radial-gradient(...))
• a Pattern swatch over the fill: stripes, grid, lattice, dots, checker, zigzag, waves, herringbone, diamonds, triangles, scales, bricks, crosses, rings, halftone, leaves, confetti. Patterns anchor to the stage, so touching shapes continue the same pattern.
• Add shadow for a drop shadow, which also follows a cut-out's edge
• Repeat copies across and down: a colonnade, a fence or a grid of tiles is one layer (up to 2,500 copies per layer)
• opacity, blend mode, rotation, and a hand-painted edge

clip with a group

A group can be a clipping mask. Select a group and tick Clip to the bottom layer (mask): its first (bottom) layer is the frame, and everything above it draws only inside the frame's outline. The frame's fill paints behind and its stroke on top, so one shape is the mask, the background and the outline. A patchwork silhouette made of overlapping patterned patches is one clip group.

In the Layers list, groups fold. Group the selection with <kbd>⌘</kbd> <kbd>G</kbd>, ungroup with <kbd>⇧</kbd> <kbd>⌘</kbd> <kbd>G</kbd>, fold everything with the fold button, and find a layer with <kbd>⌘</kbd> <kbd>F</kbd>. Double-click a name to rename it. A click on the stage picks the layer under the pointer; the Layer / Group toggle in the ribbon decides whether it takes the layer or its whole group.

type

The Text tool drops a text box. The Text section of the Layer tab sets font, size, weight, italic, alignment, colour, letter spacing, line height and an outline under the letters. The font picker takes any Google Fonts family.

pictures and live references

Picture (<kbd>I</kbd>) adds an image from a node on the canvas or from a URL. You can also paste or drop a picture file.

A picture taken from a node stays linked: when that node regenerates, the composition follows. The References list in the left panel shows every linked node, and + add links another.

A picture layer also has:

• Pick from canvas… to swap its source and Fit box to picture to match the picture's aspect
• fit modes (cover, contain, fill) and mirror toggles
• a key colour (with tol / soft fields), to cut a subject out of a flat green background
• an SVG source drawn as vector at whatever size it is drawn, so place the .svg itself, not a PNG of it

pictures made by a sandbox

A picture a sandbox made (a map card, traced line art) remembers its settings. Select the layer and a Sandbox section lists them. Change one and the sandbox re-runs for that layer alone, in the cloud. Forget the sandbox keeps the picture and drops the link.

size and background

The size chip in the header (for example 1040 × 1520) opens the size editor, and the Canvas tab has the same plus the background. Choose Scale content to resize everything with the canvas, or Canvas only to keep layers where they are and grow or crop around them. The background can be a colour or empty: an empty background exports a transparent PNG. Presets saves a size and background of your own.

history

The History tab keeps versions of this composition apart from the canvas history. It autosaves every couple of minutes while you edit and when you close. Type a name and press Save to name a version. The star keeps a version forever. Restore brings one back, and saves what was there first, so a restore can be undone.

output

The card's right edge is the output port. Press Export (card or studio): the studio offers PNG 1× up to PNG 4×, only at sizes a browser can hold. The PNG lands as an image node beside the composer and becomes the node's output, so you can wire it to anything that takes a picture. The status reads changed since export after later edits.

limits & good to know

limit	value
stage size	16–16,384 px a side
layers per composition	4,000
points per composition	60,000 (a curve counts 3)
copies per repeat layer	2,500
export scale	1× to 4×, if the result fits the browser's canvas

• A linked picture whose node is gone shows in References as missing.
• Several people can have the studio open on one canvas; the pixie designer refuses to overwrite a change you made meanwhile.

related

• ai edit and designer — paint a region and describe the change, or hand the layout to a pixie.
• files and media — where the pictures you link come from.
• video editor — composers appear in its bin.