Прозрачность в рисунках

Если рисунок содержит прозрачные области, которые необходимо воссоздать на веб-странице, следует предпочесть формат GIF. Многоуровневая прозрачность, с помощью которой можно делать плавные переходы, доступна лишь формату PNG, но данная особенность относительно редко применяется для веб-графики.

Формат GIF изначально поддерживает прозрачность, поэтому в тех рисунках, где она требуется, лучше использовать именно этот формат. Прозрачность устанавливается несколькими способами, причем выбор зависит исключительно от предпочтений разработчика. Для наглядности рассмотрим создание прозрачных областей с помощью программы Photoshop на примере картинки, показанной на рис. 1. В данном случае в рисунке требуется, пользуясь жаргонным языком, «вытравить» голубой фон, т.е. сделать его прозрачным.

Рис. 1. Исходное изображение

Способ 1

Прозрачные участки в изображении можно установить путем их стирания с помощью инструмента Erase (ластик) или выделением нужных областей с последующим их удалением клавишей <Delete>. Но если исходный слой называется Background (Фон), то стирание приведет лишь к тому, что участки будут закрашиваться цветом заднего плана. Поэтому вначале следует переименовать исходный слой.

• В панели Layers (Слои) щелкаем два раза по слою Background. В появившемся диалоговом окне следует нажать на кнопку ОК, и текущий слой будет переименован в Layer 0.
• Теперь можно удалять фрагменты изображения. Поскольку область однотонная, то воспользуемся инструментом Magic Wand (волшебная палочка, активация клавишей <W>). Значение Tolerance (допуск) задается в зависимости от изображения, параметр Anti-aliased (сглаженный) лучше установить для создания плавных границ, а галочку Contiguous (непрерывный) убрать, тогда в рисунке выделяются все области определенного тона, а не только ограниченные пикселами другого цвета. На рис. 2 показаны параметры инструмента Magic Wand, которые применялись для текущего изображения.

Рис. 2. Параметры волшебной палочки для выделения одноцветной области

• Теперь щелкаем волшебной палочкой по цвету, который нужно сделать прозрачным, и после выделения области удаляем ее с помощью клавиши <Delete>. В итоге рисунок должен располагаться на поле с серыми и белыми клетками, которое символизирует собой прозрачную область (рис. 3).

Рис. 3. Картинка на прозрачном фоне

• Остается только сохранить рисунок в формате GIF и прозрачность будет установлена автоматически. Для этого можно воспользоваться командой File > Save (Файл > Сохранить) или File > Save for Web... (Файл > Сохранить для Web). Например, при использовании команды меню Save требуется указать формат файла «CompuServe GIF (*.gif)» и место на жестком диске. После чего появится окно с параметрами сохранения, в котором следует пометить пункт Transparency (Прозрачность), как показано на рис. 4.

Рис. 4. Параметры сохранения GIF-файла

Способ 2

Определить один или несколько прозрачных цветов можно и в процессе сохранения файла в формате GIF. Для этого вначале готовим изображение, а затем сохраняем его через пункт меню File > Save for Web... (Файл > Сохранить для Web, <Alt>+<Shift>+<Ctrl>+<S>).

В открывшейся панели в настройках сохранения файла вначале выбираем формат GIF, а затем инструментом Eyedropper ( — Пипетка, <I>) щелкаем по фону рисунка. При этом в таблице цветов (вкладка Color Table) будет выделен желаемый цвет (рис. 5).

Рис. 5. Таблица цветов для заданного изображения

Чтобы установить выделенный цвет прозрачным, требуется нажать на кнопку в панели Color Table. Вуаля, фон стал прозрачным. После чего сохраняем файл в нужном месте, нажав на кнопку Save.