Объемные сердечки

Сердечки достаточно часто применяются в качестве иконок и символичных рисунков, благодаря тому, что прочно ассоциируются со словом «любовь» и всем, что с ней связано. Не обязательно использовать сердечко на сайте ко дню святого Валентина, с помощью сердечка, например, можно выделить пункт меню, отвечающий за предпочтения пользователей. В общем, сами придумаете, где применять картинку, главное, уметь ее сделать.

Adobe Illustrator и его инструмент Mesh

Рассмотрим процесс создания объемного сердечка в программе Illustrator, используя инструмент Mesh. Достоинство этого инструмента заключается в возможности создавать весьма неожиданные градиентные заливки, позволяя имитировать эффект трехмерности (рис. 1). Дополнительным плюсом является и быстрота получения итогового результата.

Рис. 1. Изображение с имитацией объема, которое требуется получить

Вначале рисуем контур будущего изображения (рис. 2). Счастливые обладатели планшетов могут это сделать одним росчерком пера, ну а всем остальным придется использовать мышь и кривые Безье.

Рис. 2. Контур сердца

После применения к объекту инструмента Mesh его контур исчезает, поэтому изображение необходимо продублировать. Выделяем объект курсором мыши и нажимаем вначале комбинацию <Ctrl>+<C>, а затем — <Ctrl>+<F>. После чего выделенный объект будет скопирован в буфер обмена и вставлен в то же место, что и текущий. Видимого результата не будет, однако стоит только переместить контур в другое место, как под ним откроется еще один рисунок.

Закрашиваем нижний контур желаемым цветом (рис. 3). В данном случае использовался #990000. Цвет специально выбран темным, на нем лучше смотрятся света и блики.

Рис. 3. Закрашенный контур

Выбираем инструмент Mesh ( — Сетка, <U>) и щелкаем курсором мыши примерно в центре изображения (рис. 4). При использовании горячих клавиш обращайте внимание на то, какой язык в данный момент включен. Адобовские программы не любят русский язык, и некоторые комбинации клавиш при нем не работают.

Рис. 4. Результат использования инструмента Mesh

Сетка будет построена автоматически, в зависимости от вида контура и количества узловых точек. Поэтому для достижения нужного результата, может потребоваться отменить действие через <Ctrl>+<Z> и повторить его снова.

В указанной узловой точке меняем цвет на более светлый. В примере использовался #FF5454.

Для пущего эффекта добавим блики. Рисуем их контуры и закрашиваем светлыми тонами. Для более яркого блика использовался белый цвет, а для правого нижнего — #fc9c9 (рис. 5).

Рис. 5. Добавленные блики

Теперь их надо растушевать, для чего используется фильтр под названием Feather (Перо). Этот фильтр находится в меню Effect > Stylize > Feather... (рис. 6).

Рис. 6. Вызов фильтра Feather

Фильтр Feather предназначен для смягчения контуров изображения и управляется лишь одним параметром, который задает дистанцию размытия. Его значение зависит от размеров объекта, в данном случае параметр был установлен на 7px. Окончательный результат полученного изображения показан на рис. 7.

Рис. 7. Окончательный результат

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

Мы не зря сделали копию черного контура. Применяя к нему разные кисти через панель Brushes (Кисти, <F5>) можно буквально за одно нажатие получить всевозможные виды одного и того же рисунка (рис. 8).

Рис. 8. Разные виды одного контура