Как импортировать PSD в Unity UI: Photoshop → префаб за 5 минут

Как импортировать PSD в Unity UI

PSD из Photoshop → Unity UI (Юнити): загрузите многослойный .psd в VberAI Studio, проверьте группы слоёв, экспортируйте префаб под Canvas — имена и иерархия сохраняются, без ручной сборки каждого RectTransform.

Пять минут по шагам:

1. Загрузка PSD — группы = виджеты (Btn_Start, Panel_HUD)
2. Предпросмотр на холсте Studio
3. Маппинг — Unity, TextMeshPro, 9-slice для панелей
4. Export to Unity → импорт в Assets/UI/
5. Canvas + Play — проверка 16:9 и мобильного aspect

Альтернатива Unity PSD Importer — ручная привязка слоёв; Studio даёт готовую иерархию uGUI. После импорта логику кнопок можно доработать через Unity MCP.

Что нужно перед началом

Соберите это перед открытием Unity:

• Unity 2022.3 LTS или Unity 6 (UI Toolkit опционален; это руководство фокусируется на uGUI)
• Многослойный PSD (не сплющенный PNG-экспорт)
• VberAI Studio на VberAI (AI Studio)
• Пустой или существующий проект Unity с Canvas в сцене (рекомендуется Scale With Screen Size)

Контрольный список гигиены PSD (экономит больше всего времени):

Практика	Почему это важно
Один логический виджет на группу слоев	Чисто отображается на корни префабов
Согласованные имена (Btn_Start, Panel_HUD)	Легче найти в иерархии Unity
Избегайте эффектов, которые Photoshop объединяет непредсказуемо	Меньше ручных исправлений на компонентах Image
Экспортируйте @1x или документируйте масштаб	Предотвращает oversized RectTransform’ы

5-минутный рабочий процесс с AI Studio

Минута 1 — Загрузите и проверьте слои

1. Откройте AI Studio и создайте новый импорт из PSD.
2. Загрузите ваш .psd файл.
3. На панели слоев убедитесь, что группы соответствуют блокам UI (заголовок, подвал, строка кнопок, всплывающее окно).

AI Studio сохраняет структуру PSD вместо того, чтобы давать вам один текстурный атлас, который нужно реконструировать.

Минута 2 — Предпросмотр на холсте

1. Выберите корневой артборд или группу основного экрана.
2. Используйте центральный холст для проверки интервалов, шрифтов и порядка наложения.
3. Исправьте очевидные проблемы в инспекторе (переименуйте группы, скройте отладочные слои).

Если слой явно декоративный или интерактивный, отметьте или сгруппируйте его сейчас — это уменьшит очистку в Unity.

Минута 3 — Сопоставьте с семантикой Unity UI

В настройках экспорта:

• Целевой движок: Unity
• Тип вывода: префаб UI / готовая к сцене иерархия (не только сырые спрайты)
• Предпочитать TextMeshPro для текстовых слоев, если доступно
• Сохранять кандидаты на 9-slice (панели, кнопки) как изменяемые изображения

AI Studio переводит слои дизайна в концепции движка: RectTransform layout, Image спрайты и текстовые компоненты — а не просто сплющенные PNG, помещенные на Canvas.

Минута 4 — Экспорт в Unity

1. Нажмите Export to Unity (или скачайте пакет Unity / патч проекта, в зависимости от вашего рабочего процесса Studio).
2. В Unity импортируйте пакет в Assets/UI/ (или в папку вашей команды).
3. Откройте сгенерированный префаб — проверьте дочерние элементы Canvas и якоря.

Вы должны увидеть иерархию префаба, которая отражает ваши группы PSD, готовую к перетаскиванию под существующий Canvas.

Минута 5 — Поместите в сцену и протестируйте

1. Перетащите префаб в Canvas вашей сцены.
2. Войдите в Play Mode и протестируйте при 16:9 и высоком соотношении сторон телефона.
3. Отметьте любые проблемы с якорями или запасными шрифтами; настройте в режиме префаба, пока не возвращаясь к PSD.

Если вы также используете Unity MCP для автоматизации редактора, вы можете попросить вашего AI-клиента переименовать узлы пакетно или привязать ссылки на кнопки после импорта — полезно, когда в PSD были общие имена слоев, такие как Group 47.

Ручная альтернатива (когда вы пропускаете AI Studio)

Без автоматизации классический путь:

1. Экспорт срезов из Photoshop в PNG
2. Импорт спрайтов в Unity
3. Ручное создание объектов Image / Text
4. Восстановление макета с помощью якорей RectTransform

Это часто занимает 30–90 минут для одного экрана, поэтому команды принимают инструмент “дизайн-движок” для повторяющейся работы с UI.

Частые исправления после импорта

Текст выглядит неправильно — Назначьте ассет шрифта TMP, соответствующий вашему языку дизайна; запасные шрифты часто отличаются от Photoshop.

Размытый UI на устройстве — Проверьте Reference Resolution Canvas и Pixels Per Unit спрайта; избегайте масштабирования маленьких иконок выше 100%.

Кнопки не нажимаются — Убедитесь, что на Canvas есть Graphic Raycaster и Raycast Target включен на интерактивных Image.

Безопасная зона обрезана на iPhone — Добавьте корневую группу макета Safe Area или отступы на корне префаба.

Когда переимпортировать vs патчить в Unity

Ситуация	Рекомендация
Дизайнер изменил цвета на 2 кнопках	Патчить префаб в Unity
Макет перестроен (новая вкладка меню)	Переимпортировать PSD в AI Studio
Добавлен новый экран	Новый артборд PSD → новый префаб
Добавлена локализация	Предпочитать TMP + таблицы строк в Unity

Сохранение PSD как источника истины для макета, а Unity — для соединения и поведения, позволяет избежать проблем со слиянием.

Как это вписывается в стек VberAI

VberAI Studio обрабатывает дизайн → структуру Unity UI. Unity MCP (опционально) помогает скриптовать повторяющиеся задачи редактора после импорта — привязка кнопок, замена спрайтов или проверка ссылок префабов. AI Super Matting полезен, когда слои иконок нуждаются в чистом альфа-канале перед тем, как стать компонентами Image.

Вместе они сокращают цикл от макета до играбельного UI, не отказываясь от Photoshop как инструмента дизайна, который уже используют ваши художники.

Заключение

Импорт PSD в Unity UI за пять минут реален, если рассматривать PSD как структурированные данные, а не одно изображение, и использовать AI Studio для создания готовой к Unity иерархии вместо ручной работы с RectTransform. Подготовьте именованные группы слоев, экспортируйте с семантикой Unity UI, поместите префаб под ваш Canvas и протестируйте два соотношения сторон.

Готовы попробовать на вашем следующем экране? Откройте VberAI Studio, загрузите многослойный PSD и экспортируйте ваш первый префаб Unity UI за один присест.

Часто задаваемые вопросы

Как импортировать PSD в Unity UI?
Многослойный PSD в VberAI Studio → экспорт префаба → drag под Canvas. Пошагово — раздел «5-минутный workflow» выше.

PSD to Unity — как сохранить маппинг слоёв?
Именуйте группы в Photoshop как виджеты; Studio переносит группы в GameObject/префаб, а не один атлас.

Чем это лучше Unity PSD Importer?
PSD Importer тянет спрайты; иерархию Canvas часто собирают вручную. Studio ориентирован на готовую UI‑иерархию.

Что делать после импорта спрайта/PSD, если выглядит не так?
Проверьте Canvas Scaler, PPU, TMP‑шрифты — см. Figma→Unity: почему спрайт выглядит иначе (те же причины для PSD).