gorker.ru
Статьи
- Cтатьи о графических программах
- Растровая и векторная графика, описание графических программах и редакторов.
Прозрачный GIF — оптимизация под цветной фон.
- Автор: Горкер Валерий Олегович aka Morphine.
- 29 июля 2008
Изображения в формате GIF могут содержать до 256 цветов. GIF имеет формат сжатия LZW (Lempel Ziv Welch) — сжатие без потери данных.
Задача
Поместить изображение в формате GIF на не однородный фон.
Очень часто при нарезке макета сайта, для последующей верстки требуется сохранять элементы дизайна в формате GIF с прозрачной областью. После сохранения при помощи программы «PhotoShop», через «File/Save for Web», на изображении появляются лишние белые пиксели - это следствие примененного «anti-aliasing» - сглаживание краев. Изображение с «anti-aliasing» имеет белый ореол, что не подходит в нашем случае.
Как убрать лишние белые пиксели?
За образец я взял вот такое изображение. Мы будем вырезать слово «GIF», сохранять при помощи программы «PhotoShop» и вставлять его обратно на фон.
Итак, чтобы изображение не выглядело рубленным, мы увеличим базовое выделение изображения на 1px больше при помощи инструмента Expand (Select/Modify/Expand). После выделения нужно «слить» слои (Layers/Merge Layers), что бы скопировать изображение вместе с фоном.
Получилось изображение, границы которого имеют цвет фона.
Сохранение
При сохранении полученного изображения (File/Save for Web) без дополнительных настроек, и последующего размещения на фоне, мы получим вот такой результат, который нам не подходит.
Что бы такого результата не произошло, при сохранении (File/Save for Web) нужно поменять значение одного параметра (Matte:). По умолчанию там стоит белый цвет, а нам нужно выбрать значение «None», тем самым мы говорим, что не нужно ни каким цветом «матировать» границы нашего изображения.
Сохраняем со значением «None», далее ставим полученное нами изображение на фон и смотрим результат, который нас полностью устраивает.
Конечно же, полученное изображение не получится поставить на другой фон, будут видны области дополнительного копирования. Для другого фона придется проделать все действия заново.