Экспорт PSD в PNG: сохранение слоев и прозрачности

Чтобы конвертировать PSD в PNG с сохранением прозрачности, используйте функцию File > Export > Export As (Файл > Экспорт > Экспортировать как) в Adobe Photoshop. Выберите формат PNG, убедитесь, что стоит галочка Transparency (Прозрачность), и нажмите «Export All». Для экспорта отдельных слоев как отдельных файлов PNG включите опцию экспорта всех слоев или используйте «Быстрый экспорт в PNG» через панель слоев.

Ниже подробно разобраны методы для разных задач: от сохранения одной картинки до пакетного экспорта UI-элементов.

Подготовка файла перед экспортом

Качество итогового PNG зависит от того, как организован PSD-файл. Перед экспортом выполните три действия:

1. Проверьте прозрачность фона. Убедитесь, что фоновый слой (Background) отключен или удален. Если фон залит белым цветом, он останется на PNG. Прозрачные области должны отображаться шахматной доской.
2. Обрежьте лишнее. Используйте Image > Trim (Изображение > Тримминг), чтобы убрать пустые прозрачные поля вокруг объекта. Это уменьшит вес файла.
3. Назовите слои корректно. Имена слоев в Photoshop станут именами файлов при пакетном экспорте. Используйте латиницу и нижние подчеркивания (например, btn_submit.png вместо Кнопка Отправить.psd).

Способ 1: Экспорт всего изображения (один файл)

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

1. Перейдите в меню File > Export > Export As… (или нажмите Alt + Shift + Ctrl + W).
2. В правом верхнем углу выберите формат PNG.
3. В разделе Image Size задайте нужные размеры (в процентах или пикселях).
4. В разделе Transparency убедитесь, что галочка активна.
5. Нажмите Export All и выберите папку сохранения.

Способ 2: Пакетный экспорт отдельных слоев

Идеально для веб-дизайна и разработки интерфейсов, когда каждый элемент (иконка, кнопка) должен быть отдельным файлом.

Через «Экспортировать как» (Export As)

1. Выделите нужные слои в панели Layers (удерживайте Ctrl/Cmd для множественного выбора).
2. Нажмите правой кнопкой мыши на выделенные слои и выберите Export As….
3. Настройте формат PNG и прозрачность для всех выбранных элементов одновременно.
4. Нажмите Export. Photoshop сохранит каждый слой как отдельный файл в указанную папку.

Через «Быстрый экспорт в PNG» (Quick Export)

Если нужно сохранить слои максимально быстро без дополнительных настроек:

1. Выделите слои.
2. Нажмите правой кнопкой мыши и выберите Quick Export as PNG.
3. Файлы сохранятся в папку, указанную в настройках Photoshop (Preferences > Export).

Способ 3: Использование Slice Tool (Инструмент «Раскройка»)

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

1. Выберите инструмент Slice Tool (клавиша C, переключается в группе с Crop Tool).
2. Нарисуйте рамки вокруг элементов, которые нужно экспортировать.
3. Перейдите в File > Export > Save for Web (Legacy) (Alt + Shift + Ctrl + S).
4. Выберите формат PNG-24 и поставьте галочку Transparency.
5. Нажмите Save. В диалоговом окне выберите «Selected Slices» (Только выделенные фрагменты), чтобы не экспортировать весь холст.

Настройки прозрачности и качества

При экспорте в PNG критически важно выбрать правильные параметры, чтобы избежать артефактов или лишнего веса.

Частые ошибки при экспорте

• Белый фон вместо прозрачности.
  • Причина: Слой «Background» был видимым или преобразован в обычный слой, но залит белым цветом.
  • Решение: Скройте фоновый слой перед экспортом. Проверьте наличие шахматной доски на холсте.
• Зубчатые края (алиасинг).
  • Причина: Неправильное сглаживание шрифтов или фигур.
  • Решение: В настройках экспорта убедитесь, что не стоит галочка «Matte» (Цвет фона подложки), либо установите её в «None».
• Слишком большой вес файла.
  • Причина: Экспорт огромного изображения для маленькой иконки или использование PNG-24 для простых двухцветных лого.
  • Решение: Уменьшите размер изображения перед экспортом. Для простой графики попробуйте PNG-8. Используйте сервисы сжатия (например, TinyPNG) после экспорта.
• Не те имена файлов.
  • Причина: Экспорт слоев с дефолтными названиями «Layer 1 copy».
  • Решение: Переименуйте слои в PSD перед экспортом.

FAQ

В чем разница между PNG-8 и PNG-24? PNG-24 поддерживает 16 миллионов цветов и полную прозрачность (256 уровней непрозрачности). PNG-8 ограничен 256 цветами и поддерживает только бинарную прозрачность (пиксель либо полностью прозрачен, либо нет), что может создать «зубчатый» край на полутонах. Для фото и сложной графики всегда используйте PNG-24.

Как экспортировать сразу все слои в отдельные файлы? Выделите все нужные слои в панели слоев, нажмите правую кнопку мыши и выберите «Export As». В открывшемся окне слева будет список всех выбранных слоев. Нажмите «Export All», и Photoshop создаст отдельный PNG для каждого.

Почему прозрачность сохраняется, но края выглядят грязными? Это может быть связано с эффектом «Matting» (подложка). В окне «Save for Web» или «Export As» найдите настройку Matte и установите значение None. Также проверьте, не включено ли сглаживание (Anti-aliasing) там, где оно не нужно.

Можно ли автоматизировать экспорт? Да. Используйте Actions (Операции) в Photoshop. Запишите действие экспорта одного слоя, а затем примените его к пакету файлов через File > Automate > Batch. Для более сложной автоматизации используйте скрипты JSX или плагины вроде LayerExporter.