# Как сделать редактируемый PSD из изображения GPT Image 2
> Соберите PSD в Photopea или Photoshop: подготовьте фон без дубликатов, добавьте объекты и редактируемый текст, проверьте файл и передайте материалы для HTML/CSS.
- Source: https://www.aifreeapi.com/ru/posts/gpt-image-2-psd-layers-image-to-html
- Language: ru
- Published: 2026-09-03
- Updated: 2026-09-07
- Publisher: AI Free API (https://www.aifreeapi.com)
**GPT Image 2 не выдаёт PSD напрямую через Image API.** Документация OpenAI перечисляет [PNG, JPEG и WebP](https://developers.openai.com/api/docs/guides/image-generation#output-format). PSD можно собрать из результата в Photopea, Photoshop или другой программе, которая умеет сохранять этот формат. Если файл создаёт инструмент внутри чата, слои формирует этот инструмент.
Сначала определите будущую правку. Для смены общего оттенка достаточно изображения и корректирующего слоя. Для замены товара нужны отдельный объект и чистая подложка под ним. Для изменения цены нужен текстовый слой. Расширение `.psd` само по себе не обеспечивает ни одного из этих действий: оно сохраняет структуру, которую вы подготовили в редакторе.
## Подготовьте материалы под нужные изменения
Предположим, у вас есть сгенерированный рекламный баннер с флаконом, заголовком и ценой. Заказчик хочет менять цену и переставлять флакон. Полезный результат — фон, отдельный флакон и две редактируемые надписи. Делить каждый блик на собственный слой ради числа слоёв не требуется.
Если генерация ещё впереди, удобнее подготовить фон без товара и надписей, отдельно получить товар, а текст набрать в редакторе. Для уже готового баннера сохраните оригинал как образец и подготовьте два дополнительных материала:
- **Подложку без переносимых объектов и старых надписей.** Освободившиеся места нужно восстановить: дорисовать в редакторе или получить подходящую версию фона с помощью редактирования изображения.
- **Изолированные объекты.** Вырежьте нужный предмет с маской либо подготовьте отдельное изображение с прозрачностью. Маска позволяет позже изменить край, сохранив скрытую часть исходного изображения.
Здесь возникает частая ошибка: вырезанный флакон кладут поверх полного исходного баннера. Пока копии совпадают, всё выглядит правильно. Стоит передвинуть верхнюю — внизу обнаруживается второй флакон. Прозрачный пустой слой под объектом тоже не решает задачу: в нём нет изображения фона. Проверьте подложку отдельно, скрыв все остальные элементы, ещё до сборки PSD.
Прозрачность в `gpt-image-2` на момент обновления статьи доступна в статусе preview. В [руководстве OpenAI](https://developers.openai.com/cookbook/examples/multimodal/image-gen-models-prompting-guide) описаны `background="transparent"` и формат PNG или WebP; для PNG параметр `output_compression` нужно опустить. JPEG не сохраняет альфа-канал. В стороннем интерфейсе соответствующая настройка может быть недоступна.
Прозрачный результат позволяет накладывать картинку на фон, но не разделяет несколько предметов внутри неё. Белая заливка также не равна прозрачности: удаляя все белые пиксели, можно вместе с фоном потерять белые детали товара. Для отдельных материалов задавайте согласованные размеры холста и проверяйте масштаб при совмещении — одинаковый размер холста не гарантирует одинакового положения сгенерированных объектов.
Если восстанавливаете фон через модель, учитывайте, что [маска направляет правку, но не гарантирует точного соблюдения границ](https://developers.openai.com/api/docs/guides/image-generation#edit-an-image-using-a-mask). Сравните результат с исходником вокруг товара и элементов, которые должны сохраниться. Настройки такого запроса разобраны в [руководстве по редактированию с маской](/ru/posts/openai-image-editing-api).
## Соберите PSD в Photopea и проверьте его правкой
Для этого способа нужны подготовленный фон, отдельные объекты и текст надписей. Он не зависит от наличия инструмента Photoshop в чате. В Photoshop можно собрать аналогичный документ; ниже приведены названия команд Photopea.
1. **Откройте подложку.** В Photopea выберите `File > Open` и загрузите фон нужного размера. Это основа документа. Если у вас пока только исходная плоская картинка, её открытие создаст документ с этой картинкой, а подготовку фона и объектов придётся выполнить отдельно.
2. **Добавьте товар.** Перетащите подготовленный файл в основную область уже открытого документа, на холст. По [инструкции Photopea](https://www.photopea.com/learn/opening-saving) такой импорт добавляет изображение как слой смарт-объекта. Не бросайте файл на верхнюю полосу вкладок: это другой способ открытия. Подберите положение и размер предмета, затем дайте слою понятное имя.
3. **Наберите изменяемые надписи заново.** Выберите инструмент текста и создайте отдельные слои для заголовка и цены. Подберите шрифт, кегль, межстрочный интервал и цвет по образцу. В панели слоёв у текстового слоя есть значок `T`; Photopea описывает его в [руководстве по тексту](https://www.photopea.com/learn/text). Буквы внутри PNG остаются пикселями. Даже распознанный текст ещё требует настройки шрифта и размещения.
4. **Проверьте независимость элементов.** Сдвиньте товар в сторону: на фоне не должно остаться его копии или пустого отверстия. Замените цену и заголовок, проверьте переносы строк. Если под новой надписью видна старая, вернитесь к подложке и уберите растровый текст.
5. **Сохраните документ через `File > Save as PSD`.** Экспорт PNG или JPEG нужен для просмотра, а не для сохранения редактируемой структуры. PSD сохраняет уже созданные слои; он не восстанавливает исходный дизайн автоматически.
6. **Откройте сохранённый PSD повторно.** Лучше в программе, в которой будет работать получатель. Ещё раз измените текст, переместите предмет и проверьте прозрачность. Убедитесь, что нужный шрифт доступен и после его загрузки строки выглядят ожидаемо.
Adobe описывает PSD как формат, сохраняющий [слои, эффекты и возможности редактирования Photoshop](https://helpx.adobe.com/photoshop/desktop/save-and-export/export-files-to-different-formats/image-file-formats-supported-in-photoshop.html). Поэтому документ с одним смарт-объектом может быть корректным PSD, но для замены цены внутри него всё равно понадобится отдельный текстовый слой.
Сохраняйте столько структуры, сколько нужно для предстоящих изменений. Фон можно оставить растром, товар — отдельным изображением с маской, а цену — текстом. Это вновь собранный макет, а не восстановленный оригинал со всеми слоями, шрифтами и скрытыми пикселями.
## Если вы хотите продолжить работу через Adobe в ChatGPT
В старых инструкциях встречается подключение Photoshop for ChatGPT. В [актуальной справке Adobe от 6 августа 2026 года](https://helpx.adobe.com/firefly/web/app-integrations/adobe-connectors/adobe-for-chatgpt.html) указано, что его заменил плагин **Adobe**. В описанном интерфейсе вход находится в боковой панели `Plugins`: найдите Adobe и выберите `Install plugin`. Для прежнего подключения Adobe предлагает подключиться заново. Наличие этого пункта и доступность инструментов следует проверить в своём аккаунте.
Перед работой выясните, может ли доступный инструмент создать и передать документ со слоями. Затем назовите конкретные изменения: заменить цену, переместить товар, сохранить маску для исправления края. Если среда умеет только редактировать картинку и отдавать растровый файл, скачайте материалы и соберите PSD в редакторе по шагам выше.
[Апрельский урок Adobe](https://www.adobe.com/learn/photoshop/web/photoshop-in-chatgpt) показывает передачу через `Open in Photoshop`, при которой коррекция Hue/Saturation остаётся отдельным корректирующим слоем с маской. Этот пример объясняет сохранение выполненной правки. Он не доказывает, что интеграция автоматически превратит все предметы и буквы исходной картинки в независимые редактируемые элементы. Скачанный файл проверяйте теми же действиями: изменить надпись, передвинуть объект, сохранить и открыть снова.
## Когда результат нужен для HTML/CSS
PSD полезен дизайнеру, а разработчику нужны ещё структура страницы и её поведение. Скриншот показывает лишь одно состояние при одной ширине окна: из него нельзя узнать, куда отправляется форма, как выглядит ошибка и что происходит с сеткой на телефоне.
Codex принимает изображения как контекст; [инструкция OpenAI](https://learn.chatgpt.com/docs/image-inputs) рекомендует описывать желаемый результат, важные области и ограничения. При реализации страницы агент пишет HTML/CSS и логику по визуальному образцу. Это отдельная работа после генерации картинки.
Передайте разработчику или агенту:
- макет и реальные тексты, включая длинные заголовки и сообщения об ошибках;
- отдельные изображения, названия шрифтов, цвета и размеры, которые важны для дизайна;
- назначение кнопок, поля формы, источники данных и состояния загрузки;
- требования к мобильной версии и существующие компоненты проекта.
Photoshop умеет [экспортировать слои отдельными файлами](https://helpx.adobe.com/photoshop/desktop/save-and-export/export-files-to-different-formats/export-layers-as-files.html). Для веб-страницы экспортируйте фотографии, товар и декоративную графику, а надписи и кнопки реализуйте средствами HTML. Вставка всего баннера через `![]()
` допустима для иллюстрации, но не заменяет рабочую форму или интерфейс.
В браузере проверьте, что текст выделяется, элементы реагируют на действия и доступны с клавиатуры. Измените ширину окна, введите длинное значение в поле и вызовите предусмотренную ошибку. Для выбора изображений под размер экрана и плотность пикселей используйте [`srcset`, `sizes` и ``](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images). Они помогают загрузить подходящий ресурс; адаптивную сетку и поведение элементов нужно реализовать отдельно.
Готовность удобно проверять одной реальной задачей получателя. Для дизайнера это может быть замена цены и товара в повторно открытом PSD. Для разработчика — рабочая форма на узком экране. Такой результат показывает, что материалы пригодны для дальнейшей работы, гораздо точнее расширения файла или количества слоёв.