# 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: PSD/PSB を読み込む

VberAI Studio で **Import（読み込み）→ PSD/PSB** を選びます。

![VberAI Studio の Import と PSD/PSB](/images/psd-to-godot/psd_to_godot_step2_import_psd_.webp)

## ステップ 3: Godot に書き出す

画面を選びます（例：**Main Screen**）。**Export（書き出し）** を開き、**Export to Godot（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>
