# 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>