Одна из особенностей формата GIF состоит в том, что он рассчитан на глубину цвета до 8 бит, то есть всего на 256 цветов в палитре. Кстати, чем меньше цветов окажется в вашей картинке и, соответственно, в прилагаемой к ней палитре, тем компактнее будет файл и тем быстрее будет загружаться в Web-браузер.

Цветовая модель, содержащая до 256 цветов, в Photoshop, как и в других профессиональных графических редакторах, называется индексированной (Index), поскольку каждый цвет в ней задается порядковым номером в палитре. Во втором примере мы воспользуемся изображением именно такого типа, чтобы посмотреть, как в нем можно задать прозрачность.

Для страницы о бабочках у нас пока нет красивого заголовка. Предположим, что его удалось найти в каком-то журнале и сосканировать. С таким же успехом заголовок можно построить и в самом Photoshop, но рассказ о работе в нем с текстом и шрифтами угрожает увести далеко от основной темы, так что пусть название страницы попадет к нам в уже готовом виде.

Однако в сосканированной картинке нет прозрачности, ведь сканеры ее не понимают. Зато есть фон, предположим черный. Таким образом, нам надо для размещения этой картинки на Web-странице сделать черный фон прозрачным. Задача исключительно простая.

Открыв файл со словом "бабочки" в Photoshop, возьмем из палитры инструментов волшебную палочку и выделим с ее помощью те области в нем, которые должны будут стать прозрачными. Если фон у нас ровный, в палитре Magic Wand Options можно установить минимальный допуск (Tolerance), то есть равный нулю. Тогда выделенная область не заденет края букв.

Выделенную область придется собирать по частям. Сначала укажем волшебной палочкой на фон вокруг текста, а затем, удерживая нажатой клавишу [Shift], будем добавлять к ней участки фона внутри букв, не размеченные сразу.

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

Разметив весь фон, инвертируйте выбранную область. В файле GIF должны будут остаться буквы, а не фон, поэтому и маска обязана выделять их. Чтобы инвертировать маску, можно вызвать через меню команду Select/Inverse или нажать на клавиатуре комбинацию [Ctrl]+[Shift]+[I].

Думаю, что вы запомните эти клавиши, так как к инвертированию маски приходится прибегать очень часто.

Далее маску надо записать в новый канал. Это команда Save Selection из меню Select. Пользоваться ею просто - в окне диалога надо оставить все, как есть, и просто нажать кнопку "ОК". Канал, в который будет записана маска, получит имя #2.

После сохранения маску можно сбросить клавишами [Ctrl]+[D]. Она больше не понадобится, будет только мешать. Перед тем как приступить к записи картинки в файл формата GIF, стоит еще раз убедиться, что он преобразован к цветовой индексированной модели. Да, все в порядке.

Через меню File вызываем команду Export/GIF89a Export. Перед нами другой сценарий диалога. В первом случае мы имели дело с файлом цветовой RGB-модели, в котором прозрачность была задана в самом деле прозрачными пикселами. Тогда Photoshop предложил подсказать только цвет будущего фона для полупрозрачных пикселов. И все. Теперь придется иметь дело и с другими параметрами.

Прозрачность в картинке можно задать по цветовому ключу, примерно как в функции Color Range. Только цвет выбирается без допуска. Делается это пипеткой; плюс рядом с ней указывает, что идет суммирование цветов, которые станут прозрачными.

На первой картинке с окном GIF89a Export Options вы видите, что было бы, если сделать черный цвет прозрачным (прозрачные области помечены серым). Внутри букв пропала бы черная окантовка.

Но мы пойдем другим путем. В списке Transparency From выбираем добавленный раньше канал с маской для надписи, то есть канал #2. Теперь другое дело. Черный фон вокруг букв помечен как прозрачная область, но сами буквы остались без изменений. Можно записывать заголовок в GIF-файл.

Как выглядит Web-страница с только что созданными картинками с прозрачными и полупрозрачными участками, показано на последнем экране. По-моему, все как и планировалось.

Конечно, разработка графики для Web - процесс более сложный. Я сегодня рассмотрел только два случая, касающиеся базовых операций с прозрачностью при создании в Photoshop картинок для Web-документов. И дело не только в дизайне и разработке стиля. Это само собой. Но есть еще масса специфических тонкостей, с которыми приходится сталкиваться именно при работе с графикой на Web-страницах.

Это и оптимизация объемов файлов при минимальных потерях в качестве, и подбор палитр, которые будут правильно воспроизведены на любом компьютере, и работа с картинками очень малого размера, когда приходится манипулировать чуть ли не отдельными пикселами...

Впрочем, оставим все это на потом, будет о чем потолковать.

Автор: Роман Соболенко