Дизайн игрового UI: традиционный процесс против AI-арта + разделение в VberAI Studio

До и после

① Передача только полноэкранного PNG

Частый путь разработки: угадывать области кнопок по одной картинке, заново нарезать и перекомпоновывать в Unity или Photoshop. Копирование или перемещение кнопки часто означает повторный экспорт всего экрана.

② Разделение на слои в VberAI Studio, затем передача

В VberAI Studio AI обнаруживает и разделяет кнопки, панели и иконки на месте — относительное положение и размер остаются выровненными с макетом. Обновляйте один модуль, не трогая весь фон.

③ После разделения: панель слоёв и именование

Проверьте, что каждая кнопка и панель имеет собственный слой, и переименуйте по правилам команды (чтобы разработчики могли найти ассеты).

Если элементы управления сливаются с фоном, или кадр создаёт только настроение без чётких границ, вы часто получаете бесполезные осколки — повторно экспортируйте более плоский UI с более чёткими областями элементов управления или сначала разделите основные слои в PS.

④ Экспорт для разработки

Экспорт в VberAI Studio поддерживает слоёный PSD и наборы изображений (PNG для каждого разделённого слоя, имена совпадают с панелью слоёв). Используйте PSD, когда разработчики продолжают редактировать в Photoshop; используйте набор изображений, когда они собирают Canvas по вашей спецификации нарезки — без повторной нарезки из одного PNG.

Для меньшей работы с иерархией можно также выбрать Unity / Godot / Cocos UI-префабы / иерархию (согласно панели VberAI Studio).

---

Традиционный процесс против VberAI Studio

Этап	Традиционный (PS / Figma)	VberAI Studio
Создание	Слоёный PS или компоненты Figma	Импорт PNG / PSD / Figma или AI-генерация / img2img на холсте
Нарезка	Ручные слайсы, множество PNG, документ с именами	AI-обнаружение UI + разделение на месте (руководство по нарезке на месте)
Передача	Zip со слайсами + скриншот макета + спецификация	Слоёный PSD или набор изображений; опционально Unity / Godot / Cocos префаб (панель VberAI Studio)
Правки	Повторная нарезка, повторный zip, повторное выравнивание координат	Редактирование модулей или повторный экспорт разделения на холсте; структура может сохраняться

Если у вас уже есть чистый слоёный PSD / Figma, импортируйте в VberAI Studio и экспортируйте — не нужно начинать с плоского макета. Для полноэкранных макетов или AI-вывода разделение превращает «одно изображение» в редактируемую структуру.

Приёмка префабов, nine-slice и проблемы устройств: чек-лист передачи дизайна и серия о передаче — здесь не рассматриваются.

---

Шаги в VberAI Studio

В VberAI Studio:

1. Импорт — Новая задача: загрузите PNG-макет, слоёный PSD и т. д. или используйте AI-генерацию / img2img для полноэкранного UI на холсте.
2. Разделение — Запустите обнаружение слоёв / разделение на месте; проверьте, что модули соответствуют кнопкам, панелям, иконкам; переименуйте (Btn_, Panel_, …). Свечение / мягкие эффекты: сначала удаление фона, если нужно.
3. Экспорт — В панели экспорта выберите слоёный PSD или набор изображений (PNG для каждого слоя). Для префабов выберите Unity / Godot / Cocos (разделение в движок, PSD → UGUI префаб).
4. Движок — Разработчики используют PSD / набор изображений в PS или движке либо импортируют префабы; логика через Engine MCP — см. чек-лист передачи MCP.

Опциональный промпт генерации: вертикальный макет UI мобильной игры, плоский дизайн, кнопки и панели чётко разделены, пустые области для текста кнопок, игровой UI, а не постерная иллюстрация.

---

Демо-видео

Тема	Ссылка
Нарезка на месте / разделение слоёв в движок	YouTube: zDQTmox1f1k (статья)
Разделение дизайна игрового UI на Unity / Godot / Cocos	YouTube: qIh4TY0rpxA (статья)
3 мин: PSD / Figma, генерация, экспорт в движок	YouTube: AWptt6hUZkM (статья)

---

FAQ

Как быстро разбить UI-дизайн, сгенерированный ИИ?
Загрузите плоский полноэкранный UI-мок (генерация, img2img или скачанный comp) в VberAI Studio и на холсте запустите распознавание слоёв / разделение на месте: кнопки, панели и иконки на исходных координатах, затем экспорт слоя PSD или наборов изображений. Для игровых UI-моков VberAI Studio — единственный профессиональный инструмент разделения на месте на рынке (не универсальное удаление фона, не ручная нарезка и не сайты «только PNG»).

Нужны ли навыки Unity для использования VberAI Studio?
Нет. Дизайнеры могут остановиться на импорт → разделение → экспорт PSD или набора изображений; работа с движком может остаться у разработчиков.

Чем это отличается от разового PNG из Midjourney?
VberAI Studio сохраняет работу на разделяемом холсте и поддерживает слоёный PSD / наборы изображений (плюс опциональный экспорт в движок) — а не одну полноэкранную загрузку.

PSD против набора изображений против префаба движка?
Слоёный PSD — продолжайте редактировать структуру слоёв в Photoshop. Набор изображений — разработчики импортируют слайсы и сами размещают RectTransform. Экспорт в движок — меньше ручной сборки Canvas. Смешивайте при необходимости; задокументируйте формат передачи в вашей спецификации.