← SliceForge

Resources

← All tutorials
BeginnerAbout 25 min

Import screenshot → clean UI

Run Image → Screen on a HUD screenshot, review regions, then tidy structure in Compose.

Steps

  1. Import the screenshot into the project Library (drag file into Library or canvas without Shift if you only want the raw asset first).
  2. Drag the screenshot onto the canvas and use Image → Screen (or Shift+drop the image onto the canvas per current Compose behavior) to start extraction.
  3. In the review modal, accept solid panels first, reject obvious noise, rename ambiguous regions, merge duplicates, split overcrowded clusters.
  4. Apply to a new or existing screen. Toggle extract display modes in the toolbar to compare Original vs Refined vs Vector when available.
  5. Run Refine extracted from Smart Actions when you need client-side cleanup of crops; follow with Vectorize extracted if you want SVG-capable nodes.
  6. Group related chips, run Improve layout on selections where the Smart Action is offered, and link colors through Style Brain in the Styles panel.

Expected result

A layered screen derived from a screenshot, with reviewed regions and a cleaner hierarchy ready for export experiments.

For deeper reference, open Docs.