PSD a Unity UGUI: recortar un PSD de Photoshop con IA

VberAI Studio (abreviado: AI Studio, ≠ Google AI Studio) hace los dos trabajos que los programadores de UI de Unity realmente necesitan de un PSD: cortar (las capas se convierten en sprites usables) y ensamblar un prefab de UI (exportar un Prefab UGUI de Unity que arrastras bajo el Canvas). Empieza aquí: AI Studio. Glosario: PSD.

“Usa IA para cortar un PSD y ensamblar un prefab de UI” no es una petición de filtro. Significa: el diseñador entregó un .psd con capas—¿puede ingeniería saltarse “exportar PNGs → arrastrar Images → ajustar espaciado → configurar anchors”?

Es la entrega PSD to Unity prefab: los grupos de Photoshop deben volverse nodos bajo el Canvas.

Cortar y ensamblar un prefab no son el mismo paso

Trabajo	Qué obtienes	Sigue siendo manual
Solo cortar	Un montón de PNGs / sprites	Reconstruir posición, anidamiento, anchors en la Jerarquía
Exportar un aplanado	Una sola imagen de fondo	Los botones no responden; el texto no es editable
Cortar + ensamblar prefab	Sprites y una jerarquía de Canvas / Prefab	Conectar clics, datos, lógica extra de safe-area

El pipeline antiguo separa esos trabajos: Photoshop corta, Unity ensambla. Los plugins tipo PSD2UGUI dentro del editor analizan dentro de Unity y normalmente exigen reglas de nombres de capas. AI Studio analiza sobre un canvas de juego: inspecciona la jerarquía y luego exporta un Prefab—no un volcado de archivos sueltos.

La lista de importación minuto a minuto está en PSD a Unity UI. Este artículo es el estándar de aceptación: qué significa “ensamblado” y qué PSDs no se ensamblarán limpiamente.

La salida tiene que estar lista para UGUI

Una conversión usable incluye todo esto:

1. Arte cortado — fondos de botón, iconos, paneles 9-slice como Images separadas.
2. Texto — preferir TextMeshPro, no glifos quemados en una textura (necesitas esto para cambiar el texto y localizar).
3. Jerarquía — grupos → hijos, coincidiendo con los grupos del PSD, no todo volcado en la raíz del Canvas.
4. Prefab — arrástralo sobre un Canvas existente; los RectTransforms coinciden aproximadamente con las coordenadas de diseño.

No reemplaza los manejadores OnClick, la lógica de punto rojo, los scripts de safe-area, los assets de fuente TMP ni tus reglas de atlas. Eso llega después de que el prefab está en el proyecto. Con Unity MCP instalado, Cursor / Claude Code pueden renombrar nodos en lote y conectar referencias.

Qué necesita un PSD antes de que se pueda cortar y ensamblar

El modelo no adivina widgets a partir de un póster. Cuanto más cerca esté el archivo de la estructura de UI, más limpio será el Prefab.

Haz esto	Por qué
Un widget por grupo, nombres legibles (Btn_Start, Panel_HUD)	Se mapea a raíces de prefab / nodos de botón
Mantén placa, icono y tipografía en capas separadas	Se convierten en Image / TMP en lugar de un solo horneado
Evita estilos de capa impredecibles y modos de fusión raros	De lo contrario obtienes un solo ráster y pierdes la interacción
Entrega un .psd con capas, no un PNG fusionado	Las composiciones planas usan corte in-place y no tienen grupos PSD

Group 47, archivos totalmente rasterizados y sombras estampadas en una sola capa todavía necesitan limpieza en el canvas o en Unity. Eso es falta de estructura, no un conversor fallido.

Cómo hacerlo en AI Studio

Las etiquetas de los botones siguen el panel actual.

1. Importa el PSD con capas

Abre AI Studio e importa el .psd. En la lista de capas, confirma que la barra superior, la barra inferior, los diálogos y los grupos de botones siguen siendo grupos—no ya aplanados.

2. Léelo como UI, no como un póster

Revisa el orden de dibujo, el espaciado y las capas de marcado ocultas. Separa los controles clicables de la decoración antes de exportar. Para un alfa limpio, encadena matting.

3. Exporta un prefab UGUI, no un volcado de sprites

Configura el motor a Unity. Prefiere jerarquía de UI / Prefab. Prefiere TMP para el texto; mantén 9-slice en paneles estirables (por panel).

4. Suéltalo en el Canvas y haz una prueba rápida

Impórtalo en una carpeta del equipo (p. ej. Assets/UI/), emparenta el Prefab bajo el Canvas de la escena. Ejecuta una vez en 16:9 y en la proporción vertical objetivo; haz clic en el camino principal.

Si la misma pantalla vive en Figma, usa Figma → Unity. Godot / Cocos comparten el canvas; cambias el destino de exportación. Los nombres de los componentes difieren (Control / Widget); la pasada de aceptación es la misma.

Revisa esto en Unity primero

• Los clics fallan — el Canvas tiene un Graphic Raycaster; las Images clicables tienen Raycast Target activado.
• Tipo incorrecto — asigna un TMP Font Asset cuando no sea la fuente de Photoshop.
• Desenfoque — filtro de sprite, Canvas Scaler, Pixels Per Unit; no escales iconos pequeños por encima del 100%.
• Deriva de anchors — fija a sangre completa vs barras de borde por separado; añade safe area en el motor, no pintes un notch en el PSD.
• Nueva revisión del PSD — reconstrucción de layout → reexporta el Prefab; dos recoloreados de botón → edita en Unity.

vs un plugin PSD-a-UGUI dentro del editor

	Plugin PSD2UGUI / de reglas de nombres en el editor	VberAI Studio
Dónde se ejecuta	Ventana del editor de Unity	Canvas de juego en el navegador
Entrada	Mayormente PSDs nombrados para ese plugin	PSD; composiciones planas vía corte in-place; Figma también
Después de exportar	Sigue construyendo dentro de Unity	Edita, divide, aplica matte en el canvas y luego emite un Prefab
Lógica	Escrita a mano o herramientas propias	Unity MCP después de que el prefab está en el proyecto

Los plugins encajan en equipos que ya siguen la especificación de capas del plugin. El canvas encaja en entregas que todavía necesitan una pasada visual y una elección de Unity / Godot / Cocos. Ninguno arregla un PSD que solo es un mock aplanado—ponle capas, o usa el corte in-place.

Para quién

Equipos indie y programadores UI que reciben comps Photoshop en capas—cuando «cortar PNG y ajustar RectTransform» es lento y aún no quieren una spec PSD2UGUI rígida en el editor.

Límites

• La primera exportación rara vez es un final entregable; fuentes, locales, movimiento y safe area todavía se cierran en el proyecto.
• Los estilos de capa pesados pueden aplanarse; pierdes controles interactivos.
• VberAI Studio ≠ Google AI Studio; consulta la comparación.

Cierre

No necesitas “un corte más”. Necesitas que la estructura del PSD se convierta en estructura de Prefab UGUI. Los cortes son intermedios; cuenta cuando puedes soltarlo en el Canvas, hacer clic y editar el texto. Importa un PSD con capas en AI Studio, exporta un Prefab y luego conecta la lógica en Unity.

Preguntas frecuentes

¿Qué significa “que la IA corte un PSD y ensamble un prefab de UI”?
Ambos trabajos a la vez: las capas se convierten en sprites y los grupos del PSD se convierten en una jerarquía / Prefab UGUI de Unity—no un volcado de sprites.

¿Puede VberAI construir un Prefab UGUI a partir de un PSD?
Sí. Importa un PSD con capas en AI Studio, exporta una jerarquía de UI de Unity o un prefab (por panel), emparentalo bajo el Canvas y haz una prueba rápida.

¿En qué se diferencia de cortar PNGs?
Los cortes PNG pierden coordenadas y grupos. Un prefab conserva el layout relativo y el árbol de nodos, así que ingeniería alinea menos.

¿Y si el PSD no tiene capas?
Usa el corte in-place para detectar controles. No uses esa ruta cuando ya tienes Figma o un PSD con capas.

¿Escribe el código de los botones?
No. El Prefab cubre los visuales y las áreas de impacto. Los eventos y datos van por scripts o Unity MCP.