Прозрачный GIF.

Прозрачный GIF - это обыкновенное изображение в формате GIF, в котором некоторые цвета  сделанны как прозрачные. Это свойство формата GIF очень широко используется в Интернете, особенно если Вы хотите, чтобы Background (фон) Вашей страницы просвечивал сквозь некоторые части изображения. Здесь я приведу несколько простых примеров создания таких картинок.
Для создания прозрачных GIF'ов в Photoshop'е Вам потребуется специальный плагин Gif89 Export, который уже есть в программе Photoshop 4.0 и выше. Если у Вас более ранняя версия программы, то скачайте плагин с сайта Adobe. Ну поехали...

Gif89 Export плагин находится в меню File/Export... (Файл/Экспортировать) и в зависимости от того, какой цветовой режим Вы используете RGB или Index color, он работает по-разному.

1. Если Вы экспортируете изображение, которое уже имеет формат GIF или оно переведено в режим Index color, то появится такое диалоговое окно. В таком случае изображение показано по цветам, которые в нем присутствуют. Для того, чтобы сделать прозрачный GIF просто выбирете цвета, которые Вы бы хотели сделать прозрачными, путем нажатия на них непосредственно на рисунке или на   цветовом диапазоне внизу диалогового окна. После этого нажмите OK и сохраните изображение в файл.

2. Вот такое окно появится у Вас, если Вы экспортируете RGB изображение. Здесь нет выбора цветов, зато есть много других опций, таких как выбора паллитры и глубины цвета (чем больше глубина, тем лучше качество будущей картинки, но и размер ее будет тоже больше). И здесь, и в предыдущем пункте Вы также можете выбрать "цвет" прозрачного фона. Это особенно важно для  того, чтобы Ваш прозрачный GIF наиболее лучше совпадал с  бэкграундом странички. Но об этом далее...  При таком экпортировании необходимо иметь изображение на прозрачной основе, такое как на рисунке справа.

Первый шаг при создании Web странички - это выбор фона (бэкграунда). Впоследствии все сделанные, Вами картинки должны гармонировать с бэкграундом. И если Вы хотите разместить прозрачный GIF на своей страничке, то делать его надо осовываясь на фоне. Вот пример...

	Шаг 1. Загрузите картинку с Вашим фоном.
	Шаг 2. Примените фильтр Filter/Artistic/Sponge (Фильтр/Иммитация/ Губка) с установками: Размер мазка=10, Контрастность=0, Размытость=15.
	Шаг 3.  С помощью инструмента пипетка выбирете наиболее общий цвет в получившимся изображении. Выделите все (Ctrl -A) и залейте картинку этим цветом (Edit/Fill/Foreground Color).
	Шаг 4.  Теперь на новом слое создайте нужное Вам изображение. В моем случае это круглая кнопка. После того, как Ваша картинка будет готова, конвертируйте ее в Index color (Индексированные цвета) и экспортируйте в GIF (Gif89 Export). Кликните на пурпурный цвет, чтобы сделать его прозрачным и сохраните.
	Шаг 5. Вот так будет выглядеть Ваше изображение на  Web страничке, если Вы сделали все правильно.
	Шаг 6. А вот так будет выглядеть Ваше изображение, если вы экспортировали картинку, созданную на белом, а не   на пурпурном бэкграунде.

Теперь, давайте поговорим о такой опции, как Anti-Aliasing. Эта опция применяется для придания Вашему рисунку более сглаженного и, тем самым, более реалистичного вида (она как-бы "смешивает" отдельные пикселы бэкграунда и Вашего изображения на нем). Но, в таком случае, при создании изображения на прозрачной основе, приходится сталкиваться с некоторыми проблемами. Если Вы заранее знаете, какой фон будет у Вашей будущей страницы, то эта проблема отпадает (см. предыдущее упражнение), но если Вы хотите, чтобы картинка одинаково хорошо выглядела на различных бэкграундах посмотрите следующий пример:

	1. Перед Вами два изображения. Первое было создано при  выключенной опции  Anti-Aliasing (сглаживание), а второе -  при включенной. Как видите, разница существует. Второе изображение более размывчатое и ровное и выглядит более предпочтительно. Однако посмотрим , как будут смотреться эти картинки на белом фоне.
	2. Вот так будут выглядеть теже изображения на белом бэкграунде. Первое смотрится одинаково хорошо на обоих фонах, а второе только на темном.

Вместо вывода можно сказать вот что... Если Вы хотите использовать изображение на различных бэкграундах, то выключайте опцию  Anti-Aliasing (сглаживание).

Ну, и наконец, еще один пример работы плагина Gif89 Export. Для иллюстрации  я воспользуюсь той же кнопкой, которая была в первом примере.

	Шаг 1. На рисунке слева приведен пример изображения (в моем случае это круглая кнопка) при выключенном слое заднего плана. Кнопка находится на отдельном слое в режиме RGB.
	Шаг 2. Теперь экпортируем  изображение в прозрачный Gif, с цветом прозрачного фона 80% Gray, заданным по умолчанию (File/Export/GIF89 Export/OK). Вот так будет выглядеть  картинка на белом бэкграунде.
	Шаг 3. В этот раз экпортируем  изображение в прозрачный Gif, с черным цветом прозрачного фона (File/Export/GIF89 Export/ прозрачные области маски: цвет черный /OK). Такое изображение будет выглядеть лучше на темных бэкграундах.

Таким образом  цвет прозрачного фона (прозрачной области маски) в диалоговом окне GIF89 Export должен по возможности совпадать с цветом фона Вашей Web странички.

Уууффф... Надеюсь, теперь Вы сможете  создавать свои собственные гифофские картинки с прозрачным фоном и удачно вписывать их в свою Web страничку.