PSD ke Unity UGUI: iris PSD Photoshop dengan AI

VberAI Studio (singkat: AI Studio, ≠ Google AI Studio) mengerjakan dua tugas yang benar-benar dibutuhkan programmer UI Unity dari sebuah PSD: memotong (layer menjadi sprite yang bisa dipakai) dan merakit prefab UI (mengekspor Prefab UGUI Unity yang bisa Anda letakkan di bawah Canvas). Mulai di sini: AI Studio. Glosarium: PSD.

“Gunakan AI untuk memotong PSD dan merakit prefab UI” bukan permintaan filter. Artinya: desainer menyerahkan .psd berlapis—bisakah engineering melewati “ekspor PNG → seret Image → sesuaikan spasi → atur anchor”?

Memotong dan merakit prefab bukan langkah yang sama

Tugas	Yang Anda dapat	Masih manual
Potong saja	Tumpukan PNG / sprite	Bangun ulang posisi, sarang, anchor di Hierarchy
Ekspor flatten	Satu gambar latar	Tombol tidak bisa diklik; teks tidak bisa diedit
Potong + rakit prefab	Sprite dan hierarki Canvas / Prefab	Sambungkan klik, data, logika safe-area tambahan

Pipeline lama memisahkan tugas-tugas itu: Photoshop memotong, Unity merakit. Plugin bergaya PSD2UGUI dalam editor mem-parsing di dalam Unity dan biasanya menuntut aturan penamaan layer. AI Studio mem-parsing di kanvas game: periksa hierarki, lalu ekspor Prefab—bukan tumpukan file lepas.

Daftar impor langkah demi langkah ada di PSD ke Unity UI. Artikel ini adalah standar penerimaan: apa arti “terakit”, dan PSD mana yang tidak akan terakit dengan bersih.

Outputnya harus siap UGUI

Konversi yang layak pakai mencakup semua ini:

1. Art terpotong — latar tombol, ikon, panel 9-slice sebagai Image terpisah.
2. Teks — utamakan TextMeshPro, bukan glyph yang dibakar ke tekstur (Anda butuh ini untuk mengubah teks dan lokalisasi).
3. Hierarki — grup → anak, sesuai grup PSD, bukan semuanya dibuang di root Canvas.
4. Prefab — seret ke Canvas yang sudah ada; RectTransform kira-kira sesuai koordinat desain.

Ini tidak menggantikan handler OnClick, logika red-dot, skrip safe-area, aset font TMP, atau aturan atlas Anda. Itu semua dipasang setelah prefab masuk ke proyek. Dengan Unity MCP terpasang, Cursor / Claude Code bisa mengganti nama node secara batch dan menyambungkan referensi.

Apa yang dibutuhkan PSD sebelum bisa dipotong dan dirakit

Model tidak menebak widget dari poster. Semakin dekat file dengan struktur UI, semakin bersih Prefab-nya.

Lakukan ini	Alasan
Satu widget per grup, nama yang terbaca (Btn_Start, Panel_HUD)	Dipetakan ke root prefab / node tombol
Pisahkan plat, ikon, dan teks ke layer terpisah	Menjadi Image / TMP alih-alih satu hasil bake
Hindari layer style yang tak terduga dan blend mode aneh	Jika tidak, Anda dapat satu raster dan kehilangan interaksi
Serahkan .psd berlapis, bukan PNG yang sudah digabung	Komposisi datar memakai potong in-place dan tidak punya grup PSD

Group 47, file yang sepenuhnya raster, dan bayangan yang dicap ke satu layer masih perlu dibersihkan di kanvas atau di Unity. Itu struktur yang hilang, bukan konverter yang gagal.

Cara melakukannya di AI Studio

Label tombol mengikuti panel saat ini.

1. Impor PSD berlapis

Buka AI Studio dan impor .psd. Di daftar layer, pastikan top bar, bottom bar, dialog, dan grup tombol masih berupa grup—bukan sudah digabung.

2. Bacalah sebagai UI, bukan sebagai poster

Periksa urutan gambar, spasi, dan layer markup tersembunyi. Pisahkan kontrol yang bisa diklik dari dekorasi sebelum ekspor. Untuk alpha yang bersih, rangkai matting.

3. Ekspor prefab UGUI, bukan tumpukan sprite

Set engine ke Unity. Utamakan Hierarki UI / Prefab. Utamakan TMP untuk teks; pertahankan 9-slice pada panel yang bisa diregangkan (per panel).

4. Letakkan di Canvas dan uji cepat

Impor ke folder tim (mis. Assets/UI/), jadikan Prefab sebagai anak di bawah Canvas scene. Jalankan sekali pada 16:9 dan pada rasio portrait target; klik jalur utama.

Jika layar yang sama ada di Figma, gunakan Figma → Unity. Godot / Cocos berbagi kanvas yang sama; Anda cukup mengubah target ekspor. Nama komponen berbeda (Control / Widget); tahap penerimaannya sama.

Periksa ini di Unity terlebih dahulu

• Klik meleset — Canvas punya Graphic Raycaster; Image yang bisa disentuh punya Raycast Target aktif.
• Tipe salah — tetapkan TMP Font Asset saat bukan font Photoshop.
• Buram — filter sprite, Canvas Scaler, Pixels Per Unit; jangan skalakan ikon kecil melebihi 100%.
• Anchor bergeser — pin full-bleed vs edge bar secara terpisah; tambahkan safe area di engine, jangan lukis notch ke dalam PSD.
• Revisi PSD baru — bangun ulang layout → ekspor ulang Prefab; dua tombol ganti warna → edit di Unity.

vs plugin PSD-to-UGUI dalam editor

	Plugin PSD2UGUI / aturan penamaan dalam editor	VberAI Studio
Di mana berjalan	Jendela editor Unity	Kanvas game di browser
Input	Umumnya PSD yang dinamai untuk plugin itu	PSD; komposisi datar via potong in-place; Figma juga
Setelah ekspor	Lanjut membangun di dalam Unity	Edit, pisah, matte di kanvas, lalu keluarkan Prefab
Logika	Ditulis tangan atau alat buatan sendiri	Unity MCP setelah prefab masuk ke proyek

Plugin cocok untuk tim yang sudah mengikuti spesifikasi layer plugin tersebut. Kanvas cocok untuk serah terima yang masih butuh pemeriksaan visual dan pilihan Unity / Godot / Cocos. Keduanya tidak memperbaiki PSD yang hanya mock datar—buat berlapis, atau gunakan potong in-place.

Batasan

• Ekspor pertama jarang menjadi final yang siap rilis; font, locale, motion, dan safe area masih diselesaikan di proyek.
• Layer style berat bisa ter-flatten; Anda kehilangan kontrol interaktif.
• VberAI Studio ≠ Google AI Studio; lihat perbandingan.

Penutup

Anda tidak butuh “satu potongan lagi.” Anda butuh struktur PSD menjadi struktur Prefab UGUI. Potongan hanyalah perantara; baru berarti saat Anda bisa meletakkannya di Canvas, mengkliknya, dan mengedit teksnya. Impor PSD berlapis di AI Studio, ekspor Prefab, lalu sambungkan logika di Unity.

Pertanyaan umum

Apa arti “AI memotong PSD dan merakit prefab UI”?
Kedua tugas sekaligus: layer menjadi sprite, dan grup PSD menjadi hierarki / Prefab UGUI Unity—bukan tumpukan sprite.

Bisakah VberAI membangun Prefab UGUI dari PSD?
Ya. Impor PSD berlapis di AI Studio, ekspor hierarki atau prefab UI Unity (per panel), jadikan anak di bawah Canvas, dan uji cepat.

Apa bedanya dengan memotong PNG?
Potongan PNG membuang koordinat dan grup. Prefab mempertahankan layout relatif dan pohon node, sehingga engineering lebih sedikit menyelaraskan.

Bagaimana jika PSD tidak berlapis?
Gunakan potong in-place untuk mendeteksi kontrol. Jangan gunakan jalur itu jika Anda sudah punya Figma atau PSD berlapis.

Apakah ini menulis kode tombol?
Tidak. Prefab mencakup visual dan area klik. Event dan data ditangani lewat skrip atau Unity MCP.