Разделение игрового интерфейса на редактируемые слои
Превращайте скриншоты игр в отдельные UI-панели, элементы HUD, иконки и интерфейсные ассеты. Улучшайте отдельные компоненты с помощью разделения слоев на базе ИИ.
Загрузите скриншот игрового интерфейса
Используйте четкий скриншот или макет UI. Первый проход отделяет основные элементы интерфейса от сцены.
1
Нажмите или перетащите изображение для загрузки
Upload your image
JPG, PNG, WebP up to 10MB · Drag & drop anywhere
Изменить изображение
Layer Hotspots17 Layers
Hover or click box to inspect layer
Separated Layer Cutouts17 Layers
Protected Assets
2
Настройки
Создано специально для игровых интерфейсов
Первый этап разделяет элементы по функционалу: полоски, панели, кнопки меню, мини-карта, персонаж и сцена. Плотную полосу (например, панель навыков) можно разбить на части дополнительно — когда вам это потребуется.
HUD и шкалы состоянияМини-карта и менюПанели навыков и хотбарыЧат и диалоговые панели
Стоимость запуска60 кред.
Загрузите изображение, чтобы продолжить
Конфиденциальная обработка файлов
Загруженные файлы привязываются к вашему аккаунту и передаются по защищенным (подписанным) URL-адресам. Вы можете вручную удалять завершенные задачи.
Результат: PNG с прозрачным фоном
Функция «Детализированные слои» сохраняет каждый обнаруженный элемент как отдельный слой на прозрачном фоне.
Для лучшего результата используйте:
- Полный скриншот без кадрирования
- Высокое разрешение без сильного сжатия
- Минимум наложений интерфейса на эффекты
- Статичный кадр без размытия в движении
- HUD, полоски состояния и панели как отдельные слои
- Персонаж и сцена разделены
- Разбивка выбранной панели на кнопки
- Перемещение, скрытие и экспорт в редакторе слоев
Реальные результаты
От одного скриншота к отдельным UI-компонентам
Два реальных запуска на одном скриншоте игры. Первый отделяет интерфейс от сцены. Второй берет один из слоев — панель навыков — и разделяет его еще сильнее.
Шаг 1: разделение скриншота
Персонаж и фон сцены отделяются от интерфейса, а каждая полоска, панель, кнопка меню и иконка становятся самостоятельными слоями.
Шаг 2 (необязательно): углубленное разделение слоя
Панель навыков после первого шага была единым слоем. Запущенная отдельно, она распалась на десять кнопок, две статуи и основу панели.
Чего ожидать
Каждый слой перерисовывается нейросетью, поэтому при сборке всех элементов обратно вы получите изображение, близкое к оригиналу, но не точную копию. Размеры и расположение могут немного отличаться (наиболее заметно на плотных полосах вроде панели навыков), а слой может оказаться чуть больше оригинального фрагмента. Проверяйте мелкий текст, цифры и тонкие иконки перед использованием слоя.
Как это работает
Два шага, второй — за вами
1
Загрузите скриншот
Первый проход отделяет основные компоненты интерфейса и персонажа от сцены.
2
Проверьте слои
Выбирайте слои в редакторе, перемещайте или скрывайте их и сравнивайте со скриншотом.
3
Выберите слой для детализации
Выберите конкретный слой, например, панель навыков. Стоимость в кредитах отображается до запуска.
4
Используйте элементы
Новые фрагменты заменят этот слой в редакторе. Вы можете вернуть исходный слой или отменить действие в любой момент, а затем экспортировать результат.
Для разработчиков игр
Извлекайте элементы интерфейса из плоского скриншота
Скриншот или концепт-кадр содержит весь интерфейс в виде единого изображения. Разделение дает вам шкалы, панели и иконки в виде прозрачных слоев, которые можно перемещать, перестилизовывать или воссоздавать в собственном пайплайне UI.
Инструмент разделяет графику. Он не воссоздает интерфейс в виде готовых объектов игрового движка.
- Прототипируйте макеты по референсному кадру
- Извлекайте элементы HUD для редизайна
- Воссоздавайте UI-макет по существующему скриншоту
- Собирайте иконки и рамки для изучения стиля
Для UI-дизайнеров
Работайте с компонентами, а не с цельной картинкой
Когда шкалы, панели и кнопки становятся отдельными слоями, вы можете менять их порядок, скрывать ненужные и экспортировать результат.
Слои сохраняют свое положение на холсте, поэтому вы можете подвинуть один элемент, не затронув остальные.
- Полоски здоровья и маны
- Мини-карта и ее обрамление
- Кнопки меню и заданий
- Панели чата и диалогов
- Счетчики, таймеры и отдельные иконки
Для создателей ассетов
Собирайте коллекцию многоразовых элементов
Иконки, кнопки и орнаменты превращаются в отдельные прозрачные PNG-слои. Используйте только ту графику, на которую у вас есть права.
- Иконки навыков и способностей
- Декоративные рамки и статуи
- Значки валюты и статусов
- Декоративные уголки
Зачем нужны два шага
У одного прохода есть лимит слоев
Каждый запуск выдает фон и до 16 разделенных слоев. На полном игровом экране элементов больше, поэтому первый проход объединяет плотные ряды вместе, вместо того чтобы кромсать каждую кнопку.
Второй шаг обрабатывает один выбранный слой индивидуально, позволяя модели потратить все лимиты слоев только на этот компонент.
Первый проход
Компоненты, а не осколки
Первый проход нацелен на функциональные компоненты, а не на крупные визуальные зоны: шкала вместе с ее подписью остается единым целым, а кнопка меню не отрывается от своей иконки.
Фон сцены сохраняется как отдельный слой, а стоящий на ней персонаж отделяется от заднего плана.
- Полоски здоровья и шкала опыта
- Полосы боссов и целей
- Мини-карта и кнопки меню
- Окна чата и диалогов
- Персонаж и сцена
Остаются цельными
Некоторые ряды выходят единым слоем
Ряды похожих кнопок (например, панель способностей) на первом проходе часто возвращаются в виде одного общего слоя. Именно для этого и нужен второй шаг.
Но даже в этом случае нет гарантии, что очень плотная полоса разделится абсолютно на каждую кнопку.
Ограничения
Чего этот инструмент не делает
Он не выдает покадрово точные обрезки вашего скриншота и не гарантирует, что каждый элемент интерфейса станет отдельным слоем.
Он не создает файлы для игровых движков вроде префабов Unity, виджетов Unreal или сцен Godot, а также не распознает за вас функционал кнопок или текст.
- Мелкий текст и цифры стоит проверять визуально
- Тонкие линии и свечение могут получиться немного иначе
- Перекрывающиеся элементы могут остаться на одном слое
Подготовка
Как добиться более чистящего разделения
Используйте полный кадр в максимально возможном разрешении. Изстагайтесь делать скриншоты во время размытия в движении, тряски экрана или обилия частиц.
Если вам нужна всего одна панель, обрежьте ее заранее или запустите первый проход, а затем углубите разделение нужного слоя.
- Полный кадр без кадрирования
- Высокое разрешение
- Статичный момент
- Интерфейс не перекрыт эффектами
Использование слоев
Редактируйте, меняйте порядок и экспортируйте
В редакторе слоев вы можете перемещать, масштабировать, скрывать, блокировать и упорядочивать слои, применять маски и настройки, а также экспортировать композицию как картинку.
Архивы ZIP и файлы PSD содержат разделенные слои. Слой, прошедший дополнительную детализацию, экспортируется по частям. Для экспорта в PSD требуется платный тариф.
Кредиты
Узнавайте стоимость до начала работы
Каждый запуск расходует кредиты, и их стоимость показывается заранее. Дополнительное разделение слоя — это отдельная опциональная задача: плата списывается только после вашего подтверждения.
Если запуск завершился ошибкой, кредиты возвращаются автоматически.
Часто задаваемые вопросы об «Интерфейсе игры в слои»
Что делает инструмент «Интерфейс игры в слои»?
Он разделяет скриншот игры на прозрачные слои: полоски здоровья, панели, кнопки меню, мини-карту, иконки, персонажа и фон сцены. Затем вы можете перемещать, скрывать и экспортировать их в редакторе слоев.
Каждая ли кнопка станет отдельным слоем?
Не на первом проходе. Каждый запуск выдает фон и до 16 разделенных слоев, поэтому ряды одинаковых кнопок обычно остаются вместе. Вы можете разбить этот слой дальше на втором этапе, но даже тогда нет гарантии полного распада на мельчайшие элементы.
Как получить отдельные кнопки навыков?
Запустите первый проход, выберите слой панели навыков в редакторе и нажмите «Разделить этот слой дальше». В нашем реальном тестировании панель навыков распалась на десять кнопок, две статуи и основу панели.
Придется ли мне платить дважды?
Только по вашему желанию. Первый проход — это одна задача. Дополнительное разделение слоя — это отдельный необязательный шаг, стоимость которого показывается до запуска. Неуспешные запуски возмещаются автоматически.
Являются ли слои точными обрезками моего скриншота?
Нет. Каждый слой заново перерисовывается моделью. При сборке обратно фрагменты очень близки к скриншоту, но не идентичны, а размеры или позиции могут слегка отличаться.
Сохраняется ли текст в интерфейсе?
Текст и цифры обычно сохраняются, но мелкий или тонкий шрифт может измениться. Обязательно проверяйте каждый слой с текстом или цифрами перед использованием.
Могу ли я использовать результат в Unity, Unreal или Godot?
Вы получаете прозрачные PNG-слои и экспортируемую композицию. Инструмент не создает префабы Unity, виджеты Unreal или файлы других игровых движков, поэтому вам нужно будет самостоятельно импортировать изображения в ваш проект.
Сколько слоев может вернуть один запуск?
Фон плюс до 16 разделенных слоев за один проход.
Что происходит со сценой и персонажем?
Фон сцены сохраняется как самостоятельный слой. Персонаж, стоящий на сцене, отделяется от нее, а фон позади него восстанавливается.
Можно ли восстановить исходный слой после его углубленного разделения?
Да. Исходный слой сохраняется и скрывается, пока отображаются его части. Кнопка «Восстановить исходный слой» вернет его обратно, также работает обычная отмена действия.
Какие скриншоты подходят лучше всего?
Полный статичный кадр в высоком разрешении, без размытия в движении и тяжелых визуальных эффектов поверх интерфейса. Наличие четких отступов между элементами сильно помогает.
Какие форматы экспорта доступны?
Вы можете скачать слои в ZIP-архиве, экспортировать композицию как PNG или скачать PSD (на платном тарифе). Слой, разделенный дополнительно, экспортируется по своим частям.
Могу ли я использовать скриншоты из любых игр?
Используйте только ту графику, на которую у вас есть права. Скриншоты чужих игр или арты, защищенные чужой лицензией, могут не подлежать редактированию или распространению.
Могу ли я редактировать разделенные элементы с помощью ИИ?
Элементы можно перемещать, маскировать, настраивать и скачивать в редакторе. ИИ-модификации, апскейл и удаление фона применяются к исходным слоям.
Превратите свой игровой скриншот в отдельные UI-слои
Загрузите скриншот, проверьте разделенные компоненты и углубляйте детализацию только для тех слоев, которым это необходимо.
Разделить игровой UIСтоимость в кредитах отображается перед каждым запуском.