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», далее ставим полученное нами изображение на фон и смотрим результат, который нас полностью устраивает.

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