PSD para Unity UGUI: fatiar PSD do Photoshop com IA

VberAI Studio (abreviado: AI Studio, ≠ Google AI Studio) faz os dois trabalhos que programadores de UI da Unity realmente precisam de um PSD: fatiar (camadas viram sprites utilizáveis) e montar um Prefab de UI (exportar um Prefab UGUI da Unity que você arrasta para baixo do Canvas). Comece aqui: AI Studio. Glossário: PSD.

“Usar IA para fatiar um PSD e montar um Prefab de UI” não é um pedido de filtro. Significa: o designer entregou um .psd em camadas — a engenharia pode pular o “exportar PNGs → arrastar Images → ajustar espaçamento → definir âncoras”?

É a passagem PSD to Unity prefab: grupos do Photoshop devem virar nós sob o Canvas.

Fatiar e montar um Prefab não são a mesma etapa

Tarefa	O que você obtém	Ainda manual
Apenas fatiar	Uma pilha de PNGs / sprites	Reconstruir posição, aninhamento, âncoras na Hierarchy
Exportar um flatten	Uma imagem de fundo	Botões não respondem ao clique; texto não é editável
Fatiar + montar Prefab	Sprites e uma hierarquia de Canvas / Prefab	Conectar cliques, dados, lógica extra de safe-area

O pipeline antigo separa essas tarefas: o Photoshop fatia, a Unity monta. Plugins estilo PSD2UGUI no editor fazem o parsing dentro da Unity e geralmente exigem regras de nomenclatura de camadas. O AI Studio faz o parsing em um canvas de jogo: inspecione a hierarquia e depois exporte um Prefab — não um monte de arquivos soltos.

A lista de importação minuto a minuto está em PSD para UI da Unity. Este artigo é o critério de aceitação: o que “montado” significa e quais PSDs não vão montar de forma limpa.

A saída precisa estar pronta para UGUI

Uma conversão utilizável inclui tudo isto:

1. Arte fatiada — fundos de botão, ícones, painéis 9-slice como Images separadas.
2. Texto — prefira TextMeshPro, não glifos queimados em uma textura (você precisa disso para alterar o texto e localizar).
3. Hierarquia — grupos → filhos, correspondendo aos grupos do PSD, não tudo jogado na raiz do Canvas.
4. Prefab — arraste para um Canvas existente; os RectTransforms correspondem aproximadamente às coordenadas do design.

Ele não substitui handlers de OnClick, lógica de red-dot, scripts de safe-area, assets de fonte TMP ou suas regras de atlas. Isso entra depois que o prefab está no projeto. Com o Unity MCP instalado, Cursor / Claude Code podem renomear nós em lote e conectar referências.

O que um PSD precisa antes de fatiar e montar

O modelo não adivinha widgets a partir de um pôster. Quanto mais próximo o arquivo estiver da estrutura de UI, mais limpo o Prefab.

Faça isto	Por quê
Um widget por grupo, nomes legíveis (Btn_Start, Panel_HUD)	Mapeia para raízes de prefab / nós de botão
Mantenha base, ícone e tipografia em camadas separadas	Elas viram Image / TMP em vez de um único bake
Evite estilos de camada imprevisíveis e modos de mesclagem estranhos	Caso contrário, você obtém um raster e perde a interação
Entregue um .psd em camadas, não um PNG mesclado	Comps achatados usam fatiamento in-place e não têm grupos de PSD

Group 47, arquivos totalmente rasterizados e sombras carimbadas em uma única camada ainda precisam de limpeza no canvas ou na Unity. Isso é falta de estrutura, não um conversor com falha.

Como fazer isso no AI Studio

Os rótulos dos botões seguem o painel atual.

1. Importe o PSD em camadas

Abra o AI Studio e importe o .psd. Na lista de camadas, confirme que barra superior, barra inferior, diálogos e grupos de botões ainda são grupos — não já achatados.

2. Leia como UI, não como pôster

Verifique a ordem de desenho, o espaçamento e as camadas de marcação ocultas. Separe controles clicáveis da decoração antes de exportar. Para alpha limpo, encadeie matting.

3. Exporte um Prefab UGUI, não um monte de sprites

Defina o motor como Unity. Prefira hierarquia de UI / Prefab. Prefira TMP para texto; mantenha 9-slice em painéis esticáveis (por painel).

4. Arraste para o Canvas e faça um smoke-test

Importe para uma pasta da equipe (por exemplo, Assets/UI/), coloque o Prefab como filho do Canvas da cena. Execute uma vez em 16:9 e na proporção retrato alvo; clique no caminho principal.

Se a mesma tela existe no Figma, use Figma → Unity. Godot / Cocos compartilham o canvas; você muda o alvo de exportação. Os nomes dos componentes diferem (Control / Widget); o teste de aceitação é o mesmo.

Verifique isto na Unity primeiro

• Cliques não acertam — o Canvas tem um Graphic Raycaster; Images clicáveis têm Raycast Target ativado.
• Tipo errado — atribua um TMP Font Asset quando não for a fonte do Photoshop.
• Desfoque — filtro de sprite, Canvas Scaler, Pixels Per Unit; não escale ícones pequenos além de 100%.
• Deriva de âncora — fixe full-bleed e barras de borda separadamente; adicione safe area no motor, não pinte um notch no PSD.
• Nova revisão do PSD — reconstrução de layout → reexporte o Prefab; duas trocas de cor de botão → edite na Unity.

vs um plugin PSD-to-UGUI no editor

	Plugin PSD2UGUI / regras de nomenclatura no editor	VberAI Studio
Onde roda	Janela do editor da Unity	Canvas de jogo no navegador
Entrada	Principalmente PSDs nomeados para aquele plugin	PSD; comps achatados via fatiamento in-place; Figma também
Após exportar	Continue construindo dentro da Unity	Edite, divida, faça matte no canvas e então emita um Prefab
Lógica	Escrita à mão ou ferramentas caseiras	Unity MCP depois que o prefab está no projeto

Plugins servem equipes que já seguem a especificação de camadas do plugin. O canvas serve para handoffs que ainda precisam de uma passada visual e de escolha entre Unity / Godot / Cocos. Nenhum dos dois conserta um PSD que é apenas um mock achatado — coloque em camadas ou use o fatiamento in-place.

Para quem

Times indie e programadores UI com comps Photoshop em camadas—quando «fatiar PNG e ajustar RectTransform» é lento e ainda não querem uma spec PSD2UGUI fixa no editor.

Limites

• A primeira exportação raramente é um final entregável; fontes, locales, movimento e safe area ainda são fechados no projeto.
• Estilos de camada pesados podem achatar; você perde controles interativos.
• VberAI Studio ≠ Google AI Studio; veja a comparação.

Conclusão

Você não precisa de “mais um fatiamento”. Você precisa que a estrutura do PSD se torne estrutura de Prefab UGUI. Fatias são intermediárias; conta quando você pode arrastar para o Canvas, clicar e editar o texto. Importe um PSD em camadas no AI Studio, exporte um Prefab e então conecte a lógica na Unity.

Perguntas frequentes

O que significa “IA fatiar um PSD e montar um Prefab de UI”?
As duas tarefas ao mesmo tempo: camadas viram sprites e grupos do PSD viram uma hierarquia / Prefab UGUI da Unity — não um monte de sprites.

O VberAI consegue construir um Prefab UGUI a partir de um PSD?
Sim. Importe um PSD em camadas no AI Studio, exporte uma hierarquia de UI ou prefab da Unity (por painel), coloque como filho do Canvas e faça um smoke-test.

Como isso é diferente de fatiar PNGs?
Fatias de PNG perdem coordenadas e grupos. Um prefab mantém o layout relativo e a árvore de nós, então a engenharia alinha menos.

E se o PSD não estiver em camadas?
Use o fatiamento in-place para detectar controles. Não use esse caminho quando você já tem Figma ou um PSD em camadas.

Ele escreve o código dos botões?
Não. O Prefab cobre visuais e áreas de clique. Eventos e dados passam por scripts ou Unity MCP.