Какие форматы графических файлов поддерживают прозрачный фон
На настоящий момент формат PNG, расшифровывающийся как Portable Network Graphics – один из популярнейших растровых форматов в сфере веб-дизайна. Решение о разработке было принято в 1995 году на конференции, где обсуждалась необходимость создания аналога GIF-формата. Так как последний подразумевал оплату соответствующей лицензии, предполагалось, что новый формат станет более доступным. В результате появился непатентованный PNG, ставший прославленному GIF достойным конкурентом. (О других графических форматах читайте здесь )
PNG: плюсы и минусы
Формат в основном используется для работы в интернете и в графических редакторах.
К его преимуществам относятся:
- Возможность сжатия файла с незначительными потерями или вовсе без них. Рисунок сохраняет исходное качество вне зависимости от интенсивности сжатия;
- Возможность сколько угодно сохранять объект в процессе работы, а потом видоизменять снова. Изначальное качество не меняется;
- Цветовой диапазон формата шире, нежели у GIF. PNG-8 работает с 256 цветами, PNG-24 – с 16,7 млн. цветов;
- Поддержка альфа-канала. Эта функция позволяет плавно сочетать изображение с фоном за счет уменьшаемой прозрачности. Уровни прозрачности по количеству соответствуют доступным цветам и могут варьироваться от предельной контрастности до полного растворения;
- Возможность создания и комбинирования слоев;
- Доступность включения в материал метаданных (при необходимости сохранения авторской информации).
- Компактный размер изображений.
В числе недостатков можно выделить:
- Отсутствие режима анимации;
- Затруднения при работе с полноцветными типами изображений;
- Невозможность сохранять в одном файле сразу несколько рисунков (попытки добавить формату эту функцию предпринимались, но пока не получили всеобщего признания).
Из списка преимуществ становится ясно, чем PNG в первую очередь привлекает интернет-дизайнеров. Его «изюминка» – возможность сохранить картинку на вырезанном ( прозрачном ) фоне. Такая функция очень важна при работе с сайтами, дизайном продукции. В частности, большинство логотипов создаются именно в формате PNG, поскольку являют собой фигурное изображение без фона. (Подробнее про виды логотипов читайте в нашей статье )
Сфера применения
Логотипы – лишь частный пример того, как может использоваться формат. Элементы с прозрачным фоном необходимы для оформления веб-страниц, создания эффектного текста, объемных и рельефных изображений, при различных техниках печати и гравировки. Фактически этот формат применяется во всех сферах дизайна, где необходимо наличие прозрачного фона и возможность трансформировать рисунок без потери качества.
Логотипы сейчас используют все компании, которые стремятся популяризировать свои услуги и продукцию на рынке. Но не все эмблемы можно считать удачными. Грамотно разработать логотип также важно, как и в дальнейшем его эффективно использовать.
Для начала нужно определиться с общим стилем будущего фирменного знака, сделать наброски и только потом приступить к детальной проработке. Также есть вариант обратиться в специалистам в сфере дизайна, которые сделают лого по Вашим требованиям. В таком случае Вам не потребуется самостоятельно продумывать внешний вид знака.
Другой способ — сделать логотип самостоятельно в графическом редакторе или с помощью специальной онлайн-программы. Все эти варианты имеют свои плюсы и минусы, поэтому следует отталкиваться от бюджета компании и необходимых сроков получения готового продукта.
Виды графики
Также в процессе разработки встает вопрос, в каком формате сохранять логотип. В настоящее время существует два основных вида графических форматов : векторный и растровый. Об их особенностях, плюсах и минусах расскажем далее.
Векторная графика
Изображения, представленные в такой графике, составлены из различных геометрических фигур, прямых и изогнутых линий, точек и т.д. Это позволяет увеличивать и уменьшать размер картинки, сохраняя при этом качество и четкость элементов. Поэтому данный формат чаще всего используется в печати. Далее о преимуществах и недостатках векторной графики.
- Изображения такого формата можно многократно увеличивать и уменьшать, не беспокоясь за качество;
- Размер файла никак не зависит от объема и сложности картинки;
- Удобно использовать для изготовления полиграфической печатной продукции;
- Картинку легко видоизменять (как отдельные части, так и изображение в целом).
- Часто сложно получить действительно реалистичное изображение, ведь оно составляется из отдельных фигур и линий;
- Для создания продукта можно использовать ограниченное количество средств.
Растровая графика
Картинки данного вида выполнены из отдельных пикселей, поэтому при приближении напоминают мозаику. Если изображение хорошего качества, то данные элементы будут невидны.
- Выполненные в растровой графике иллюстрации отличаются реалистичностью, потому что передают графику и состоят из множества отдельных частей;
- Пользователи могут создавать по-настоящему привлекательные и проработанные изображения;
- Доступен широкий выбор инструментов для рисования.
- Даже небольшие картинки будут «весить» много, занимая место на носителе;
- При многократном увеличении размера изображения будут видны пиксели, что значительно сужает круг применения данных иллюстраций.
Форматы логотипов
Эмблему, как и любую другую картинку, можно сохранить в различных форматах. Далее подробнее про каждый из них.
Ai (Adobe Illustrator)
Если сохранить изображение в данном формате, то его в дальнейшем Вы сможете продолжить его редактирование. Это позволяет исправлять логотип после сохранения, если возникает такая необходимость.
PDF (Portable Document Format)
Данный формат в исходном варианте отображает шрифты и изображения различного вида. Также файл такого типа легко напечатать.
EPS (Encapsulated PostScript)
Используется для получения максимально высокого качества эмблемы. В таком формате изображение можно масштабировать, сохраняя при этом четкость границ.
PNG (Portable Network Graphics)
Этот растровый формат сжимает логотип, но при этом не портит его качество. Файлы такого вида открываются с помощью любой программы для просмотра изображений.
JPG и JPEG (Joint Photographic Experts Group)
Логотип, сохраненный в таком формате, мало весит и быстро загружается. Кроме того, эмблема имеет качество не хуже, чем у изображения векторной графики.
TIFF (Tagged Image File Format)
Очень похож на JPG и JPEG, однако файлы этого формата весят гораздо больше. Это обусловлено тем, что картинки имеют более высокое качество.
Ответы на частые вопросы
Однозначного ответа на этот вопрос нет. Эмблему можно сохранить в любом удобном формате. Главное, учитывать дальнейшую сферу применения логотипа. Например, если Вы планируете печатать фирменный знак на продукции компании и одежде, то лучше выбирать векторные форматы (EPS, PDF или Ai).
Чтобы у готовой эмблемы отсутствовал фон, можно сохранить ее в форматах PNG или SVG.
- В каком формате сохранять логотип в фотошопе?
При разработке логотипа в программе Adobe Photoshop доступны различные форматы сохранения файла: PNG, TIFF, JPG и PSD.
Эмблема, изначально представленная в векторной графике, легко сохраняется в соответствующем формате. Для этого нужно выбрать один из вариантов: Ai, PDF или EPS.
Если Вы изначально создали эмблему в растровой графике, то ее в дальнейшем можно преобразовать в векторную. Это можно сделать двумя способами. Первый — обрисовать логотип векторными элементами в Фотошопе. И второй вариант — воспользоваться онлайн-программой (например, VectorMagic ).
- В каком формате сохранять логотип для сайта?
К формату эмблемы, которая будет применяться на сайте, нет строгих требований. Но желательно выбирать PNG формат, потому что такой файл будет занимать меньше места и при его загрузке не будет возникать проблем.
Заключение
Логотип, который выполнен качественно и привлекательно, нужно правильным образом сохранить. Главное, учитывайте при выборе формата, где в дальнейшем будет применяться лого и в каком размере. Это поможет верно определиться с нужным вариантом. После сохранения изображения его можно сразу начать применять в деятельности.
Переделал недавно страницу уроки wordpress , и пока делал, обнаружил, что многие верстальщики не знают, какой формат лучше использовать для изображений с прозрачным фоном: png-8 или png-24, и в чем вообще различия. В этой статье я объясню в чем различия, и расскажу, в каком случае какой формат больше подойдет. Не секрет, что верстальщики работают в первую очередь с фотошопом. А там, при сохранении изображения для веб, есть возможность выбрать формат. Если изображение не имеет прозрачности, то рекомендую использовать jpg , с качеством 60-70%. Такой процент не сильно снизит качество, зато очень даже неплохо снизит вес изображения.
Как известно, вес изображений на сайте напрямую влияет на скорость загрузки сайта.
Какой выбрать формат для прозрачных изображений?
Существует 2 формата, поддерживающих прозрачность: gif и png . Раньше все использовали gif, т.к. он лучше всего сжимал изображения. Впоследствии появился png с новым алгоритмом сжатия, и изображения стали весить еще меньше. На качестве это отразилось только с лучшей стороны.
Так потихоньку начал уходить с рынка формат gif . Используют его теперь практически только для анимации.
png-8 или png-24: какой формат выбрать?
Основное различие в этих форматах в том, что png-8 использует только 256 цветов, в то время, как png-24 использует 16 миллионов. Так что изображения формата png-8 весят меньше, нежели png-24 .
Отсюда следует, что формат можно и нужно выбирать в зависимости от цветности картинки. Если изображение абстрактное (такое очень зачастую содержит много разных цветов), то очень желательно сохранять его в формате png-24 .
Если на изображении встречается мало цветов, то я настоятельно рекомендую использовать png-8 .
В любом случае большинство из нас работают в фотошопе, и там есть предпросмотр оптимизированного изображения. Экспериментируйте! Попробуйте png-8 , если результат неудовлетворительный - переходите на png-24 .
В одной из следующих статей я поделюсь с вами секретом оптимизации изображений. Ведь после фотошопа они далеко не максимально сжимаются. Поэтому подписывайтесь на рассылку, и будьте всегда в курсе!
Ну вот, сегодня мы узнали разницу между форматами png-8 и png-24 . Это все, что я хотел сегодня донести. Увидимся с Вами в следующих уроках!
Разрабатывая макет полиграфии или верстая сайт, может потребоваться некоторые участки изображения сделать прозрачными. Например, для того, чтобы фон фотографии совпадал с фоном макета или углы изображения не перекрывали текст.
Прозрачный фон изображения позволяет делать красивое обтекание текста по форме предмета. Этот прием сокращает пустое пространство и улучшает вид верстки.
Такие векторные редакторы как CorelDRAW и Illustrator могут скрывать часть изображения с помощью контурной маски, это быстрый и простой метод сделать прозрачный фон, если форма предмета простая.
Но лучшим решением будет подготовить изображение в Photoshop и сохранить в формате поддерживающим прозрачность фона.
В этом видео уроке подробно опишу 3 способа, а также, какие форматы поддерживают прозрачность.
Вырезание объекта в фотошопе
Чтобы сделать прозрачный фон, необходимо вырезать предмет, а фон удалить. В зависимости от формы предмета, выберите тот способ выделения, который будет удобен в данной ситуации.
Качество готовой картинки в основном зависит от качества выделения. Постарайтесь максимально точно повторить форму предмета подходящими инструментами лассо.
Если края предмета имеют не четкие края, выделение тоже должно иметь слегка размытые грани. Для этого нужно щелкнуть по выделению правой кнопкой мыши и задать значение "Растушевки". Значение размытия сработает ко всему выделению.
Однако, бывают редкие ситуации, когда только часть предмета имеет размытый край или отсутствие фокусировки. В таком случае, необходимо комбинировать несколько способов выделения.
Для примера, я специально выбрал более сложное изображение с разной степенью фокусировки, соответственно с разной четкостью границ.
Основной предмет с высокой четкостью границ можно выделить обычным инструментом "Лассо", а нечеткие края - мягкой кистью в режиме "Быстрой маски" (Quick Mask - Клавиша Q), как показано на снимке ниже.
Преимущество этого метода заключается в том, что вы можете менять жесткость краем меняя жесткость кисти в процессе рисования. Но есть и недостаток: выделение кистью не такое точное как лассо. Но это не единственный способ получить выделение с разной четкостью границ.
Добавление к выделению нечетких областей
А теперь, подробнее о другом способе выделения. Выделите основную часть изображения с четкими границами, затем нажмите - Select/Save Selection.
Снимите выделение и создайте новое, вокруг нечеткой области. Нажмите правой кнопкой мыши - Feather. (Растушевка. ) Задайте необходимое значение. Как правило, нескольких пикселей будет достаточно.
Теперь, нажмите - Select/Load Selection. Выберите пункт - Add to Selection (добавить к выделению). Ваше прошлое выделение склеиться с новым, а разные степени размытия сохранятся.
Возможно, этот прием покажется более сложным, чем предыдущий. В общем, делайте, как удобно вам.
Форматы поддерживающие прозрачный фон
После того, как вы удалили фон, необходимо сохранить изображение в формате поддерживающем прозрачность.
PSD - самый первый из них. Он легко читается во всех редакторах Adobe и не только. Он содержит всю информацию о слоях эффектах и т.д. поэтому, как правило, имеет большой вес.
Tiff - формат похожий по свойствам с предыдущим. Тоже может содержать прозрачные области. Из-за высокого качества, часто используется в полиграфии.
PNG - имеет относительно не большой вес и позволяет сохранять качество изображения. Чаще всего используется в веб-дизайне. Баннера, кнопки сайтов, графические элементы веб-страницы часто содержат этот формат.
Внимание! Прежде чем сохранять обязательно удалите альфа каналы, если вы их создавали в процессе выделения.
Отсечение фона маской
Этот метод не требует использования программы Photoshop. Непосредственно в программе верстки CorelDRAW или Illustrator вы можете обрисовать предмет контуром, а затем скрыть все, что за его пределами.
Если предмет имеет простую форму (круг, прямоугольник, треугольник и т.д.) применение маски может сэкономить время и силы на обработке изображения. При более сложной форме предмета лучше использовать фотошоп и формат изображения поддерживающий прозрачность.
Еще один недостаток этого метода состоит в том, что маской невозможно частично размыть края предмета, в отличие от обработки в фотошопе.
Clipping Mask в Adobe Illustrator
Разместите изображение в редакторе Illustrator и обрисуйте контуром предмет. Затем выделите изображение и контур вместе и нажмите правой кнопкой мыши - Обтравочная маска (Make Clipping Mask). Часть изображения за пределами контура скроется.
После отсечения маской части изображения вы можете продолжать редактировать контур. Двойной щелчок по обтравочной маске позволит менять расположение предметов внутри контура, удалять, вносить новые, менять форму контура или снова разобрать Clipping Mask и вытащить все элементы.
PowerClip в CorelDRAW
В CorelDRAW есть такой же прием, однако работает он немного иначе. Также нужно обрисовать предмет контуром, а затем, выделить изображение и нажать - Effects/PowerClip/Place inside Frame. Вместо указателя появится стрелка, которой нужно показать контур.
Контур в CorelDRAW также можно редактировать после создание маски.
Еще в CorelDRAW можно сделать объект прозрачным, не создавая контура, вы можете просто перемещать узлы краев изображения инструментом Shape tool, тем самым меняя его форму. Двойной щелчок по контуру будет создавать новые узлы.
3. Прозрачность режимом наложения
Что делать, если фон фотографии, как и фон макета уже белый, но углы изображения перекрывают важные детали макета. В таком случае, можно применить режим наложения. Применение этого режима к изображению будет достаточно, чтобы белый угол не залезал на изображение.
Этот способ позволяет получить прозрачный фон одним нажатием кнопки, совершенно ничего не выделяя и не вырезая.
В Illustrator нужно открыть панель прозрачностей - Window/Transparency. А затем выбрать режим - Multiply (Умножение).
В CorelDRAW возьмите инструмент - Transparency.
В панели параметров инструмента настройте так, как показано на скриншоте ниже:
Использовать этот режим нужно аккуратно, у него есть и свои недостатки. Хорошо работать он будет только на белом фоне, а сам предмет тоже станет прозрачным при наложении на текст или на другие изображения.
Видео урок: прозрачный фон
Смотрите подробный видео урок, как сделать прозрачный фон в Adobe Photoshop, Illustrator, CorelDraw тремя разными способами:
Разделение каналов
Для разделения я использую консольные утилиты ImageMagik.
Эта команда отделяет альфа-канал:
convert file.jpg -channel Alpha -separate file.mask.jpg
Следующая команда создает JPEG файл, отбрасывая данные о прозрачности. Что характерно, некоторые другие утилиты (в т.ч. и Photoshop) при конверсии PNG файла в JPEG добавляют к нему некую одноцветную подложку и лишь затем сохраняют в RGB, что дает красивую, но неверную картинку с pre-multiplied alpha.
convert file.jpg -quality 90 -alpha off file.jpg
Качество полученного файла регурируется параметром quality 90. 90% качества для JPEG это больше, чем Apple ставит для скриншотов программ и фильмов. Думаю, каждый сможет подстроить под свой вкус это значение.
Оптимизация
Чтобы не вводить команды каждый раз вручную, я написал простенький скрипт на bash:
Вот результат работы скрипта:
В моем случае из файла в 1,8Мб получилось два файла на 380Кб и 35Кб.
Склеивание
Само склеивание делается очень просто — загружается две картинки в UIImage, затем создается на их основе CGImage методом WithMask (в ObjC это CGImageRef и initWithMask соответственно), а потом оборачивается в новый UIImage.
В реальном проекте я сделал чуть сложнее и проверяю наличие файла *.mask.jpg и если он отсутствует, то возвращаю обычный UIImage.FromFile().
Профит
Визуально игра не изменилась никак. Задержка загрузки и склеивания текстур на глаз не заметна, потому я и не стал ее замерять. Сам же проект уменьшился на 6 (!!) мегабайт, как в .ipa виде, так и в iTunes и на устройстве.
Скрин из игры в PNG. Никаких артефактов или проблем сжатия/прозрачности не видно.
Немного смущает удвоенное количество картинок в папке проекта, но это можно пережить. Изменения кода минимальные. Для графики интерфейса этот метод не идеален из-за необходимости вручную присваивать UIImage, а не загружать из NIB/XIB, но для собственных контролов или текстур подходит вполне. Даже если JPEG сохранять с 100% качеством, размер полученных файлов может быть меньше, чем изначального PNG без потерь качества.
P.S. ImageMagick и optipng ставятся из портов (MacPorts/Fink/Brew) и называются так же. Скрипт jpegrescan качается с pastebin и использует порт jpeg
Читайте также: