Game UI in bearbeitbare Ebenen trennen
Verwandeln Sie Game-Screenshots in separate UI-Panels, HUD-Elemente, Icons und Interface-Assets. Verfeinern Sie einzelne Komponenten mit KI-gestützter Ebenentrennung.
Game-UI-Screenshot hochladen
Verwenden Sie einen sauberen Screenshot oder ein UI-Mockup. Der erste Durchlauf trennt die Haupt-Interface-Komponenten von der Szene.
1
Bild zum Hochladen klicken oder ziehen
Upload your image
JPG, PNG, WebP up to 10MB · Drag & drop anywhere
Bild ändern
Layer Hotspots17 Layers
Hover or click box to inspect layer
Separated Layer Cutouts17 Layers
Protected Assets
2
Einstellungen
Für Game-Interfaces entwickelt
Der erste Durchlauf trennt nach funktionalen Komponenten: Balken, Panels, Menüschaltflächen, Minimap, Charakter und Szene. Ein dichter Streifen wie eine Skill-Leiste kann dann, nur wenn Sie es wünschen, weiter aufgeteilt werden.
HUD & StatusleistenMinimap & MenüsSkill-Leisten & HotbarsChat- & Dialog-Panels
Kosten pro Durchlauf60 Credits
Bild hochladen, um fortzufahren
Private Dateiverwaltung
Hochgeladene Dateien sind mit Ihrem Konto verknüpft und werden über signierte URLs bereitgestellt. Abgeschlossene Aufträge können Sie manuell löschen.
Transparente PNG-Ausgabe
Detaillierte Ebenen gibt jedes erkannte Element als eigene Ebene auf transparentem Hintergrund zurück.
Für bessere Ergebnisse verwenden Sie:
- Einen vollständigen, unbeschnittenen Screenshot
- Hohe Auflösung, keine starke Komprimierung
- Wenig Überlappung zwischen UI und Effekten
- Ein statisches Bild, keine Bewegungsunschärfe
- HUD, Balken und Panels als separate Ebenen
- Charakter und Szene getrennt
- Ein ausgewähltes Panel in seine Schaltflächen aufteilen
- Im Ebenen-Editor verschieben, ausblenden und exportieren
Echte Ergebnisse
Von einem Screenshot zu separaten UI-Komponenten
Zwei echte Durchläufe mit demselben Game-Screenshot. Der erste trennt das Interface von der Szene. Der zweite nimmt eine dieser Ebenen, die Skill-Leiste, und trennt sie weiter auf.
Schritt 1: den Screenshot trennen
Der Charakter und der Szenenhintergrund werden vom Interface getrennt, und jeder Balken, jedes Panel, jede Menüschaltfläche und jedes Icon ist eine eigene Ebene.
Schritt 2 (optional): eine Ebene weiter aufteilen
Die Skill-Leiste war nach Schritt 1 eine Ebene. Allein ausgeführt, zerfiel sie in zehn Schaltflächen, zwei Statuen und die Leistenbasis.
Was Sie erwarten können
Jede Ebene wird vom Modell neu gezeichnet, sodass das Zusammensetzen der Teile etwas Ähnliches wie Ihr Screenshot ergibt, aber keine exakte Kopie. Größen und Positionen können leicht abweichen, am deutlichsten bei dichten Streifen wie der Skill-Leiste, und eine Ebene kann etwas größer sein als das Originalstück. Überprüfen Sie kleine Texte, Zahlen und dünne Icons, bevor Sie eine Ebene verwenden.
So funktioniert's
Zwei Schritte, den zweiten bestimmen Sie
1
Screenshot hochladen
Der erste Durchlauf trennt die Haupt-Interface-Komponenten und den Charakter von der Szene.
2
Ebenen überprüfen
Wählen Sie Ebenen im Editor aus, verschieben oder blenden Sie sie aus und vergleichen Sie sie mit Ihrem Screenshot.
3
Eine Ebene für die weitere Aufteilung auswählen
Wählen Sie eine Ebene, z. B. eine Skill-Leiste. Die Kosten in Credits werden angezeigt, bevor etwas beginnt.
4
Die Teile verwenden
Die Teile ersetzen diese Ebene im Editor. Stellen Sie die ursprüngliche Ebene jederzeit wieder her oder machen Sie Änderungen rückgängig, dann exportieren Sie.
Für Game-Entwickler
Interface-Teile aus einem flachen Screenshot extrahieren
Ein Screenshot oder Konzeptbild enthält das gesamte Interface in einem Bild. Durch die Trennung erhalten Sie die Balken, Panels und Icons als transparente Ebenen, die Sie in Ihrer eigenen UI-Pipeline neu positionieren, umgestalten oder neu aufbauen können.
Das Tool trennt Grafiken. Es baut das Interface nicht als Engine-Objekte neu auf.
- Layouts aus einem Referenzbild prototypisieren
- HUD-Teile für ein Redesign extrahieren
- Ein UI-Mockup aus einem bestehenden Screenshot neu aufbauen
- Icons und Rahmen für eine Stilstudie sammeln
Für UI-Designer
An Komponenten statt an einem Bild arbeiten
Sobald die Balken, Panels und Schaltflächen separate Ebenen sind, können Sie sie neu anordnen, nicht benötigte ausblenden und das Ergebnis exportieren.
Ebenen behalten ihre Position auf der Arbeitsfläche, sodass Sie ein Element verschieben können, ohne den Rest zu beeinflussen.
- Gesundheits- und Manabalken
- Minimap und ihr Rahmen
- Menü- und Quest-Schaltflächen
- Chat- und Dialog-Panels
- Zähler, Uhren und eigenständige Icons
Für Asset-Ersteller
Wiederverwendbare Elemente sammeln
Icons, Schaltflächen und Ornamente werden zu separaten transparenten PNG-Ebenen. Verwenden Sie nur Grafiken, für die Sie die Nutzungsrechte besitzen.
- Skill- und Fähigkeits-Icons
- Ornamentale Rahmen und Statuen
- Währungs- und Status-Icons
- Dekorative Eckstücke
Warum zwei Schritte
Ein Durchlauf hat ein Ebenenlimit
Jeder Durchlauf liefert einen Hintergrund und bis zu 16 separate Ebenen. Ein vollständiger Game-Bildschirm hat mehr Teile, daher fasst der erste Durchlauf dichte Streifen zusammen, anstatt jede Schaltfläche zu trennen.
Der zweite Schritt verarbeitet eine ausgewählte Ebene separat, sodass das Modell alle seine Ebenen für diese Komponente verwendet.
Erster Durchlauf
Komponenten, keine Fragmente
Der erste Durchlauf fragt nach funktionalen Komponenten statt nach großen visuellen Bereichen: Ein Balken mit seiner Beschriftung bleibt zusammen, und eine Menüschaltfläche bleibt bei ihrem Icon.
Der Szenenhintergrund wird als eine Ebene beibehalten, und ein in der Szene stehender Charakter wird davon getrennt.
- Statusleisten und die XP-Leiste
- Boss- und Zielbalken
- Minimap und Menüschaltflächen
- Chat- und Dialogfenster
- Der Charakter und die Szene
Bleibt zusammen
Manche Streifen erscheinen als eine Ebene
Reihen ähnlicher Schaltflächen, wie z. B. eine Fähigkeitsleiste, werden im ersten Durchlauf oft als eine Ebene zurückgegeben. Dafür ist der zweite Schritt gedacht.
Selbst dann ist nicht garantiert, dass ein sehr dichter Streifen in jedes einzelne Teil zerlegt wird.
Grenzen
Was dieses Tool nicht leistet
Es liefert keine pixelidentischen Ausschnitte Ihres Screenshots und garantiert nicht, dass jedes Interface-Element zu einer eigenen Ebene wird.
Es erstellt keine Engine-Dateien wie Unity-Prefabs, Unreal-Widgets oder Godot-Szenen und erkennt auch keine Schaltflächenfunktionen oder Texte für Sie.
- Kleiner Text und Zahlen sollten manuell überprüft werden
- Dünne Linien und Leuchteffekte können leicht abweichen
- Überlappende Elemente können in einer Ebene bleiben
Vorbereitung
Sauberere Trennung erzielen
Verwenden Sie das vollständige Bild in der höchsten verfügbaren Auflösung. Vermeiden Sie die Aufnahme während Bewegungsunschärfe, Bildschirmzittern oder starken Partikeleffekten.
Wenn Sie nur ein Panel benötigen, schneiden Sie es zuerst zu, oder führen Sie den ersten Durchlauf aus und trennen Sie diese Ebene dann weiter auf.
- Vollständiges, unbeschnittenes Bild
- Hohe Auflösung
- Ein ruhiger Moment
- Interface nicht von Effekten überdeckt
Ebenen verwenden
Bearbeiten, neu anordnen und exportieren
Im Ebenen-Editor können Sie Ebenen verschieben, in der Größe ändern, ausblenden, sperren und neu anordnen, Masken und Anpassungen anwenden und die Komposition als Bild exportieren.
ZIP- und PSD-Downloads enthalten die getrennten Ebenen. Eine Ebene, die Sie weiter aufgeteilt haben, wird als ihre Einzelteile exportiert. Der PSD-Export erfordert einen kostenpflichtigen Plan.
Credits
Kosten vor Beginn einsehen
Jeder Durchlauf verbraucht Credits und zeigt zuerst seine Kosten an. Eine Ebene weiter aufzuteilen ist ein separater, optionaler Durchlauf: Es wird nichts berechnet, bis Sie es bestätigen.
Schlägt ein Durchlauf fehl, werden die Credits dafür automatisch zurückerstattet.
Game UI in Ebenen FAQ
Was leistet Game UI in Ebenen?
Es trennt einen Game-Screenshot in transparente Ebenen: Statusleisten, Panels, Menüschaltflächen, die Minimap, Icons, den Charakter und den Szenenhintergrund. Sie können diese dann im Ebenen-Editor verschieben, ausblenden und exportieren.
Wird jede Schaltfläche zu einer eigenen Ebene?
Nicht im ersten Durchlauf. Jeder Durchlauf liefert einen Hintergrund und bis zu 16 separate Ebenen, sodass Reihen ähnlicher Schaltflächen normalerweise zusammenbleiben. Sie können diese Ebene in einem zweiten Schritt weiter aufteilen, aber selbst dann ist nicht garantiert, dass ein sehr dichter Streifen vollständig getrennt wird.
Wie erhalte ich einzelne Skill-Schaltflächen?
Führen Sie den ersten Durchlauf aus, wählen Sie die Skill-Leisten-Ebene im Editor aus und wählen Sie 'Diese Ebene weiter aufteilen'. In unserem echten Test zerfiel die Skill-Leiste in zehn Schaltflächen, zwei Statuen und die Leistenbasis.
Zahle ich doppelt?
Nur wenn Sie es wünschen. Der erste Durchlauf ist ein einzelner Vorgang. Eine Ebene weiter aufzuteilen ist ein separater, optionaler Vorgang, der seine Credit-Kosten anzeigt, bevor er beginnt. Fehlgeschlagene Vorgänge werden automatisch zurückerstattet.
Sind die Ebenen exakte Ausschnitte meines Screenshots?
Nein. Jede Ebene wird vom Modell neu gezeichnet. Wieder zusammengesetzt, ähneln die Teile Ihrem Screenshot, sind aber nicht identisch, und Größen oder Positionen können leicht abweichen.
Bleibt der Text in meinem Interface erhalten?
Text und Zahlen bleiben in der Regel erhalten, aber kleiner oder dünner Text kann sich ändern. Überprüfen Sie jede Ebene, die Text oder Zahlen enthält, bevor Sie sie verwenden.
Kann ich das Ergebnis in Unity, Unreal oder Godot verwenden?
Sie erhalten transparente PNG-Ebenen und eine exportierbare Komposition. Das Tool erstellt keine Unity-Prefabs, Unreal-Widgets oder andere Engine-Projektdateien, daher importieren Sie die Bilder in Ihr eigenes UI-Setup.
Wie viele Ebenen kann ein Durchlauf zurückgeben?
Ein Hintergrund plus bis zu 16 separate Ebenen pro Durchlauf.
Was passiert mit der Szene und dem Charakter?
Der Szenenhintergrund wird als eigene Ebene beibehalten. Ein in der Szene stehender Charakter wird davon getrennt, und der Hintergrund wird dahinter neu aufgebaut.
Kann ich die ursprüngliche Ebene wiederherstellen, nachdem ich sie weiter aufgeteilt habe?
Ja. Die ursprüngliche Ebene bleibt verborgen erhalten, während ihre Einzelteile angezeigt werden. 'Ursprüngliche Ebene wiederherstellen' bringt sie zurück, und 'Rückgängig' funktioniert ebenfalls.
Welche Screenshots funktionieren am besten?
Ein vollständiges, ruhiges Bild in hoher Auflösung, ohne Bewegungsunschärfe oder starke Effekte über dem Interface. Klare Abstände zwischen den Elementen helfen.
Welche Exportformate sind verfügbar?
Sie können die Ebenen als ZIP herunterladen, die Komposition als PNG exportieren oder eine PSD mit einem kostenpflichtigen Plan herunterladen. Eine weiter aufgeteilte Ebene wird als ihre Einzelteile exportiert.
Kann ich Screenshots von jedem Spiel verwenden?
Verwenden Sie nur Grafiken, für die Sie die Nutzungsrechte besitzen. Screenshots von Spielen, die Ihnen nicht gehören, oder Grafiken, die unter der Lizenz eines anderen stehen, dürfen Sie möglicherweise nicht bearbeiten oder teilen.
Kann ich die getrennten Teile mit KI bearbeiten?
Teile können im Editor verschoben, maskiert, angepasst und heruntergeladen werden. KI-Bearbeitungen, Upscaling und Hintergrundentfernung laufen auf den ursprünglichen Ebenen.
Verwandeln Sie Ihren Game-Screenshot in separate UI-Ebenen
Laden Sie einen Screenshot hoch, überprüfen Sie die getrennten Komponenten und gehen Sie nur bei den Ebenen tiefer, die es benötigen.
Game UI trennenSie sehen die Credit-Kosten vor jedem Durchlauf.