AIFreeAPI Logo

GPT Image 2, PSD со слоями и HTML: где заканчивается модель и начинается инструмент

A
4 min readГенерация изображений ИИ

API GPT Image 2 выдаёт растровые изображения. Структуру PSD создаёт Photoshop или другая программа, а HTML/CSS пишет агент программирования, который использует макет как визуальную исходную точку.

Схема на русском языке: GPT Image 2 создаёт изображение, Photoshop — редактируемый PSD, а Codex — адаптивную HTML/CSS-вёрстку с проверкой перед передачей.

У фразы «GPT Image 2 сделал PSD со слоями» могут быть три разных смысла. Модель вернула готовую картинку. ChatGPT передал работу подключённому Photoshop, где появились слои и маски. Или агент программирования разобрал изображение, создал набор ассетов и собрал страницу. Результат на экране может выглядеть одинаково, но редактировать и поддерживать его придётся совершенно по-разному.

Поэтому сначала формулируйте не название файла, а действие после передачи: дизайнер должен заменить товар и заголовок; маркетолог — быстро сделать ещё пять форматов; разработчик — подключить реальные данные и состояния интерфейса. Из этого требования уже следует подходящий результат.

Что умеет выдавать API GPT Image 2

OpenAI описывает gpt-image-2 как модель для генерации и редактирования изображений. В актуальном разделе о формате результата для Image API перечислены PNG, JPEG и WebP. По умолчанию API возвращает PNG в виде base64-кодированных данных.

PSD и HTML в этом перечне отсутствуют. API не возвращает дерево слоёв Photoshop, DOM, стили CSS, брейкпоинты или состояния кнопок. Если в конце процесса появился такой файл, его сформировала программа или агент вокруг модели.

Это не недостаток, а важная граница ответственности. Модель хорошо подходит для исходного изображения, отдельных объектов и правок по референсу. Для изолированных ассетов можно запросить прозрачный фон, но сейчас OpenAI помечает прозрачность gpt-image-2 как preview и разрешает её для PNG и WebP, не для JPEG. Прозрачный фон не означает, что все предметы автоматически станут отдельными слоями.

Маску тоже нельзя считать точным инструментом выделения. В документации OpenAI сказано, что маска направляет редактирование, но модель может не соблюдать её форму полностью. Края, мелкий текст и элементы фирменного стиля необходимо осматривать после каждого важного изменения.

Как понять, что PSD действительно редактируемый

Русскоязычный чек-лист приёмки PSD с понятными группами, редактируемым текстом, масками, заменой объекта и повторным открытием файла.
Русскоязычный чек-лист приёмки PSD с понятными группами, редактируемым текстом, масками, заменой объекта и повторным открытием файла.

Adobe называет PSD нативным форматом, который сохраняет слои, эффекты и возможности дальнейшего редактирования. Простое помещение PNG в документ и сохранение с расширением .psd формально создаст файл Photoshop, но не восстановит исходную структуру дизайна.

Полезный PSD обычно содержит небольшое число осмысленных групп: фон, главный объект, второстепенные элементы, типографика и корректирующие слои. Надписи, которые будут меняться, лучше оставить текстом. Локальную цветокоррекцию и вырезание объекта разумнее делать маской, а не необратимо стирать пиксели.

У Adobe есть официальный сценарий Photoshop for ChatGPT: результат из чата можно открыть в Photoshop в браузере и продолжить работу со слоями и масками. В примере Adobe цветовая коррекция остаётся отдельным корректирующим слоем. Следовательно, редактируемость создаёт Photoshop, хотя исходная картинка могла быть получена в чате.

Набор функций интеграции, тарифы и региональная доступность меняются. После подключения лучше сначала спросить Photoshop, какие действия доступны сейчас, а затем передать конкретные требования:

text
Подготовь изображение как редактируемый документ Photoshop. Раздели фон, персонажа, товар, надписи и декор на понятные группы. Сохрани изменяемые надписи текстовыми слоями, а локальные правки — масками. Назови слои по назначению. Перед передачей закрой и снова открой файл, затем проверь замену товара и редактирование заголовка.

Приёмка занимает несколько минут. Спрячьте каждую крупную группу; измените текст; замените объект; сдвиньте край маски; сохраните, закройте и снова откройте документ. Если под вырезанным объектом зияет пустота, шрифт превратился в растр, а любое изменение требует перерисовать всю картинку, файл плохо выполняет задачу независимо от количества слоёв.

Для передачи веб-разработчику не всегда нужен сложный PSD. Photoshop умеет экспортировать каждый слой отдельным файлом. Часто удобнее передать чисто названные изображения, шрифты, палитру и пояснения к поведению интерфейса.

Изображение в HTML: агент заново создаёт интерфейс

Сравнение ошибочной вставки скриншота как страницы и правильной HTML-реализации с семантикой, интерактивностью, адаптивностью и проверкой на трёх ширинах.
Сравнение ошибочной вставки скриншота как страницы и правильной HTML-реализации с семантикой, интерактивностью, адаптивностью и проверкой на трёх ширинах.

Скриншот показывает только один кадр при одной ширине окна. Он не сообщает, как меняется сетка на телефоне, откуда приходят данные, что происходит при загрузке, где расположен фокус клавиатуры и как экранная читалка объявляет ошибку.

Codex может принимать изображения как контекст. В официальной инструкции по изображениям OpenAI рекомендует назвать содержимое изображения, важную область, желаемый результат и ограничения. Это описание точнее термина «конвертация»: агент анализирует визуальный образец и пишет код под условия проекта.

Файл ниже откроется в браузере, но не является вёрсткой макета:

html
<main> <img src="screen.webp" alt="Скриншот всей страницы" /> </main>

Текст здесь нельзя выделить, кнопки не работают, данные не обновляются, а мобильная версия — просто уменьшенная картинка. В рабочей реализации заголовок остаётся заголовком, кнопка — кнопкой, список — списком; фотографии и иллюстрации остаются отдельными изображениями.

Хорошее задание для агента описывает не только сходство:

text
Реализуй приложенный макет в текущем проекте. Не вставляй скриншот как страницу. Сначала изучи существующие компоненты и стили. Собери контент семантическим HTML, добавь реальные интерактивные элементы и предусмотренные продуктом состояния загрузки, ошибки и недоступности. Проверь страницу при ширине 1440, 768 и 390 px, пройди её клавиатурой, исправь переполнение, ошибки загрузки ассетов и сообщения в консоли.

Если одной картинке требуются разные размеры, используйте возможности браузера. MDN объясняет, как srcset, sizes и <picture> помогают выбирать подходящий ресурс для экрана и плотности пикселей. Эти правила невозможно надёжно извлечь из одного статичного кадра — их надо определить при реализации.

Короткая схема выбора

  • Для рекламного изображения или карточки товара начните с GPT Image 2, затем организуйте PSD в Photoshop только если дизайн будут регулярно менять.
  • Для интерфейса переходите в код раньше: используйте картинку как направление, а структуру и поведение создавайте в реальном репозитории.
  • Для смешанной передачи подготовьте PSD разумной сложности, отдельную папку ассетов и работающий прототип. Не заставляйте один файл изображать все три результата.

При локальной правке через API учитывайте неточность маски; подробности запроса разобраны в нашем руководстве по редактированию изображения с маской.

Итоговая проверка формулируется просто: GPT Image 2 должен отвечать за визуальный материал, Photoshop — за редактируемую структуру, а Codex или другой агент программирования — за код и проверку в браузере. Когда у каждого этапа есть свой результат и тест, обещание «PSD со слоями и изображение в HTML» превращается из эффектной демонстрации в воспроизводимую работу.