# PNG 到 PSD

把一張 PNG 遊戲 UI 自動分層，再匯出成可在 Photoshop 裡改的多圖層 PSD。

## 先說結論：3個步驟

**PNG 到 PSD** 的主要邏輯是：針對只有一張扁平 PNG 的遊戲 UI（HUD、整屏截圖、從來沒有分層的畫板），要先批次化處理好美術素材，再回到 Photoshop 裡改。先跑 [自動分層](/docs/sprite/auto-layering-image-to-layers/)：檢測邊緣切圖，匯出有意義命名的圖片檔案，再選 **Export to Photoshop PSD**。匯出的 `.psd` 裡，這些塊是分開的圖形層和文字層。同一套步驟也適合很多張都從單張 PNG 起步的 UI。

## 步驟 1：自動分層

在 [VberAI Studio](https://vberai.com/studio) 開啟這張 PNG，選中畫板（例如 **cat_journey_UI**）。在選中後的工具欄裡開啟重疊圖層，選 **Auto-Layering（自動分層）**。

![重疊圖層選單，含 Auto-Layering 和 Layer Split](/images/auto-layering/step1_auto_layering_.webp)

對話方塊是 **Run AI auto-layering?**，再點 **Start layering**。

![確認對話方塊：Run AI auto-layering，Start layering](/images/auto-layering/step2_confirm_debit_payment_.webp)

帶名字的邊界會出現在圖上，這意味著分層切分的圖片都處理好了。關於這一步驟的詳細說明可以參考 [自動分層](/docs/sprite/auto-layering-image-to-layers/)。

![Auto Layering 結果：貓之旅 UI 上帶命名的邊界](/images/auto-layering/step3_ai_output_.webp)

## 步驟 2：匯出為 Photoshop PSD

保持已分層的畫板選中（這裡是 **cat_journey_UI_layer**，1536×864）。開啟 **Image Export**，選 **Export to Photoshop PSD**。

![Image Export 選單，高亮 Export to Photoshop PSD](/images/png-to-psd/step_3_export_to_Photoshop_PSD_.webp)

## 步驟 3：開啟 PSD

檔案會寫成 `{name}_layer.psd`，這份稿是 **cat_journey_UI_layer.psd**。Photoshop 裡能看到已命名的圖形層和文字層（技能格、貨幣圖示、HUD 文案），可以挪位置、隱藏或改樣式，不用再截一次屏。

![Photoshop 中的 cat_journey_UI_layer.psd，含已命名的圖形層和文字層](/images/png-to-psd/step_4_PSD_File_.webp)

要把這份檔案匯入到 Godot 中：[PSD 到 Godot](/docs/convert/psd-to-godot/)。