Separera spel-UI i redigerbara lager
Förvandla skärmdumpar från spel till separata UI-paneler, HUD-element, ikoner och gränssnittstillgångar. Förfina enskilda komponenter med AI-driven lagerseparering.
Ladda upp en skärmdump av ett spelgränssnitt
Använd en ren skärmdump eller en UI-mockup. Den första körningen separerar de huvudsakliga gränssnittskomponenterna från scenen.
1
Klicka eller dra bild för att ladda upp
Upload your image
JPG, PNG, WebP up to 10MB · Drag & drop anywhere
Byt bild
Layer Hotspots17 Layers
Hover or click box to inspect layer
Separated Layer Cutouts17 Layers
Protected Assets
2
Inställningar
Byggd för spelgränssnitt
Den första körningen separerar efter funktionell komponent: mätare, paneler, menyknappar, minimap, karaktär och scen. En tät remsa, som ett färdighetsfält, kan sedan delas upp ytterligare, endast när du väljer att göra det.
HUD & statusmätareMinimap & menyerFärdighetsfält & snabbfältChatt- & dialogpaneler
Kostnad per körning60 krediter
Ladda upp en bild för att fortsätta
Hantering av privata filer
Uppladdade filer är kopplade till ditt konto och levereras via signerade URL:er. Du kan radera slutförda jobb manuellt.
Transparent PNG-utdata
Detaljerade lager returnerar varje identifierat element som ett eget lager på en transparent bakgrund.
För bästa resultat, använd:
- En fullständig, obeskuren skärmdump
- Hög upplösning, utan kraftig komprimering
- Lite överlappning mellan UI och effekter
- En statisk bild, inte rörelseoskärpa
- HUD, mätare och paneler som separata lager
- Karaktär och scen hålls åtskilda
- Dela upp en vald panel i dess knappar
- Flytta, dölj och exportera i lagerredigeraren
Verkliga resultat
Från en skärmdump till separata UI-komponenter
Två faktiska körningar på samma skärmdump. Den första separerar gränssnittet från scenen. Den andra tar ett av dessa lager, färdighetsfältet, och separerar det ytterligare.
Steg 1: separera skärmdumpen
Karaktären och scenbakgrunden separeras från gränssnittet, och varje mätare, panel, menyknapp och ikon blir ett eget lager.
Steg 2 (valfritt): separera ett lager ytterligare
Färdighetsfältet var ett lager efter steg 1. När det kördes separat delades det upp i tio knappar, två statyer och basen för fältet.
Vad du kan förvänta dig
Varje lager återskapas av modellen, så att stapla ihop delarna igen ger något som liknar din skärmdump, inte en exakt kopia. Storlekar och positioner kan skilja sig något, vilket märks mest på täta remsor som färdighetsfältet, och ett lager kan vara något större än originalet. Kontrollera små textstycken, siffror och tunna ikoner innan du använder ett lager.
Så fungerar det
Två steg, du bestämmer det andra
1
Ladda upp skärmdumpen
Den första körningen separerar de huvudsakliga gränssnittskomponenterna och karaktären från scenen.
2
Granska lagren
Välj lager i redigeraren, flytta eller dölj dem och jämför dem med din skärmdump.
3
Välj ett lager för att gå djupare
Välj ett lager, till exempel ett färdighetsfält. Kreditkostnaden visas innan något påbörjas.
4
Använd delarna
Delarna ersätter det lagret i redigeraren. Återställ originallagret eller ångra när som helst, och exportera sedan.
För spelutvecklare
Få ut gränssnittsdelar från en platt skärmdump
En skärmdump eller konceptbild innehåller hela gränssnittet i en bild. Genom att separera det får du mätare, paneler och ikoner som transparenta lager som du kan flytta, ändra stil på eller bygga om i din egen UI-pipeline.
Verktyget separerar grafik. Det bygger inte om gränssnittet som motorobjekt.
- Prototypa layouter från en referensbild
- Hämta HUD-delar för en redesign
- Bygg om en UI-mockup från en befintlig skärmdump
- Samla ikoner och ramar för en stilstudie
För UI-designers
Arbeta med komponenter istället för en bild
När mätare, paneler och knappar är separata lager kan du ändra ordning på dem, dölja de du inte behöver och exportera resultatet.
Lager behåller sin position på arbetsytan, så att du kan flytta en del utan att påverka resten.
- Hälso- och manamätare
- Minimap och dess ram
- Meny- och uppdragsknappar
- Chatt- och dialogpaneler
- Räknare, klockor och fristående ikoner
För kreatörer av speltillgångar
Samla återanvändbara delar
Ikoner, knappar och ornament blir separata transparenta PNG-lager. Använd endast grafik som du har rättigheter att använda.
- Färdighets- och förmågeikoner
- Ornamentala ramar och statyer
- Valuta- och statusikoner
- Dekorativa hörndelar
Varför två steg
En körning har en lagergräns
Varje körning returnerar en bakgrund och upp till 16 separerade lager. En fullständig spelskärm har fler delar än så, därför grupperar den första körningen täta remsor istället för att dela upp varje knapp.
Det andra steget körs på ett valt lager för sig, så att modellen kan lägga alla sina lager på just den komponenten.
Första körningen
Komponenter, inte fragment
Den första körningen fokuserar på funktionella komponenter snarare än stora visuella områden: en mätare med sin etikett hålls ihop, och en menyknapp stannar kvar med sin ikon.
Scenbakgrunden behålls som ett lager, och en karaktär som står i scenen separeras från den.
- Statusmätare och XP-mätare
- Boss- och målmätare
- Minimap och menyknappar
- Chatt- och dialogfönster
- Karaktären och scenen
Hålls ihop
Vissa remsor kommer ut som ett lager
Rader av liknande knappar, som ett färdighetsfält, returneras ofta som ett lager i den första körningen. Det är vad det andra steget är till för.
Även då är det inte garanterat att en mycket tät remsa delas upp i varje enskild del.
Begränsningar
Vad detta verktyg inte gör
Det returnerar inte pixel-identiska beskärningar av din skärmdump, och det garanterar inte att varje gränssnittselement blir ett eget lager.
Det skapar inte motorfiler som Unity-prefabs, Unreal-widgets eller Godot-scener, och det känner inte igen knappfunktioner eller text åt dig.
- Små textstycken och siffror bör kontrolleras manuellt
- Tunna linjer och ljuseffekter kan se något annorlunda ut
- Överlappande element kan stanna i samma lager
Förberedelser
Få renare separering
Använd hela bilden i högsta möjliga upplösning. Undvik att ta skärmdumpar under rörelseoskärpa, skakningar eller kraftiga partikeleffekter.
Om du bara behöver en panel, beskära den först, eller kör den första körningen och separera sedan det lagret ytterligare.
- Fullständig, obeskuren bild
- Hög upplösning
- Ett stillastående ögonblick
- Gränssnitt som inte täcks av effekter
Använda lager
Redigera, ändra ordning och exportera
I lagerredigeraren kan du flytta, ändra storlek, dölja, låsa och ändra ordning på lager, använda masker och justeringar, samt exportera kompositionen som en bild.
ZIP- och PSD-nedladdningar innehåller de separerade lagren. Ett lager som du separerat ytterligare exporteras som dess delar. PSD-export kräver en betalplan.
Krediter
Se kostnaden innan du börjar
Varje körning använder krediter och visar kostnaden först. Att separera ett lager ytterligare är en separat, valfri körning: ingenting debiteras förrän du bekräftar det.
Om en körning misslyckas återbetalas krediterna automatiskt.
Vanliga frågor om Game UI till lager
Vad gör Game UI till lager?
Det separerar en skärmdump från ett spel till transparenta lager: statusmätare, paneler, menyknappar, minimap, ikoner, karaktären och scenbakgrunden. Du kan sedan flytta, dölja och exportera dem i lagerredigeraren.
Blir varje knapp ett eget lager?
Inte i den första körningen. Varje körning returnerar en bakgrund och upp till 16 separerade lager, så rader av liknande knappar hålls oftast ihop. Du kan separera det lagret ytterligare i ett andra steg, men även då är det inte garanterat att en mycket tät remsa delas upp helt.
Hur får jag enskilda färdighetsknappar?
Kör den första körningen, välj färdighetsfältets lager i redigeraren och välj att separera lagret ytterligare. I vårt test delades färdighetsfältet upp i tio knappar, två statyer och basen för fältet.
Betalar jag två gånger?
Endast om du väljer att göra det. Den första körningen är en körning. Att separera ett lager ytterligare är en separat, valfri körning som visar sin kreditkostnad innan den startar. Misslyckade körningar återbetalas automatiskt.
Är lagren exakta beskärningar av min skärmdump?
Nej. Varje lager återskapas av modellen. När delarna sätts ihop igen liknar de din skärmdump men är inte identiska, och storlekar eller positioner kan skilja sig något.
Bevaras texten i mitt gränssnitt?
Text och siffror bevaras oftast, men liten eller tunn text kan förändras. Kontrollera varje lager som innehåller text eller siffror innan du använder det.
Kan jag använda resultatet i Unity, Unreal eller Godot?
Du får transparenta PNG-lager och en exporterbar komposition. Verktyget skapar inte Unity-prefabs, Unreal-widgets eller andra projektfiler för spelmotorer, så du importerar bilderna till din egen UI-uppsättning.
Hur många lager kan en körning returnera?
En bakgrund plus upp till 16 separerade lager per körning.
Vad händer med scenen och karaktären?
Scenbakgrunden behålls som ett eget lager. En karaktär som står i scenen separeras från den, och bakgrunden återskapas bakom karaktären.
Kan jag återställa originallagret efter att ha separerat det ytterligare?
Ja. Originallagret sparas, dolt, medan dess delar visas. Genom att återställa originallagret kommer det tillbaka, och ångra-funktionen fungerar också.
Vilka skärmdumpar fungerar bäst?
En fullständig, stillastående bild i hög upplösning, utan rörelseoskärpa eller kraftiga effekter över gränssnittet. Tydliga mellanrum mellan elementen hjälper.
Vilka exportformat finns tillgängliga?
Du kan ladda ner lagren som en ZIP-fil, exportera kompositionen som en PNG, eller ladda ner en PSD-fil med en betalplan. Ett lager som separerats ytterligare exporteras som dess delar.
Kan jag använda skärmdumpar från vilket spel som helst?
Använd endast grafik som du har rättigheter att använda. Skärmdumpar från spel du inte äger, eller grafik som omfattas av någon annans licens, kanske du inte har rätt att redigera eller dela.
Kan jag redigera de separerade delarna med AI?
Delar kan flyttas, maskeras, justeras och laddas ner i redigeraren. AI-redigeringar, uppskalning och bakgrundsborttagning körs på originallagren.
Förvandla din skärmdump till separata UI-lager
Ladda upp en skärmdump, granska de separerade komponenterna och gå djupare endast på de lager som behöver det.
Separera spel-UIDu ser kreditkostnaden innan varje körning.