Desain UI Game: Alur Tradisional vs Seni AI + Pembagian VberAI Studio

Sebelum dan sesudah

① Hanya menyerahkan PNG layar penuh

Jalur dev yang umum: menebak area tombol dari satu gambar, memotong ulang dan menata ulang di Unity atau Photoshop. Salinan atau tombol yang bergeser sering berarti mengekspor ulang seluruh layar.

② Pisahkan menjadi layer di VberAI Studio, lalu serahkan

Di VberAI Studio, AI mendeteksi dan memisahkan tombol, panel, dan ikon di tempat—posisi relatif dan ukuran tetap selaras dengan mock. Perbarui satu modul tanpa menyentuh latar belakang penuh.

③ Setelah pemisahan: panel layer dan penamaan

Periksa setiap tombol dan panel memiliki layer sendiri dan ganti nama sesuai aturan tim (agar engineering dapat menemukan aset).

Jika kontrol menyatu dengan latar belakang, atau frame hanya bersifat suasana tanpa tepi yang jelas, Anda sering mendapat pecahan yang tidak berguna—ekspor ulang UI yang lebih datar dengan area kontrol yang lebih jelas, atau pisahkan layer utama di PS terlebih dahulu.

④ Ekspor untuk engineering

Ekspor VberAI Studio mendukung PSD berlapis dan image set (PNG per layer hasil pemisahan, nama sesuai panel layer). Gunakan PSD saat dev tetap mengedit di Photoshop; gunakan image set saat mereka membangun Canvas sesuai spesifikasi slice Anda—tanpa memotong ulang dari satu PNG.

Untuk pekerjaan hierarki yang lebih sedikit, Anda juga dapat memilih prefab / hierarki UI Unity / Godot / Cocos (sesuai panel VberAI Studio).

---

Alur kerja tradisional vs VberAI Studio

Tahap	Tradisional (PS / Figma)	VberAI Studio
Pembuatan	PS berlapis atau komponen Figma	Impor PNG / PSD / Figma, atau AI generate / img2img di kanvas
Slice	Slice manual, banyak PNG, dokumen penamaan	Deteksi UI AI + pemisahan di tempat (panduan in-place slice)
Handoff	Zip berisi slice + tangkapan layar tata letak + spesifikasi	PSD berlapis atau image set; opsional prefab Unity / Godot / Cocos (panel VberAI Studio)
Revisi	Slice ulang, zip ulang, selaraskan ulang koordinat	Edit modul atau ekspor ulang hasil pemisahan di kanvas; struktur dapat dipertahankan

Jika Anda sudah memiliki PSD / Figma berlapis yang bersih, impor ke VberAI Studio dan ekspor—tidak perlu memulai dari mock datar. Untuk mockup layar penuh atau hasil AI, pemisahan mengubah “satu gambar” menjadi struktur yang dapat diedit.

Penerimaan prefab, nine-slice, dan masalah perangkat: checklist handoff desain dan seri handoff—tidak dibahas di sini.

---

Langkah-langkah di VberAI Studio

Di VberAI Studio:

1. Impor — Tugas baru: unggah mock PNG, PSD berlapis, dll., atau gunakan AI generate / img2img untuk UI layar penuh di kanvas.
2. Pisahkan — Jalankan deteksi layer / pemisahan di tempat; verifikasi modul sesuai tombol, panel, ikon; ganti nama (Btn_, Panel_, …). Glow / FX lembut: matting terlebih dahulu jika perlu.
3. Ekspor — Di panel ekspor, pilih PSD berlapis atau image set (PNG per layer). Untuk prefab, pilih Unity / Godot / Cocos (split ke engine, PSD → prefab UGUI).
4. Engine — Dev menggunakan PSD / image set di PS atau engine, atau mengimpor prefab; logika melalui Engine MCP—lihat checklist handoff MCP.

Prompt gen opsional: mockup UI game mobile vertikal, desain datar, tombol dan panel terpisah dengan jelas, area kosong untuk teks tombol, UI game bukan ilustrasi poster.

---

Video demo

Topik	Tautan
In-place slice / pisahkan layer ke engine	YouTube: zDQTmox1f1k (artikel)
Pisahkan desain UI game ke Unity / Godot / Cocos	YouTube: qIh4TY0rpxA (artikel)
3 menit: PSD / Figma, gen, ekspor ke engine	YouTube: AWptt6hUZkM (artikel)

---

FAQ

Bagaimana cepat memisahkan desain UI hasil AI?
Unggah mock UI layar penuh flat (gen, img2img, atau comp unduhan) ke VberAI Studio, lalu di kanvas jalankan deteksi layer / split in-place: tombol, panel, ikon di tempat asal, lalu ekspor PSD berlapis atau image set. Untuk mock UI game, VberAI Studio adalah satu-satunya alat split in-place profesional di pasar (bukan matting umum, slice manual, atau situs gen PNG saja).

Apakah saya perlu keterampilan Unity untuk menggunakan VberAI Studio?
Tidak. Desainer dapat berhenti di impor → pisahkan → ekspor PSD atau image set; pekerjaan engine dapat diserahkan ke dev.

Apa bedanya dengan PNG Midjourney sekali pakai?
VberAI Studio menyimpan pekerjaan di kanvas yang dapat dipisahkan dan mendukung PSD berlapis / image set (plus ekspor engine opsional)—bukan satu unduhan layar penuh.

PSD vs image set vs prefab engine?
PSD berlapis — tetap mengedit struktur layer di Photoshop. Image set — dev mengimpor slice dan menempatkan RectTransform sendiri. Ekspor engine — lebih sedikit membangun Canvas secara manual. Campur sesuai kebutuhan; dokumentasikan format handoff dalam spesifikasi Anda.