# PNG から PSD へ

1枚の PNG のゲーム UI を、レイヤー付き Photoshop ファイルにします。自動レイヤー分割のあと、Photoshop PSD に書き出します。

## 要約: 3ステップ

**PNG から PSD へ** は、ゲーム UI が 1枚に潰れた PNG しかない場合に向いています。HUD、画面キャプチャ、一度もレイヤーになっていないボードを、もう一度 Photoshop で扱いたいときです。[自動レイヤー分割](/docs/sprite/auto-layering-image-to-layers/) を実行し、検出したエッジから名前の付いたパーツを切り出してから、**Export to Photoshop PSD（Photoshop PSD に書き出す）** を選びます。`.psd` では、それらのパーツがグラフィックレイヤーとテキストレイヤーに分かれています。起点が 1枚の PNG である画面が複数ある場合も、同じ手順で進められます。

## ステップ 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?（AI 自動レイヤー分割を実行しますか？）** を確認し、**Start layering（レイヤー分割を開始）** を押します。

![確認ダイアログ：Run AI auto-layering、Start layering](/images/auto-layering/step2_confirm_debit_payment_.webp)

名前の付いた範囲が画面に載ります。切り出した、名前の付いた画像の準備ができます。詳しい手順は [自動レイヤー分割：画像を複数レイヤーに](/docs/sprite/auto-layering-image-to-layers/) にあります。

![Cat Journey の UI に、名前の付いた範囲が載った自動レイヤー分割の結果](/images/auto-layering/step3_ai_output_.webp)

## ステップ 2: Photoshop PSD に書き出す

レイヤー分割後のボードを選んだままにします（ここでは **cat_journey_UI_layer**、1536×864）。**Image Export（画像の書き出し）** を開き、**Export to Photoshop PSD（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/)。