Как из фотошопа сохранить в png

Сохранение изображения из Photoshop в формате PNG — стандартная задача для дизайнеров, фотографов и контент-менеджеров. Этот формат идеально подходит для графики с прозрачным фоном, логотипов, иконок и веб-элементов благодаря поддержке альфа-канала и высокому качеству при умеренном размере файла. Главное — правильно настроить экспорт, чтобы сохранить все слои, эффекты и прозрачность.

Почему PNG — лучший выбор для веб-графики

Формат PNG (Portable Network Graphics) был разработан как альтернатива устаревшему GIF с улучшенной поддержкой цветопередачи и сжатия без потерь. Сегодня он является одним из ключевых форматов для цифровой графики, особенно когда важны качество и прозрачность.
PNG поддерживает до 16 миллионов цветов и глубину цвета 24 бита (в режиме PNG-24), а также альфа-канал, который позволяет плавно регулировать прозрачность отдельных участков изображения. Это делает его незаменимым для логотипов, кнопок, иллюстраций и любых элементов, которые должны гармонично вписываться в разные фоны на сайте.
В отличие от JPEG, который использует сжатие с потерями, PNG не теряет данные при сохранении. Каждый раз, когда вы открываете и пересохраняете PNG, качество остаётся прежним. Это особенно важно при многократной обработке изображений.

Когда использовать PNG, а когда — другие форматы?

Выбор формата зависит от типа контента и цели использования. Вот основные критерии:

• PNG — для графики с прозрачностью, резкими линиями, текстом, логотипами и иконками.
• JPEG — для фотографий и изображений с плавными переходами тонов, где размер файла критичен.
• WebP — современный формат, сочетающий преимущества PNG и JPEG. Поддерживается большинством браузеров, но не всегда совместим с устаревшими системами.
• SVG — для векторной графики, масштабируемых иконок и логотипов. Лучше всего подходит для простых форм и линий.

Как экспортировать из Photoshop в PNG: пошаговая инструкция

Процесс сохранения в PNG может немного отличаться в зависимости от версии Photoshop, но общие шаги универсальны. Adobe рекомендует использовать современные методы экспорта, такие как «Экспорт как», вместо устаревших диалогов.

Метод 1: Экспорт через «Экспорт как» (рекомендуется)

Это самый удобный и быстрый способ, доступный в Photoshop CC 2015 и новее. Он даёт полный контроль над настройками и предварительным просмотром.

1. Откройте изображение в Photoshop.
2. Перейдите в меню Файл → Экспорт → Экспорт как… (или нажмите Shift+Ctrl+Alt+S / Shift+Cmd+Option+S).
3. В открывшемся окне выберите формат PNG в правой части интерфейса.
4. Убедитесь, что опция Прозрачность включена, если она требуется.
5. Настройте размер изображения при необходимости (ширина, высота, масштаб).
6. Нажмите Экспорт всё, укажите папку назначения и подтвердите сохранение.

Метод 2: Сохранить для веб (старое)

Этот инструмент остаётся в Photoshop для обратной совместимости и даёт больше контроля над параметрами сжатия.

1. Выберите Файл → Экспорт → Сохранить для веб (старое).
2. В левой верхней части окна выберите PNG-24 из выпадающего списка.
3. Убедитесь, что галочка Прозрачность активна.
4. При желании включите опцию Матирование для смягчения краёв на определённом фоне (например, белом).
5. Нажмите Сохранить, выберите папку и тип файла (.png).

Метод 3: Через «Сохранить как»

Хотя этот способ технически возможен, он не рекомендуется, так как сохраняет PSD-файл как PNG, но может оставить скрытые слои, профили и метаданные, увеличивая размер.

1. Файл → Сохранить как…
2. Выберите место и имя файла.
3. В поле «Формат» выберите Portable Network Graphics (*.PNG).
4. Нажмите «Сохранить».
5. В следующем окне оставьте настройки по умолчанию (PNG-8 или PNG-24), но лучше использовать PNG-24.

Настройки PNG при экспорте: нюансы, которые влияют на результат

Правильные настройки — залог оптимального соотношения качества и размера файла. Давайте разберём ключевые параметры, с которыми вы столкнётесь при экспорте.

PNG-8 vs PNG-24: в чём разница?

Это два основных подтипа PNG, и выбор между ними критически важен.

• PNG-8 поддерживает до 256 цветов, как GIF. Подходит для простой графики: иконки, логотипы с ограниченной палитрой. Размер файла меньше, но возможны артефакты на градиентах.
• PNG-24 работает с полным цветовым диапазоном (16,7 млн цветов) и плавной прозрачностью. Идеален для сложных изображений, но файлы крупнее.

Практическое правило: если на вашем изображении есть градиенты, тени, размытые края или более 256 цветов — выбирайте PNG-24. В остальных случаях можно попробовать PNG-8 для экономии места.

Прозрачность и матирование

Прозрачность — одно из главных преимуществ PNG. Но иногда края объекта могут выглядеть «переходящими» на светлом или тёмном фоне. Здесь помогает матирование (matte).
Матирование добавляет полупрозрачный ореол вокруг объекта, сглаживая переход на заданном фоне. Например, если логотип будет стоять на белом фоне, установите матирование на белый цвет.

Цветовые профили и веб-совместимость

Photoshop по умолчанию может встраивать ICC-профили (например, sRGB, Adobe RGB). Для веба это избыточно и может вызвать расхождение цветов в разных браузерах.
При экспорте в «Экспорт как» или «Сохранить для веб» отключайте опцию «Внедрять цветовой профиль», если только вы не работаете с цветокритичными проектами (например, печать).
Лучше заранее перевести документ в профиль sRGB: Редактирование → Назначить профиль → sRGB IEC61966-2.1.

Распространённые ошибки и как их избежать

Даже опытные пользователи допускают мелкие, но значимые ошибки при экспорте PNG. Вот самые частые из них.

Ошибка 1: Сохранение с фоновым слоем

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

Ошибка 2: Использование PNG-8 для фотографий

Попытка сэкономить место за счёт PNG-8 приводит к появлению «лестницы» на градиентах и потере деталей. Фотографии в PNG-8 выглядят хуже, чем в JPEG при том же размере.

Ошибка 3: Неоптимизированный размер файла

PNG без сжатия может быть очень большим. Используйте дополнительные инструменты, такие как TinyPNG, ImageOptim или плагины для Photoshop, чтобы уменьшить вес файла без потери качества.

Ошибка 4: Экспорт в CMYK вместо RGB

Photoshop позволяет работать в цветовом режиме CMYK, но PNG предназначен для экранов, которые используют RGB. Если вы экспортируете CMYK-изображение в PNG, цвета могут исказиться.
Перед экспортом проверьте: Изображение → Режим → RGB Color.

Экспертные рекомендации

Профессионалы подходят к экспорту системно. Вот проверенные практики, которые повышают качество и эффективность.

• Всегда держите оригинал в PSD. Экспортируйте PNG как финальный этап, а не промежуточный.
• Используйте именование по шаблону: logo-header-white@2x.png, icon-close-blue.png — это упрощает работу команде.
• Для ретина-экранов экспортируйте @2x и @3x версии, если используется масштабирование.
• Тестируйте PNG на разных фонах: белом, сером, тёмном — чтобы убедиться, что прозрачность работает корректно.
• Автоматизируйте процесс: создайте действия (Actions) в Photoshop для быстрого экспорта в PNG с нужными настройками.

Рассмотрите использование современных форматов, таких как AVIF или WebP, в паре с PNG. Например, можно предоставить WebP как основной формат, а PNG — как fallback для старых браузеров.

Вопросы и ответы

Заключение

Сохранение изображения из Photoshop в PNG — простая, но требующая внимания к деталям операция. Правильный выбор метода экспорта, формата (PNG-24 или PNG-8), настройка прозрачности и цветового профиля напрямую влияют на качество конечного результата и его применимость в вебе.

• Для веб-графики с прозрачностью всегда выбирайте PNG-24.
• Используйте «Экспорт как» — это самый надёжный и современный способ.
• Проверяйте наличие фона и цветовой режим перед экспортом.
• Оптимизируйте PNG с помощью внешних инструментов для снижения нагрузки на сайт.
• Тестируйте результат на разных фонах и в разных браузерах.