Сложный секрет графического формата GIF

[12.9.98]

Отличительная особенность GIF от других форматов графики на вебе (т.е. от JPEG) — умение быть «прозрачным». Простая, казалось бы, особенность, но очень полезная. С прозрачностью можно делать много разных хитрых штук.

Формат GIF придумали в 1987 году. И назвали его (сюрприз!) — GIF87. Через два года стандарт переписали немного, улучшили компрессию, добавили нечто, позволившее делать анимацию, появилась возможность создавать альфа-канал (результат от применения которого в народе называется «прозрачность»). Случилось это все в 1989 году. И новый формат назвали (сколько сюрпризов в одном выпуске!) — GIF89. С тех пор он практически не менялся.

Что делает простой советский вебмастер для создания прозрачного GIF? Открывает Photoshop, выбирает меню FILE, находит пункт Export as GIF89a и в полученном окне тыкает пипеткой в те цвета, которые станут прозрачными. Или берет любую другую программу, которая позволяет выбрать один или несколько цветов для той же цели.

Что же происходит в результате? Выбранные цвета из GIF исчезают навсегда. Вместо этого вы получаете прозрачные области. Приглядимся к картинкам на сером фоне (чтобы была видна прозрачность):

Что произошло с технической точки зрения? Убрали белый цвет? Ну, типа да. Могли убрать и несколько. Компьютеру совершенно все равно. Просто создание прозрачности путем выбора цвета — это самый доступный для понимания простого человека способ. На самом деле, программе можно указать любую область для прозрачности. А люди мучаются, закрашивают какой-то участок картинки одним цветом специально для того, чтобы потом сделать его прозрачным.

Что случилось с картинкой, когда мы тыкнули пипеткой в белый цвет? К ней добавился альфа-канал. На что он похож? Вот на что:

Черным покрашена та область, которая будет прозрачна. Белым — то, что будет видно.

Если бы в альфа-канале GIF были возможны полутона, то можно было бы делать полупрозрачность.

Вот в нашем примере остался мусор по краям картинки, и какие-то части циферблата тоже были белыми (в альфа-канале — черные точечки посередине картинки). Берем Photoshop и начинаем править. Получаем:

Это все хорошо, но не идеально. Если у нас есть возможность работать с оригиналом, а не с готовым GIF'ом, то альфа-канал надо делать вручную. Можно делать прозрачность самому, лучше всяких программ. Достаточно в Photoshop'е в меню Select выбрать душевный пункт «Color Range». В открывшемся окне выбрать белый цвет, поставить значение размытости («Fuzziness») на 1 или больше (по желанию, на цвет товарищей нет). С активной выбранной областью переключайтесь в каналы и создавайте там новый. Заходите в него. В окне с изображением закрашивайте выбранную область черным цветом. Инвертируйте выборку и закрасьте остаток белым. Теперь все остальное — лишь дело техники. В полученном альфа-канале (а вы только что именно его и создали) ручками дорисовывайте и удаляйте пиксели по вкусу.

Сразу следует привести несколько советов для успешного создания правильных прозрачных GIF'ов: Всегда делайте GIF прозрачным на том фоне, на котором он потом будет находиться. Это гарантирует приятность краев картинки для глаза. Т. е. не будет такого, как в примере чуть выше — отвратительные белые пиксели на сером фоне. Старайтесь избегать пипеток, делайте все руками (но если картинка с прямоугольными краями, то сгодится и пипетка, потому как мозгов в таком случае много не надо). Всегда держите под рукой копии оригинала и промежуточных стадий — может пригодиться, если сделать по дороге ошибку.

Рассмотрим, раз уж пошла такая пьянка, еще одно применение ручного редактирования. Когда вам нужно часть картинки иметь прозрачной, а часть — нет. При этом обе эти части одного и того же цвета:

Делаем альфа-канал вручную, переводим картинку в режим индексированных цветов и получаем:

Как мы видим, часть белого стала прозрачной, часть — осталась. Пипетка в такой ситуации пошлет вас подальше.

Да здравствуют руки.