AIFreeAPI Logo

Как сделать редактируемый PSD из изображения GPT Image 2

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

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

Схема подготовки изображения GPT Image 2, документа со слоями и веб-страницы.

GPT Image 2 не выдаёт PSD напрямую через Image API. Документация OpenAI перечисляет PNG, JPEG и WebP. PSD можно собрать из результата в Photopea, Photoshop или другой программе, которая умеет сохранять этот формат. Если файл создаёт инструмент внутри чата, слои формирует этот инструмент.

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

Подготовьте материалы под нужные изменения

Предположим, у вас есть сгенерированный рекламный баннер с флаконом, заголовком и ценой. Заказчик хочет менять цену и переставлять флакон. Полезный результат — фон, отдельный флакон и две редактируемые надписи. Делить каждый блик на собственный слой ради числа слоёв не требуется.

Если генерация ещё впереди, удобнее подготовить фон без товара и надписей, отдельно получить товар, а текст набрать в редакторе. Для уже готового баннера сохраните оригинал как образец и подготовьте два дополнительных материала:

  • Подложку без переносимых объектов и старых надписей. Освободившиеся места нужно восстановить: дорисовать в редакторе или получить подходящую версию фона с помощью редактирования изображения.
  • Изолированные объекты. Вырежьте нужный предмет с маской либо подготовьте отдельное изображение с прозрачностью. Маска позволяет позже изменить край, сохранив скрытую часть исходного изображения.

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

Прозрачность в gpt-image-2 на момент обновления статьи доступна в статусе preview. В руководстве OpenAI описаны background="transparent" и формат PNG или WebP; для PNG параметр output_compression нужно опустить. JPEG не сохраняет альфа-канал. В стороннем интерфейсе соответствующая настройка может быть недоступна.

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

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

Соберите PSD в Photopea и проверьте его правкой

Для этого способа нужны подготовленный фон, отдельные объекты и текст надписей. Он не зависит от наличия инструмента Photoshop в чате. В Photoshop можно собрать аналогичный документ; ниже приведены названия команд Photopea.

Проверка PSD на примере рекламного макета: слои, текст, маски и повторное открытие файла.
Проверка PSD на примере рекламного макета: слои, текст, маски и повторное открытие файла.
  1. Откройте подложку. В Photopea выберите File > Open и загрузите фон нужного размера. Это основа документа. Если у вас пока только исходная плоская картинка, её открытие создаст документ с этой картинкой, а подготовку фона и объектов придётся выполнить отдельно.
  2. Добавьте товар. Перетащите подготовленный файл в основную область уже открытого документа, на холст. По инструкции Photopea такой импорт добавляет изображение как слой смарт-объекта. Не бросайте файл на верхнюю полосу вкладок: это другой способ открытия. Подберите положение и размер предмета, затем дайте слою понятное имя.
  3. Наберите изменяемые надписи заново. Выберите инструмент текста и создайте отдельные слои для заголовка и цены. Подберите шрифт, кегль, межстрочный интервал и цвет по образцу. В панели слоёв у текстового слоя есть значок T; Photopea описывает его в руководстве по тексту. Буквы внутри PNG остаются пикселями. Даже распознанный текст ещё требует настройки шрифта и размещения.
  4. Проверьте независимость элементов. Сдвиньте товар в сторону: на фоне не должно остаться его копии или пустого отверстия. Замените цену и заголовок, проверьте переносы строк. Если под новой надписью видна старая, вернитесь к подложке и уберите растровый текст.
  5. Сохраните документ через File > Save as PSD. Экспорт PNG или JPEG нужен для просмотра, а не для сохранения редактируемой структуры. PSD сохраняет уже созданные слои; он не восстанавливает исходный дизайн автоматически.
  6. Откройте сохранённый PSD повторно. Лучше в программе, в которой будет работать получатель. Ещё раз измените текст, переместите предмет и проверьте прозрачность. Убедитесь, что нужный шрифт доступен и после его загрузки строки выглядят ожидаемо.

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

Сохраняйте столько структуры, сколько нужно для предстоящих изменений. Фон можно оставить растром, товар — отдельным изображением с маской, а цену — текстом. Это вновь собранный макет, а не восстановленный оригинал со всеми слоями, шрифтами и скрытыми пикселями.

Если вы хотите продолжить работу через Adobe в ChatGPT

В старых инструкциях встречается подключение Photoshop for ChatGPT. В актуальной справке Adobe от 6 августа 2026 года указано, что его заменил плагин Adobe. В описанном интерфейсе вход находится в боковой панели Plugins: найдите Adobe и выберите Install plugin. Для прежнего подключения Adobe предлагает подключиться заново. Наличие этого пункта и доступность инструментов следует проверить в своём аккаунте.

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

Апрельский урок Adobe показывает передачу через Open in Photoshop, при которой коррекция Hue/Saturation остаётся отдельным корректирующим слоем с маской. Этот пример объясняет сохранение выполненной правки. Он не доказывает, что интеграция автоматически превратит все предметы и буквы исходной картинки в независимые редактируемые элементы. Скачанный файл проверяйте теми же действиями: изменить надпись, передвинуть объект, сохранить и открыть снова.

Когда результат нужен для HTML/CSS

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

Codex принимает изображения как контекст; инструкция OpenAI рекомендует описывать желаемый результат, важные области и ограничения. При реализации страницы агент пишет HTML/CSS и логику по визуальному образцу. Это отдельная работа после генерации картинки.

Сравнение страницы из скриншота с HTML-интерфейсом и проверка вёрстки на разных экранах.
Сравнение страницы из скриншота с HTML-интерфейсом и проверка вёрстки на разных экранах.

Передайте разработчику или агенту:

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

Photoshop умеет экспортировать слои отдельными файлами. Для веб-страницы экспортируйте фотографии, товар и декоративную графику, а надписи и кнопки реализуйте средствами HTML. Вставка всего баннера через <img> допустима для иллюстрации, но не заменяет рабочую форму или интерфейс.

В браузере проверьте, что текст выделяется, элементы реагируют на действия и доступны с клавиатуры. Измените ширину окна, введите длинное значение в поле и вызовите предусмотренную ошибку. Для выбора изображений под размер экрана и плотность пикселей используйте srcset, sizes и <picture>. Они помогают загрузить подходящий ресурс; адаптивную сетку и поведение элементов нужно реализовать отдельно.

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