# Smart Layering

Smart Layering (Image to Layers) lets AI box the pieces on a production UI plate first. Mark program text, optionally run HD enhance, then review the cuts on a new copy of the plate.

## TL;DR: 4 steps

**Smart Layering** is this site's Image to Layers pass. On a live production plate, one unattended cut still leaves a round of hand fixes, so the pass stops for review before it cuts: which boxes to keep, which regions are program text, and whether **HD enhance** runs. The pieces then land on a new board, laid out on a copy of the source.

Why names, positions, and interaction still have to travel into an engine: [Image to Layers: How to Separate Character Images Into Layers for a Faster Game Asset Preparation Workflow](/exp/how-to-separate-character-images-into-layers-for-a-faster-game-asset-preparation-workflow/).

![Kingdom-defense UI plate used as the Smart Layering source](/images/auto-layering/smart_layering_base.webp)

## Step 1: AI Auto Box

Select the board. Open **AI tools**, choose **Smart Layering**, then run **AI Auto Box**. The pass reads the plate and boxes each piece it treats as its own element. Boxes can still be drawn inside an existing box, moved, or resized before the list is confirmed.

![AI tools menu with Smart Layering selected](/images/auto-layering/step1_smart_layering.webp)

![AI Auto Box result: boxes around towers, huts, and the spell cards](/images/auto-layering/step2_AI_Auto_Box.webp)

## Step 2: Confirm the layer list

Each box is a UI element or **Program text**. Program text stays marked as text on export, instead of becoming a picture layer. Overlapping boxes stack; drag a row to change which one sits in front. On this plate, the life count, the gold total, and the wave counter are program text. Icons and cards stay UI elements.

![Layer list with Program text on the counters and UI element on the icons](/images/auto-layering/step3_start_layering.webp)

## Step 3: Confirm, and HD enhance

The confirm dialog is titled **Start manual layering?** It shows the element count and the estimate. **HD enhance** sends the extracted layers back through the image model: sharper detail, cleaner edges, and incomplete pieces restored where the model can. Confirm when the estimate matches the marks from the previous step.

![Confirm dialog with HD enhance unchecked](/images/auto-layering/step5_Confirm_and_start.webp)

## Step 4: Review the new board

Processing creates a new board. The cuts are laid out on a copy of the source image. The fit is close enough that the pieces are hard to tell apart from the plate until a layer is dragged, or the selection handles around a box are used. Names land with the layers: `life_count`, `shield_icon`, `skull_tower_card_one`, and the rest of the list.

![Named boxes on the copied plate after Smart Layering](/images/auto-layering/step6_output_layers.webp)

![Layer list on the new board, with life_count, shield_icon, and the spell cards](/images/auto-layering/step6_2_auto_layer_rename.webp)

## Walkthrough video

<figure class="video-embed">
  <div class="video-embed-frame">
    <iframe
      src="https://www.youtube-nocookie.com/embed/0h5krf9cL1A"
      title="VberAI Studio Smart Layering walkthrough"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
    ></iframe>
  </div>
</figure>

After the named layers exist, [PNG to PSD](/docs/convert/png-to-psd/) writes them to a Photoshop file. The same layers can go to Unity: [Figma to Unity](/docs/convert/figma-to-unity/) or [PSD to Unity](/docs/convert/psd-to-unity/).