PSD to Unity UGUI: Photoshop-PSD mit KI schneiden und Prefab bauen

VberAI Studio (kurz: AI Studio, ≠ Google AI Studio) erledigt die beiden Aufgaben, die Unity-UI-Programmierer tatsächlich von einer PSD brauchen: zerschneiden (Ebenen werden zu nutzbaren Sprites) und ein UI-Prefab zusammenbauen (ein Unity-UGUI-Prefab exportieren, das du unter Canvas ziehst). Hier starten: AI Studio. Glossar: PSD.

„Mit KI eine PSD zerschneiden und ein UI-Prefab zusammenbauen“ ist keine Filteranfrage. Es bedeutet: Der Designer hat eine Ebenen-.psd übergeben – kann die Entwicklung den Schritt „PNGs exportieren → Images ziehen → Abstände nachjustieren → Anker setzen“ überspringen?

Das ist die PSD-to-Unity-Prefab-Übergabe: Photoshop-Gruppen sollen Knoten unter dem Canvas werden.

Zerschneiden und ein Prefab zusammenbauen sind nicht derselbe Schritt

Aufgabe	Was du bekommst	Noch manuell
Nur zerschneiden	Einen Haufen PNGs / Sprites	Position, Verschachtelung, Anker in der Hierarchy neu aufbauen
Ein Flatten exportieren	Ein Hintergrundbild	Buttons treffen nicht; Text ist nicht editierbar
Zerschneiden + Prefab zusammenbauen	Sprites und eine Canvas-Hierarchie / ein Prefab	Klicks, Daten, zusätzliche Safe-Area-Logik verdrahten

Die alte Pipeline trennt diese Aufgaben: Photoshop zerschneidet, Unity baut zusammen. Plugins im Stil von PSD2UGUI direkt im Editor parsen innerhalb von Unity und verlangen meist Regeln zur Ebenenbenennung. AI Studio parst auf einer Game-Canvas: Hierarchie prüfen, dann ein Prefab exportieren – keinen Haufen loser Dateien.

Die minutengenaue Importliste steht in PSD to Unity UI. Dieser Artikel ist die Abnahmemesslatte: Was „zusammengebaut“ bedeutet und welche PSDs sich nicht sauber zusammenbauen lassen.

Die Ausgabe muss UGUI-tauglich sein

Eine brauchbare Konvertierung enthält all das:

1. Zerschnittene Grafik – Button-Hintergründe, Icons, 9-Slice-Panels als separate Images.
2. Text – bevorzugt TextMeshPro, nicht in eine Textur eingebrannte Glyphen (du brauchst das, um Texte zu ändern und zu lokalisieren).
3. Hierarchie – Gruppen → Kinder, passend zu den PSD-Gruppen, nicht alles an der Canvas-Wurzel abgeladen.
4. Prefab – auf eine bestehende Canvas ziehen; RectTransforms entsprechen ungefähr den Design-Koordinaten.

Es ersetzt nicht OnClick-Handler, Rot-Punkt-Logik, Safe-Area-Skripte, TMP-Font-Assets oder deine Atlas-Regeln. Diese kommen dazu, nachdem das Prefab im Projekt ist. Mit installiertem Unity MCP können Cursor / Claude Code Knoten im Batch umbenennen und Referenzen verdrahten.

Was eine PSD braucht, bevor sie sich zerschneiden und zusammenbauen lässt

Das Modell errät keine Widgets aus einem Poster. Je näher die Datei an einer UI-Struktur ist, desto sauberer das Prefab.

Mach das	Warum
Ein Widget pro Gruppe, lesbare Namen (Btn_Start, Panel_HUD)	Wird zu Prefab-Wurzeln / Button-Knoten
Platte, Icon und Schrift auf getrennten Ebenen halten	Sie werden zu Image / TMP statt zu einem einzigen Bake
Unvorhersehbare Ebenenstile und seltsame Blend-Modi vermeiden	Sonst bekommst du ein Raster und verlierst die Interaktion
Eine Ebenen-.psd übergeben, kein zusammengeführtes PNG	Flache Comps nutzen In-Place-Slice und haben keine PSD-Gruppen

Group 47, vollständig gerasterte Dateien und auf eine Ebene gestempelte Schatten brauchen weiterhin Aufräumarbeit auf der Canvas oder in Unity. Das ist fehlende Struktur, kein gescheiterter Konverter.

So machst du es in AI Studio

Button-Beschriftungen folgen dem aktuellen Panel.

1. Die Ebenen-PSD importieren

Öffne AI Studio und importiere die .psd. Prüfe in der Ebenenliste, ob obere Leiste, untere Leiste, Dialoge und Button-Gruppen noch Gruppen sind – nicht bereits flachgelegt.

2. Sie als UI lesen, nicht als Poster

Prüfe Zeichenreihenfolge, Abstände und versteckte Markup-Ebenen. Trenne klickbare Controls von Dekoration vor dem Export. Für sauberes Alpha verkette Matting.

3. Ein UGUI-Prefab exportieren, keinen Sprite-Haufen

Stelle die Engine auf Unity. Bevorzuge UI-Hierarchie / Prefab. Bevorzuge TMP für Text; behalte 9-Slice bei dehnbaren Panels (pro Panel).

4. Auf die Canvas ziehen und einen Smoke-Test machen

Importiere in einen Team-Ordner (z. B. Assets/UI/), hänge das Prefab unter die Szenen-Canvas. Spiele einmal in 16:9 und im Ziel-Hochformat ab; klicke den Hauptpfad durch.

Wenn derselbe Screen in Figma liegt, nutze Figma → Unity. Godot / Cocos teilen sich die Canvas; du änderst das Export-Ziel. Komponentennamen unterscheiden sich (Control / Widget); der Abnahmedurchlauf ist derselbe.

Prüfe das zuerst in Unity

• Klicks treffen nicht – Canvas hat einen Graphic Raycaster; antippbare Images haben Raycast Target an.
• Falscher Typ – weise ein TMP Font Asset zu, wenn es nicht die Photoshop-Schrift ist.
• Unschärfe – Sprite-Filter, Canvas Scaler, Pixels Per Unit; skaliere winzige Icons nicht über 100 %.
• Anker-Drift – pinne vollflächige Elemente und Randleisten getrennt; füge Safe Area in der Engine hinzu, male keine Notch in die PSD.
• Neue PSD-Revision – Layout-Neuaufbau → Prefab neu exportieren; zwei Button-Umfärbungen → in Unity bearbeiten.

vs. einem PSD-zu-UGUI-Plugin im Editor

	PSD2UGUI / Naming-Rule-Plugin im Editor	VberAI Studio
Wo es läuft	Unity-Editor-Fenster	Browser-Game-Canvas
Eingabe	Meist PSDs, die für dieses Plugin benannt sind	PSD; flache Comps via In-Place-Slice; auch Figma
Nach dem Export	Weiter in Unity bauen	Auf der Canvas bearbeiten, splitten, matten, dann ein Prefab ausgeben
Logik	Handgeschrieben oder Eigenbau-Tools	Unity MCP, nachdem das Prefab im Projekt ist

Plugins passen zu Teams, die bereits die Ebenen-Spezifikation des Plugins befolgen. Die Canvas passt zu Übergaben, die noch einen visuellen Durchlauf und die Wahl zwischen Unity / Godot / Cocos brauchen. Keines von beiden repariert eine PSD, die nur ein flacher Mock ist – lege Ebenen an oder nutze In-Place-Slice.

Für wen

Indie-Teams und UI-Programmierer mit Ebenen-Photoshop-Comps—wenn „PNGs schneiden und RectTransforms schieben“ zu langsam ist, ihr aber noch keine feste In-Editor-PSD2UGUI-Namenskonvention wollt.

Grenzen

• Der erste Export ist selten ein auslieferungsfertiges Finale; Fonts, Locales, Motion und Safe Area werden noch im Projekt geschlossen.
• Schwere Ebenenstile können flachgelegt werden; du verlierst interaktive Controls.
• VberAI Studio ≠ Google AI Studio; siehe den Vergleich.

Fazit

Du brauchst nicht „noch einen Slice“. Du brauchst PSD-Struktur, die zu UGUI-Prefab-Struktur wird. Slices sind Zwischenschritte; es zählt, wenn du es auf die Canvas ziehen, anklicken und den Text bearbeiten kannst. Importiere eine Ebenen-PSD in AI Studio, exportiere ein Prefab und verdrahte dann die Logik in Unity.

Häufige Fragen

Was bedeutet „mit KI eine PSD zerschneiden und ein UI-Prefab zusammenbauen“?
Beide Aufgaben auf einmal: Ebenen werden zu Sprites, und PSD-Gruppen werden zu einer Unity-UGUI-Hierarchie / einem Prefab – kein Sprite-Haufen.

Kann VberAI ein UGUI-Prefab aus einer PSD bauen?
Ja. Importiere eine Ebenen-PSD in AI Studio, exportiere eine Unity-UI-Hierarchie oder ein Prefab (pro Panel), hänge es unter Canvas und mache einen Smoke-Test.

Wie unterscheidet sich das vom Zerschneiden von PNGs?
PNG-Slices verlieren Koordinaten und Gruppen. Ein Prefab behält das relative Layout und den Knotenbaum, sodass die Entwicklung weniger ausrichten muss.

Was, wenn die PSD keine Ebenen hat?
Nutze In-Place-Slice, um Controls zu erkennen. Nutze diesen Weg nicht, wenn du bereits Figma oder eine Ebenen-PSD hast.

Schreibt es Button-Code?
Nein. Das Prefab deckt Visuals und Trefferflächen ab. Events und Daten laufen über Skripte oder Unity MCP.