What this app does
SnipOut is a complete photo editor that runs in your browser — no install, no account, nothing uploaded. Cut out subjects, fix color and exposure, retouch, combine images into a single composition, add text, even develop RAW camera files. AI handles the tedious parts (one-click background removal today, with smart selection, object removal, and generative fill on the way) so you can spend your time on the actual creative work.
Every tool is named for what it does, not for what the industry calls it, and is built to behave the way you'd intuitively expect. Beginners can do real work in their first session; long-time editors don't have to relearn a new piece of software.
How it works (in plain language)
Most image editors change the actual pixels of your photo when you edit. This one doesn't. Instead, it keeps your original image untouched at all times and builds a separate mask on top of it — think of the mask as a stencil that says which parts should be visible and which should be hidden.
When you erase, paint, or run the AI, you're modifying that stencil, not your photo. Your original is always there underneath, pixel-perfect. When you export, the original is combined with the stencil at full resolution to produce the final image.
This means you can edit as much as you want without losing image quality. Undo as many times as you like, try different things, throw it all away with Start over — which resets every layer all the way back to the image you uploaded (one Ctrl+Z brings your work back) — your source photo never gets damaged.
🖱 Select
🖱 Select (press S) is the main "do stuff" tool. It works on both outlines and image layers. Hover over an outline to highlight it (outlines take priority over images), or hover over a visible part of an image layer to highlight that layer instead. Click to select, shift-click to toggle multiple outlines. When something is selected, an action bar appears at the bottom with Copy, Cut, Paste, Invert, Restore, Delete, and Deselect (the ⬛ Fill Region/Layer button lives in the Color tab, stacked under the 🪣 Paint Bucket). These work on both outline regions and entire image layers. Hold Alt while hovering to reach under a nested outline. Right-drag a box anywhere on the canvas to drop a rectangular outline in that shape — it lands already selected, ready to move, cut, or transform. Hold Shift while right-dragging to instead select any shapes that fall inside the box (the older marquee behavior). The standard Ctrl/⌘+X, Ctrl/⌘+C, and Ctrl/⌘+V shortcuts work from any tool.
Donuts and nested rings. When a tool traces a shape with a hole (like a ring), each ring is a separate outline. Hovering over one ring highlights only that ring — the other ring stays inactive. Click a single ring to select just it. To select both rings together (to Fill or Cut the donut shape with the hole preserved), click one ring then shift-click the other. The Fill/Cut operations honor the even-odd rule, so selecting both rings produces a real donut-with-hole result; selecting only the outer ring fills the whole area including the hole; selecting only the inner ring fills only the hole.
Transforming and recoloring layers and outlines. While the Select tool is active with something selected, a tab strip sits on top of the action bar with two tabs: 🎨 Color (left) and ◈ Transform (right). Clicking a tab expands its panel below the tabs — they're mutually exclusive, so expanding one collapses the other. Transform stays "always on" inside Select; its controls (Scale / Rotate / Opacity / Flip / Reset / Center) just reveal when the tab is expanded.
In transform mode, click an image layer to select it for dragging, scaling, flipping, or rotating. Shift+click to select multiple image layers — all selected layers are highlighted. Inline controls (scale, rotate, and opacity dials, flip H/V) appear in the top bar; the readouts track the primary (most recently clicked) layer, and dragged values apply to every selected layer. Click a selected layer again to deselect it, or click empty space (on the canvas, or in the empty area of the Layers panel) to deselect all.
Multi-select in the Layers panel works the same way: Ctrl/⌘+click rows to add or remove individual layers from the selection, or Shift+click a row to extend a range. Once multiple layers are selected — whether you picked them on the canvas, in the panel, or a mix of both — pressing Delete or Backspace removes them all in a single undoable step. Cmd/Ctrl+C, Cmd/Ctrl+X, and the Move tool also act on the full set. Press Escape to clear the selection.
🕳 Hole Punch. Select exactly one image layer that's sitting above at least one other layer, then press 🕳 Punch on the action bar. The selected layer's visible shape is cut out of every visible, unlocked layer below it — exactly where it sits on screen, including any move, scale, rotation, or flip you've applied. The selected layer itself is not changed (like a real cookie cutter, it stays put over the hole it just made — drag it aside to see the result). Hidden layers and edit-locked layers are skipped. One Ctrl/⌘+Z undoes the entire punch across every layer at once, and the ↩︎ Restore brush can paint punched areas back at any time. Soft or feathered edges on the cutter punch matching soft-edged holes.
Outlines are also interactive in transform mode: click-drag any outline to move it, click to select, shift-click to multi-select. Anchor points become visible and draggable. Inline controls offer scale, flip, and rotate for selected outlines.
Click the Transform button again (or press Escape, or switch tools) to disarm. Each operation pushes an undoable entry to history.
✋ Hand
✋ Hand (press H) lets you click-and-drag to move the canvas around. Hold Space or hold the middle mouse button and drag to pan temporarily from any tool — releasing returns to your previous tool. Both shortcuts also work mid-stroke: if you're painting and need to scroll, press the modifier, drag to pan, then release to keep painting.
👤 Remove Background
👤 Remove Background — Click this first if your photo has an obvious subject (a person, an animal, an object). The AI looks at your image, decides what the subject is, and removes everything else in a few seconds. The first time you use it, it downloads the AI model — a one-time download that's cached afterward, so it's fast every time after that. On computers with modern graphics support it runs on your GPU for the cleanest edges around hair and fine detail.
🎨 Color
Color lives as a tab on top of the Select tool's action bar — the left-most of two tabs (Color and Transform). Select something (an image layer or an outlined region), then click the 🎨 Color tab to expand the Color panel. The Color tab's main action is the 🪣 Paint Bucket (click a region on the canvas, like MS Paint). Turn off Contig to fill every matching area across the whole image in one click instead of just the connected patch. Set Fill Opacity to 0 to erase matched pixels instead of filling them — no separate Remove button.
The workflow, in order:
- Pick the Fill color — click the swatch to open the custom color picker. The picker has a hue ring, an SV square, RGB sliders, a typeable hex field, a saved-color palette, and a built-in 💧 eyedropper (click it or press I). The eyedropper key works from any tool, even with the color panel closed — while painting, just press I, click a spot on the image, and that color instantly becomes your Fill/brush color so you can keep painting (no panel pops up, no Confirm needed; press Esc to cancel). Rebind the key under ⚙ Settings → Hotkeys → Eyedropper. On Chrome / Edge the eyedropper lets you pick a color from anywhere on screen. On Safari / Firefox a circular magnifier appears the moment you start the eyedropper and follows your cursor anywhere — over the picker popover, the canvas, anywhere on the page — showing a zoomed pixel grid with a small square highlighting the exact pixel under sample (the OS cursor hides while you're sampling over the canvas). The Paint brush also uses the Fill color. The Fill picker has a permanent grayscale slot in its second palette row — click it to put the active layer into grayscale-paint mode. Next to the 🪣 Paint Bucket sit two small fill-mode chips: a checkerboard chip — light it up and the Paint Bucket and ⬛ Fill Region/Layer erase to see-through instead of pouring the Fill color — and a ↩︎ chip — light it up and those fill buttons bring back the original photo instead (un-hides erased areas and undoes color edits, the same effect as the Restore brush; with the Paint Bucket you can even click an already-erased spot). The chips affect the fill buttons only — brushes always just paint. They stay lit until you click them again (picking a new color does not turn them off), and lighting one turns the other off.
- Set Opacity — 100% replaces matched pixels with Fill. 0% erases them. Anything in between partially fills (blends Fill on top at that strength).
- Set Tolerance — how close a color has to be to the pixel you click for the Paint Bucket to include it. Low = only near-exact matches fill; high = a broad range of similar colors fills.
- Set Sensitivity to fine-tune — negative tightens the match (fewer stragglers), positive loosens it (catches pixels just outside Tolerance).
- Fire an action:
- 🪣 Paint Bucket — click the button, then click a spot on the canvas. The color at that clicked pixel floods outward and is replaced with Fill (at Opacity), stopping at pixels outside Tolerance. Best for cleaning up one region at a time (e.g., a sky behind a subject) without touching same-colored pixels elsewhere in the image. Turn off the Contig checkbox to instead fill every matching area across the whole image in one click — that's the quick way to recolor / erase one color everywhere it appears (it replaced the old "Fill Find" button).
Controls in detail:
- Fill — the color the Paint Bucket paints with (and the color the Paint brush uses). Combined with Opacity.
- Opacity (0–100%) — how much of Fill to apply. 0% = erase matched pixels (transparent fill). 100% = fully replace with Fill. Intermediate values partially blend Fill on top of the original at that strength. When the checkerboard chip (next to the Paint Bucket) is lit, Opacity becomes the erase strength — 100% wipes the region fully see-through, 50% leaves it half-visible. When the ↩︎ chip is lit, Opacity becomes the Paint Bucket's restore strength — 100% fully brings the original photo back, lower values partially blend it back.
- Tolerance (0–100) — how strict the color match is. 0 = exact match only, 100 = nearly every color. Uses Oklab perceptual matching, so Tolerance feels consistent across red, blue, and green subjects.
- Sensitivity (−100…+100) — a plus/minus tweak on Tolerance. Use it to fine-tune the Paint Bucket's match when Tolerance alone is too coarse.
- Contig — Contiguous (affects the 🪣 Paint Bucket only). On (default) fills just the connected patch you click — matching color spreads outward and stops at the first edge, so same-colored areas elsewhere are left alone. Off fills every area in the whole image that matches the color you clicked, even separate patches that don't touch — a single click, no dragging. This is the standard paint-bucket "Contiguous" switch (same as Photoshop, and the same idea as the Magic Wand's Contig).
- ↺ Reset — the small circular-arrow button right after the sliders. Snaps Tolerance, Sensitivity, and Opacity back to their defaults (15 / 0 / 100) in one click. It leaves your Fill color and the Contig switch alone.
Edges are automatically anti-aliased — pixels near the Tolerance boundary get a smooth falloff instead of a hard cut, so JPEG compression halos and soft object edges come out clean instead of jagged.
Each Paint Bucket click commits on its own (one undo step per fill), so there's nothing to "confirm" — just keep clicking, and use Cmd/Ctrl+Z to undo any fill. Enter (or clicking the ▾ Color chevron) exits back to Select; Esc also exits.
🪄 Magic Wand
Press W or click the 🪄 Magic Wand button in the left sidebar's Draw group. (Customize via ⚙ Settings → Hotkeys if you want a different key.) The Wand selects pixels by color similarity and hands the result to the Select tool as an outline. Complementary to Magic Pen (which selects by anchor placement) and the Color tool (which edits pixels directly).
The workflow, in order:
- Click a color region on the canvas. The Wand samples the color at (and around) your click and selects every similar pixel — by default only pixels connected to the click point. A semi-transparent blue tint with animated marching ants shows the preview.
- Drag Tolerance — grow or shrink the selection live. 0 = exact match only, 100 = nearly every color.
- Use modifier keys on subsequent clicks —
Shift+click adds to the selection, Alt+click subtracts, Shift+Alt+click intersects. A plain click replaces the current selection.
- Refine with Sample size (Point / 3×3 / 5×5 averaged), Gap close (stops flood leaks through 1–2 px anti-aliased seams), Grow/Shrink (±10 px), and Feather (boundary smoothing).
- Press Enter to commit. The Wand converts the pixel selection to one or more outline polygons, switches to Select, and the action bar appears — Fill Region/Layer / Cut / Copy / Delete / Invert all work immediately on the new outline.
- Press Esc to discard the preview without creating an outline.
Controls in detail:
- Tolerance (0–100) — color-similarity threshold in Oklab perceptual space. Same metric the Color tool uses, so "Tolerance 30" feels the same across both tools.
- Sample size (Point / 3×3 / 5×5) — averages the seed color over an N×N window. Damps noise on JPEG / photographic input; use Point for flat-color graphics.
- Contig — Contiguous: on = only pixels connected to the click; off = every matching pixel in the image (multiple disjoint regions all land as one group).
- AA — Anti-alias: soft match band (partial α on edge pixels) vs hard threshold.
- Gap — Gap close radius. Raise when the flood leaks through a thin seam (classic case: letter "e" counter, where the inner ring is only 1–2 px from the outer).
- Grow — Expand (+) or contract (−) the selection by N pixels before commit.
- Feather — Gaussian blur on the scratch mask before threshold. Under outline output, this smooths the final polygon boundary (rounder corners). Note: it's not a true partial-α feather — the outline is still binary. For soft-edge selections, feather the outline's fill after commit using the Edges tab.
- Subtract — turn this on to make a plain click remove the clicked region from your selection (the same as holding Alt, but without the key). Turn it off to select normally again.
- Legacy — switches the Wand to a plain, Photoshop-style wand: it matches by raw RGB color with hard edges and no smart cleanup. Off (the default) uses SnipOut's smarter perceptual matching with softer edges. Use Legacy if you prefer the exact feel of the standard industry wand.
Slider resets: the sliders start fresh at their defaults every time you begin a brand-new selection, and also reset whenever you reload the app. Add/Subtract clicks that refine an existing selection keep your current slider values.
Guard rails: clicking on a fully-transparent pixel is a no-op (the Wand toasts "Click on a visible pixel"); a hidden or locked active layer blocks the Wand entirely. Tool-switch discards an uncommitted preview silently. Holding Space to pan while dragging a selection now pauses the drag and resumes when you let go — it no longer cancels your selection.
🍪 Cookie Cutter
Click the 🍪 Cookie Cutter button in the left sidebar's Draw group (or press K). The Cookie Cutter masks the active image layer through a chosen geometric shape — hexagons, circles, stars, hearts, donuts, polygons up to 12 sides, and many more — exactly the kind of "make a hex tile / make a circular avatar" workflow without leaving the editor.
The workflow, in order:
- Select the layer you want to cut. Cookie Cutter applies to the active image layer (the one you're editing).
- Click 🍪 Shape ▾ in the floatbar at the bottom and pick a shape from the searchable list. The shape is auto-fit to the layer's visible content (centered, sized to the shortest side / 2 — same math as a hex-tile cutter).
- A dashed preview appears on the canvas. Pick a different shape from the dropdown to swap previews instantly.
- Press Enter (or click ✓ Apply) to commit. Pixels outside the shape become transparent on that layer; the layer's bbox / contour highlight follow the new shape automatically. The cut is clean — no leftover outlines or selections.
- Or click ⬇ Export PNG to download a transparent PNG of just the shape — sized to the shape's tight bounding box, with the visible canvas clipped to the shape. Doesn't modify the layer; you can keep picking different shapes and exporting variants. This mirrors the standalone HexCutter tool's behavior.
- Press Escape (or click ✕ Cancel) to discard the preview without modifying the layer.
Reversible: the cut is destination-in alpha into maskCanvas — the original RGB pixels stay in the layer's image buffer, so the Restore brush can paint them back at any time. Ctrl+Z/⌘Z also undoes the entire cut in one step.
Combine with Transform: after cutting, switch to Select and use the Transform bar to scale, rotate, or flip the cookie-cut layer. Add a background layer underneath for an instant framed avatar / hex tile / heart sticker.
🤖 AI Editing Tools
Four AI tools live in the left sidebar's AI group: 🤖 Smart Select (unbound by default — rebind via Settings), 🧽 AI Eraser (M), 🔍 AI Upscale (U), and 🎨 AI Generative Fill (J). Smart Select and the AI Eraser are live — click an object to select it precisely, or paint over an object and the AI removes it (each has its own help section). Upscale (2× / 4× enlargement) and Generative Fill (describe what to fill with) are wired as placeholders — clicking them opens their bar with a message and a Cancel button; their model wiring lands in upcoming updates.
Upscale will require WebGPU (available in Chrome / Edge / Arc on desktop); browsers without it render its button disabled with an explanatory tooltip. Smart Select, the AI Eraser, and Remove Background work everywhere — including Safari — falling back to a slower processor path when no GPU is available. Each model is fetched once on first use and cached by the browser. The provider abstraction at js/ai/ is designed so swapping models, or wiring a remote API later, is a one-file change with no impact on tool code or your existing edits.
🤖 AI Smart Select
Click 🤖 Smart Select in the left sidebar's AI group. Click any object in your photo and the AI traces it precisely — fur, hair, irregular edges and all — then press Enter to turn that selection into an outline you can act on with the Select tool (delete it, keep it, invert it, transform it). Pro editors call this AI segmentation; it's the modern replacement for tracing by hand.
The workflow, in order:
- Click the object you want selected. The very first use downloads the AI model once (~152 MB — a progress bar shows it). The first click on each photo also takes a few seconds while the AI studies the image ("Analyzing image…"); every click after that is near-instant.
- A violet-blue tint with marching ants shows what's selected. Wrong object or a bad guess? Just click the right one — a plain click starts over.
- Refine if needed: Shift+click a part the AI missed to include it; ⌥+click (Option) a part it over-grabbed to trim it. The Subtract toggle in the bottom bar makes plain clicks trim instead, if you prefer not to hold a key. ⌘Z steps back one click at a time.
- Press Enter (or click ✓ Confirm) to commit. The selection becomes outline(s), the tool switches to Select, and the action bar works on them — exactly like a Magic Wand commit. ⌘Z undoes the whole commit in one step.
- Press Esc to step back: it clears the in-progress selection first, and pressed again returns to Select. Switching tools or tabs also discards in-progress marks (nothing is committed until Enter).
Notes: Smart Select works everywhere, including Safari — no graphics card required (the first-click analysis is just slower without one). It reads the photo's full original colors, so it can also select things in areas you've previously erased (handy for bringing regions back). If a click lands on nothing useful, you'll get a hint to click nearer the object's center.
🧽 AI Eraser
Click 🧽 AI Eraser in the left sidebar's AI group (or press M). Paint over anything you want gone — a person in the background, a sign, a power line — then Apply, and the AI fills the area in as if the object was never there. Pro editors call this inpainting or object removal; it's the same idea as Photoshop's Remove tool, running entirely in your browser.
The workflow, in order:
- Select the layer the object lives on (the AI Eraser works on the active layer only).
- Paint over the object. Your marks show as a violet tint under a violet brush ring. Cover the whole object with a little margin — generous beats stingy here. The Size dial in the bottom bar (shared with the regular brushes;
A/D also resize) controls the brush.
- Click 🤖 Apply (or press Enter). The very first use downloads the AI model once (~208 MB — a progress bar shows it); afterwards it's cached and Apply takes a few seconds. The painted area is replaced with a plausible continuation of the background, the marks clear, and you stay in the tool — paint the next object right away.
- Press Escape to step back: while the AI is working it stops the run; otherwise it first clears your painted marks, and pressed again returns to Select. ✕ Cancel does the same.
Reversible: Ctrl+Z/⌘Z undoes a whole Apply in one step — both the picture and any transparency that the fill restored. Marks you haven't applied yet are discarded when you switch tools or document tabs (nothing is changed until Apply).
Tips for best results: remove one object at a time with snug coverage rather than marking half the photo at once; for very large objects expect softer fill detail (the AI works at a fixed internal resolution). If a first pass leaves a smudge, paint over just the smudge and Apply again.
Transparent areas — a known limitation: the AI only understands solid pictures, not transparency. Under every see-through pixel your layer still secretly keeps the original colors (that's what the Restore brush uses), and the AI reads those hidden colors when inventing the fill — so on a cut-out image it can bring back bits of the old, deleted background, and whatever it fills becomes solid rather than see-through. A warning appears when you Apply over a partly-transparent area. It works best on fully visible parts of the image; for cleanup in transparent regions, the regular Eraser is usually the right tool.
T Text
Click the T Text tab at the top of the bottom toolbar (it sits to the right of ◈ Transform and is always enabled — no selection or tool switch required). Expanding the tab flips the canvas cursor to an I-beam and opens the text controls: font family, size, color, Bold / Italic, and left / center / right alignment.
Two ways to start a text box (matches Figma / Photoshop):
- Click without dragging — drops a "point text" cursor that grows horizontally as you type. Use this for short labels, titles, single lines.
- Click and drag — draws a dashed box at the size you dragged. Releasing turns it into a fixed-width "paragraph text" box that wraps long lines and grows downward as you type. Use this for blocks of text you want bound to a specific width.
The workflow, in order:
- Click Text to open the tab. Pick the font / size / color / style you want for the next characters you type.
- Click or drag on the canvas as described above to place the box.
- Type. Inside the box, blue handles appear on the left and right edges — drag either handle to widen or narrow the box and the text re-flows live. Dragging the right handle of a point-text box inward converts it into a fixed-width wrapping box on the fly (no need to start over).
- Restyle parts of the text after typing. Highlight any range of characters and change font, size, color, Bold, or Italic — only the highlighted characters update, the rest of the text stays untouched. With nothing highlighted, the next character you type picks up the new style. Double-click inside the text box to select all of its text at once (handy for re-coloring or resizing the whole layer). Single-click still places the caret normally.
- Commit by clicking ✓ Confirm, pressing Enter or Esc, or clicking anywhere outside the text box — all four bake the styled text into the layer (named "Text: <first words>") and switch back to Select.
- Re-edit by double-clicking any existing text on the canvas — works from any tool (Select, Brush, etc.), not just Text. The Text tab opens, the edit box pre-fills with the original content, and every per-character style is preserved exactly. The double-click also pre-selects every character, so you can immediately retype to replace everything or pick a new color/size to restyle the whole layer in one move (Photoshop Type-tool parity). To re-edit without selecting all, click the text once with the Text tool — the caret lands at the end so you can keep typing.
- Transform the baked text by selecting the layer and using the ◈ Transform tab's Scale / Rotate / Flip controls — text layers scale and rotate like any image layer.
New line: press Shift+Enter inside the edit box to insert a new line. Plain Enter commits.
Empty layers are dropped: if you commit a fresh text layer without typing anything, it's removed instead of leaving an invisible placeholder. Undo is not needed.
Stays where you put it: new text layers are order-locked by default — clicking other layers won't promote them above your text in the stack. The position-number button on the text layer's row in the Layers panel shows it's locked; click it to unlock and let the layer flow with normal stack reordering.
Confirm and exit: while editing, pressing Enter or Esc, clicking ✓ Confirm, or clicking on empty canvas all do the same thing — commit the current text and switch back to Select. To start a fresh paragraph box right after committing, click-AND-drag (instead of just clicking) on empty canvas — the drag commits the old edit AND draws a new dashed paragraph rectangle, keeping you in Text mode.
Alignment — point vs paragraph: the two creation modes handle alignment differently, matching Figma / Photoshop behavior.
- Point text (created by clicking without dragging) has no fixed width — alignment shifts the glyphs around the click anchor: left grows the text rightward from the click, center centers the text on the click, right grows leftward and ends at the click. The dashed outline visibly moves with each alignment change because the text is repositioning around its anchor, not flowing inside a box.
- Paragraph text (created by clicking and dragging to draw a fixed-width box) keeps its box position and width on every alignment change — only the glyphs inside reflow to the chosen edge. To get the "alignment shifts text inside a fixed box" behavior, drag to create the text instead of clicking.
🎚 Color Correction (WIP) — Tone + Grade + Curves tabs
Color Correction lives as three tabs on the toolbar above the Select action bar: 🎚 Tone (Exposure / Contrast / Highlights / Shadows / Whites / Blacks), 🎨 Grade (Temp / Tint / Vibrance / Saturation / Hue / Clarity), and 📈 Curves (a master RGB tone curve in a floating editor popover). They sit on the right side of that bar, next to the existing 🎨 Color, ◈ Transform, and T Text tabs. Press V to toggle the Tone tab. Adjustments are non-destructive: the original pixels are preserved in imgCanvas and the adjustments re-bake every time you drag a slider, so you can re-drag any control any number of times without the baseline drifting.
The workflow, in order:
- Select one or more image layers you want to adjust (click in the Layers panel on the right, or on the canvas in Select mode; shift-click to add layers to the selection). Tone, Grade, Curves, and Edges tabs only enable when at least one image layer is selected.
- Click the 🎚 Tone, 🎨 Grade, or 📈 Curves tab on the toolbar (or press
V to toggle Tone). Tabs are grayed out in brush mode — exit to Select first.
- Drag any slider — the live preview updates against the original pixels. For Curves, the editor canvas opens in a floating popover above the canvas: click the curve to add a control point, drag a point to bend the curve, right-click a point (other than the endpoints) to remove it. Endpoints lock their x position but move freely on y.
- Switch tabs freely between Tone, Grade, and Curves — all three belong to the same color-correction session, so toggling between them does NOT commit history. Adjusting all three lands as one undo entry.
- Double-click a slider to reset that one control to zero. ↺ Reset Tone / ↺ Reset Grade / ↺ Reset Curve (footer) wipes that tab's controls only.
- Hold 👁 Before on any tab to compare against the unadjusted image; release to return.
- Click the active tab handle again (or open Color/Transform/Text) to commit. A single history entry is pushed so Ctrl+Z reverts the whole session.
Controls in detail:
- Exposure (stops, −5…+5) — overall brightness in linear light. +1 = twice as bright.
- Contrast — S-curve around linear mid-gray. Positive = more punch; negative = flatter.
- Highlights / Shadows — luminance-masked tonal compression. Negative Highlights pulls bright regions down; positive Shadows lifts dark regions.
- Whites / Blacks — endpoint stretch. Positive Whites extends the bright end; negative Blacks crushes shadows.
- Temp — color temperature: positive warms (more R, less B); negative cools.
- Tint — green/magenta balance: positive toward magenta, negative toward green.
- Vibrance — saturation curve that protects already-vivid colors and skin tones.
- Saturation — global color strength. −100 = grayscale.
- Hue — global hue rotation in degrees (−180…+180).
- Clarity — midtone local contrast. High-pass on the luminance channel. Adds texture punch.
- Curves (master RGB) — a tone curve mapping input to output in display-referred sRGB space. Use it for fine tonal shaping (S-curve for contrast, lifted blacks for a faded look, etc.). Monotonic-cubic interpolation prevents overshoot. Per-channel R/G/B curves are deferred to Phase 2.
Per-layer: each layer carries its own adjustment stack. Adjusting one layer doesn't affect the others. With multiple image layers selected (shift-click), every slider drag — and every curve edit — applies to every selected layer; the slider readout and the curve editor track the primary (last-clicked) layer. The stack is saved with the session — refresh the page and your adjustments come back. Adjustments bake into PNG export automatically.
Status: WIP badge is intentional. Tone, Grade, and a master RGB Curve are live. The full 6-color HSL matrix, per-channel R/G/B curves, the histogram strip, and the GPU shader path for smoother 4K drag are planned follow-ups — see FUTURE_FEATURES/COLOR_CORRECTION_PLAN.md.
🩹 Eraser
Paint to remove pixels. Press E or click the 🖌 Brushes button in the left sidebar and pick Eraser; the brush toolbar appears at the bottom of the canvas with size / hardness / flow sliders and Confirm/Cancel.
The Eraser penetrates all visible non-edit-locked layers — edit-lock a layer (✏️/🔒 in the Layers panel) to protect it from erasing.
Brush settings (shared with Restore / Edge Heal / Paint):
- Size — Brush diameter, in image pixels. Press
A / D to resize without leaving the canvas.
- Hardness — How sharp the brush edge is. 100% = a clean circle with binary 0/255 alpha (no anti-aliased fringe — required for shader-mask authoring). 0% = a soft cloud. Smoothstep falloff in between.
- Flow — How strong each stroke is. Lower values let you build up gradually with multiple passes.
Confirm and Cancel:
- ✓ Confirm (Enter) — Exits brush mode and switches to Select. All strokes stay as-is.
- ✕ Cancel (Esc) — Discards every stroke made since entering brush mode, on every layer affected. A toast appears;
Ctrl+Z restores everything.
↩︎ Restore
Paint to revert pixels to the original image. Press R or pick Restore from the brush toolbar. Brings back erased pixels AND wipes Paint / Edge Heal edits in the brushed area — useful for undoing local paint touch-ups without a full Ctrl+Z.
Brush settings (shared with Eraser / Edge Heal / Paint):
- Size — Brush diameter, in image pixels. Press
A / D to resize.
- Hardness — 100% = clean binary edge; 0% = soft cloud.
- Flow — Lower values build up gradually with multiple passes.
Confirm and Cancel:
- ✓ Confirm (Enter) — Exits brush mode and switches to Select.
- ✕ Cancel (Esc) — Discards every stroke made since entering brush mode.
Ctrl+Z restores them.
🪄 Edge Heal
Press X or pick Edge Heal from the brush toolbar. Paints outward using the color of the nearest visible object pixel — use this to smooth a jagged edge or grow an object outward by a pixel or two, without picking up the deleted background color.
Hardness and Flow don't apply, so both sliders are greyed out while Edge Heal is active. Only Size matters.
Brush settings:
- Size — Brush diameter, in image pixels. Press
A / D to resize.
Confirm and Cancel:
- ✓ Confirm (Enter) — Exits brush mode and switches to Select.
- ✕ Cancel (Esc) — Discards every stroke made since entering brush mode.
Ctrl+Z restores them.
🖌 Brushes (Paint)
Tap B for the last-used brush, or hold B to open the radial brush wheel and release on Paint. Paints with the Fill color from the Color panel — use this to fill in small holes the AI left behind. The Color panel auto-opens above the brush toolbar whenever you start brushing, so you can pick or change the brush color without leaving Paint.
Brush styles — The 🖌 Brushes button in the bottom brush toolbar works in two stages: click it once to start painting with the general brush (no pop-up); click it again, while Paint is already active, to open the list of paint styles. Pick one and the button shows your choice (e.g. 💨 Air Brush); your strokes now use that style. Press Esc to close the list without choosing.
- 🎨 General — The classic round brush. Size / Hardness / Flow behave exactly as before. (When General is selected the button reads "🖌 Brushes".)
- 💨 Air Brush — Sprays softly and builds up the longer you hold in one spot, with a grainy, feathered edge. Great for shadows, glows, and gradual blends.
- ✏️ Pencil — Crisp, hard-edged, tight line with a little grain. Good for precise touch-ups.
- 🖊️ Marker — Lays a flat, semi-transparent ink. Crossing your own stroke in one pass stays translucent; go over it in a separate stroke to deepen it.
- ⭕ Soft Round — Always feathered, regardless of the Hardness slider. Good for soft blends.
Brush settings (shared with Eraser / Restore / Edge Heal):
- Size — Brush diameter, in image pixels. Press
A / D to resize.
- Hardness — 100% = clean binary edge (required for shader-mask authoring); 0% = soft cloud. Smoothstep falloff in between. (Some brush styles set their own edge softness and ignore this.)
- Flow — Lower values build up gradually with multiple passes. (For Air Brush, Flow sets the spray rate.)
Confirm and Cancel:
- ✓ Confirm (Enter) — Exits brush mode and switches to Select.
- ✕ Cancel (Esc) — Discards every stroke made since entering brush mode, on every layer affected.
Ctrl+Z restores them.
✂ Edges (tab on the move toolbar)
The ✂ Edges tab sits on the floating move toolbar at the top of the canvas, right of Grade. It only does something visible after you've removed something — it tunes existing edges, it doesn't create them. Open it with at least one image layer selected (the tab is grayed out otherwise); if there are no edges to refine yet a toast guides you to run Remove Background, Color, or Eraser first.
Refine the edge shape — these sliders are live, non-destructive, and per-layer. Each selected image layer carries its own Feather / Contract / Threshold / Crisp / Smooth values; shift-click to multi-select and the slider drags apply to every selected layer in lockstep. The slider readout tracks the primary (last-clicked) layer.
- Feather (Fthr) — Softens (blurs) the edge. Useful for hair, fur, and natural transitions.
- Contract / Expand (C/E) — Shrinks the cutout inward (positive) or grows it outward (negative).
- Threshold (Thr) — Adjusts where the cutoff happens between visible and hidden.
- Crisp (Crsp) — Sharpens soft edges: 0 leaves the edge as-is, higher makes semi-transparent edge pixels more solid for a crisper, more defined cutout. Remove Background sets this to about 25 automatically — turn it down for softer hair/fur, up for hard graphic edges.
- Smooth (Smth) — Rounds off the jagged, stair-stepped zig-zag along the cutout outline while keeping the edge crisp (this is different from Feather, which blurs the edge). Great for cleaning up rough or hand-traced selections. 0 leaves the edge as-is; higher rounds corners more. Very high values can shave off thin spikes or fine detail. Tip: the moment you erase or use the paint bucket on a smoothed edge, the smoothing locks into the cutout first (you'll see a brief message and the Smooth slider returns to 0) so your edit sticks — undo once to take the edit back, twice to unlock the smoothing.
- Trim Edge (Trim) — Shaves the faint, see-through "fuzzy" pixels off the cutout edge so it reads cleaner. 0 leaves the edge as-is; drag right and the soft halo is trimmed inward (the edge moves in slightly and stays naturally soft). Best for cleaning the leftover haze around a Remove Background or green-screen cutout. Pair with Sharp if you want a fully hard edge.
- ↺ Reset — Restores Feather / C/E / Threshold / Crisp / Smooth / Trim to defaults (0 / 0 / 128 / 0 / 0 / 0) on every selected image layer in one undo step.
Clean up the edge — checkboxes for fixing common edge artifacts. Per-layer like the sliders: toggling a checkbox writes to every selected image layer. Despill's recompute runs automatically for the active layer (behind a brief "Cleaning edges…" indicator); non-active selected layers store the flag and recompute when they become active.
- Smoother edges — Gives the cutout a thin, soft edge so it looks smooth instead of pixel-jagged (the "stair-step" look along the outline), while keeping the overall shape crisp. Leave it on for photo cutouts. It applies to the whole edge as soon as you turn it on — you don't need to touch any slider. It's the opposite of Sharp, so turning one on automatically turns the other off.
- Sharp — Forces every pixel to be either fully visible or fully hidden. No anti-aliasing. Useful when you want crisp edges for graphics. The opposite of Smoother edges, so turning one on turns the other off.
- Despill — Removes the screen-color spill that wraps onto a subject shot on a colored backdrop (e.g. green light reflecting onto hair and shoulders). It subtracts just the screen color while keeping each pixel's brightness, so the spill blends to match the surrounding tones instead of shifting to a wrong color. Works for any screen color, not just green/blue. By default it auto-detects the color from the background; if it guesses wrong, click the small color swatch (under the Despill checkbox) and pick your exact screen color, or click Auto to go back to auto-detect. Whole applies it across the whole subject (for light that wrapped onto large areas), not just the edge. Despill Strength controls how much.
Background (collapsed by default)
Replace the (now transparent) background with a solid color or another image. Collapsed by default — click the section header on the right to expand.
⬇︎ Export
The ⬇︎ Export button in the top-right opens a dropdown where you pick the format and (for lossy formats) quality, then click Save image. Three formats:
- PNG — Highest quality, supports transparency. Larger file size. Use this for most cases.
- WebP — Smaller files than PNG, also supports transparency. Use this for the web.
- JPEG — Smallest files, but does NOT support transparency. The transparent area becomes whatever color you've set under Background (or white if Background is Transparent).
Tips
- Found a bug? Click 🐞 Bug report in the top bar, between ⬇︎ Export and 💬 Feedback (it's always there). Type what went wrong and press Enter — SnipOut packages a screenshot, the recent action trail leading up to the bug, any errors, and a full copy of your document, and sends it straight to the developer so they can reproduce it without a back-and-forth. The first time, you'll see a quick note explaining that your image and these details are sent (privately, deleted after 30 days, never shared or sold) and you choose Send or Don't send — download instead; your choice is remembered and you can change it anytime in Settings → Preferences → Privacy. If the upload can't go through (you're offline, say), it downloads the package instead so you can pass it along. SnipOut quietly keeps a small rolling log of your recent actions and errors at all times so this trail is always ready.
- Have a suggestion or a tip? Click 💬 Feedback in the top bar, between 🐞 Bug report and ⚙ Settings. Pick a type — Suggestion, Tip, or Other — type whatever's on your mind (a feature idea, something confusing, a workflow tip) and press Enter. It goes straight to the developer, who reads every single message personally; feedback genuinely shapes what gets built next. Unlike a bug report, feedback sends only your message plus basic browser info — never your image or document. If it can't go through (you're offline, say), it downloads instead so you can pass it along.
- Paste an image to start editing. A new tab is empty until you load something — every tool stays dimmed and clicking one prompts you to open an image. The fastest path in is ⌘V / Ctrl+V: a screenshot or copied image file from your OS clipboard becomes the new document instantly. You can also drag a file onto the splash, click Choose File…, or paste a layer copied from another tab. Loading any new image resets the active tool to 🖱 Select so you start from a known cursor every time; switching tabs preserves each tab's own tool.
- Use the document tabs at the top-left of the canvas to work on multiple separate documents at once. Click + to open a new blank tab (it appears immediately to the right of the most recent tab); click any tab to switch; hover a tab to reveal its × close button. Each tab keeps its own image, layers, history, outlines, and tool selection. Double-click a tab title to rename it — the new name auto-fills as the export filename when you open the Export panel (you can still edit it before saving). Copy / cut / paste work across tabs — copy in one, switch tabs, paste in another. Reloading the page (or reopening the browser later) closes every open tab into the History panel's recovery list and lands you on a fresh blank tab — click any recovery row to bring a tab back.
- Start with Remove Background for any image with an obvious subject. Clean up afterward with the other tools.
- Open the Color tab in Select's top bar and switch scope to Paint bucket for tricky areas the AI got wrong, like rocks or objects that look like background to it. Tolerance uses Oklab perceptual matching so the slider feels consistent across colors, and edges come out anti-aliased instead of jagged.
- If the Color tool leaves a faint halo, nudge Sens negative to tighten the match. If it's missing a few stragglers, nudge Sens positive. Sens applies to the 🪣 Paint Bucket and the live color preview.
- To erase to see-through, light the checkerboard chip next to the 🪣 Paint Bucket in the Color tab. The Paint Bucket and ⬛ Fill Region/Layer then remove pixels instead of painting. Opacity controls how see-through the result is. Brushes are never affected — use the Eraser tool to erase by hand. Click the chip again to turn it off.
- To fill with Restore, light the ↩︎ chip next to the 🪣 Paint Bucket. The Paint Bucket then brings the original photo back in whatever region you click — it un-hides erased areas and undoes paint / edge-heal color edits there. You can click directly on an already-erased (invisible) spot to bring it back. ⬛ Fill Region/Layer does the same inside a selection. Brushes are never affected — use the Restore tool on R to restore by hand. Click the chip again to turn it off.
- Use the Edge Heal brush to fix jagged or eroded object outlines.
- The 🖌 Brushes button in the bottom brush toolbar fans open a set of paint styles — try 💨 Air Brush for soft spray that builds up the longer you hold in one spot, or 🖊️ Marker for flat translucent ink. The button then shows the style you picked.
- The Magic Wand (W) lets you click a color region, drag Tolerance to grow/shrink live, Shift-click to add, Alt-click to subtract, Enter to commit as an outline. Turn on Subtract to make plain clicks remove from the selection, or Legacy for a plain Photoshop-style wand (raw RGB color, hard edges). The sliders reset to defaults each time you start a new selection.
- Add a layer fast: click the + button at the top-right of the Layers panel to pick an image and drop it straight in as a new layer — no need to reopen the main Import.
- Re-align a moved piece: in the Transform bar, ↰ Start (return to start) snaps the selected layer back to the exact spot, size, and rotation it had when you first imported it. Handy when you've nudged a cut-out piece and need it back on its original alignment for export. (The neighboring ↺ Reset only undoes scale/rotation/flip and leaves the layer where it sits.)
- 🧽 AI Eraser (
M) is live — paint violet marks over an unwanted object, press Enter or click 🤖 Apply, and the AI fills the area in as if the object was never there. The first Apply downloads the AI model once (~208 MB, with a progress bar); after that it's cached and everything runs locally in your browser — no GPU required. Cover the object generously, remove one object at a time, and ⌘Z undoes a whole Apply in one step.
- 🤖 AI Smart Select is live — click any object and the AI traces it precisely, then Enter turns it into an outline for the Select tool. Shift+click adds a missed part, ⌥+click trims an over-grab, ⌘Z steps back one click. First use downloads its model once (~152 MB); the first click on each photo takes a few seconds while the AI studies it, then clicks are instant. Works everywhere, including Safari. Unbound by default — give it a key under Settings → Hotkeys if you use it a lot.
- The other AI tools (
U Upscale, J Generative Fill) are foundation-only in this build — the buttons exist but model wiring lands in upcoming slices. Upscale will require WebGPU (Chrome / Edge / Arc on desktop today).
- Press
K for 🍪 Cookie Cutter, pick a shape (hexagon, circle, star, heart, donut, …), and press Enter to mask the active layer through it. Auto-fits to the layer's visible content. Restore brings cut pixels back; ⌘Z undoes the cut in one step.
- Cut a shape out of the layers underneath (new) — stack a cut-out (or a Text layer) on top, select it with the Select tool, and press 🕳 Punch on the action bar. Its exact silhouette is punched out of every visible, unlocked layer below — the cutter layer itself stays untouched, so drag it aside to reveal the hole. One ⌘Z undoes the whole punch, and the Restore brush brings punched pixels back.
- Lift an outlined object onto its own layer (new) — draw an outline around something, select it, then press ⤴ To new layer on the action bar. The outlined pixels are cut off the top layer and dropped onto a brand-new layer in the exact same spot — no nudging — so you can move, hide, or restyle that piece on its own. One ⌘Z puts everything back in a single step. (When the outline overlaps several layers, it lifts from the top one.)
- Draw a box outline in one drag (new) — with the 🖱 Select tool, hold the right mouse button and drag out a box, then let go: a rectangular outline drops in exactly that shape, already selected so you can move, cut, or transform it right away. Hold Shift while right-dragging to instead select any shapes that fall inside the box (the older marquee behavior).
- Ghost-lock a layer to click straight through it (new) — click the 👻 button on a layer row to make that layer click-through: it stays fully visible, but clicks, brushes, the eyedropper, dragging, and Delete/Fill all pass right through to whatever's beneath it. Perfect when a top layer keeps grabbing your clicks while you're trying to work on something behind it. Click 👻 again to make it interactive. The 👻 on the master bar at the top of the Layers panel ghost-locks every layer at once.
- Click the T Text tab at the top of the bottom toolbar (always available, no hotkey) to place editable text on the canvas. Click for a point-text caret that grows as you type, or click-and-drag to draw a fixed-width box that wraps and grows downward. Inside the box, blue side handles let you resize the wrap width live. Highlight any characters and change font / size / color / Bold / Italic to restyle just those characters — the rest of the text is untouched. ✓ Confirm, Enter, or clicking outside the text box bakes the text and returns to Select. Double-click any existing text (from any tool) to re-edit with full per-character fidelity. Shift+Enter inserts a new line.
- Hold
Space or the middle mouse button to pan temporarily — releasing returns to your previous tool. Press H to switch to the Hand tool permanently.
- Press
A and D to shrink / grow the brush size quickly.
- Step back just the last bit of a brush stroke (new) — right after you finish an Eraser, Restore, or Paint stroke, a small ↶ Step back button appears on the bottom brush toolbar. Click it to undo just the last piece of that stroke instead of the whole thing — tap it again to peel back more. A ↷ Step forward button appears once you've stepped back, to re-apply a piece you went too far on. It's a finer correction than ⌘Z, which still undoes the entire stroke at once. Start another stroke, switch tools, or undo and the buttons go away. (Edge Heal isn't covered yet.)
- Brushes make sounds (new) — each brush has its own procedurally-made texture that tracks your stroke: faster strokes are louder and brighter, and Air Brush hisses and swells the longer you hold in one spot. Control it under Settings → Sound: a Master volume dial (drag it and you'll hear a click at that level, so you can set it by ear), a Brush sounds on/off, and the Dial click sound on/off.
- Notification sounds & ambient music (new) — pop-up notifications play a soft chime (and a gentle tone if something went wrong), and confirming a tool (the ✓ Confirm / Apply buttons) plays a crisp, satisfying sound. There's also peaceful, ever-changing background music you can turn on — it starts playing (fading in softly) as soon as you enable it, and pauses when you switch tabs. All under Settings → Sound: Notification sounds on/off (covers the chime, error tone, and confirm sound), Background music on/off (off by default), and a Music volume dial. Everything sits under the Master volume, so 0 there silences it all.
- Every slider is undoable. Drag any slider — brush size, hardness, flow, magic wand tolerance, color tolerance, text size, all 16 Color Adjust sliders — and ⌘Z / Ctrl+Z reverts that one slider tweak as a single step. Each release of a slider is its own undo entry, so you can step backward through individual adjustments the same way Lightroom and Camera Raw do. Discarding a Color Adjust session (closing the panel without committing, if a discard path exists) pushes one extra undo entry that restores everything to the session's start.
- Every numeric control is a rolling dial (new) — a little window showing the current number flanked by its neighbors, like a combination lock. Drag it left/right or scroll your mouse wheel over it to change the value: move slowly to nudge one number at a time for fine control, or flick fast to race to the big numbers. Click the center number to type an exact value (decimals allowed). This applies to brush size/hardness/flow, the Color and Magic Wand settings, Color Adjust, Transform, Text, Edges — everywhere there used to be a slider. The dial also clicks like a combination lock as it rolls. Prefer the old look? Turn dials off under Settings → Preferences → Sliders (and the click sound under Settings → Sound). (For brush size, A / D still resize without touching the dial.)
- Useful tips appear while you work (new) — about once every 10 minutes a short tip shows in the banner at the top of the canvas, like a video game's loading screen, to help you discover features. They only appear when a photo is open and never interrupt a brush stroke. Turn them off under Settings → Preferences → Useful Tips (this is separate from the Hover Tooltips switch, which controls the hover descriptions on buttons).
- The brush flow slider now feels even across its whole range. Previously, only the very bottom of the slider made a visible difference; now flow=75, 50, 25 each produce a clearly weaker stroke than the one before.
- Set Hardness 100 when authoring shader masks — every brushstroke deposits exact 0 or 255 alpha (no anti-aliased fringe). Below 100, the brush uses a smoothstep falloff and is anti-aliased.
- Press
E for Eraser, R for Restore, X for Edge Heal, tap B for the last-used brush, or hold B to open the radial brush wheel — move the cursor toward the wedge you want and release to commit (no click needed). The center hub hosts a size slider; releasing with the cursor there makes no tool change. ⌘Z/Ctrl+Z to undo.
- While any brush is active, press Enter to confirm (exits to Select) or Esc to discard every stroke made since you entered brush mode.
Ctrl+Z restores discarded strokes.
- The Color tab (🎨 Color) auto-opens directly above the brush toolbar when you start brushing, so the Fill color (plus the 🪣 Paint Bucket and its Tolerance) is visible without leaving your brush. The Paint brush reads the Fill swatch directly — change it here and the next stroke uses the new color. Toggling the Color panel doesn't switch tools — you stay in Paint / Eraser / Restore / Edge Heal. Click the 🪣 Paint Bucket while brushing and it stays armed so you can fill several regions in a row — click 🪣 again (or pick another tool) to return to the brush. If you close the Color tab while still painting, it stays closed until you exit brush mode and re-enter.
- Every color swatch in the app — Find, Fill, Mask Overlay, Background, and Text — opens the same custom color picker. Click a swatch to expand a popover with a hue ring, an SV (saturation × brightness) square, RGB sliders, a typeable hex field, a saved-color palette (right-click to delete a swatch, click ⊕ to save the current color), and a built-in 💧 Eyedropper. Inside the picker, press I to start the eyedropper without clicking. The eyedropper key also works globally — from any tool, with every color panel closed, press I to sample a color straight into your Fill/brush color and drop right back into what you were doing (no panel, no Confirm; Esc cancels). Change the key under ⚙ Settings → Hotkeys → Eyedropper. On Chrome / Edge the eyedropper lets you pick a color from anywhere on screen using the system picker. On Safari / Firefox a circular 120 px magnifier (zoomed pixel grid, small square marking the center pixel, hex readout in a pill below) appears the instant you click the eyedropper, snaps to your cursor, and follows it anywhere — including back over the picker popover itself — the OS cursor hides while you're over the canvas, and the magnifier floats above all app chrome (sidebars, toolbars, panels) so it's never clipped. A 96 px companion box pinned to the top-left corner of the canvas shows the same area around the cursor at normal zoom (no magnification) with a crosshair on the cursor pixel — the orientation reference so you don't lose track of where you are while the magnifier covers the work area. Click any pixel inside the canvas to commit the sample, or press Esc to cancel. Drag the picker out of the way by clicking and holding any empty area inside the popover (the gap between sliders, footer padding) — while you hold and drag, the cursor turns into a closed hand. The picker remembers where you left it: close it and reopen any color swatch and it pops back at the dragged spot. Reloading the page resets it to the swatch you click. Click outside the picker to keep your color, or press Esc to revert and close.
- Step through your layers from the keyboard (new) — press Shift+Tab to move the active layer down the Layers panel one row at a time, wrapping from the bottom back to the top. It selects each layer exactly as clicking its row would, so you can quickly pick which layer a brush paints on without reaching for the mouse.
- ✨ Studio tools are always available — use the Magic Pen tool (press
O) for precise manual selections with anchor points, and the Layers panel for multi-image composition.
- Use Invert on a selected outline to flip the selection — outline a person, hit Invert, then Delete to remove the background and keep the subject.
- The compact Transform bar at the top of the canvas has Scale, Rotate, Opacity, Flip H/V, Reset, ↰ Start, Center, and ⛶ Fit controls. Click the ◈ Transform tab handle to open or close it. You can disable auto-expand in ⚙ Settings → Preferences.
- Make a layer see-through — every image-layer row in the Layers panel has its own opacity dial (under the four toggle buttons) that sets that layer's see-through level, 0–100%. Drag for a live preview (one undo step per drag) or click the number to type an exact value. Dragging to 0% hides the layer (it dims in the panel and stops responding on the canvas — there's no separate visibility button anymore; opacity is the single control). The "All Layers" bar has a master opacity dial that fades every layer at once, and the Op dial in ◈ Transform fades all currently-selected layers together. Merging layers bakes their opacity into the merged pixels, and exported PNGs show layers exactly as faded as the canvas does.
- Tiled storage (default ON in ⚙ Settings → Preferences) reduces per-stroke memory use on large images by roughly 100×, so large photos and long undo histories don't stutter the browser. If you ever see a visual or performance issue, turn it off and refresh — your work is preserved either way.
- Smooth slider dragging on big photos. The edge-refine sliders (Feather, Contract, Threshold, Crisp, Smooth) and the RAW Develop sliders (white balance, exposure, highlight recovery) preview at a slightly lower resolution while you drag them, so they stay responsive on large images instead of freezing. The instant you let go (or pause), the full-quality result snaps in — and your saved image is always full quality.
- Dev Tools (in ⚙ Settings → Preferences, off by default) is a master switch for developer-only extras. Turn it on to reveal the Show performance HUD option, the Show sprite pipeline buttons option, and to enable the check that warns you — when you export a linked pair of layers — if any colors under the mask aren't fully gray. Leave it off for normal editing: exports just run, with no warning popup. The performance overlay can be dragged anywhere — grab any empty part of it and move it, just like the color picker.
- Sprite pipeline buttons — turn on Dev Tools, then turn on Show sprite pipeline buttons (right under the performance HUD switch). Now, whenever an image is open, two buttons appear in the top-left corner under ⊡ Center Canvas. 👕 Clothing sets up a sprite in one click: it copies your image into a grayscale "base" layer on top plus a black silhouette "mask" layer below, links and locks the two together so they stay aligned, and arms the mask to paint white. 🧍 Units does the same for a character body, but the bottom "mask" layer is filled solid red (skin) and armed to paint blue — paint blue over the eyes with a hard brush for crisp edges. Both buttons hide again when you turn either switch off or close the image. A third button, 🦴 Body parts, sets up the paint-by-color part map that tells the game where to cut the body for animation (bottom layer starts all-torso yellow; paint each limb its color — open 🎨 Legend for clickable swatches and a reminder of every color's meaning). A fourth button, 🏠 Building, does the clothing-style setup for buildings: paint the mask white where the kingdom's color should tint and blue where the building should glow at night (windows, lanterns). With every setup button, the top reference layer starts 75% see-through so your strokes on the layer below show through it while you paint — fine-tune that with the Op dial (select the top layer → ◈ Transform) or hide the reference entirely with 👁. Game exports always send the reference at full strength — the see-through is only an on-canvas painting aid.
- Send to game project — with Dev Tools and the sprite-pipeline buttons on, the Export popover gains a "Send to game project" section. Pick what the piece is (clothing pair, body pair, hair, or other game art), which direction it faces, and its name — a live preview shows the exact filename — then send: the files travel straight into the When Blood Flows project (no downloads folder, no manual sorting). On the public site they go through a private cloud inbox that Unity collects from; running SnipOut locally they're written directly into the project. The first send asks for the team password. If anything fails (offline, wrong name, daily limit) the files download normally instead, with a message saying why. The full start-to-finish artist walkthrough lives in the game project's docs:
DOC/WBF_AnimationPipeline.md §0 "Quick start". If a generated sprite sheet came out slightly misaligned (a limb drifted from the layout), don't redo it — paint just the misplaced piece with 🦴 region colors and/or re-place its 🔗 joint dots, then send those as the "Sheet … FIX (one drifted sheet)" kinds with the same name as the sheet being fixed: the fix wins over the layout for that one sheet only.
- Device RAM (in ⚙ Settings → Preferences → Memory) controls how long your undo history can grow. Tell SnipOut how much RAM your computer has — bigger values mean more undo steps. Default is 16 GB. The "History cap" hint right next to the input shows how many undo entries you'll get on the current image.
- Click ⬡ Shapes in the Outline tool bar to insert a perfect geometric shape — rectangles, circles, stars, arrows, hearts, and more. Search to find the one you want, then click to place its center (grid-snaps when Snap is on), move the mouse to size it, and click again to commit. Press Esc to cancel.
- Hold Alt while clicking to reach under a nested outline and select the one behind it.
- The Select tool can select image layers too — hover over a visible part of any layer to highlight it, click to select. Shift+click to multi-select images. Press Escape to deselect. The action bar is always visible when Select is active.
- Shift-click image layers to apply 🎚 Tone, 🎨 Grade, ✂ Edges, 🎨 Color, and Transform sliders to multiple layers at once. The slider readout tracks the primary (last-clicked) layer, but every dragged value writes to every selected layer. The five tabs only enable when at least one image layer is selected.
- The top toolbar remembers the last tab you opened. Open the 🎨 Color tab on a Select+image, switch to a brush — Color stays open. Switch back to Select with no selection — Color force-closes (you can't use it without a selection), but as soon as you re-select an image, Color auto-reopens. Same for ◈ Transform, 🎚 Tone, 🎨 Grade, 📈 Curves, 🎞 Develop, and ✂ Edges — whichever tab you opened most recently auto-reopens once its conditions (selection / image kind / not in brush mode) are met again. To stop the auto-reopen, click the open tab's handle to close it manually — that clears the memory until you open another tab.
- ⫼ Guides alignment lines are enabled by default; ⊞ Grid overlay is off by default. Toggle them with the corner buttons. Snap to Grid controls whether outlines snap to grid intersections.
- Canvas Size — click the dimensions readout next to the SnipOut logo (in the header) to reshape the document for a specific export target. Choose a preset (Instagram Square, 1080p, 4K, A4, etc.) or type custom W×H. Layers are not scaled or cropped — they stay at their pixel size and re-center in the new frame. Undo fully reverts the change.
- The ⛶ Fit ▾ dropdown in the Transform bar offers four ways to match the selected layer to the canvas: Fit (contain) — aspect preserved, fully visible; Fill (cover) — aspect preserved, canvas fully covered (edges may extend past); Stretch — non-uniform, may distort aspect ratio; Actual Size — reset scale to 100%. Rotation and flip are preserved except for Stretch, which bakes into pixels and resets transform. All four modes are undoable.
- The Eraser penetrates all visible non-edit-locked layers. Edit-lock a layer (✏️/🔒 in the Layers panel) to protect it from erasing.
- Selecting an image layer (click on canvas or panel) automatically brings it to the front so you can see what you're working on. Lock a layer's order (click its position number) to prevent this — order-locked layers stay pinned.
- Each image layer shows a bold green number indicating its position. Click the number to lock the order (turns red) — the layer stays pinned at that position when you drag other layers around it. Click again to unlock.
- The "All Layers" bar at the top of the Layers panel lets you toggle order lock, drag lock, and edit lock for every layer at once, plus a master opacity dial that fades all layers together (drag to 0 to hide everything). Individual per-layer toggles still work independently afterward — each master button auto-updates only when all layers share the same state.
- Each image-layer row carries an icon stack: top row = order lock (numbered button) and drag lock ↔️/📌; bottom row = chain 🔗/⛓️💥 and edit lock ✏️/🔒; and below them an opacity dial (drag to 0% to hide the layer — opacity replaced the old visibility button). The two locks have crisp, non-overlapping roles: drag lock blocks ONLY canvas drag (pixel edits and transforms still work). Edit lock blocks pixel edits, scale/flip/rotate, and delete (drag still works). They're independent — set neither, either, or both.
- Chain layers (🔗 / ⛓️💥) — click 🔗 on two or more image layers to lock them together: dragging, scaling, flipping, rotating, deleting, or reordering any one of them applies to every chained layer in lockstep, in a single undo step. Useful for keeping a paired base + mask aligned during edits, or for moving a subject across multiple stacked composites without breaking alignment. Click 🔗 again on a layer to unchain it (icon flips to ⛓️💥). The 🔗 in the "All Layers" master bar at the top of the panel chains / unchains every image layer at once. Per-layer locks still apply: a drag-locked peer stays put when the chain moves, an edit-locked peer refuses chain transforms, and the whole chain delete is refused if any peer is edit-locked.
- Per-layer Fill color + color-sync toggle (🎨🔗 / 🎨⛓️💥) — every image layer now remembers its own Fill color. Switch active layer and the Fill swatch in the Color tab updates to that layer's stored color. When two or more layers are chained together, a new 🎨🔗 button appears in the Color tab next to the Fill eyedropper. While it's ON, picking a color updates every chained layer's Fill in lockstep. Click it to break the link (icon flips to 🎨⛓️💥) and color picks only update the active layer — handy when you want one chained layer painted red and another blue. Auto-resets to ON only when a fresh chain forms; if you manually broke it, adding more layers to the chain leaves it broken.
- Paint strokes follow the chain. When you Paint on a chained layer, the same brush stroke also lands on every other chained layer in one go, with each layer using its own stored Fill color. Edit-locked or hidden chained layers are silently skipped. A single undo reverts the stroke on every layer at once. Eraser and Restore are unaffected — they keep their existing behavior of erasing/restoring through every visible unlocked layer regardless of chain.
- Export Pair. When 2 or more layers are chained together, the Export popover renames itself to Export pair and the save button becomes ⬇︎ Save pair. Confirming saves one PNG per chained layer, named
‹title›_‹layer name›.png. Each PNG is rendered with that layer's own transforms baked in (move / scale / flip / rotate), so the pair lands at matching dimensions and stays pixel-aligned — ready to drop straight into a Unity shader. Pair mode is always PNG (lossless); the format and quality controls are hidden so a JPEG can't accidentally break the alignment. Hidden and edit-locked chained layers still export — chain membership is what counts. If the chained layers don't have matching dimensions, the export refuses with a toast (resize the document or re-import the offending layer at the correct size).
- Grayscale "color" (🎚️) — the Fill / Find color swatches gain a grayscale option. Click the Fill (or Find) color swatch and a small 🎚️ Grayscale button pops up next to it, alongside the OS color picker. Pick a hex color in the OS picker as usual, OR click the 🎚️ button to put this layer in grayscale mode. In grayscale mode, every Paint stroke / Paint Bucket / Fill Find on this layer drains color from whatever's underneath instead of laying down the Fill color — like Photoshop's Sponge tool in Desaturate mode. Each pixel under the brush (or matching the flood / find) is pulled toward its grayscale equivalent (R = G = B = luma). Use it on a base sprite to grayscale-out the regions that will get tinted by the Unity shader at runtime. Per-layer: each layer carries its own grayscale flag, so switching active layer shows that layer's setting. In a chain: with color-sync on, clicking 🎚️ flips every chained layer's flag together; with color-sync off, only the active layer changes. During chained painting, each peer paints based on its own flag — so you can mark the base layer "grayscale" and the mask layer "color" and a single stroke does both jobs at once.
- Pre-export grayscale check. When you click ⬇︎ Save pair, SnipOut scans the bottom chained layer (the base) for non-grayscale pixels inside any chained mask zone. If it finds any, a dialog opens with three choices: Cancel backs out, Export anyway writes the files unmodified (you accept the wrong-hue risk in Unity), or Auto-flatten to luminance rewrites the offending base pixels to their grayscale equivalent in a single undo step and then exports. Convention: the lowest layer in the chain stack is treated as the base; everything above it is treated as a mask. The check is skipped on canvases larger than 4 megapixels.
- Click the 👁 eye toggle next to the "Outlines" divider in the Layers panel to temporarily hide all outlines when they're in the way.
- You can select multiple images at once in the file picker (or drag-and-drop several files). They're imported as separate layers in the order you selected them. If no document is open yet, the first image becomes the background and the rest become layers.
- Your session is auto-saved to IndexedDB every few seconds. Refreshing the page (or reopening the app later) lands you on a fresh blank tab — every tab you had open is closed into a recovery row at the top of the History panel (up to 20 most recent). Click a recovery row to restore that tab as a cold tab. The × on a recovery row permanently discards it. A page refresh also clears your in-app Copy buffer, so the Paste button resets to disabled on the fresh tab.
- In the History tab, each row has a ⎘ copy button next to the pin. Clicking the row restores current state to that point (destructive — overwrites what's after); clicking ⎘ instead copies that entry's layer to the clipboard so you can paste it back in with Cmd/Ctrl+V as a new layer without losing any current work. Useful for side-by-side comparison or for cherry-picking an earlier mask without rewinding.
- The document area (artboard) is shown as a subtle floating sheet above a flat pasteboard. When the background is set to Transparent, the artboard shows a near-black checkerboard — transparent pixels inside your composite look like checker, while outside the artboard is a flat color. This tells you where the document edge actually is when dragging layers off the boundary.
- RAW camera files (CR2/CR3, NEF, ARW, DNG, RAF, ORF, RW2, PEF, RWL) are decoded on import and the underlying 16-bit linear sensor data is preserved on the layer. A 🎞 Develop tab appears next to Tone/Grade only when a RAW layer is selected — its WB Temp/Tint, Linear Exposure, and Highlight Recovery sliders operate on the sensor data before the 8-bit tone curve, so pushing Linear Exp +2 recovers shadow detail without posterizing (compare to the same gesture with Tone Exposure on a JPEG). Brush strokes (Paint / Restore / Edge Heal) layer on top of the develop pass, matching Lightroom and Capture One: large WB or exposure changes after painting will shift the surrounding image but leave brush pixels alone. Develop math is approximate (the embedded decoder doesn't expose camera color matrices), so colors aren't byte-for-byte Lightroom-accurate — relative slider feel is faithful, absolute calibration is not. The Develop tab is hidden on JPEG / PNG / WebP / GIF / BMP layers.
Technical details
For people who want to know how the internals work.
Architecture
Three-canvas pipeline at the source resolution:
imgCanvas — pristine source, never modifiedimgClean — optional working RGB layer for tools that change colors (Paint Color, Edge Heal, Despill)maskCanvas — alpha channel encoding which pixels are kept
The visible composite is rebuilt on every change as (imgClean || imgCanvas) combined with a derived mask via destination-in. The derived mask is the raw maskCanvas passed through any active edge refinement and cleanup operations on every frame — refinement is non-destructive, the underlying mask is never modified.
Quality preservation
All operations work at full source resolution. The AI model resizes its input internally for inference, but the resulting matte is upscaled with high-quality smoothing back to the original size and used as alpha. Exports read the composite at the original resolution, not what's shown on screen.
Edge refinement blur
A pure-JavaScript separable box blur on the alpha channel. Two O(n) passes with a sliding-window sum, independent of radius — a 50px blur costs the same as a 5px blur. This replaced an earlier ctx.filter='blur()' approach that had a browser quirk where blurring a binary-alpha source could fail to produce a visible gradient. JS blur is bulletproof.
Flood fill
Stack-based scanline algorithm with edge-clamped color distance test. Operates on the pristine source colors so the test is deterministic regardless of prior edits. Sensitivity additively widens or shrinks the effective threshold; the visited region is hard-cut so there's never a hazy boundary.
Trim Edge (fuzzy-ring erosion)
A grayscale morphological erosion (separable min-filter — two O(n) passes, independent of radius) on the derived mask's alpha. It shaves the soft, semi-transparent ring inward while preserving the anti-aliased gradient, so it's the soft counterpart to the hard Contract/Expand. Runs as the last step of the edge-refine pipeline, non-destructively.
History
Snapshots both mask alpha and imgClean RGB. Uses a version counter to dedupe snapshots — entries that share an unchanged imgClean reuse one backing buffer by reference, so a long sequence of brush strokes that don't touch RGB only stores one shared RGB snapshot. This keeps memory bounded by the number of distinct RGB states, not the number of history entries.
AI model
Uses RMBG-1.4 (BRIA) running entirely in your browser on ONNX Runtime Web — GPU-accelerated via WebGPU where available, with a CPU fallback on older browsers. The model is self-hosted on our own bucket (no third-party CDN), nothing is uploaded. The soft matte output is min-max normalized then gamma-corrected (0.85) before becoming the mask alpha to crisp soft edges. This replaced @imgly/background-removal (an AGPL-licensed model) in June 2026 for higher quality and a cleaner license. (RMBG-1.4 is free for non-commercial use; the higher-end BiRefNet is reserved for a future optional server-side "HD" path since it's too heavy to run inside a browser.)
