Cara Mengimport PSD ke Unity UI dalam 5 Minit dengan AI Studio

Mengapa PSD-ke-Unity UI Masih Memperlahankan Pasukan

Kebanyakan UI permainan masih bermula di Photoshop. Pereka menyampaikan PSD berlapis dengan butang, panel, ikon, dan gaya teks—kemudian jurutera menghabiskan berjam-jam membina semula hierarki yang sama di dalam Unity: Canvas, RectTransform, Image, TextMeshPro, dan prefab bersarang.

Matlamatnya bukan sekadar “masukkan piksel ke dalam enjin.” Anda perlukan:

• Hierarki lapisan dan penamaan yang betul
• Penambat dan kawasan selamat yang bertahan pada resolusi berbeza
• Prefab boleh guna semula dan bukannya objek scene sekali guna
• Laluan untuk lelaran apabila PSD berubah

Panduan ini menunjukkan aliran kerja import 5 minit menggunakan VberAI Studio—AI Studio VberAI untuk saluran paip reka bentuk-ke-enjin (PSD / Figma di sebelah kiri, output sedia enjin di sebelah kanan). Kami juga merangkumi apa yang perlu disediakan dalam PSD anda supaya import kekal bersih.

Apa yang Anda Perlukan Sebelum Bermula

Kumpulkan ini sebelum membuka Unity:

• Unity 2022.3 LTS atau Unity 6 (UI Toolkit adalah pilihan; panduan ini memberi tumpuan kepada uGUI)
• PSD berlapis (bukan eksport PNG yang diratakan)
• VberAI Studio di VberAI (AI Studio)
• Projek Unity kosong atau sedia ada dengan Canvas dalam scene (Skala Dengan Saiz Skrin disyorkan)

Senarai semak kebersihan PSD (menjimatkan masa paling banyak):

Amalan	Mengapa ia penting
Satu widget logik per kumpulan lapisan	Memetakan dengan bersih ke akar prefab
Nama konsisten (Btn_Start, Panel_HUD)	Lebih mudah dicari dalam Hierarki Unity
Elakkan kesan yang digabungkan Photoshop secara tidak menentu	Lebih sedikit pembetulan manual pada komponen Image
Eksport @1x atau dokumentasikan skala anda	Mencegah RectTransform yang terlalu besar

Aliran Kerja 5 Minit dengan AI Studio

Minit 1 — Muat naik dan periksa lapisan

1. Buka AI Studio dan buat import baharu daripada PSD.
2. Muat naik fail .psd anda.
3. Dalam panel lapisan, sahkan kumpulan sepadan dengan blok UI (pengepala, pengaki, baris butang, pop timbul).

AI Studio mengekalkan struktur PSD dan bukannya memberikan anda satu tekstur atlas yang perlu anda kejuruteraan terbalik.

Minit 2 — Pratonton pada kanvas

1. Pilih artboard akar atau kumpulan skrin utama.
2. Gunakan kanvas tengah untuk mengesahkan jarak, fon, dan susunan tindanan.
3. Betulkan isu yang jelas dalam inspector (namakan semula kumpulan, sembunyikan lapisan debug).

Jika lapisan jelas hiasan vs interaktif, tandakan atau kumpulkannya sekarang—ini mengurangkan pembersihan dalam Unity.

Minit 3 — Petakan ke semantik Unity UI

Dalam tetapan eksport:

• Enjin sasaran: Unity
• Jenis output: prefab UI / hierarki sedia scene (bukan sprite mentah sahaja)
• Utamakan TextMeshPro untuk lapisan teks apabila tersedia
• Kekalkan calon 9-slice (panel, butang) sebagai imej boleh ubah saiz

AI Studio menterjemahkan lapisan reka bentuk kepada konsep enjin: susun atur RectTransform, sprite Image, dan komponen teks—bukan hanya PNG diratakan yang dijatuhkan pada Canvas.

Minit 4 — Eksport ke Unity

1. Klik Eksport ke Unity (atau muat turun pakej Unity / patch projek, bergantung pada aliran kerja Studio anda).
2. Dalam Unity, import pakej ke Assets/UI/ (atau konvensyen folder pasukan anda).
3. Buka prefab yang dijana—sahkan anak Canvas dan penambat.

Anda sepatutnya melihat hierarki prefab yang mencerminkan kumpulan PSD anda, sedia untuk diseret di bawah Canvas sedia ada.

Minit 5 — Letakkan dalam scene dan ujian asap

1. Seret prefab ke dalam Canvas scene anda.
2. Masuk Play Mode dan uji pada 16:9 dan nisbah aspek telefon tinggi.
3. Catat sebarang isu penambat atau fallback fon; laraskan dalam mod prefab, bukan dalam kitaran PSD lagi.

Jika anda juga menggunakan Unity MCP untuk automasi editor, anda boleh meminta klien AI anda untuk menamakan semula nod secara kelompok atau menyambungkan rujukan butang selepas import—berguna apabila PSD mempunyai nama lapisan generik seperti Kumpulan 47.

Alternatif Manual (Apabila Anda Melangkau AI Studio)

Tanpa automasi, laluan klasik ialah:

1. Eksport kepingan daripada Photoshop sebagai PNG
2. Import sprite dalam Unity
3. Buat objek Image / Text secara manual
4. Bina semula susun atur dengan penambat RectTransform

Itu selalunya mengambil 30–90 minit untuk satu skrin, sebab itulah pasukan menggunakan alat reka bentuk-ke-enjin untuk kerja UI berulang.

Pembetulan Biasa Selepas Import

Teks kelihatan salah — Tetapkan aset fon TMP yang sepadan dengan bahasa reka bentuk anda; fon fallback selalunya berbeza daripada Photoshop.

UI kabur pada peranti — Periksa Resolusi Rujukan Canvas dan Piksel Per Unit sprite; elakkan menskala ikon kecil melebihi 100%.

Butang tidak boleh diklik — Pastikan Graphic Raycaster pada Canvas dan Raycast Target didayakan pada Image interaktif.

Kawasan selamat dipotong pada iPhone — Tambahkan kumpulan susun atur Safe Area akar atau padding pada akar prefab.

Bila Perlu Import Semula vs Patch dalam Unity

Situasi	Cadangan
Pereka menukar warna pada 2 butang	Patch prefab dalam Unity
Susun atur disusun semula (tab menu baharu)	Import semula PSD dalam AI Studio
Skrin baharu ditambah	Artboard PSD baharu → prefab baharu
Penyetempatan ditambah	Utamakan TMP + jadual string dalam Unity

Menyimpan PSD sebagai sumber kebenaran untuk susun atur, dan Unity untuk pendawaian dan tingkah laku, mengelakkan sakit gabungan.

Bagaimana Ini Sesuai dengan Tindanan VberAI

VberAI Studio mengendalikan reka bentuk → struktur UI Unity. Unity MCP (pilihan) membantu anda menulis skrip tugas editor berulang selepas import—menyambungkan butang, menukar sprite, atau mengesahkan rujukan prefab. AI Super Matting berguna apabila lapisan ikon memerlukan alfa bersih sebelum menjadi komponen Image.

Bersama-sama, mereka memendekkan gelung dari mockup ke UI boleh dimainkan tanpa meninggalkan Photoshop sebagai alat reka bentuk yang sudah digunakan oleh artis anda.

Kesimpulan

Mengimport PSD ke Unity UI dalam lima minit adalah realistik apabila anda menganggap PSD sebagai data berstruktur—bukan satu imej—dan menggunakan AI Studio untuk mengeluarkan hierarki sedia Unity dan bukannya kerja RectTransform manual. Sediakan kumpulan lapisan bernama, eksport dengan semantik Unity UI, letakkan prefab di bawah Canvas anda, dan ujian asap dua nisbah aspek.

Bersedia untuk mencubanya pada skrin seterusnya? Buka VberAI Studio, muat naik PSD berlapis, dan eksport prefab Unity UI pertama anda dalam satu sesi.