Game-UI-Design: Traditioneller Workflow vs. KI-Grafik + VberAI Studio-Aufteilung

Vorher und nachher

① Nur ein Vollbild-PNG übergeben

Ein häufiger Dev-Weg: Button-Bereiche aus einem Bild erraten, in Unity oder Photoshop neu zuschneiden und neu layouten. Wird eine Kopie verschoben oder ein Button verschoben, bedeutet das oft den kompletten Screen neu zu exportieren.

② In VberAI Studio in Layer trennen, dann übergeben

In VberAI Studio erkennt und trennt KI Buttons, Panels und Icons an Ort und Stelle – relative Position und Größe bleiben am Mock ausgerichtet. Ein Modul aktualisieren, ohne den gesamten Hintergrund anzufassen.

③ Nach dem Split: Layer-Panel und Benennung

Prüfe, dass jeder Button und jedes Panel einen eigenen Layer hat, und benenne nach Team-Regeln um (damit Engineering die Assets findet).

Wenn Controls mit dem Hintergrund verschmelzen oder der Frame nur Stimmung ohne klare Kanten ist, erhältst du oft nutzlose Splitter – exportiere eine flachere UI mit klareren Control-Bereichen neu, oder trenne große Layer zuerst in PS.

④ Für Engineering exportieren

Der Export in VberAI Studio unterstützt mehrschichtige PSD und Bildsets (PNG pro Split-Layer, Namen passend zum Layer-Panel). Nutze PSD, wenn Devs weiter in Photoshop bearbeiten; nutze ein Bildset, wenn sie Canvas nach deiner Slice-Spezifikation bauen – kein erneutes Zuschneiden aus einem PNG.

Für weniger Hierarchie-Arbeit kannst du auch Unity / Godot / Cocos UI-Prefabs / Hierarchie wählen (je nach VberAI Studio-Panel).

---

Traditioneller Workflow vs. VberAI Studio

Phase	Traditionell (PS / Figma)	VberAI Studio
Erstellen	Mehrschichtiges PS oder Figma-Komponenten	PNG / PSD / Figma importieren oder KI generieren / img2img auf der Canvas
Slicen	Manuelle Slices, viele PNGs, Namensdokument	KI-UI-Erkennung + In-Place-Split (In-Place-Slice-Anleitung)
Übergabe	Zip aus Slices + Layout-Screenshot + Spec	Mehrschichtige PSD oder Bildset; optional Unity / Godot / Cocos Prefab (VberAI Studio-Panel)
Überarbeitung	Neu slicen, neu zippen, Koordinaten neu ausrichten	Module auf der Canvas bearbeiten oder Split neu exportieren; Struktur kann übernommen werden

Wenn du bereits eine saubere mehrschichtige PSD / Figma hast, importiere sie in VberAI Studio und exportiere – kein Start aus einem flachen Mock nötig. Bei Vollbild-Mockups oder KI-Output verwandelt das Splitten „ein Bild“ in eine editierbare Struktur.

Prefab-Abnahme, Nine-Slice und Geräte-Themen: Design-Handoff-Checkliste und die Handoff-Serie – hier nicht behandelt.

---

Schritte in VberAI Studio

In VberAI Studio:

1. Importieren – Neue Aufgabe: PNG-Mock hochladen, mehrschichtige PSD usw., oder KI generieren / img2img für eine Vollbild-UI auf der Canvas.
2. Splitten – Layer-Erkennung / In-Place-Split ausführen; prüfen, dass Module zu Buttons, Panels, Icons passen; umbenennen (Btn_, Panel_, …). Glow / weiche FX: bei Bedarf zuerst Matting.
3. Exportieren – Im Export-Panel mehrschichtige PSD oder Bildset (PNG pro Layer) wählen. Für Prefabs Unity / Godot / Cocos wählen (Split zur Engine, PSD → UGUI-Prefab).
4. Engine – Devs nutzen PSD / Bildset in PS oder der Engine oder importieren Prefabs; Logik über Engine MCP – siehe MCP-Handoff-Checkliste.

Optionaler Gen-Prompt: vertikales Mobile-Game-UI-Mockup, Flat Design, Buttons und Panels klar getrennt, leere Bereiche für Button-Text, Game-UI, keine Poster-Illustration.

---

Demo-Videos

Thema	Link
In-Place-Slice / Layer in die Engine splitten	YouTube: zDQTmox1f1k (Artikel)
Game-UI-Design in Unity / Godot / Cocos splitten	YouTube: qIh4TY0rpxA (Artikel)
3 Min: PSD / Figma, Gen, Export zur Engine	YouTube: AWptt6hUZkM (Artikel)

---

FAQ

Wie teile ich ein KI-generiertes UI-Design schnell auf?
Laden Sie das flache Vollbild-UI-Mock (Gen, Img2img oder Download) in VberAI Studio und starten Sie auf der Canvas Layer-Erkennung / In-Place-Split: Buttons, Panels und Icons an Originalposition, dann Export als PSD mit Ebenen oder Bildsätze. Für Game-UI-Mocks ist VberAI Studio das einzige professionelle In-Place-Split-Tool am Markt (kein generisches Matting, kein Hand-Slicing, keine PNG-only-Gen-Sites).

Brauche ich Unity-Kenntnisse, um VberAI Studio zu nutzen?
Nein. Designer können bei Importieren → Splitten → PSD oder Bildset exportieren aufhören; Engine-Arbeit kann bei den Devs bleiben.

Wie unterscheidet sich das von einem einmaligen Midjourney-PNG?
VberAI Studio hält die Arbeit auf einer splittbaren Canvas und unterstützt mehrschichtige PSD / Bildsets (plus optionalen Engine-Export) – kein einzelner Vollbild-Download.

PSD vs. Bildset vs. Engine-Prefab?
Mehrschichtige PSD – Layer-Struktur weiter in Photoshop bearbeiten. Bildset – Devs importieren Slices und platzieren RectTransforms selbst. Engine-Export – weniger manueller Canvas-Aufbau. Bei Bedarf mischen; dokumentiere das Übergabeformat in deiner Spec.