Reference images

Drop any number of images on the canvas to use as visual references for tracing, sampling, or comparison. Each reference has its own transform (position, scale, rotation, flips), can be locked or hidden, and can be bound to a specific layer so it only appears while you're working on that layer.

---

Where to find it

Tools panel → References section. Drag-and-drop also works anywhere on the canvas.

---

Loading

Three ways to load:

1. Drag & drop any image file onto the canvas.
2. Click the + in the Tools panel header.
3. With the Tools panel header empty placeholder visible, click "Drop image on canvas, or click to pick".

Supported formats: PNG, JPG, WebP, GIF (first frame only).

---

The reference list

Element	What
Visibility checkbox	Toggle this reference on/off without removing it
Name	Single-click selects; rename via the active editor below the list
L chip	Indicates the reference is bound to a layer
× (on hover)	Remove the reference (its blob is freed)

Click any row to make it the active reference — that's the one the editor below adjusts.

---

Per-reference editor

Below the list, the active reference shows:

Control	What
Opacity	5–100%
Scale	10–400%
X / Y	Position offset in canvas pixels
Flip H / V	Mirror across the horizontal / vertical axis
Rotation	0° / 90° CW / 180° / 270° CW
Bind to layer	"(any layer)" or pick a specific layer in the active frame

All values update the on-canvas overlay live. Flip + rotation also apply to eyedropper sampling — colours come from the source pixel under the inverse transform.

---

Per-layer binding

A reference's Bind to layer dropdown determines when it renders:

• (any layer) — visible always
• A specific layer name — visible only when that layer is the active layer

This is the killer feature for layered workflows: you can have a "lineart" reference that shows only when the lineart layer is active, and a "colour-block" reference that shows only when working on the base layer. Switch layers, references swap automatically.

The L chip on the reference row is the visual marker.

---

Sampling

When the eyedropper is active and the cursor is over a reference, the sampled pixel comes from the reference (top-most visible reference under the cursor wins).

Sample area (Eyedropper options)

A new selector in the eyedropper section:

• 1×1 (single pixel) — default, exact pixel
• 3×3 (dominant) — looks at a 3×3 window, returns the most-frequent opaque colour
• 5×5 (dominant) — same, larger window

Use 3×3 or 5×5 when sampling from anti-aliased reference art (concept paintings, photo refs) — it picks a representative colour instead of one of the AA-blended pixels at the edge.

---

Extract palette from a reference

In the per-reference editor, an Extract Palette section runs median-cut quantisation on the active reference and adds the result to your project palette.

• Colors: number of palette entries to extract (2–64)
• Mode: Replace the current palette / Append (deduped)

This is the fastest way to bootstrap a palette from concept art.

---

Use cases

Trace a character

1. Drop the concept image. Lock it after positioning.
2. Set opacity to ~30–50%.
3. Lower the scale until it fits next to your sprite canvas.
4. Use the eyedropper with Sample area: 3×3 to pull representative colours.
5. Trace by hand on a separate layer.

Lineart vs. colour reference

1. Load a lineart reference, bind it to the Lineart layer.
2. Load a colour-block reference, bind it to the Base layer.
3. As you switch layers, the right reference appears automatically.

Multiple character views

1. Load front, side, back views as 3 references positioned next to each other.
2. Drag-position them so each appears beside its corresponding sprite frame.
3. Toggle visibility per-view as you focus.

---

Persistence

Reference images are bundled in .mstack exports — recipients can open the project and pick up where you left off. They also persist in the Dexie autosave.

The metadata (transform, layer binding, name, opacity) round-trips fully. Image bytes are stored once per reference and re-loaded as object URLs on open.

---

Tips

• Drop a reference, position with X/Y, lock it so you don't accidentally drag.
• For tracing detailed art, use 3×3 dominant sampling — it's much more reliable than 1×1 on anti-aliased sources.
• Combine per-layer binding with layer linking — your shared background layer can have its own bound reference.
• Use Flip H when tracing a character pose mirrored to the original art.

---

Related

• Eyedropper & color replace
• Palette — extract palette from reference
• Drawing tools
• Layer linking