Векторный кот в Фотошопе

Векторный кот в Фотошопе

Drawing Vector-Looking Cat Illustration Using Photoshop

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

Чтобы создать действительно классное изображение, Вы должны выбрать нужную программу и следовать определенным правилам. Если Вы хотите нарисовать векторную иллюстрацию, то должны иметь в виду, что для этого используются такие редакторы как Adobe Illustrator или CorelDraw. Вместе с тем, Photoshop располагает достаточными средствами для разработки векторных иллюстраций. Я наглядно покажу это в своем уроке, как перевести рисунок в вектор. Я выбрал скетч кота как основу для иллюстрации. Я решил изобразить синего кота с розовыми цветами в лапах. Вот мой окончательный результат:



Скетч, КОТорый я использовал в уроке:



Шаг 1.

Начнем с создания фона. Нарисуем форму с помощью инструмента выделения Pen tool (Shape Layers). Настройки - Fill = 0%. Теперь используем наложение градиента: (Layer>Layer Style>Gradient Overlay …) для заполнения созданной фигуры. Все настройки по умолчанию, вам только нужно менять угол (я буду указывать степень) и градиент. Добавляем обводку Stroke (Layer>Layer Style>Stroke…). Используем все настройки по умолчанию, кроме ширины в 1 рх и цвета.

Итак. используем Pen tool, Shape Layers. Выделяем весь холст, настройки Fill = 0%, и добавляем градиент (Layer>Layer Style>Gradient Overlay …).



Шаг 2.
Раскрашиваем основные части кошачьего тела в синий цвет: нос с ушами, тело, передняя лапа и хвост. Добавляем Stroke, чтобы сделать изображение более интенсивным. Используем цвета с #4f85c8 до #7ab2ee, угол - 50deg для Наложения градиента, и #2d72c5 - цвет Stroke.



Шаг 3.

Теперь уделим внимание основным элементам тела. Высветлим часть тела, используя тот же градиент, что и для всего тела, с углом 3deg.



Шаг 4.

Перейдем к деталям хвоста. Выделим весь хвост и заполним его градиентом (68deg). После этого выделим кончик хвоста (как показано на рисунке) и заполним тем же градиентом (75deg).



Шаг 5.

Выделим нос, как показано на рисунке, и заполним градиентом (90deg).



Шаг 6.

Осветлим кончик носа (-66deg). Используем более темные цвета, чтобы подчеркнуть границы носа.



Шаг 7.

Пришло время поработать с общими контурами ушей. Используем угол градиента 66deg для нижнего и 4deg для верхнего уха.



Шаг 8.

Придадим форму краю уха: используем угол градиента 16deg для нижнего уха и 34deg - для верхнего.



Шаг 9.

Добавим деталей на лапах. Создадим овальную форму верхнего пальца (градиент с углом (35deg)), затем для среднего пальца (68deg), и наконец для нижнего (58deg). Каждая последующая форма накладывается на предыдущую.



Шаг 10.

Основной корпус готов. Теперь перейдем ко второй нижней лапе. Создадим новую форму (97deg угол), далее нажмем (Ctrl + Shift + [), и добавим Stroke c цветом # 1d62b5.



Шаг 11.

Добавим три круга сверху донизу (25deg, 68deg, 83deg) для каждого пальца, как и в шаге 9.



Шаг 12.

Проделаем все то же, что и с первой нижней лапой. Готово. Теперь обратимся к верхним лапам. Создадим форму для одной из верхних лап (58deg) и добавим Stroke с цветом # 4172a5 (как и для всех внешних форм).



Шаг 13.

На верхней лапе 4 пальца. Скроем один из них. Создадим форму (50deg).



Шаг 14.

Создаем овальную форму для каждого пальца, как в шаге 9 (63deg, 67deg, 77deg). Добавляем #3367a6 Stroke для каждого из 3-х пальцев.



Шаг 15.

Создадим новую форму для второй лапы (-61deg). Жмем (Ctrl + Shift +]) и добавляем Stroke # 2d72c5.



Шаг 16.

Для верхнего пальца создаем форму (135deg), затем то же самое проделываем и для остальных пальцев (сверху вниз) - как и в шаге 9 (99deg, 83deg, 67deg).



Шаг 17.

Закончили с основной частью кошачьего тела. Теперь перейдем к мордочке. Начнем с глаз. Создадим новую форму для нижнего века (-168deg), а затем светло-голубую форму - белок глаза (-22deg).



Шаг 18.

Теперь нарисуем овальную форму в середине головы (90deg) для радужки глаза, добавим Stroke # 599c01. Нарисуем зрачок над радужкой (90deg). Затем создадим маленькую овальную форму для блика. Для градиента используем цвет # ebfcf9.



Шаг 19.

Сделаем овальную форму век (94deg), затем форму для ресниц (-173deg). Расположим их по границе века. Нажимаем (Ctrl + [).



Шаг 20.

Используя те же процедуры и те же параметры, но чуть меньшего размера по каждому из элементов, создадим второй глаз.



Шаг 21.

Поработаем с зубами. Создадим новую форму (71deg) и добавим Stroke с цветом # 336aaa.



Шаг 22.

Создадим форму для нижнего зуба (-122deg). Далее создаем дубликаты слоя с зубом
(Ctrl + J) и изменяем их размер, используя инструмент Path Selection.



Шаг 23.

Создаем форму верхнего зуба (-135deg), и производим те же действия, что и в шаге 22.



Шаг 24.

Кот практически готов. Добавим некоторые детали. Подготовим формы для роскошных кошачьих усов: (сверху вниз:-50deg, 63deg,-50deg).



Шаг 25.

И еще 2 нижних уса:



Шаг 26.

Теперь сделаем коту когти. Просто создаем небольшие формы в виде штрихов. в зависимости от направления когтя, указываем и угол наклона градиента, которым его заливаем. Градиент желательно выбрать: от темного к светло-голубому. Не бойтесь варьировать градиенты.



Шаг 27.

Последний элемент - цветы в кошачьих лапах. Нарисуем форму стебелька цветка (173deg), как показано на скриншоте, жмем (Ctrl + Shift + [). Далее создадим форму с лепестками (79deg).



Шаг 28.

Создадим еще одну форму для лепестков (94deg), сделаем её чуть больше и разместим чуть выше исходной. Нарисуем сердцевину цветка (76deg), и еще такую же форму (99deg), сдвинув её вверх и вправо на 1 рх.



Вот и все. Наш Кот готов. Как видите, в Фотошопе можно создавать подобным образом векторные изображения чего угодно.