что это, особенности формата и как с ним работать
PNG (Portable Network Graphics) — это растровый формат изображений, который широко используется в области иллюстрации и дизайна наряду с JPEG. Формат позволяет хранить графику с практически неограниченным количеством цветов в отличие от, например, GIF, имеющего 8-битный цвет (всего 256 цветов).
Содержание
- Особенности формата
- Где применяется формат PNG
- Краткая история формата PNG
- Какой программой открыть PNG на разных операционных системах
- Как создать PNG-файл
- Конвертеры PNG-файлов
- Плюсы и минусы формата PNG
Основной и отличительной особенностью PNG является то, что изображение можно сохранить без фона, то есть фон будет прозрачным. В других растровых форматах это недоступно. Такая особенность делает PNG-файл универсальным. Картинку без фона удобно применять во время дизайна баннеров, постеров, сайтов, она может легко подстроиться под уже имеющиеся элементы на веб-странице и сочетаться с ними. В поисковике такую картинку легко визуально распознать по фону с серыми квадратиками, условно обозначающими прозрачность. Однако после того как вы скачаете и откроете изображение, квадратики должны пропасть, а фон должен стать «пустым».
Однако прозрачность — необязательная опция. Вы вполне можете использовать PNG просто в качестве полноцветной картинки, не вырезая фон.
Где применяется формат PNGВ основном данный формат используется в сфере веб-дизайна, то есть для оформления сайтов и рекламных креативов. За счет большого количества цветов и алгоритма сжатия без потерь PNG-картинки — это отличные элементы для яркого дизайн-макета, а за счет опции прозрачности PNG помогают ускорить рабочий процесс, ведь не нужно тратить время на то, чтобы вырезать фон.
Упомянутую выше картинку кошки можно вставить на любой цветной фон, не тратя время на вырезаниеКраткая история формата PNGИстория его возникновения начинается с 1995 года, когда было принято решение найти альтернативу графическому формату GIF. Трудность заключалась в том, что для использования GIF требовалось приобрести лицензию компании, которая его придумала, что было не всегда и не для всех доступно. Поэтому на смену GIF-изображению и пришел новый непатентованный и свободно распространяемый аналог — формат PNG, ставший доступным каждому пользователю.
На сегодняшний день PNG-формат можно открыть на любой операционной системе с помощью уже стандартной программы для просмотра графических изображений. Сейчас по порядку опишем, как и с помощью каких инструментов можно это сделать.
Для просмотра PNG-формата на ОС Windows понадобится один из следующих вариантов:
- любая встроенная утилита для просмотра графики, например приложение «Фотографии» или Microsoft Paint;
- любой установленный сервис для просмотра графики, например ACDSee;
- любой веб-браузер;
- графические редакторы Adobe Illustrator или Photoshop;
- облачное хранилище Microsoft OneDrive, облака Google Drive, Яндекс.
Диск, Mail.ru, Dropbox.
На MacOS:
- встроенные программы «Фото» и «Просмотр»;
- браузер Safari;
- графические редакторы, например ColorStrokes.
На iOS:
- приложение «Фото»;
- сторонние редакторы, например Pixelmator;
- облачные хранилища Google Drive, Яндекс.Диск и др.
На Android:
- встроенная программа просмотра фото;
- сторонние графические редакторы, например Adobe Photoshop Express;
- облачные хранилища.
Создать с нуля файл формата PNG несложно, но процесс может занять много времени в первый раз, если вы не веб-дизайнер и непосредственно не связаны с данной профессией. Понадобится графический редактор (например, Photoshop, MS Paint, Procreate и др.), в котором нужно открыть картинку в другом формате или нарисовать ее с нуля, а затем сохранить в PNG. В Photoshop это делается через опцию «Сохранить как» и выбор нужного формата.
Создание PNG в Adobe PhotoshopКонвертеры PNG-файловЧтобы конвертировать изображение или файл в PNG-формат, можно, например, использовать следующие инструменты в формате онлайн:
- AnyMP4;
- FastStone;
- Adapter;
- Pixillion;
- IMG2GO;
- XnConvert;
- ZamZar и др.
Это не все из возможных онлайн-конвертеров PNG-файлов, однако большим их преимуществом перед другими является то, что они бесплатные.
Плюсы и минусы формата PNGНесмотря на всеобщую доступность PNG-файлов, данный формат имеет как ряд преимуществ, так и некоторые недостатки. Сейчас по порядку рассмотрим и то, и другое.
Плюсы формата PNG:
- С точки зрения цветового диапазона у PNG существуют несколько вариантов цветовой палитры: от 8-битной (256 цветов) до 48-битной (десятки миллионов цветов). Этот факт говорит нам о том, что у PNG очень широкий цветовой диапазон.
- PNG-файл работает со сжатием без потерь исходного качества или с совсем незначительным ухудшением, которое сложно выделить визуально.
- Размер изображений достаточно компактный по сравнению с фотоформатами (например, RAW).
- С помощью уменьшения прозрачности изображения можно добиться его плавного сочетания с фоном, причем интенсивность прозрачности может меняться от максимальной контрастности до полного исчезновения.
- Если необходимо зафиксировать авторство, то можно добавить в формат необходимые метаданные.
Минусы формата PNG:
- невозможность анимировать картинку;
- на данный момент нельзя в один файл сохранить несколько изображений;
- PNG-файлы зачастую весят больше, чем JPEG и GIF.
Это основные преимущества и недостатки PNG-формата изображений, но, конечно, это не отменяет субъективных особенностей и выводов, которые может вынести для себя каждый пользователь при работе с данным типом файлов.
ИСКРА —
неделя знакомства
с дизайн-профессиями
бесплатно
ИСКРА —
неделя знакомства
с дизайн-профессиями
7 дней, которые разожгут в вас искру интереса
к дизайну. Получайте подарки каждый день,
знакомьтесь с востребованными профессиями
и выберите ту, которая подойдет именно вам.
разжечь искру
PSD в PNG — online-convert.com
Перетащите файлы сюда
Удалить фон «/>
Качество:
Выберите подходящее качество изображения. Чем выше качество, тем больше весит файл. И наоборот, чем ниже качество, тем меньше размер файла.
Максимальное сжатиеНаилучшее качество
0%
20%
40%
60%
80%
100%
Изменить размер:
Ширина:
px
Высота:
px
Применить цветной фильтр:
Улучшить Повысить резкость «/> Сглаживание Сглаживание контраста Выровнять
Точек на дюйм:
dpi
Обрезать пиксели:
Наверх:
px
px
Влево:
px
Вправо:
px
Настроить порог преобразования в ч/б: Обычно порог определяется автоматически, но его можно настроить и вручную. Допускаются значения от 0 до 255.»/>
Информация: Включите поддержку JavaScript, чтобы обеспечить нормальную работу сайта.
- Выберите файл PSD для преобразования
- Изменить качество или размер (опция)
- Нажмите «Начать» для преобразования файла PSD в PNG
- Скачайте файл PNG
Как сделать прозрачный PNG в Photoshop (Краткое руководство)
Автор: Thomas Boldt | Обновлено
Существуют сотни или даже тысячи различных способов создания цифрового изображения, но формат Portable Network Graphics (PNG) является одним из немногих популярных форматов, которые могут хранить и отображать данные о прозрачности.
PNG — это формат без потерь, который отлично подходит для сохранения высококачественных прозрачных изображений для использования в Интернете, для создания цифровых водяных знаков и многих других полезных приложений в мире графического дизайна и цифровых изображений.
Создать прозрачный PNG в Photoshop на самом деле очень просто, если вы правильно подготовили документ. Очевидно, вам понадобится какой-то раздел вашего документа, который не содержит видимых пикселей!
В приведенном ниже примере я создал текст для PhotoshopBuzz, чтобы использовать его в качестве водяного знака (или, точнее, в качестве удобного учебного пособия!). Прямо сейчас текст находится на двух отдельных слоях над синим фоновым слоем. Если бы я сохранил его как PNG прямо сейчас, это выглядело бы как обычное изображение.
Но если я скрою синий фоновый слой (см. ниже), текст теперь плавает над прозрачным фоном, потому что нигде, кроме текста, не видно содержимого изображения. Я мог бы просто удалить фоновый слой, но в этом нет необходимости, поэтому имеет смысл сохранить его на случай, если он мне понадобится позже.
Photoshop использует шахматную доску для обозначения прозрачных частей изображения, но этот шаблон не будет виден в конечном прозрачном файле PNG.
Та же концепция применима к любому изображению, которое вы хотите создать. Если на вашем изображении есть часть изображения без содержимого или даже с частично прозрачными пикселями, вы сможете создать прозрачный PNG.
Когда изображение готово к работе, откройте меню File , выберите подменю Export и нажмите Export As . Photoshop откроет диалоговое окно «Экспортировать как», в котором вы сможете выбрать формат файла и настроить параметры.
В разделе «Формат файла » выберите PNG в раскрывающемся меню «Формат » (возможно, он уже выбран, поскольку Photoshop запоминает ваши предыдущие настройки «Экспортировать как»).
Параметр «Прозрачность» должен быть включен по умолчанию, но убедитесь, что он по-прежнему установлен. Настройте остальные параметры изображения так, как вам нужно, и нажмите кнопку 9.0025 Кнопка экспорта . Задайте имя файла, нажмите кнопку Сохранить .
Вот и все! Вы только что сделали свой первый прозрачный PNG в Photoshop. Прозрачные PNG — один из самых универсальных инструментов в графическом дизайне, создаете ли вы для печати или для онлайн-мира, и вы, вероятно, обнаружите, что делаете немало таких.
Теперь вы можете поместить свой прозрачный PNG-файл на другие изображения в качестве водяного знака или загрузить файл PNG на свой веб-сайт или в любой другой проект графического дизайна. Поскольку PNG так широко поддерживается, вы сможете использовать его практически везде!
О Томасе Болдте
Томас начал свою карьеру в Photoshop еще в 2000 году. После изучения Photoshop 5.5 в компьютерном классе средней школы у него развилась непреходящая страсть к фотографии, дизайну и технологиям, которая привела его к получению степени бакалавра дизайна и в дикий мир технологических стартапов.
Поиск
Как создавать изображения PNG с помощью Adobe Photoshop
Если вы хотите улучшить свой дизайн, важно иметь некоторые базовые представления о различных существующих форматах изображений и о том, как изменить изображение из одного формата в другой. PNG является одним из наиболее часто используемых форматов в графическом дизайне. Adobe Photoshop — отличный инструмент для этого и это как раз одна из вещей, которым я научу вас в этом посте.
Когда мы говорим, что хотим создавать изображения в формате PNG, я знаю, что многие из вас имеют в виду не только изменение формата, но и научитесь создавать изображение с прозрачным фоном

Содержание
- 1 Что такое PNG-изображение?
- 1.1 Когда следует выбирать этот формат?
- 2 Как создавать изображения PNG с помощью Adobe Photoshop
- 2.1 Изменение формата изображения
- 2.2 Создаем изображения с прозрачным фоном в Photoshop
- 2.2.1 Открываем изображение
- 2.2.2 Как сделать выделение
- 2.2.3 Как удалить фон
- 2.2.4 Будьте внимательны при сохранении
Что такое PNG-изображение?
PNG — формат файла, позволяющий сжимать графическую информацию без потерь , то есть теоретически при сжатии детали несжатого исходного изображения не теряются.
Это очень привлекательный формат для графического дизайна, потому что он ведет себя так же, как файл JPEG, по крайней мере, для неопытных глаз, таких как мой, он способен хранить в общей сложности 16 миллионов цветов и предлагает фундаментальное преимущество: поддерживает прозрачные фоны .
Когда мы должны выбрать этот формат?
Этот формат, созданный для Интернета, является идеальным, если мы собираемся работать с иллюстрациями или если мы разрабатываем контент для веб-сайтов, которым необходимо поддерживать хорошее разрешение, например логотипы . Это также полезный формат для создания фотомонтажей, коллажей и постеров.
Подпишитесь на наш Youtube-канал
Как создавать изображения PNG с помощью Adobe Photoshop
Изменение формата изображения
Если нам нужно просто изменить формат изображения, которое у нас есть в формате JPEG, процедура очень проста. Откройте нужное изображение в Adobe Photoshop и поместите курсор на вкладку файла . Появится меню, оставьте курсор на опция «экспорт« и нажмите «Быстрый экспорт как PNG» . Через несколько секунд вам удастся изменить формат вашего изображения на PNG.
Создаем изображения с прозрачным фоном с помощью Photoshop
Открываем изображение
Первое, что мы сделаем, это откроем изображение , с которого мы хотим удалить фон. После открытия вам нужно будет выбрать, что мы хотим сохранить фотографии, в моем случае две зебры. В Adobe Photoshop есть множество инструментов выделения. Я объясню способ выбрать, что для меня проще в этих случаях, но все будет зависеть от того, что вы хотите выбрать и что вы считаете наиболее эффективным.
Как сделать выделение
Выберите один инструмент выделения любой , не имеет значения. Когда вы это сделаете, в верхней части экрана появится ряд вариантов выбора. Если вы сделаете щелчок по «выбрать тему» , Photoshop сделает автоматический выбор довольно приблизительным, но обычно не идеальным. Не волнуйтесь, эти небольшие недостатки легко устраняются.
Рядом с «выбрать тему» вы увидите опцию «выбрать и применить маску» . Одним щелчком мыши вы перейдете в режим , предназначенный для совершенствования вашего выбора . В меню инструментов вы увидите разные кисти, есть два инструмента, которые для меня необходимы, когда дело доходит до улучшения выделения: «Кисть для совершенствования краев» , идеально подходит для работы с волосами, и «Кисть» , очень полезная чтобы добавить или удалить контент, который вы хотите из вашего выбора.
Когда вы используете маску выделения, я рекомендую вам поиграть с «прозрачностью» , чтобы вы могли видеть, что вы включаете в выделение, а что собираетесь опустить. Символы «+» и «-» , расположенные в верхней части экрана, используются для выбора, добавляет ли кисть содержимое к выделению или, наоборот, вычитает его.
Воспользуйтесь преимуществами этих инструментов, будьте внимательны и расширяйтесь, чтобы хорошо выделить края. Когда вы довольны тем, что видите, нажмите «ок» и вы вернетесь к обычному интерфейсу фотошопа .
Как удалить фон
Проверьте правильность выделения, помните, что если вы все еще считаете, что можете его улучшить, вы всегда можете повторно применить маску выделения. Когда выбор сделан, вам достаточно нажать ctrl+C и ctrl+V (если вы работаете с Windows) или command+C и command+V (если вы работаете с Mac). Таким образом вы будете копировать и вставлять ваш выбор на фоне , вы увидите, что новый слой . В завершение разблокируйте фоновый слой и удалите его У вас уже есть изображение в формате PNG с прозрачным фоном, готовое к использованию в ваших проектах!
Будьте осторожны при сохранении
Позвольте дать вам последний совет . При сохранении будьте внимательны и убедитесь, что вы правильно выбрали формат (PNG). Если вы сохраните в другом формате, таком как JPEG, Photoshop сохранит ваше изображение с белым фоном по умолчанию, и это может не сработать для вас.