PSD to Unity UGUI: tagliare un PSD Photoshop con l'IA

VberAI Studio (in breve: AI Studio, ≠ Google AI Studio) svolge i due compiti che i programmatori di UI di Unity cercano davvero da un PSD: suddividere (i livelli diventano sprite utilizzabili) e assemblare un prefab UI (esportare un Prefab UGUI di Unity da inserire sotto Canvas). Inizia qui: AI Studio. Glossario: PSD.

“Usa l’IA per suddividere un PSD e assemblare un prefab UI” non è una richiesta di filtro. Significa: il designer ha consegnato un .psd a livelli—l’ingegneria può saltare “esporta PNG → trascina Image → aggiusta la spaziatura → imposta gli anchor”?

Suddividere e assemblare un prefab non sono lo stesso passaggio

Compito	Cosa ottieni	Ancora manuale
Solo suddivisione	Un mucchio di PNG / sprite	Ricostruire posizione, annidamento, anchor nella Hierarchy
Esportare un flatten	Una singola immagine di sfondo	I pulsanti non rispondono; il testo non è modificabile
Suddividere + assemblare il prefab	Sprite e una gerarchia Canvas / Prefab	Collegare click, dati, logica extra di safe-area

La vecchia pipeline separa questi compiti: Photoshop suddivide, Unity assembla. I plugin in-editor in stile PSD2UGUI analizzano dentro Unity e di solito richiedono regole di denominazione dei livelli. AI Studio analizza su una game canvas: ispeziona la gerarchia, poi esporta un Prefab—non un mucchio di file sciolti.

L’elenco minuto per minuto dell’importazione è in PSD to Unity UI. Questo articolo è il criterio di accettazione: cosa significa “assemblato” e quali PSD non si assembleranno in modo pulito.

L’output deve essere pronto per UGUI

Una conversione utilizzabile include tutto quanto segue:

1. Grafica suddivisa — sfondi dei pulsanti, icone, pannelli 9-slice come Image separate.
2. Testo — preferisci TextMeshPro, non glifi bruciati in una texture (ti serve per cambiare il testo e localizzare).
3. Gerarchia — gruppi → figli, corrispondenti ai gruppi del PSD, non tutto scaricato alla radice del Canvas.
4. Prefab — trascinalo su un Canvas esistente; i RectTransform corrispondono all’incirca alle coordinate di design.

Non sostituisce i gestori OnClick, la logica del punto rosso, gli script di safe-area, gli asset dei font TMP o le tue regole di atlante. Questi arrivano dopo che il prefab è nel progetto. Con Unity MCP installato, Cursor / Claude Code possono rinominare i nodi in batch e collegare i riferimenti.

Cosa serve a un PSD prima che possa essere suddiviso e assemblato

Il modello non indovina i widget da un poster. Più il file è vicino alla struttura UI, più il Prefab sarà pulito.

Fai questo	Perché
Un widget per gruppo, nomi leggibili (Btn_Start, Panel_HUD)	Si mappa alle radici del prefab / ai nodi dei pulsanti
Tieni piastra, icona e testo su livelli separati	Diventano Image / TMP invece di un’unica cottura
Evita stili di livello imprevedibili e modalità di fusione strane	Altrimenti ottieni un unico raster e perdi l’interattività
Consegna un .psd a livelli, non un PNG unito	Le composizioni piatte usano la suddivisione in-place e non hanno gruppi PSD

Group 47, file completamente rasterizzati e ombre impresse su un unico livello richiedono comunque una pulizia sulla canvas o in Unity. Questa è struttura mancante, non un convertitore fallito.

Come farlo in AI Studio

Le etichette dei pulsanti seguono il pannello corrente.

1. Importa il PSD a livelli

Apri AI Studio e importa il .psd. Nell’elenco dei livelli, conferma che barra superiore, barra inferiore, finestre di dialogo e gruppi di pulsanti siano ancora gruppi—non già appiattiti.

2. Leggilo come UI, non come un poster

Controlla l’ordine di disegno, la spaziatura e i livelli di markup nascosti. Separa i controlli cliccabili dalla decorazione prima dell’esportazione. Per un alpha pulito, concatena il matting.

3. Esporta un prefab UGUI, non un mucchio di sprite

Imposta il motore su Unity. Preferisci gerarchia UI / Prefab. Preferisci TMP per il testo; mantieni il 9-slice sui pannelli estensibili (per pannello).

4. Inseriscilo su Canvas e fai uno smoke test

Importalo in una cartella del team (es. Assets/UI/), imposta il Prefab come figlio del Canvas della scena. Avvia una volta in 16:9 e al rapporto portrait di destinazione; clicca il percorso principale.

Se la stessa schermata vive in Figma, usa Figma → Unity. Godot / Cocos condividono la canvas; cambi il target di esportazione. I nomi dei componenti differiscono (Control / Widget); il passaggio di accettazione è lo stesso.

Controlla prima queste cose in Unity

• I click non colpiscono — il Canvas ha un Graphic Raycaster; le Image toccabili hanno Raycast Target attivo.
• Tipo sbagliato — assegna un TMP Font Asset quando non è il font di Photoshop.
• Sfocatura — filtro sprite, Canvas Scaler, Pixels Per Unit; non scalare icone minuscole oltre il 100%.
• Deriva degli anchor — fissa separatamente full-bleed e barre ai bordi; aggiungi la safe area nel motore, non dipingere un notch nel PSD.
• Nuova revisione del PSD — ricostruzione del layout → riesporta il Prefab; due ricolorazioni di pulsanti → modifica in Unity.

vs un plugin PSD-to-UGUI in-editor

	Plugin PSD2UGUI in-editor / a regole di denominazione	VberAI Studio
Dove viene eseguito	Finestra dell’editor di Unity	Game canvas nel browser
Input	Per lo più PSD denominati per quel plugin	PSD; composizioni piatte tramite suddivisione in-place; anche Figma
Dopo l’esportazione	Continui a costruire dentro Unity	Modifica, suddividi, matte sulla canvas, poi emetti un Prefab
Logica	Scritta a mano o strumenti fatti in casa	Unity MCP dopo che il prefab è nel progetto

I plugin si adattano a team che già seguono le specifiche dei livelli del plugin. La canvas si adatta a handoff che richiedono ancora un passaggio visivo e una scelta tra Unity / Godot / Cocos. Nessuno dei due risolve un PSD che è solo un mock appiattito—mettilo a livelli, o usa la suddivisione in-place.

Limiti

• La prima esportazione è raramente un finale spedibile; font, locale, movimento e safe area si chiudono comunque nel progetto.
• Stili di livello pesanti possono appiattirsi; perdi i controlli interattivi.
• VberAI Studio ≠ Google AI Studio; vedi il confronto.

Conclusione

Non ti serve “un’altra suddivisione”. Ti serve che la struttura del PSD diventi struttura di Prefab UGUI. Le suddivisioni sono intermedie; conta quando puoi inserirlo su Canvas, cliccarlo e modificare il testo. Importa un PSD a livelli in AI Studio, esporta un Prefab, poi collega la logica in Unity.

Domande frequenti

Cosa significa “l’IA suddivide un PSD e assembla un prefab UI”?
Entrambi i compiti insieme: i livelli diventano sprite e i gruppi del PSD diventano una gerarchia / Prefab UGUI di Unity—non un mucchio di sprite.

VberAI può costruire un Prefab UGUI da un PSD?
Sì. Importa un PSD a livelli in AI Studio, esporta una gerarchia o un prefab UI di Unity (per pannello), impostalo come figlio sotto Canvas e fai uno smoke test.

In cosa è diverso dal suddividere PNG?
Le suddivisioni PNG perdono coordinate e gruppi. Un prefab mantiene il layout relativo e l’albero dei nodi, quindi l’ingegneria allinea meno.

E se il PSD non è a livelli?
Usa la suddivisione in-place per rilevare i controlli. Non usare quel percorso quando hai già Figma o un PSD a livelli.

Scrive il codice dei pulsanti?
No. Il Prefab copre la grafica e le aree di click. Eventi e dati passano attraverso script o Unity MCP.