# 智能分层：图片转多图层

智能分层先在界面图上圈出要切开的元素。确认哪些是程序文字，再决定要不要高清增强。切完的图放在一块新画板上，垫在源图的一份拷贝上。

## 先说结论：4个步骤

**Smart Layering（智能分层）** 把一张界面图拆成多图层。Image to Layers 指的就是这一步。已经在用的界面，如果一次切完就不再看，后面通常还要手工改。所以切开之前会停一下：哪些框留下，哪些区域是程序文字，要不要开 **HD enhance（高清增强）**。确认之后，切好的图放在一块新画板上，垫在源图的一份拷贝上。

拆开并不难。导入到引擎中时，原来的位置和交互还在不在，才是后面要盯住的。原图层的上下文信息要保留，并和画面同步。具体写在[从图片到多图层](/exp/how-to-separate-character-images-into-layers-for-a-faster-game-asset-preparation-workflow/)。

![用作智能分层源图的王国防守界面](/images/auto-layering/smart_layering_base.webp)

## 步骤 1：用 AI Auto Box 圈出各块

选中画板。打开 **AI tools（AI 工具）**，点 **Smart Layering（智能分层）**，再点 **AI Auto Box（AI 自动圈选）**。这一步读整张图，把要单独切开的元素各自圈出来。列表还没确认时，可以在已有框里再画一个，也可以移动框、改框的大小。

![AI tools（AI 工具）菜单里，选中 Smart Layering（智能分层）](/images/auto-layering/step1_smart_layering.webp)

![AI Auto Box 圈出了塔、小屋和技能卡](/images/auto-layering/step2_AI_Auto_Box.webp)

## 步骤 2：核对图层列表

每个框标成 **UI element（界面元素）**，或 **Program text（程序文本）**。标成程序文本的区域，导出时按文字处理，不做成图片图层。框叠在一起时有前后。拖动某一行，可以改哪一块在上面。这张图里，生命数、金币数和波次是程序文本。图标和卡面是界面元素。

![图层列表：计数标成 Program text（程序文本），图标标成 UI element（界面元素）](/images/auto-layering/step3_start_layering.webp)

## 步骤 3：确认数量，再决定要不要高清增强

对话框标题是 **Start manual layering?（开始手动分层？）**。里面写着要切多少个元素，以及这次的估算。勾选 **HD enhance（高清增强）** 之后，切出来的图层会再交给图像模型处理一次。细节更清楚，边缘更干净。模型能补上的残缺，也会补上。估算和上一步标的内容一致，再点确认。

![确认框，HD enhance（高清增强）尚未勾选](/images/auto-layering/step5_Confirm_and_start.webp)

## 步骤 4：在新画板上看结果

处理完会新建一块画板。切分结果铺在源图的一份拷贝上。各块贴得很紧。拖动某一层，或者拉动框边上的控制点，才能看出它和原图是分开的。图层名字也一起写上，例如 `life_count`、`shield_icon`、`skull_tower_card_one`。

![智能分层之后，拷贝图上带名字的框](/images/auto-layering/step6_output_layers.webp)

![新画板的图层列表：life_count、shield_icon 和技能卡](/images/auto-layering/step6_2_auto_layer_rename.webp)

## 演示视频

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

图层切好、名字也写上之后，用 [PNG 到 PSD](/docs/convert/png-to-psd/) 存成 Photoshop 文件。同一批图层也可以导入到 Unity 中：[Figma 到 Unity](/docs/convert/figma-to-unity/)，或 [PSD 到 Unity](/docs/convert/psd-to-unity/)。