Vectorboom
Уроки / Векторные Персонажи / Comments: 22

Как создать векторную наклейку - тыкву на Хэллоуин в Adobe Illustrator

Ярослав Лазунов
25.10.2014
Цель Урока
Halloween pumpkin sticker

This article was originally published on Vectips.com in English. You can view the original article here...

В этом уроке мы научимся создавать забавную наклейку - стикер тыквы на Хеллоуин, пройдя все этапы дизайна, включая рисование эскиза, раскраску и создание теней и бликов. Описанный здесь способ создание тени при помощи Blend Tool избавит вас от артефактов, которые обычно возникают на объектах сложной формы. Надеюсь, что максимально оптимизированные методы, изложенные здесь, помогут вам работать эффективней, что сэкономит немало времени в дальнейшем.

Шаг 1

Для создания наклейки тыквы на Хэллоуин окрываем Adobe Illustrator, а затем переходим к File > New … В открывшемся диалоговом окне установим необходимый размер нашей монтажной области и выберем цветовой режим RGB.

Шаг 2

Приступим к созданию эскиза. Вы можете нарисовать тыкву карандашом на бумаге, затем отсканировать рисунок. После чего вставить его в Adobe Illustrator (File > Place…). Или вы можете создать эскиз прямо в Adobe Illustrator, как сделал это я. Для этих целей обычно используют Pencil Tool (N), настройки которого показаны на рисунке ниже.

Для открытия диалогового окна Pencil Tool Options, два раза кликните по иконке инструмента в панели Tools.

Шаг 3

Установим нейтральный серый цвет для обводки и понизим непрозрачность до 10% в панели Transparency. Для того чтобы все пути повторяли свойство первого, снимите галочку с New Art Has Basic Appearance в сплывающем меню панели Appearance.

Эти настройки помогут вам рисовать эскиз в более натуральной манере. Теперь нарисуем веселую рожицу тыквы.

Не старайтесь сразу рисовать правильные линии – несколько штрихов помогут вам найти необходимую форму. Правда, это похоже на рисование карандашом?

Шаг 4

Группируем все пути эскиза (Cmd/Ctrl + G), затем заблокируем их в панели Layers. Берем Pen Tool (P) и создаем путь, который соответствует контуру половины тыквы.

Выровняем точки A и B по горизонтали при помощи панели Align.

Шаг 5

Берем Reflect Tool (O) и, удерживая Opt/Alt, кликаем в точке A. В открывшемся диалоговом окне выбираем опцию Vertical и нажимаем на Copy.

Выделяем оба созданных пути, затем переходим Object > Path > Join (Cmd/Ctrl + J).

Шаг 6

Создадим при помощи Pen Tool (P) форму хвостика тыквы.

Выделяем форму тыквы и хвостик, затем нажимаем на кнопку Unite в панели Pathfinder.

Шаг 7

При помощи Pen Tool (P) создадим форму рта и зубов, как это показано на рисунках ниже.

Выделяем обе формы, соответствующие зубам, затем переходим Object > Compound Path > Make (Cmd/Ctrl + 8). Теперь выделяем форму рта и Compound Path, затем нажимаем на кнопку Minus Front в панели Pathfinder.

Шаг 8

Нарисуем форму глаз тыквы, используя Pen Tool (P).

Теперь возьмем Ellipse Tool (L) и создадим зрачки в виде двух окружностей.

Шаг 9

Выделяем внешний контур нашей наклейки и переходим Object > Path > Offset Path…. В открывшемся диалоговом окне устанавливаем 14px.

Как вы можете видеть, новый путь имеет намного больше точек, чем хотелось бы. Я знаю, что мне предстоит в дальнейшем работать с этим контуром и такое количество лишних точек существенно затруднит манипуляции. В таких случаях для очистки путей я использую Smart Remove Brush Tool (плагин VectorScribe ). Посмотрите, как быстро и легко удаляются лишние точки.

Шаг 10

Пришло время раскрасить нашу наклейку. Выделяем внутренний контур тыквы, оба зрачка и рот, затем переходим Object > Compound Path > Make (Cmd/Ctrl + 8). Теперь заливаем полученный объект линейным градиентом, который состоит из четырех слайдеров двух оттенков оранжевого цвета.

Заливаем внешний контур тыквы линейным градиентом, который состоит из четырех слайдеров двух оттенков серого цвета.

Шаг 11

Теперь давайте сделаем блик на наклейке. Создадим форму при помощи Pen Tool (P) подобно, показанной на рисунке ниже.

Выделяем внешнюю форму наклейки и эту форму. Затем удаляем часть серого объекта, выходящего за пределы формы тыквы при помощи Shape Builder Tool и удерживая Option/Alt.

Шаг 12

Заливаем полученную форму радиальным градиентом от белого к черному цвету.

Теперь применим режим смешивания Screen blending в панели Transparency.

Шаг 13

Приступим к созданию тени от наклейки. Копируем внешнюю форму наклейки, затем вставляем ее назад (Cmd/Ctrl + C; Cmd/Ctrl + B). Перекрашиваем новый объект в белый цвет и смещаем немного вниз.

Копируем белый объект, затем вставляем его вперед (Cmd/Ctrl + C; Cmd/Ctrl + F). Заливаем новый объект вертикальным линейным градиентом от серого к темно серому цвету.

Шаг 14

Выделяем белую и серую формы, созданные в предыдущем шаге (это удобно сделать в панели Layers ). Теперь переходим Object > Blend > Make. Два раза кликнем по иконке Blend Tool (W) в панели Tools и в открывшемся диалоговом окне установим необходимое количество specified steps (обычно я ограничиваюсь 30 шагами).

Шаг 15

Используя Direct Selection Tool, перемешаем точки верхнего объекта внутрь формы так, чтобы добиться плавного перехода.

Теперь вы, наверное, понимаете, почему в шаге 9 я удалял лишние точки. Выделяем весь бленд объект и устанавливаем режим смешивания Multiply blending в панели Transparency. Это позволит тени выглядеть полупрозрачной на любом фоне.

Способ создания бленд объекта из сложных форм, описанный в шагах 13-15, позволит избежать артефактов. Подробнее об этом вы можете прочесть в моей статье - Как избежать проблем при создании Blend объектов в Adobe Illustrator.

Всего комментариев: 22
1
1  
Огромное спасибо за урок, всё легко и понятно, хотя по сути знакомство с программой я начала всего пару дней назад)
Не стала рисовать эскиз - взяла в интернете фотографию хэллоуинской тыквы и сделала по ней. Ну и тень я решила сделать не просто вниз, а немного в сторону, по-моему так  интереснее) В общем, тоже довольно мило получилось  smile

0
2  
Да, мне нравится. Особенно мне приятно, что для вас, как новичка, все понятно smile

1
3  
спасибо)
а подскажите, пожалуйста, какая принципиальная разница будет, если блик делать не как у Вас(бело-черный градиент и режим Screen), а сразу градиент поставить от белого к прозрачному и режим наложения оставить Normal?

0
4  
Принципиальная разница вылезет, если сохранять документ в EPS формате (обычно для стоков). Градиент с прозрачными слайдерами превратится в маску прозрачности. Хотя это не страшно, но все же немного увеличит размер файла и таким объектом покупателю, без определенных знаний, управлять сложнее.

0
5  
Спасибо, приму к сведению. А то и раньше такое видела, но понять не могла, зачем такие сложности)

1
6  
я долго втыкала, но получилось. спасибо за урок. узнала новое для себя.

0
7  
не получается скинуть картинку. как это сделать?

0
8  
Залить на какой-нибудь файлообменник, например http://fastpic.ru/
Затем нажать на кнопку изображение в панели комментария и вставить ссылку

0
9  
http://i68.fastpic.ru/big/2014/1028/49/afb45d1bd93265d805eda6c24a3e9949.jpg

0
10  
Наделала еще кучку тыковок и выложила у себя http://nikolidia.ru/?p=1911 ну и, естественно, на Вас сослалась..) Надеюсь, Вы не против) С Праздником!

0
11  
Только приветствую!

0
12  
Добрый день, а как заблокировать пути в в панели Layers? Как заблокировать слой - это понятно, а с путями что-то не помню....

0
13  
Поставить замочек напротив пути в панели Слои

0
14  
Если я ставлю замочек, то блокирую слой, я так понимаю.... просто тогда у меня не получается обвести рисунок инструментом Pen Tool, т.к. он в этом положении не активен...

0
15  
Слой блокировать не надо, а только подслой с конкретным объектом. Если вы не видите подслои в панели, то откройте всплывающее меню, выберите Panel Options..., затем в диалоговом окне снимите галочку с Show Layers Only

0
16  
Спасибо, получилось, но не так хорошо, как у некоторых)) где-то допустил ошибку, буду переделывать... и не совсем понятен шаг 15 со смещением точек, смещать надо весь верхний объект? точки не удалял, т.к. не установлен плагин VectorScribe

0
17  
Не весь объект, а точки. Почитайте еще это http://ru.vectorboom.com/load....1-0-163
Уверен, будет полезно

0
18  
Ага, спасибо, понятно… Ещё раз повторил урок и вылезла
проблема подозреваю, что  здесь: «Выделяем весь бленд объект и устанавливаем режим
смешивания Multiply blending в панели Transparency» Я всё так делаю, но у меня,
по-видимому, не устанавливается режим смешивания, т.е. если я ставлю Normal или
 Multiply, то не никаких изменений не вижу,
 и выглядит достаточно корявенько, правда,
я не вижу как у вас панельки с  Knockout  Group, где у вас стоит галочка…

0
19  
Всё, получилось)) проблема была в именно в точках и их редактировании... Спасибо, хороший урок!!!

0
20  
Ярослав, не подскажите, когда делаешь Object - Path - Offset Path…., как в шаге 9, то нужно потом делать expand appearance?

0
21  
Не надо, это не эффект

0
22  
Спасибо,все не так страшно оказалось )попробую еще другой рецепт - тыкву для футболки, она так харизматична)

Только зарегистрированные пользователи могут добавлять комментарии.
[ Registration | Login ]
twitter RSS facebook deviantart feed dribbble
Логин
Пароль
Новости Форума
 
Перепечатка, копирование или воспроизведение информации в каком-либо виде строго запрещены.
Все материалы, которые размещены на этом сайте не подлежат дальнейшему воспроизведению и/или распространению в любой форме, кроме как с письменного разрешения автора.