Как сделать PNG с прозрачным фоном в Photoshop

Чтобы получить PNG с прозрачностью, откройте изображение и разблокируйте слой «Фон». Уберите фон, проверьте шахматку и сохраните изображение в PNG. Разберем, как сделать пнг картинку в фотошопе из логотипа, фотографии товара или вырезанного объекта. Отдельно покажем, как исправить белый фон после сохранения.

Как сделать PNG с прозрачным фоном за 5 шагов

Этот маршрут подходит для готовой картинки в Adobe Photoshop.

1. Откройте изображение через «Файл» → «Открыть» («File» → «Open»).
2. В панели «Слои» («Layers») снимите замок со слоя «Фон» («Background»), нажав значок замка.
3. 
4. Уберите однотонный фон: выделите его «Волшебной палочкой» («Magic Wand») и нажмите Delete на разблокированном слое. Для фотографии со сложным фоном используйте выделение предмета и маску.
5. Посмотрите на область вокруг объекта. Шахматный узор означает прозрачность, сплошной белый цвет – оставшийся фон.
6. Откройте меню «Файл» («File») и команду «Сохранить как» («Save As»). Выберите формат PNG, задайте имя файла и подтвердите сохранение.

Откройте готовый PNG в Photoshop и поместите под него цветной слой. Цвет должен просматриваться вокруг объекта, включая промежутки между деталями. Если вместо него видны белые участки, фон удален не полностью.

Сохраните рабочий документ отдельно в PSD со слоями и масками.

Ошибочное удаление отмените командой отмены, пока документ остается открытым.

Что нужно понимать про прозрачность до начала

PNG подходит, если вам нужен формат картинки без фона. Однако выбор расширения сам по себе не удаляет белые пиксели.

Альфа-канал хранит степень прозрачности пикселей. PNG и WebP поддерживают плавную полупрозрачность, GIF – только полностью прозрачные или непрозрачные пиксели. TIFF тоже поддерживает прозрачность, но для вставки на сайт удобнее PNG. JPEG прозрачность не поддерживает в принципе.

Шахматка в Photoshop не попадает в файл.

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

Иногда шахматный узор уже нарисован внутри скачанной картинки. Поместите под нее цветной слой: настоящая прозрачность покажет его цвет. Нарисованная шахматка останется на месте.

Слой «Фон» с замком не принимает прозрачность. Превратите его в обычный слой: нажмите замок в панели «Слои» или дважды нажмите имя слоя и подтвердите создание обычного слоя. После этого удаление выделенной области покажет шахматку.

Если вы решаете, как сделать пнг из JPEG, сначала обработайте фон. Простое переименование расширения не меняет формат и не создает прозрачность.

Разрешение в ppi или DPI не задает размер веб-картинки.

Браузер использует размеры в пикселях и правила отображения страницы. Задавайте ширину и высоту под место вставки. Изменение ppi без пересчета пикселей не уменьшает изображение для сайта.

Как убрать фон с изображения

Выбирайте инструмент по границе объекта. Для контрастного предмета начните с автоматического удаления фона. Волосы требуют уточнения края, а техника с ровными контурами хорошо поддается перу.

«Удалить фон» для контрастного объекта

Если в вашем интерфейсе видна кнопка «Удалить фон» («Remove Background»), нажмите ее для автоматической обработки. Photoshop создаст маску вокруг главного объекта.

Способ подходит для предмета на заметно отличающемся фоне.

Осмотрите контур на шахматке: автоматика может захватить тень или пропустить тонкие детали. Нажмите миниатюру маски рядом с изображением слоя. Черной кистью скройте лишнее, белой верните пропущенные части предмета.

Если кнопки нет, выберите «Быстрое выделение» («Quick Selection») на панели инструментов. Проведите по предмету, пока пунктир не охватит его границы. Нажмите кнопку с прямоугольником и кругом внизу панели «Слои». Маска оставит предмет видимым и скроет окружающий фон.

«Выделить объект» и автоматическое выделение предмета

Чтобы сделать фото в пнг без фона, сначала выделите главный предмет. Автоматическое выделение удобно для товара или человека с заметным контуром.

Выберите инструмент выделения и нажмите «Выделить объект» («Select Subject») на панели параметров. Другой вариант запуска – «Выделение» → «Предмет» («Select» → «Subject»). Обе команды запускают автоматическое выделение предмета.

Photoshop обозначит предполагаемый объект пунктиром.

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

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

«Волшебная палочка» и «Быстрое выделение» для однотонного фона

Если вы выбираете, как сделать пнг картинку из логотипа, начните с «Волшебной палочки» («Magic Wand»). Нажмите инструментом на однотонный фон. Параметр допуска определяет, насколько близкие оттенки попадут в выделение. Удерживайте Shift, чтобы добавить другие участки фона.

Если палочка захватила часть логотипа, уменьшите допуск и повторите выделение.

«Быстрое выделение» («Quick Selection») собирает область мазками кисти. Проведите инструментом по фону, не задевая границу предмета. Для добавления пропущенного участка используйте режим добавления на панели параметров. Для исключения захваченной части объекта включите режим вычитания и проведите по ней.

После выделения фона выберите один из двух вариантов обработки:

• Для удаления пикселей нажмите Delete на разблокированном слое. Фон исчезнет, вокруг предмета появится шахматка.
• Для обратимой обработки сначала инвертируйте выделение командой инверсии в меню «Выделение» («Select»). Теперь выделенным должен стать предмет. Нажмите кнопку добавления маски внизу панели «Слои».

Обычная маска сохраняет выделенную область и скрывает остальное.

Если маска спрятала предмет, вы создали ее при выделенном фоне. Отмените добавление маски, инвертируйте выделение и создайте ее заново.

«Выделение и маска» для волос и шерсти

Создайте предварительное выделение, затем нажмите «Выделение и маска» («Select and Mask»). Установите режим просмотра, при котором контур заметен на контрастном фоне.

Кистью уточнения края («Refine Edge Brush Tool») проведите по волосам или шерсти. Программа пересчитает переход между объектом и фоном. В параметрах вывода выберите маску слоя, чтобы сохранить возможность исправления.

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

Увеличьте изображение и проверьте контур на темном и светлом фоне. Цветной ореол заметнее на контрастной подложке. Исправьте проблемные участки маски, сохраняя отдельные волоски и полупрозрачные переходы.

«Перо» для техники и прямых линий

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

Расставьте опорные точки по границе предмета и замкните контур. Для изгиба нажмите и потяните точку, создавая направляющие. Нажмите правой кнопкой мыши на контуре и выберите «Выделить область» («Make Selection»).

Добавьте маску из выделения.

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

Слой-маска вместо ластика

Ластик удаляет пиксели из слоя. История позволяет отменить удаление, пока нужные действия в ней доступны. Маска сохраняет исходные пиксели и позволяет менять границу позже.

Если вы разбираетесь, как сделать пнг в фотошопе с возможностью исправлений, используйте маску. Сначала выделите предмет, затем нажмите кнопку маски в панели «Слои». Рядом с изображением слоя появится черно-белая миниатюра.

Перед рисованием нажмите именно миниатюру маски.

Если выбрано изображение слоя, кисть начнет закрашивать сам объект.

• Черная кисть. Скрывает участок слоя. Если под ним нет других видимых слоев, появляется прозрачность.
• Белая кисть. Возвращает скрытый участок объекта.
• Серая кисть. Делает участок полупрозрачным.

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

Как создать прозрачный файл с нуля

Если вы ищете, как сделать png без исходной фотографии, создайте пустой прозрачный документ. Откройте «Файл» → «Создать» («File» → «New»). Задайте ширину и высоту в пикселях под место вставки. В поле «Содержимое фона» («Background Contents») выберите «Прозрачный» («Transparent»).

В новом документе должна появиться шахматка.

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

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

Как сохранить PNG через «Экспортировать как» или «Сохранить для Web»

Команда «Сохранить как» («Save As») тоже сохраняет прозрачность при выборе PNG.

Выбор способа сохранения не заменяет подготовку слоев: белая заливка останется белой при любом экспорте. Сжатие PNG без потерь сохраняет пиксели изображения. Само по себе более сильное сжатие не портит прозрачный край.

Если вы выбираете, как сделать png в фотошопе для сайта, сначала задайте нужные размеры в пикселях. Затем сохраните PNG через «Сохранить как» или используйте диалог веб-экспорта. В готовом файле проверьте прозрачность на цветной подложке.

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

Ни один диалог не гарантирует меньший файл при любых исходниках.

Для сравнения сохраните одинаковое изображение с одинаковыми размерами и прозрачностью. Сопоставьте вес файлов и края объекта на цветной подложке.

Интерфейс на изображении относится к прежним версиям Photoshop.

В старом диалоге выбран PNG-24 и включена «Прозрачность». После экспорта откройте полученный файл заново и проверьте его на цветном слое.

Что выбрать между PNG-8 и PNG-24

PNG-8 и PNG-24 здесь обозначают варианты старого диалога Photoshop. Их настройки нельзя переносить на все возможности формата PNG.

PNG-8 использует индексированную палитру максимум из 256 цветов. При экспорте с двоичной прозрачностью пиксель остается полностью видимым или полностью прозрачным. Из-за этого диагонали и мягкие края могут выглядеть зубчатыми. Сам индексированный PNG допускает промежуточные значения прозрачности элементов палитры.

PNG-24 хранит полноцветное изображение: по 8 бит на каждый канал RGB. Плавную полупрозрачность обеспечивает дополнительный альфа-канал. В старом диалоге Photoshop вариант PNG-24 с включенной прозрачностью сохраняет такие переходы.

Берите PNG-8 для простого значка с небольшим числом цветов.

Для фотографий товаров, теней, волос и мягких краев выбирайте PNG-24 с прозрачностью. Ограниченная палитра часто уменьшает вес файла, но результат зависит от изображения.

Почему фон PNG оказался белым

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

• Вы выбрали JPEG. Прозрачные участки получили сплошную заливку, поскольку JPEG не хранит прозрачность. Вернитесь к рабочему документу и экспортируйте PNG.
• Вы выбрали PNG, но отключили сохранение прозрачности. В исходном документе видна шахматка, а экспортированный файл содержит заливку. Повторите экспорт с сохранением прозрачности либо используйте «Сохранить как» с форматом PNG.
• Вы не сняли замок со слоя «Фон». Удаление выделенного участка не создает прозрачности. Превратите слой в обычный, затем удалите фон или добавьте маску.
• Вы свели документ в фоновый слой. Прозрачность могла замениться заливкой при сведении. Отмените сведение, если история еще доступна, или вернитесь к исходному PSD. Для экспорта PNG предварительно сводить документ не нужно.
• Под объектом остался белый слой. Маска скрыла фон фотографии, но нижняя заливка осталась видимой. Скройте белый слой значком глаза. Вокруг объекта должна появиться шахматка.

Почему PNG нельзя выбрать в документе CMYK?

PNG не поддерживает цветовую модель CMYK.

Здесь симптом другой: формат недоступен при сохранении или экспорте. CMYK сам по себе не превращает прозрачные пиксели готового PNG в белые.

Создайте копию рабочего документа и преобразуйте ее в RGB. Используйте «Изображение» → «Режим» → «Цвета RGB» («Image» → «Mode» → «RGB Color»). Проверьте цвета после преобразования, затем сохраните PNG с прозрачностью. Исходный документ CMYK оставьте отдельно, если он нужен для печати.

Чем заменить Photoshop

Photopea работает в браузере и повторяет многие названия Photoshop. Он удобен, когда нужен знакомый интерфейс без установки программы.

GIMP подходит для удаления фона, масок и экспорта PNG. Инструменты названы иначе, поэтому путь к командам отличается.

Krita ориентирована на рисование, но поддерживает прозрачные слои и экспорт PNG. Она удобна для иллюстраций и ручной обработки краев.

Paint.NET подойдет для простой работы с однотонным фоном и слоями.

Онлайн-сервисы удаления фона требуют загрузки изображения на сторонний сайт. Для документов с закрытой информацией безопаснее работать в локальном редакторе. После автоматической обработки осмотрите мелкие детали и полупрозрачные края.

Вопросы про PNG с прозрачностью

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