Séparez l'UI de Jeu en Calques Modifiables
Transformez les captures d'écran de jeu en panneaux d'interface, éléments de HUD, icônes et actifs d'interface séparés. Affinez les composants individuels grâce à la séparation de calques assistée par IA.
Téléchargez une capture d'écran d'UI de jeu
Utilisez une capture d'écran nette ou une maquette d'interface. La première passe sépare les principaux composants de l'interface de la scène.
1
Cliquez ou glissez l'image pour la télécharger
Upload your image
JPG, PNG, WebP up to 10MB · Drag & drop anywhere
Changer l'image
Layer Hotspots17 Layers
Hover or click box to inspect layer
Separated Layer Cutouts17 Layers
Protected Assets
2
Paramètres
Conçu pour les interfaces de jeu
La première passe sépare par composant fonctionnel : barres, panneaux, boutons de menu, mini-carte, personnage et scène. Une bande dense comme une barre de compétences peut ensuite être séparée davantage, uniquement lorsque vous le décidez.
HUD & barres de statutMini-carte & menusBarres de compétences & barres d'actionPanneaux de chat & de dialogue
Coût par exécution60 crédits
Téléchargez une Image pour Continuer
Gestion des fichiers privés
Les fichiers téléchargés sont associés à votre compte et livrés via des URL signées. Vous pouvez supprimer manuellement les tâches terminées.
Sortie PNG transparente
Les Calques détaillés renvoient chaque élément détecté comme son propre calque sur un fond transparent.
Pour de meilleurs résultats, utilisez :
- Une capture d'écran complète, non rognée
- Haute résolution, sans compression excessive
- Peu de chevauchement entre l'UI et les effets
- Une image statique, pas de flou de mouvement
- HUD, barres et panneaux en tant que calques séparés
- Personnage et scène conservés séparément
- Divisez un panneau choisi en ses boutons
- Déplacez, masquez et exportez dans l'éditeur de calques
Résultats réels
D'une capture d'écran à des composants d'UI séparés
Deux exécutions réelles sur la même capture d'écran de jeu. La première sépare l'interface de la scène. La seconde prend l'un de ces calques, la barre de compétences, et la sépare davantage.
Étape 1 : séparer la capture d'écran
Le personnage et l'arrière-plan de la scène sont séparés de l'interface, et chaque barre, panneau, bouton de menu et icône devient son propre calque.
Étape 2 (facultative) : séparer un calque davantage
La barre de compétences était un seul calque après l'étape 1. Exécutée seule, elle s'est divisée en dix boutons, deux statues et la base de la barre.
Ce à quoi s'attendre
Chaque calque est redessiné par le modèle, donc empiler les pièces ensemble donne quelque chose de proche de votre capture d'écran, pas une copie exacte. Les tailles et les positions peuvent différer légèrement, surtout sur les bandes denses comme la barre de compétences, et un calque peut être légèrement plus grand que la pièce d'origine. Vérifiez les petits textes, les chiffres et les icônes fines avant d'utiliser un calque.
Comment ça marche
Deux étapes, vous décidez de la seconde
1
Téléchargez la capture d'écran
La première passe sépare les principaux composants de l'interface et le personnage de la scène.
2
Examinez les calques
Sélectionnez les calques dans l'éditeur, déplacez-les ou masquez-les, et comparez-les à votre capture d'écran.
3
Choisissez un calque pour aller plus loin
Sélectionnez un calque tel qu'une barre de compétences. Le coût en crédits est affiché avant que quoi que ce soit ne commence.
4
Utilisez les pièces
Les pièces remplacent ce calque dans l'éditeur. Restaurez le calque d'origine ou annulez à tout moment, puis exportez.
Pour les développeurs de jeux
Extrayez les parties de l'interface d'une capture d'écran plate
Une capture d'écran ou un cadre de concept contient l'interface entière dans une seule image. La séparer vous donne les barres, les panneaux et les icônes sous forme de calques transparents que vous pouvez repositionner, retoucher ou reconstruire dans votre propre pipeline d'interface utilisateur.
L'outil sépare les œuvres d'art. Il ne reconstruit pas l'interface en tant qu'objets de moteur.
- Prototypez des mises en page à partir d'un cadre de référence
- Extrayez des parties du HUD pour une refonte
- Reconstruisez une maquette d'interface à partir d'une capture d'écran existante
- Collectez des icônes et des cadres pour une étude de style
Pour les concepteurs d'UI
Travaillez sur des composants plutôt que sur une seule image
Une fois que les barres, les panneaux et les boutons sont des calques séparés, vous pouvez les réorganiser, masquer ceux dont vous n'avez pas besoin et exporter le résultat.
Les calques conservent leur position sur la toile, vous pouvez donc déplacer une pièce sans toucher aux autres.
- Barres de vie et de mana
- Mini-carte et son cadre
- Boutons de menu et de quête
- Panneaux de chat et de dialogue
- Compteurs, horloges et icônes autonomes
Pour les créateurs d'actifs
Collectez des pièces réutilisables
Les icônes, les boutons et les ornements deviennent des calques PNG transparents séparés. Utilisez uniquement les œuvres d'art que vous avez le droit d'utiliser.
- Icônes de compétences et d'aptitudes
- Cadres et statues ornementaux
- Icônes de monnaie et de statut
- Pièces d'angle décoratives
Pourquoi deux étapes
Une passe a une limite de calques
Chaque exécution renvoie un arrière-plan et jusqu'à 16 calques séparés. Un écran de jeu complet a plus de parties que cela, donc la première passe regroupe les bandes denses au lieu de diviser chaque bouton.
La deuxième étape exécute un calque choisi seul, de sorte que le modèle dépense tous ses calques sur ce composant.
Première passe
Composants, pas fragments
La première passe demande des composants fonctionnels plutôt que de grandes régions visuelles : une barre avec son étiquette reste ensemble, et un bouton de menu reste avec son icône.
L'arrière-plan de la scène est conservé comme un seul calque, et un personnage se tenant dans la scène en est séparé.
- Barres de statut et barre d'XP
- Barres de boss et de cible
- Mini-carte et boutons de menu
- Fenêtres de chat et de dialogue
- Le personnage et la scène
Reste ensemble
Certaines bandes sortent en un seul calque
Les rangées de boutons similaires, comme une barre de compétences, sont souvent renvoyées comme un seul calque lors de la première passe. C'est à cela que sert la deuxième étape.
Même dans ce cas, une bande très dense n'est pas garantie de se séparer en chaque partie individuelle.
Limites
Ce que cet outil ne fait pas
Il ne renvoie pas des recadrages pixel par pixel de votre capture d'écran, et il ne garantit pas que chaque élément de l'interface devienne son propre calque.
Il ne crée pas de fichiers de moteur tels que des préfabs Unity, des widgets Unreal ou des scènes Godot, et il ne reconnaît pas les fonctions des boutons ou le texte pour vous.
- Les petits textes et les chiffres doivent être vérifiés à l'œil
- Les lignes fines et les lueurs peuvent apparaître légèrement différentes
- Les éléments qui se chevauchent peuvent rester dans un seul calque
Préparation
Obtenez une séparation plus nette
Utilisez le cadre complet à la résolution la plus élevée dont vous disposez. Évitez de capturer pendant un flou de mouvement, des secousses d'écran ou des effets de particules intenses.
Si vous n'avez besoin que d'un seul panneau, recadrez-le d'abord, ou exécutez la première passe, puis séparez ce calque davantage.
- Cadre complet, non rogné
- Haute résolution
- Un moment figé
- Interface non couverte par des effets
Utilisation des calques
Modifiez, réorganisez et exportez
Dans l'éditeur de calques, vous pouvez déplacer, redimensionner, masquer, verrouiller et réorganiser les calques, appliquer des masques et des ajustements, et exporter la composition sous forme d'image.
Les téléchargements ZIP et PSD contiennent les calques séparés. Un calque que vous avez séparé davantage est exporté sous forme de ses pièces. L'exportation PSD nécessite un plan payant.
Crédits
Voyez le coût avant de commencer
Chaque exécution utilise des crédits et affiche d'abord son coût. Séparer un calque davantage est une exécution séparée et facultative : rien n'est facturé tant que vous ne l'avez pas confirmé.
Si une exécution échoue, les crédits correspondants sont remboursés automatiquement.
FAQ sur UI de Jeu en Calques
Que fait UI de Jeu en Calques ?
Il sépare une capture d'écran de jeu en calques transparents : barres de statut, panneaux, boutons de menu, mini-carte, icônes, personnage et arrière-plan de la scène. Vous pouvez ensuite les déplacer, les masquer et les exporter dans l'éditeur de calques.
Chaque bouton deviendra-t-il son propre calque ?
Pas lors de la première passe. Chaque exécution renvoie un arrière-plan et jusqu'à 16 calques séparés, donc les rangées de boutons similaires restent généralement ensemble. Vous pouvez séparer ce calque davantage dans une seconde étape, mais même dans ce cas, une bande très dense n'est pas garantie de se diviser complètement.
Comment obtenir des boutons de compétence individuels ?
Exécutez la première passe, sélectionnez le calque de la barre de compétences dans l'éditeur, et choisissez 'Séparer ce calque davantage'. Dans notre test réel, la barre de compétences s'est divisée en dix boutons, deux statues et la base de la barre.
Dois-je payer deux fois ?
Seulement si vous le souhaitez. La première passe est une exécution. Séparer un calque davantage est une exécution séparée et facultative qui affiche son coût en crédits avant de commencer. Les exécutions échouées sont remboursées automatiquement.
Les calques sont-ils des recadrages exacts de ma capture d'écran ?
Non. Chaque calque est redessiné par le modèle. Remis ensemble, les pièces sont proches de votre capture d'écran mais pas identiques, et les tailles ou les positions peuvent différer légèrement.
Le texte de mon interface est-il préservé ?
Le texte et les chiffres sont généralement conservés, mais les textes petits ou fins peuvent changer. Vérifiez chaque calque qui contient du texte ou des chiffres avant de l'utiliser.
Puis-je utiliser le résultat dans Unity, Unreal ou Godot ?
Vous obtenez des calques PNG transparents et une composition exportable. L'outil ne crée pas de préfabs Unity, de widgets Unreal ou d'autres fichiers de projet de moteur, vous importez donc les images dans votre propre configuration d'interface utilisateur.
Combien de calques une exécution peut-elle renvoyer ?
Un arrière-plan plus jusqu'à 16 calques séparés par exécution.
Que deviennent la scène et le personnage ?
L'arrière-plan de la scène est conservé comme son propre calque. Un personnage se tenant dans la scène en est séparé, et l'arrière-plan est reconstruit derrière lui.
Puis-je restaurer le calque d'origine après l'avoir séparé davantage ?
Oui. Le calque d'origine est conservé, masqué, tandis que ses pièces sont affichées. Restaurer le calque d'origine le ramène, et l'annulation fonctionne également.
Quelles captures d'écran fonctionnent le mieux ?
Un cadre complet et figé à haute résolution, sans flou de mouvement ni effets lourds sur l'interface. Des espaces clairs entre les éléments aident.
Quels formats d'exportation sont disponibles ?
Vous pouvez télécharger les calques sous forme de ZIP, exporter la composition en PNG, ou télécharger un PSD avec un plan payant. Un calque séparé davantage est exporté sous forme de ses pièces.
Puis-je utiliser des captures d'écran de n'importe quel jeu ?
Utilisez uniquement les œuvres d'art que vous avez le droit d'utiliser. Les captures d'écran de jeux que vous ne possédez pas, ou les œuvres sous licence d'autrui, peuvent ne pas être les vôtres à modifier ou à partager.
Puis-je modifier les pièces séparées avec l'IA ?
Les pièces peuvent être déplacées, masquées, ajustées et téléchargées dans l'éditeur. Les modifications par IA, la mise à l'échelle et la suppression d'arrière-plan s'exécutent sur les calques d'origine.
Transformez votre capture d'écran de jeu en calques d'UI séparés
Téléchargez une capture d'écran, examinez les composants séparés, et approfondissez uniquement sur les calques qui en ont besoin.
Séparer l'UI de JeuVous voyez le coût en crédits avant chaque exécution.