PSD vers Unity UGUI : découper un PSD Photoshop avec l'IA

VberAI Studio (en bref : AI Studio, ≠ Google AI Studio) fait les deux tâches dont les programmeurs UI Unity ont réellement besoin à partir d’un PSD : découper (les calques deviennent des sprites utilisables) et assembler un prefab UI (exporter un Prefab UGUI Unity que vous déposez sous le Canvas). Commencez ici : AI Studio. Glossaire : PSD.

« Utiliser l’IA pour découper un PSD et assembler un prefab UI » n’est pas une demande de filtre. Cela signifie : le designer a livré un .psd en calques — l’ingénierie peut-elle éviter « exporter les PNG → glisser les Images → ajuster les espacements → définir les ancres » ?

C’est la passation PSD to Unity prefab : les groupes Photoshop doivent devenir des nœuds sous le Canvas.

Découper et assembler un prefab ne sont pas la même étape

Tâche	Ce que vous obtenez	Encore manuel
Découpe seule	Un tas de PNG / sprites	Reconstruire position, imbrication, ancres dans la Hierarchy
Exporter un aplat	Une seule image de fond	Les boutons ne réagissent pas ; le texte n’est pas éditable
Découpe + assemblage de prefab	Des sprites et une hiérarchie Canvas / Prefab	Câbler les clics, les données, la logique de safe-area supplémentaire

L’ancien pipeline sépare ces tâches : Photoshop découpe, Unity assemble. Les plugins de type PSD2UGUI dans l’éditeur analysent à l’intérieur d’Unity et exigent généralement des règles de nommage des calques. AI Studio analyse sur un canvas de jeu : inspectez la hiérarchie, puis exportez un Prefab — pas un dépôt de fichiers épars.

La liste d’importation minute par minute se trouve dans PSD to Unity UI. Cet article est le critère d’acceptation : ce que « assemblé » signifie, et quels PSD ne s’assembleront pas proprement.

La sortie doit être prête pour UGUI

Une conversion utilisable comprend tout ce qui suit :

1. Art découpé — fonds de boutons, icônes, panneaux 9-slice en Images séparées.
2. Texte — préférez TextMeshPro, pas des glyphes gravés dans une texture (vous en avez besoin pour modifier le texte et localiser).
3. Hiérarchie — groupes → enfants, correspondant aux groupes PSD, pas tout déversé à la racine du Canvas.
4. Prefab — glissez sur un Canvas existant ; les RectTransforms correspondent approximativement aux coordonnées de design.

Cela ne remplace pas les gestionnaires OnClick, la logique de pastille rouge, les scripts de safe-area, les assets de police TMP, ni vos règles d’atlas. Ceux-ci arrivent après que le prefab est dans le projet. Avec Unity MCP installé, Cursor / Claude Code peuvent renommer les nœuds en lot et câbler les références.

Ce dont un PSD a besoin avant de pouvoir être découpé et assemblé

Le modèle ne devine pas les widgets à partir d’une affiche. Plus le fichier est proche d’une structure UI, plus le Prefab est propre.

À faire	Pourquoi
Un widget par groupe, noms lisibles (Btn_Start, Panel_HUD)	Correspond aux racines de prefab / nœuds de bouton
Garder plaque, icône et typo sur des calques séparés	Ils deviennent Image / TMP au lieu d’un seul aplat
Éviter les styles de calque imprévisibles et les modes de fusion étranges	Sinon vous obtenez un seul raster et perdez l’interaction
Livrer un .psd en calques, pas un PNG fusionné	Les comps aplatis utilisent la découpe in-place et n’ont pas de groupes PSD

Group 47, les fichiers entièrement rastérisés et les ombres estampées sur un seul calque nécessitent encore un nettoyage sur le canvas ou dans Unity. C’est une structure manquante, pas un convertisseur défaillant.

Comment le faire dans AI Studio

Les libellés des boutons suivent le panneau actuel.

1. Importer le PSD en calques

Ouvrez AI Studio et importez le .psd. Dans la liste des calques, confirmez que la barre supérieure, la barre inférieure, les dialogues et les groupes de boutons sont toujours des groupes — pas déjà aplatis.

2. Le lire comme une UI, pas comme une affiche

Vérifiez l’ordre de dessin, l’espacement et les calques de balisage masqués. Séparez les contrôles cliquables de la décoration avant l’export. Pour un alpha propre, enchaînez avec le matting.

3. Exporter un prefab UGUI, pas un dépôt de sprites

Réglez le moteur sur Unity. Préférez UI hierarchy / Prefab. Préférez TMP pour le texte ; conservez le 9-slice sur les panneaux étirables (par panneau).

4. Le déposer sur le Canvas et faire un test de fumée

Importez dans un dossier d’équipe (par ex. Assets/UI/), parentez le Prefab sous le Canvas de la scène. Lancez une fois en 16:9 et au ratio portrait cible ; cliquez le chemin principal.

Si le même écran existe dans Figma, utilisez Figma → Unity. Godot / Cocos partagent le canvas ; vous changez la cible d’export. Les noms de composants diffèrent (Control / Widget) ; la passe d’acceptation est la même.

Vérifiez ceci dans Unity en premier

• Les clics ratent — le Canvas a un Graphic Raycaster ; les Images cliquables ont Raycast Target activé.
• Mauvais type — assignez un TMP Font Asset quand ce n’est pas la police Photoshop.
• Flou — filtre de sprite, Canvas Scaler, Pixels Per Unit ; ne mettez pas à l’échelle les petites icônes au-delà de 100 %.
• Dérive des ancres — épinglez séparément le plein-bord et les barres de bord ; ajoutez la safe area dans le moteur, ne peignez pas une encoche dans le PSD.
• Nouvelle révision du PSD — refonte de la mise en page → réexportez le Prefab ; deux recoloriages de bouton → modifiez dans Unity.

vs un plugin PSD-to-UGUI dans l’éditeur

	Plugin PSD2UGUI / règles de nommage dans l’éditeur	VberAI Studio
Où il s’exécute	Fenêtre de l’éditeur Unity	Canvas de jeu dans le navigateur
Entrée	Surtout des PSD nommés pour ce plugin	PSD ; comps aplatis via découpe in-place ; Figma aussi
Après l’export	Continuer à construire dans Unity	Éditer, découper, matte sur le canvas, puis émettre un Prefab
Logique	Écrite à la main ou outils maison	Unity MCP après que le prefab est dans le projet

Les plugins conviennent aux équipes qui suivent déjà la spécification de calques du plugin. Le canvas convient aux transferts qui ont encore besoin d’une passe visuelle et d’un choix entre Unity / Godot / Cocos. Ni l’un ni l’autre ne corrige un PSD qui n’est qu’une maquette aplatie — calquez-le, ou utilisez la découpe in-place.

Pour qui

Petites équipes et programmeurs UI qui reçoivent des comps Photoshop en calques—quand « découper des PNG et ajuster les RectTransform » est trop lent, sans vouloir encore une spec PSD2UGUI figée dans l’éditeur.

Limites

• Le premier export est rarement un final livrable ; polices, locales, mouvement et safe area se finalisent encore dans le projet.
• Les styles de calque lourds peuvent s’aplatir ; vous perdez les contrôles interactifs.
• VberAI Studio ≠ Google AI Studio ; voir la comparaison.

Conclusion

Vous n’avez pas besoin d’« une découpe de plus ». Vous avez besoin que la structure PSD devienne une structure de Prefab UGUI. Les découpes sont intermédiaires ; cela compte quand vous pouvez le déposer sur le Canvas, cliquer dessus et modifier le texte. Importez un PSD en calques dans AI Studio, exportez un Prefab, puis câblez la logique dans Unity.

Questions fréquentes

Que signifie « l’IA découpe un PSD et assemble un prefab UI » ?
Les deux tâches à la fois : les calques deviennent des sprites, et les groupes PSD deviennent une hiérarchie / Prefab Unity UGUI — pas un dépôt de sprites.

VberAI peut-il construire un Prefab UGUI à partir d’un PSD ?
Oui. Importez un PSD en calques dans AI Studio, exportez une hiérarchie ou un prefab UI Unity (par panneau), parentez-le sous le Canvas et faites un test de fumée.

En quoi est-ce différent de découper des PNG ?
Les découpes PNG perdent les coordonnées et les groupes. Un prefab conserve la mise en page relative et l’arbre de nœuds, donc l’ingénierie aligne moins.

Et si le PSD n’est pas en calques ?
Utilisez la découpe in-place pour détecter les contrôles. N’utilisez pas ce chemin quand vous avez déjà Figma ou un PSD en calques.

Écrit-il le code des boutons ?
Non. Le Prefab couvre les visuels et les zones de clic. Les événements et les données passent par des scripts ou Unity MCP.