
Separe a Interface de Jogo em Camadas Editáveis
Transforme capturas de tela de jogos em painéis de UI, elementos de HUD, ícones e ativos de interface separados. Refine componentes individuais com separação de camadas impulsionada por IA.
Envie uma captura de tela da interface do jogo
Use uma captura de tela limpa ou um mockup de UI. A primeira passagem separa os principais componentes da interface da cena.
1
Clique ou arraste a imagem para carregar
Upload your image
JPG, PNG, WebP up to 10MB · Drag & drop anywhere
Alterar Imagem
Layer Hotspots17 Layers
Hover or click box to inspect layer
Separated Layer Cutouts17 Layers
Protected Assets
2
Configurações
Feito para interfaces de jogos
A primeira passagem separa por componente funcional: barras, painéis, botões de menu, minimapa, personagem e cena. Uma faixa densa, como uma barra de habilidades, pode ser separada ainda mais, apenas quando você escolher.
HUD e barras de statusMinimapa e menusBarras de habilidades e atalhosPainéis de chat e diálogo
Custo por execução60 créditos
Carregue uma Imagem para Continuar
Manuseio de Arquivos Privados
Os arquivos enviados são associados à sua conta e entregues através de URLs assinadas. Você pode excluir trabalhos concluídos manualmente.
Saída PNG Transparente
As Camadas Detalhadas retornam cada elemento detectado como sua própria camada em um fundo transparente.
Para melhores resultados, use:
- Uma captura de tela completa, sem cortes
- Alta resolução, sem compressão pesada
- Pouca sobreposição entre UI e efeitos
- Um quadro estático, sem desfoque de movimento
- HUD, barras e painéis como camadas separadas
- Personagem e cena mantidos à parte
- Divida um painel escolhido em seus botões
- Mova, oculte e exporte no editor de camadas
Resultados reais
De uma captura de tela a componentes de UI separados
Duas execuções reais na mesma captura de tela de jogo. A primeira separa a interface da cena. A segunda pega uma dessas camadas, a barra de habilidades, e a separa ainda mais.
Passo 1: separe a captura de tela
O personagem e o fundo da cena são separados da interface, e cada barra, painel, botão de menu e ícone é sua própria camada.

Passo 2 (opcional): separe uma camada ainda mais
A barra de habilidades era uma camada após o passo 1. Executada por si só, ela se dividiu em dez botões, duas estátuas e a base da barra.

O que esperar
Cada camada é redesenhada pelo modelo, então empilhar as peças de volta juntas resulta em algo próximo à sua captura de tela, não uma cópia exata. Tamanhos e posições podem diferir ligeiramente, mais visivelmente em faixas densas como a barra de habilidades, e uma camada pode ser um pouco maior que a peça original. Verifique textos pequenos, números e ícones finos antes de usar uma camada.
Como funciona
Dois passos, você decide o segundo
1
Envie a captura de tela
A primeira passagem separa os principais componentes da interface e o personagem da cena.
2
Revise as camadas
Selecione camadas no editor, mova ou oculte-as e compare-as com sua captura de tela.
3
Escolha uma camada para aprofundar
Escolha uma camada como uma barra de habilidades. O custo em créditos é mostrado antes de qualquer coisa começar.
4
Use as peças
As peças substituem essa camada no editor. Restaure a camada original ou desfaça a qualquer momento, depois exporte.
Para desenvolvedores de jogos
Obtenha partes da interface de uma captura de tela plana
Uma captura de tela ou quadro conceitual contém toda a interface em uma única imagem. Separar isso lhe dá as barras, painéis e ícones como camadas transparentes que você pode reposicionar, reestilizar ou reconstruir em seu próprio pipeline de UI.
A ferramenta separa a arte. Ela não reconstrói a interface como objetos do motor.
- Prototipagem de layouts a partir de um quadro de referência
- Extraia partes do HUD para um redesenho
- Reconstrua um mockup de UI a partir de uma captura de tela existente
- Colete ícones e molduras para um estudo de estilo
Para designers de UI
Trabalhe em componentes em vez de uma imagem
Uma vez que as barras, painéis e botões são camadas separadas, você pode reordená-los, ocultar os que não precisa e exportar o resultado.
As camadas mantêm sua posição na tela, então você pode mover uma peça sem tocar no resto.
- Barras de vida e mana
- Minimapa e sua moldura
- Botões de menu e missões
- Painéis de chat e diálogo
- Contadores, relógios e ícones autônomos
Para criadores de ativos
Colete peças reutilizáveis
Ícones, botões e ornamentos tornam-se camadas PNG transparentes separadas. Use apenas arte para a qual você tem os direitos de uso.
- Ícones de habilidades e capacidades
- Molduras ornamentais e estátuas
- Ícones de moeda e status
- Peças decorativas de canto
Por que dois passos
Uma passagem tem um limite de camadas
Cada execução retorna um fundo e até 16 camadas separadas. Uma tela de jogo completa tem mais partes do que isso, então a primeira passagem agrupa faixas densas em vez de dividir cada botão.
O segundo passo executa uma camada escolhida por si só, então o modelo dedica todas as suas camadas a esse componente.
Primeira passagem
Componentes, não fragmentos
A primeira passagem busca componentes funcionais em vez de grandes regiões visuais: uma barra com seu rótulo permanece junta, e um botão de menu permanece com seu ícone.
O fundo da cena é mantido como uma camada, e um personagem parado na cena é separado dele.
- Barras de status e a barra de XP
- Barras de chefe e alvo
- Minimapa e botões de menu
- Janelas de chat e diálogo
- O personagem e a cena
Permanece junto
Algumas faixas saem como uma única camada
Fileiras de botões semelhantes, como uma barra de habilidades, são frequentemente retornadas como uma única camada na primeira passagem. É para isso que serve o segundo passo.
Mesmo assim, uma faixa muito densa não tem garantia de se separar em cada parte individual.
Limites
O que esta ferramenta não faz
Ela não retorna recortes pixel a pixel idênticos da sua captura de tela, e não garante que cada elemento da interface se torne sua própria camada.
Ela não cria arquivos de motor como prefabs do Unity, widgets do Unreal ou cenas do Godot, e não reconhece funções de botão ou texto para você.
- Textos e números pequenos devem ser verificados visualmente
- Linhas finas e brilhos podem sair ligeiramente diferentes
- Elementos sobrepostos podem permanecer em uma única camada
Preparando
Obtenha uma separação mais limpa
Use o quadro completo na mais alta resolução que você tiver. Evite capturar durante desfoque de movimento, tremores de tela ou efeitos de partículas pesados.
Se você precisar apenas de um painel, corte-o primeiro, ou execute a primeira passagem e depois separe essa camada ainda mais.
- Quadro completo, sem cortes
- Alta resolução
- Um momento estático
- Interface não coberta por efeitos
Usando camadas
Edite, reordene e exporte
No editor de camadas, você pode mover, redimensionar, ocultar, bloquear e reordenar camadas, aplicar máscaras e ajustes, e exportar a composição como uma imagem.
Downloads ZIP e PSD contêm as camadas separadas. Uma camada que você separou ainda mais é exportada como suas peças. A exportação PSD requer um plano pago.
Créditos
Veja o custo antes de começar
Cada execução usa créditos e mostra seu custo primeiro. Separar uma camada ainda mais é uma execução separada e opcional: nada é cobrado até que você confirme.
Se uma execução falhar, os créditos para ela são reembolsados automaticamente.
FAQ: Interface de Jogo para Camadas
O que a ferramenta 'Interface de Jogo para Camadas' faz?
Ela separa uma captura de tela de jogo em camadas transparentes: barras de status, painéis, botões de menu, o minimapa, ícones, o personagem e o fundo da cena. Você pode então movê-los, ocultá-los e exportá-los no editor de camadas.
Cada botão se tornará sua própria camada?
Não na primeira passagem. Cada execução retorna um fundo e até 16 camadas separadas, então fileiras de botões semelhantes geralmente permanecem juntas. Você pode separar essa camada ainda mais em um segundo passo, mas mesmo assim uma faixa muito densa não tem garantia de se dividir completamente.
Como obtenho botões de habilidade individuais?
Execute a primeira passagem, selecione a camada da barra de habilidades no editor e escolha 'Separar esta camada ainda mais'. Em nosso teste real, a barra de habilidades se dividiu em dez botões, duas estátuas e a base da barra.
Pago duas vezes?
Apenas se você escolher. A primeira passagem é uma execução. Separar uma camada ainda mais é uma execução separada e opcional que mostra seu custo em créditos antes de começar. Execuções falhas são reembolsadas automaticamente.
As camadas são recortes exatos da minha captura de tela?
Não. Cada camada é redesenhada pelo modelo. Juntas novamente, as peças são próximas à sua captura de tela, mas não idênticas, e tamanhos ou posições podem diferir ligeiramente.
O texto da minha interface é preservado?
Textos e números geralmente são mantidos, mas textos pequenos ou finos podem mudar. Verifique cada camada que contém texto ou números antes de usá-la.
Posso usar o resultado no Unity, Unreal ou Godot?
Você obtém camadas PNG transparentes e uma composição exportável. A ferramenta não cria prefabs do Unity, widgets do Unreal ou quaisquer outros arquivos de projeto de motor, então você importa as imagens para sua própria configuração de UI.
Quantas camadas uma execução pode retornar?
Um fundo mais até 16 camadas separadas por execução.
O que acontece com a cena e o personagem?
O fundo da cena é mantido como sua própria camada. Um personagem parado na cena é separado dela, e o fundo é reconstruído atrás dele.
Posso restaurar a camada original depois de separá-la ainda mais?
Sim. A camada original é mantida, oculta, enquanto suas peças são mostradas. 'Restaurar camada original' a traz de volta, e 'desfazer' também funciona.
Quais capturas de tela funcionam melhor?
Um quadro completo e estático em alta resolução, sem desfoque de movimento ou efeitos pesados sobre a interface. Lacunas claras entre os elementos ajudam.
Quais formatos de exportação estão disponíveis?
Você pode baixar as camadas como um ZIP, exportar a composição como um PNG, ou baixar um PSD em um plano pago. Uma camada separada ainda mais é exportada como suas peças.
Posso usar capturas de tela de qualquer jogo?
Use apenas arte para a qual você tem os direitos de uso. Capturas de tela de jogos que você não possui, ou arte coberta pela licença de outra pessoa, podem não ser suas para editar ou compartilhar.
Posso editar as peças separadas com IA?
As peças podem ser movidas, mascaradas, ajustadas e baixadas no editor. Edições de IA, upscaling e remoção de fundo são executadas nas camadas originais.
Transforme sua captura de tela de jogo em camadas de UI separadas
Envie uma captura de tela, revise os componentes separados e aprofunde-se apenas nas camadas que precisam.
Separar Interface de JogoVocê vê o custo em créditos antes de cada execução.




























