Этот эффект может показаться вам сложным в реализации, но зато он более выразительный, так как помогает придать 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-документу.

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