прозрачный фон это какой формат
Делаем прозрачный фон изображения. 3 разных способа.
Разрабатывая макет полиграфии или верстая сайт, может потребоваться некоторые участки изображения сделать прозрачными. Например, для того, чтобы фон фотографии совпадал с фоном макета или углы изображения не перекрывали текст.
Прозрачный фон изображения позволяет делать красивое обтекание текста по форме предмета. Этот прием сокращает пустое пространство и улучшает вид верстки.
Такие векторные редакторы как CorelDRAW и Illustrator могут скрывать часть изображения с помощью контурной маски, это быстрый и простой метод сделать прозрачный фон, если форма предмета простая.
Но лучшим решением будет подготовить изображение в Photoshop и сохранить в формате поддерживающим прозрачность фона.
В этом видео уроке подробно опишу 3 способа, а также, какие форматы поддерживают прозрачность.
Вырезание объекта в фотошопе
Чтобы сделать прозрачный фон, необходимо вырезать предмет, а фон удалить. В зависимости от формы предмета, выберите тот способ выделения, который будет удобен в данной ситуации.
Качество готовой картинки в основном зависит от качества выделения. Постарайтесь максимально точно повторить форму предмета подходящими инструментами лассо.
Если края предмета имеют не четкие края, выделение тоже должно иметь слегка размытые грани. Для этого нужно щелкнуть по выделению правой кнопкой мыши и задать значение «Растушевки». Значение размытия сработает ко всему выделению.
Однако, бывают редкие ситуации, когда только часть предмета имеет размытый край или отсутствие фокусировки. В таком случае, необходимо комбинировать несколько способов выделения.
Для примера, я специально выбрал более сложное изображение с разной степенью фокусировки, соответственно с разной четкостью границ.
Преимущество этого метода заключается в том, что вы можете менять жесткость краем меняя жесткость кисти в процессе рисования. Но есть и недостаток: выделение кистью не такое точное как лассо. Но это не единственный способ получить выделение с разной четкостью границ.
Добавление к выделению нечетких областей
Возможно, этот прием покажется более сложным, чем предыдущий. В общем, делайте, как удобно вам.
Форматы поддерживающие прозрачный фон
После того, как вы удалили фон, необходимо сохранить изображение в формате поддерживающем прозрачность.
Внимание! Прежде чем сохранять обязательно удалите альфа каналы, если вы их создавали в процессе выделения.
Отсечение фона маской
Этот метод не требует использования программы Photoshop. Непосредственно в программе верстки CorelDRAW или Illustrator вы можете обрисовать предмет контуром, а затем скрыть все, что за его пределами.
Если предмет имеет простую форму (круг, прямоугольник, треугольник и т.д.) применение маски может сэкономить время и силы на обработке изображения. При более сложной форме предмета лучше использовать фотошоп и формат изображения поддерживающий прозрачность.
Еще один недостаток этого метода состоит в том, что маской невозможно частично размыть края предмета, в отличие от обработки в фотошопе.
Clipping Mask в Adobe Illustrator
После отсечения маской части изображения вы можете продолжать редактировать контур. Двойной щелчок по обтравочной маске позволит менять расположение предметов внутри контура, удалять, вносить новые, менять форму контура или снова разобрать Clipping Mask и вытащить все элементы.
PowerClip в CorelDRAW
Контур в CorelDRAW также можно редактировать после создание маски.
Еще в CorelDRAW можно сделать объект прозрачным, не создавая контура, вы можете просто перемещать узлы краев изображения инструментом Shape tool, тем самым меняя его форму. Двойной щелчок по контуру будет создавать новые узлы.
3. Прозрачность режимом наложения
Что делать, если фон фотографии, как и фон макета уже белый, но углы изображения перекрывают важные детали макета. В таком случае, можно применить режим наложения. Применение этого режима к изображению будет достаточно, чтобы белый угол не залезал на изображение.
Этот способ позволяет получить прозрачный фон одним нажатием кнопки, совершенно ничего не выделяя и не вырезая.
В панели параметров инструмента настройте так, как показано на скриншоте ниже:
Использовать этот режим нужно аккуратно, у него есть и свои недостатки. Хорошо работать он будет только на белом фоне, а сам предмет тоже станет прозрачным при наложении на текст или на другие изображения.
Видео урок: прозрачный фон
Смотрите подробный видео урок, как сделать прозрачный фон в Adobe Photoshop, Illustrator, CorelDraw тремя разными способами:
Формат PNG
PNG (Portable Network Graphics — портативная сетевая графика) — популярный в интернете растровый графический формат файлов, применяющий технологию сжатия без потерь и поддерживающий полупрозрачность (альфа-канал).
Содержание
Создание изображений в формате PNG
Сделать картинку в формате PNG можно с помощью любого графического редактора (в том числе Paint и Photoshop).
Как сохранить картинку в формате PNG в Paint?
Процесс сохранения в формат PNG с помощью редактора Paint в Windows 10:
Откроется контекстное меню.
Откроется модальное окно выбора папки и названия для файла.
Как сохранить PNG-файл в Photoshop?
Процесс сохранения изображений в формате PNG с помощью редактора Adobe Photoshop CC 2015:
Программа поддерживает изображения в самых разных графических форматах.
Откроется контекстное меню.
Откроется модальное окно сохранения.
Активируйте соответствующий чек-бокс, чтобы сохранить файл PNG с прозрачным фоном (альфа-каналом без фона).
Дополнительные настройки для PNG-8:
Изменение изображения в зависимости от выставленных настроек можно контролировать в левой части окна.
Откроется модальное окно выбора папки и названия для файла.
Как сохранить PNG-файл в Illustrator?
Программа Illustrator является графическим редактором компании Adobe, предназначенным для работы с векторной графикой. Функционал программы схож с функционалом Photoshop — для сохранения изображений в PNG-формате в «иллюстраторе» используйте аналогичную функцию «Сохранить для Web»:
Программа поддерживает изображения в самых разных графических форматах.
Откроется контекстное меню.
Откроется модальное окно сохранения.
Откроются дополнительные настройки формата PNG (описаны выше в процессе сохранения PNG через «фотошоп»).
Изменение изображения в зависимости от выставленных настроек можно контролировать в левой части окна.
Откроется модальное окно выбора папки и названия для файла.
Алгоритм сжатия PNG
Главной отличительной особенностью формата PNG является сжатие без потерь данных: в зависимости от компрессора (сжимающей программы) можно уменьшить «вес» изображения в определённой степени.
Оптимизация PNG-изображений
Использует 8-битную глубину цвета (не более 256 индексированных цветов) и возможность использования прозрачных пикселей.
Использует 24-битную глубину цвета и 8-битный альфа-канал (1 677 7216 цветов + канал прозрачности).
Экспортируя изображение из полноцветного PNG-24 в индексированный PNG-8 можно добиться значительного уменьшения размера файла («веса» изображения):
В приведённых выше примерах можно заметить значительную разницу в размере файлов в зависимости от глубины цвета. Также очевидна нехватка цветов: на 256-цветном варианте можно рассмотреть «гранулы», которые становятся значительно более заметны в 128-цветном варианте из-за явного недостатка цветов в палитре.
Применение формата PNG-24 для изображений, использующих небольшое количество цветов, неоправданно увеличивает размер файла.
Следует иметь ввиду, что ограничение цветовой палитры до минимума ведёт к безвозвратной потере данных, которые невозможно восстановить из оптимизированного изображения.
Применяйте PNG-8 только если максимума в 256 цветов будет достаточно для изображения.
В случаях, когда картинка использует до 256 цветов, ограничение палитры может существенно уменьшить «вес» изображения, ни как не отражаясь на качестве его детализации:
Преимущества формата PNG
Недостатки формата PNG
В таких случаях предпочтительным является формат JPG.
Для таких целей используется формат GIF.
Рекомендации по применению формата
Часто задаваемые вопросы
Чем открыть файл в формате PNG на компьютере?
Открыть файлы в формате PNG можно с помощью любых программ для просмотра изображений (в том числе стандартные приложения Windows), всех современных интернет-обозревателей (браузеров), а также векторных и растровых графических редакторов.
Какой программой можно открыть файл PNG?
Список наиболее популярных программ для открытия и редактировать картинок в формате PNG (и во многих других графических форматах):
Как открыть файл PNG в «фотошопе»?
Чтобы открыть любое изображение в формате PNG (а также в любом другом графическом формате) в Photoshop откройте программу и воспользуйтесь функцией Файл → Открыть. (клавиши Ctrl + O ). Таким же способом это можно сделать в любом другом графическом редакторе.
Как сохранить (создать) PNG-файл?
Как изменить формат изображения на PNG?
Изменить формат картинки (фотографии или рисунка) на PNG можно с помощью функции экспорта в графических редакторах или через онлайн-конвертеры.
Как сжать изображение в формате PNG?
Сжатие PNG происходит при сохранении картинки в данном формате, размер файла на выходе зависит от алгоритма сжатия программы, в которой он сохраняется. Если файл PNG необходимо сжать в большей степени, можно изменить глубину цвета (экспорт из PNG-24 в PNG-8) или воспользоваться онлайн-компрессором tinypng.com.
Как уменьшить (изменить) размер файла в формате PNG?
Уменьшить размер PNG-файла можно следующими способами:
О формате PNG. Краткий тест-драйв
Растровый графический формат PNG, набирающий всё большую популярность в эпоху веб 2.0, появился в далеком 1995 году как замена старому доброму GIF (и, частично, TIFF). К тому времени хозяева запатентованного GIF’а решили сбивать четырёхзначные суммы со всех разработчиков, использующих формат, и свободному сообществу ничего не осталось кроме как предложить бесплатную альтернативу.
PNG vs GIF
Так как PNG-24 использует полную палитру цветов, сравнивать его с GIF довольно сложно. PNG-8 с его индексной палитрой здесь более схож. Приведу скриншоты для сравнения: 
Практика (как и мнение коллег) показывает, что простые небольшие изображения GIF сжимает лучше. Но, когда речь заходит о больших изображениях, GIF всё же остаётся позади.
Кроме того, ещё одно немаленькое преимущество: на самом деле, вопреки распространённому мнению, PNG-8 тоже может использовать полноценный альфа-канал, как и PNG-24. Просто Photoshop его не поддерживает, поэтому Сергей Чикуенок из студии Лебедева рекомендует использовать Adobe Fireworks, чем я и решил заняться (Об этом немного позже).
PNG vs JPEG
А в этой битве, если прозрачность нам не нужна, PNG проигрывает, так сказать, на «среднем сегменте рынка». Хотя, если прилинковать к JPEG’у ICC-профайл, разница в объёме становится незаметной. Мои замеры приводились на – JPEG 100%. А при меньшем качестве (с не особо заметной для глаза разницей) сравнение, к сожалению, становится ещё более печальным.
В общем, смотрите сами: 
UPD А вообще, результаты значительно зависят от самого изображения: PNG лучше сжимает градиенты и однотонные участки, но для фотографий лучшее сжатие даёт JPEG. Хотя, говорят (самому с трудом верится), на больших фотографиях PNG и тут лидирует – проверено только что в процессе конвертирования скриншотов к статье (PNG против JPEG-70% – выигрыш раза в полтора).
Жизнь после Photoshop’а или сжимаем дальше
Во многих ситуациях PNG остаётся вообще незаменимым, так как прозрачность нормально не поддерживается ни одним из альтернативных веб-форматов, а какой простор он открывает дизайнерам и верстальщикам… UPD Кроме того, с учётом специфики формата, для элементов дизайна в вебе – это, наверное, лучшее решение.
Гуглим и качаем – PNGOut. Программка около 1.5 Мб с минимальным количеством настроек позволяет прогонять (в том числе пакетно) PNG-файлы со сжатием.
На пакете иконок (90 файлов с прозрачным фоном без особых наворотов) выигрыш в объёме составил в среднем около 10-15%. Не особо, конечно, впечатляет. Но для рассмотренных выше файлов-примеров процент сжатия колебался от 10% (большой постер без прозрачности) до 72% (полупрозрачные прямоугольники). Так что, попробовать стоит, тем более работа с утилитой много времени не занимает. 
Adobe Fireworks
Честно говоря, Adobe Fireworks стал для меня настоящим открытием: PNG-8, PNG-24 и PNG-32 + куча настроек!
3 версии формата в AF: 
PNG-24 и PNG-32 я подробно не рассматривал. Насколько я понял, в их терминологии 32 – с альфа-каналом, а 24 – без. По предварительным прикидкам Photoshop справляется с этй задачей лучше.
А вот PNG-8 разбил все мои (и большинства коллег) стереотипы. Итоговый файл гораздо меньше GIF’а и существует полноценная поддержка прозрачности двумя способами: alpha и index transparency. Единственным минусом по сравнению с PNG-24 остаётся индексная палитра, хотя всё зависит от потребностей. Моё личное мнение – PNG-8 в большинстве случаев уделывает и GIF, и PNG-24.
PNG против GIF в AF, хотя как раз с привычными GIF-JPEG Fireworks работает по умолчанию не очень (с настройками я не игрался). Но даже в сравнении с Photoshop’овским результатом разница в пользу PNG:
И вот всё разнообразие PNG-8 — ради этого стоит устанавливать Adobe Fireworks: 
Для сравнения: тот же файл стараниями Photoshop весил 3 188 байт против полученных теперь 450, то есть раз в 6 больше.
Вердикт
По-моему, GIF своё уже отжил. Теперь его существование – в первую очередь вопрос инертности общества. UPD Впрочем, сегмент разных анимационных приятностей Всё рано пока остаётся за GIF :).
Для прозрачных элементов дизайна стоит использовать PNG-8 (реже PNG-24, когда палитры PNG-8 недостаточно для сохранения изображения без потерь).
Для фотографий и сложных графических элементов лидером по-прежнему остаётся JPEG из-за мощных возможностей оптимизации изображения. Хотя в некоторых случаях может оказаться достаточно и PNG-8 – как и раньше, с GIF’ом, смелые эксперименты – залог успеха. UPD Но для действительно больших изображений всё же JPEG проигрывает.
Всем веб-дизайнерам и верстальщикам рекомендую устанавливать Adobe Fireworks и взглянуть на PNG в новом ракурсе.
UPD Я действительно не специалист и обзор писался на коленке, о чём говорит эпитет «краткий»; возможно, не на лучших примерах. Поэтому спасибо всем, кто принял активное участие в обсуждении, особенно kmike и @merlin_rterm. В процессе узнал для себя много нового, в частности, специфику сжатия PNG и что JPEG-100 все равно с потерей качества. Большая часть этих интересностей добавлены прямо в тексте статьи, для того, чтобы не отрывать их от контента.
Обновил иллюстрации. К сожалению, сервис, на котором размещены картинки, не хранит PNG, всё равно конвертируя его в JPEG. Но теперь, по крайней мере, качество лучше. Ещё раз повторюсь – моей целью не было сравнивание артефактов, а только килобайты и ещё раз килобайты итоговых файлов.
Прозрачность возможна в нескольких форматах графических файлов. Термин «прозрачность» используется разными людьми по-разному, но в простейшем случае это «полная прозрачность», то есть нечто совершенно невидимое. Только часть изображения должна быть полностью прозрачной, иначе ничего не будет видно. Более сложным является «частичная прозрачность» или «полупрозрачность», когда достигается эффект частичной прозрачности изображения так же, как и цветного стекла. Поскольку в конечном итоге печатная страница, экран компьютера или телевизора может быть только одного цвета, частичная прозрачность всегда моделируется на каком-то уровне путем смешивания цветов. Есть много разных способов смешивания цветов, поэтому в некоторых случаях прозрачность неоднозначна.
Кроме того, прозрачность часто является «дополнительной» для графического формата, и некоторые графические программы игнорируют прозрачность.
Подходящий редактор растровой графики показывает прозрачность с помощью специального рисунка, например рисунка в виде шахматной доски.
СОДЕРЖАНИЕ
Прозрачные пиксели
Прозрачный цвет следует выбирать осторожно, чтобы предметы, которые случайно оказались одного цвета, не исчезли.
Даже эта ограниченная форма прозрачности имеет неоднородную реализацию, хотя большинство популярных веб-браузеров способны отображать прозрачные изображения в формате GIF. Эта поддержка часто не распространяется на печать, особенно на печатающие устройства (например, PostScript ), которые не включают поддержку прозрачности в устройстве или драйвере. За пределами мира веб-браузеров прозрачные файлы GIF практически не поддерживаются.
Граничные ограничения прозрачных пикселей
Края символов и других изображений с прозрачным фоном не должны иметь оттенков серого : они обычно используются для промежуточных цветов между цветом буквы / изображения и цветом фона, обычно оттенки серого являются промежуточными между черной буквой и белый фон. Однако, например, с красным фоном промежуточные цвета будут темно-красными. Пиксели с серыми краями дадут уродливый и нечеткий результат. Для переменного цвета фона нет подходящих фиксированных промежуточных цветов.
Частичная прозрачность по альфа-каналам
Некоторые форматы изображений, такие как PNG и TIFF, также допускают частичную прозрачность через альфа-канал, что решает проблему ограничения границ. Вместо того, чтобы каждый пиксель был прозрачным или непрозрачным, для него можно установить 254 уровня частичной прозрачности, что позволяет некоторой части фонового изображения отображаться через изображение переднего плана.
Процесс объединения частично прозрачного цвета с его фоном («композитинг») часто не определен, и результаты могут быть не во всех случаях одинаковыми. Например, если используется цветокоррекция, следует ли комбинировать цвета до или после цветокоррекции?
Прозрачность по обтравочному контуру
Составление расчетов
В то время как некоторые спецификации прозрачности расплывчаты, другие могут содержать математические подробности того, как должны быть составлены два цвета. Это довольно простой пример того, как вычисления композиции могут работать, могут давать ожидаемые результаты, а также могут преподносить сюрпризы.
В этом примере необходимо совместить два оттенка серого. Значениями оттенков серого считаются числа от 0,0 (белый) до 1,0 (черный). Подчеркну: это только одно из возможных правил прозрачности. Если вы работаете с прозрачностью, проверьте правила, которые используются в вашей ситуации.
Это важно, поскольку это означает, что при объединении трех или более объектов с этим правилом прозрачности окончательный цвет во многом зависит от порядка выполнения вычислений.
Таким образом могут быть реализованы альфа-каналы, где альфа-канал обеспечивает уровень непрозрачности, который одинаково применяется ко всем другим каналам. Для работы с приведенной выше формулой непрозрачность необходимо масштабировать до диапазона от 0 до 1, независимо от его внешнего представления (часто от 0 до 255 при использовании 8-битных выборок, таких как «RGBA»).
Прозрачность в PDF
Начиная с версии 1.4 стандарта PDF ( Adobe Acrobat версии 5), поддерживается прозрачность (включая полупрозрачность). Прозрачность в файлах PDF позволяет создателям достигать различных эффектов, включая добавление теней к объектам, создание полупрозрачных объектов и слияние объектов друг с другом или с текстом. PDF поддерживает множество различных режимов наложения, а не только наиболее распространенный метод усреднения, а правила наложения множества перекрывающихся объектов позволяют выбирать (например, смешивается ли группа объектов перед смешиванием с фоном или каждый объект по очереди смешивается на задний план).
Тот факт, что модель прозрачности PDF настолько сложна, означает, что она плохо поддерживается. Это означает, что RIP и принтеры часто имеют проблемы с печатью PDF-файлов с прозрачностью. Решением этой проблемы является либо растрирование изображения, либо применение к PDF-файлу сглаживания векторной прозрачности. Однако выравнивание векторной прозрачности чрезвычайно сложно и поддерживается только несколькими специализированными пакетами.
Прозрачность в PostScript
Язык PostScript имеет ограниченную поддержку полной (а не частичной) прозрачности в зависимости от уровня PostScript. Частичная прозрачность доступна с расширением pdfmark, доступным во многих реализациях PostScript.
1-й уровень
PostScript уровня 1 обеспечивает прозрачность двумя способами:
Уровень 2
PostScript уровня 2 не добавляет специальных функций прозрачности. Однако с помощью шаблонов произвольную графику можно нарисовать через маски, определяемые любыми векторными или текстовыми операциями. Однако это сложно реализовать. Кроме того, это слишком часто достигало пределов реализации, и очень немногие прикладные программы когда-либо предлагали эту технику.
Уровень 3
PostScript уровня 3 добавляет дополнительную опцию прозрачности для любого растрового изображения. Может быть применен прозрачный цвет или диапазон цветов; или отдельная 1-битная маска может использоваться для предоставления альфа-канала.
Инкапсулированный PostScript
Файлы EPS содержат PostScript, который может быть уровня 1, 2 или 3 и может использовать указанные выше функции. Более тонкая проблема возникает с предварительным просмотром файлов EPS, которые обычно используются для отображения представления файла EPS на экране. Существуют эффективные методы настройки прозрачности в предварительном просмотре. Например, предварительный просмотр TIFF может использовать альфа-канал TIFF. Однако многие приложения не используют эту информацию о прозрачности и поэтому отображают предварительный просмотр в виде прямоугольника. Полупатентованный метод, впервые примененный в Photoshop и принятый рядом приложений допечатной подготовки, заключается в том, чтобы сохранить путь обрезки в стандартном месте EPS и использовать его для отображения.
Кроме того, некоторые программы, которые генерируют предварительный просмотр EPS, будут генерировать информацию о прозрачности в предварительном просмотре.
В последнее время стали появляться приложения, которые полностью игнорируют предварительный просмотр; поэтому они получают информацию о том, какие части предварительного просмотра нужно рисовать, интерпретируя PostScript.