Пара уроков для начинающего Web-мастера

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

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

Разумеется, проблему не решить парочкой публикаций. Компьютерная графика вообще бесконечная тема, а применительно к Web она обрастает массой дополнительных тонкостей, с которыми не сталкиваются, например, дизайнеры по рекламе. Было бы непростительно пройти мимо столь насущных и интересных вещей. Вот я и решил для начала поговорить о двух приемах, важных с точки зрения украшения Web-страниц.

С помощью растровой графики авторы Web-документов не только дополняют их текст иллюстрациями, но и придают привлекательность самому "бланку" страницы. Графически выполняются логотипы, разделяющие текст линейки и маркированные списки, названия и заголовки, а также элементы управления, позволяющие переходить с одной страницы на другую, - кнопки, меню и карты переходов.

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

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

В моем любимом графическом редакторе Adobe Photoshop имеются средства для записи как JPEG-, так и GIF-файлов. А с учетом его богатейших возможностей и удобства работы он вполне может претендовать на роль основного графического инструмента Web-мастера. Чтобы вы сами убедились в этом, предлагаю посмотреть, как можно в Adobe Photoshop создать картинки с прозрачными участками.

Полупрозрачность и мягкие контуры 

Этот эффект может показаться вам сложным в реализации, но зато он более выразительный, так как помогает придать Web-странице объем. Для примера создания мягкой тени я решил подготовить простенькую Web-страничку, посвященную бабочкам. Естественно, что на ней будет изображено это красивое насекомое, причем стоит попробовать создать иллюзию объема. Пусть бабочка присядет на страничку, как в солнечный день на стену дома, готовая сорваться и улететь при первой же опасности.

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

У меня под рукой оказалась фотография бабочки с компакт-диска конкурирующей с Adobe компании Corel. Разумеется, бабочка снята на фоне зеленой травы. Для использования этой картинки на Web-странице трава не нужна, поэтому стоит начать с ее удаления. Чтобы удалить часть изображения, необходимо построить маску, которая защитит от удаления полезные части картинки, или, что то же самое, выделить (select) ненужное.

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

Облегчить построение маски для такой картинки, как выбранная для примера, можно, если использовать тот факт, что на фотографии бабочка, на крыльях которой преобладают желтые и красные тона, сидит на зеленой траве. Существенная разница в цветах полезной и ненужной частей снимка подталкивает к мысли о выборе части изображения по цветовому ключу - функции Select/Color Range.

В окне выбора по цвету предлагается манипулировать пипетками (задающей исходный цвет, добавляющей и вычитающей цвета) и регулятором разброса Fuzziness, который определяет диапазон включаемых в маску оттенков выбранного пипеткой цвета. Учтите, что действие команды Color Range распространяется на всю картинку, то есть в маску включается помеченный пипеткой цвет со всего изображения, а не только в том месте, где вы ею ткнули. Кроме того, в создании маски принимают участие все видимые в настоящий момент слои, то есть цвет собирается с той картинки, что вы видите в окне редактора, а не только с активного слоя.

Эти особенности Color Range часто ставят в тупик новичков, которые никак не могут отделить, щелкая пипетками, ненужную часть изображения, так как все время задевают и полезные пикселы. Напомню, что маска, если мы не хотим получить полупрозрачные области, должна состоять только из белого и черного цветов. А в окне просмотра все время присутствует серый. Между тем если применение выбора по цвету оправданно, то есть цвета в отрезаемой части картинки сильно отличаются от тех, которые останутся, можно без особых проблем получить идеальную маску.

Чтобы выбрать на фотографии с бабочкой фон, предстоит собирать пипеткой зеленые тона. Сначала надо задать солидный разброс оттенков, примерно 100 из 200 возможных. Взяв в левую из трех пипеток средний по интенсивности зеленый цвет с фотографии, переключаемся на добавляющую пипетку (средняя, помеченная плюсом) и вводим в маску еще один цвет. Цвет удобнее брать не с фотографии, а в окне просмотра. Если белый цвет с фона перекинется на бабочку, пора уменьшить разброс раза в два-три и продолжить добавление цветов. Последовательно уменьшая разброс (вплоть до нуля), получаем практически идеальную маску.

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

После нажатия кнопки "ОК" в окне редактора появляются выделенные участки. Разумеется, маска не идеальна и ее придется подправить. Переходим в режим Quick Mask, нажав клавишу [Q], берем из палитры инструментов карандаш. Белым убираем пропущенные пикселы фона и черным дорисовываем края крыльев бабочки, ее усики и те места на крыльях, которые все-таки оказались включенными в цветовой ключ. Подправив маску, возвращаемся в обычный режим редактирования, снова нажав клавишу [Q].

Теперь надо переименовать слой Background. Поскольку фотография была взята мной из файла формата TIFF, который не предусматривает слоев, в палитре Layers присутствует только слой Background, возможности работы с которым ограничены. Дважды щелкнув мышкой в палитре слоев по слою Background, даю ему новое имя - Butterfly.

Чтобы осталась одна бабочка, а остальная часть изображения стала прозрачной, надо просто удалить выделенные пикселы, тривиально нажав клавишу [Del]. Разметка нам больше не нужна, так что ее можно сбросить клавишами [Ctrl]+[D]. Освобожденную от травы бабочку скопируем на новый слой, перетянув мышкой в палитре Layers слой Butterfly на кнопку создания нового слоя. Нижний из двух получившихся слоев понадобится для тени.

Легче всего закрасить бабочку черным цветом, если воспользоваться для этого черным карандашом большого размера. Чтобы не повредить прозрачную часть слоя, на время закрашивания надо установить в палитре Layers флажок Preserve Transparency. В этом режиме Photoshop не даст модифицировать прозрачные пикселы активного слоя.

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

Не удивляйтесь, если фильтр Gaussian Blur никак не действует на картинку. Это значит, что вы просто-напросто забыли выключить режим Preserve Transparency.

Растушеванную тень следует сдвинуть относительно изображения бабочки на верхнем слое (Butterfly copy) вниз и немножко вправо. Чтобы было легче ориентироваться, включите видимость верхнего слоя. Не отодвигайте тень слишком сильно, ведь бабочка у нас сидит на странице, а не улетает с нее. Последняя операция при создании тени - подбор ее плотности регулятором Opacity в палитре Layers.

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

В меню File выбираем команду Export/GIF89a Export. На экране появится окно под названием GIF89a Export Options. В нем обязательно надо указать цвет фона разрабатываемой Web-страницы. Почему? Дело в том, что формат GIF не предусматривает полупрозрачность пикселов. Пикселы могут быть или совсем прозрачными, или непрозрачными. Photoshop имитирует мягкие контуры тени, подкладывая под нее фон задаваемого пользователем цвета. Если вы еще не определились окончательно с цветом фона Web-страницы, рекомендую сохранить картинку в формате Photoshop, тогда вы впоследствии сможете экспортировать ее в GIF еще раз.

Задав цвет фона, посмотрите на результаты работы. Нажмите для этого кнопку Preview. Если все в порядке, записывайте GIF-файл и подключайте его к Web-документу.

Полная прозрачность и четкие контуры 

Одна из особенностей формата 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-страницах.

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

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

Роман Соболенко