# PSD 到 Godot

把分層的 PSD 或 PSB 匯入 VberAI Studio，再匯出成 Godot 場景。

## 先說結論：3個步驟

**PSD 到 Godot** 的主要邏輯是：針對已經分層的 Photoshop 檔案（PSD 或 PSB），要批次化處理好美術素材後，匯入到 Godot 中作為場景使用。[VberAI Studio](https://vberai.com/studio) 匯入這份設計稿，再匯出到 **Godot**。匯出得到 `.tscn`；預設路徑按 Godot 的 `Assets` 目錄來寫。

已經是 `.fig` 檔案：[Figma 到 Godot](/docs/convert/figma-to-godot/)。還是一張扁平 PNG、需要先分層：[PNG 到 PSD](/docs/convert/png-to-psd/)。

## 步驟 1：開啟分層 PSD

編組要有名字（畫框、按鈕、HUD 條）。這些名字會帶到 VberAI Studio，並進到 Godot 的節點樹裡。

![Main Screen UI 的分層 PSD](/images/psd-to-godot/psd_to_godot_step1_psd_file_.webp)

## 步驟 2：在 VberAI Studio 裡匯入 PSD/PSB

在 VberAI Studio 選 **Import → PSD/PSB（匯入 PSD/PSB）**。

![VberAI Studio 匯入入口，選 PSD/PSB](/images/psd-to-godot/psd_to_godot_step2_import_psd_.webp)

## 步驟 3：匯出到 Godot

選中這一屏（例如 **Main Screen**）。開啟 **Export**，選 **Export to Godot**。

![已選中 Main Screen，高亮 Export to Godot](/images/psd-to-godot/psd_to_godot_step3_export_into_godot_.webp)

對話方塊裡把格式設成 Scene（`.tscn`）。**Default paths** 會去專案裡找 `Assets` 資料夾，並按這套目錄寫檔案。

![Godot 匯出對話方塊：Scene .tscn 與預設資源路徑](/images/psd-to-godot/psd_to_godot_step4_export_config_.webp)

## 演示影片

PSD/PSB 匯入，再匯出到 Godot：

<figure class="video-embed">
  <div class="video-embed-frame">
    <iframe
      src="https://www.youtube-nocookie.com/embed/JmzOU7wZubA"
      title="經 PSD/PSB 匯入，從 PSD 到 Godot"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
    ></iframe>
  </div>
</figure>