# 智慧分層：圖片轉多圖層

智慧分層先在介面圖上圈出要切開的元素。確認哪些是程式文字，再決定要不要高畫質增強。切完的圖放在一塊新畫板上，墊在源圖的一份複製上。

## 先說結論：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/)。