Как сделать векторный портрет

Как создать красивый векторный портрет в Illustrator — разбираемся во всех подробностях

Я всегда люблю просматривать удивительный стиль искусства, известный как иллюстрация Vexel, и недавно я решил, наконец, попробовать сам. Следуйте этому пошаговому руководству для создания моего первого векторного портрета «Корона Легиона». Узнайте, как портрет тщательно прорисован и векторизован в Adobe Illustrator, чтобы создать интересный дизайн в вексельном стиле.

На портрете, над которым мы будем работать, изображен прекрасный персонаж Quorra из Tron Legacy. Термин вексельная графика соответствует стилю этой иллюстрации, где полуреалистичное изображение создается из множества слоев, но для полного распознавания в качестве вексельной иллюстрации художественное произведение должно быть основано на пикселях. Этот дизайн создан в Illustrator, а не в Photoshop, который, как мне кажется, является лучшим инструментом для работы, но для того, чтобы порадовать сторонников чистоты, мы должны называть его векторным искусством.

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

Посмотреть окончательный Quorra векторной графики

Первым шагом при создании любого портрета в вексельном стиле является поиск объекта. Я все еще жужжу от просмотра Трон Легаси в кинотеатре, поэтому я выбрал этот профиль персонажа Куорра. Откройте изображение в Photoshop и добавьте тонкий Smart Blur, чтобы удалить более мелкие детали.

Затем, сделайте дубликат слоя и перейдите в Image> Adjustments> Posterize и измените уровни на 15-20. Как упоминалось ранее, чем больше слоев вы создадите, тем дольше вы будете отслеживать, но в целом изображение будет включать гораздо более глубокий диапазон тонов и станет гиперреалистичным. Дублируйте слой Smart Blur еще раз и поместите его над постеризованным слоем. Измените режим смешивания на Color, чтобы удалить уродливые зеленые и синие тона, добавленные эффектом постеризации.

Сделайте снимок базового изображения и поместите его в Adobe Illustrator. Идея состоит в том, чтобы проследить каждую «форму», которая была получена из эффекта постеризации, чтобы воссоздать изображение в векторном формате.

Используйте Pen Tool, чтобы отследить самый яркий момент на щеке. Не беспокойтесь о том, чтобы оставаться верным точному контуру, закругление углов и рисование более простой формы часто могут улучшить конечное изображение.

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

Продолжите процесс отслеживания каждого последующего слоя и выборки тонов из основного изображения. Вскоре портрет начнет обретать форму. Поскольку две области дизайна встречаются, вам может понадобиться изменить порядок наложения, нажав сочетания клавиш CMD + [или CMD +].

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

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

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

Выберите «New Art Brush» в окне параметров, затем измените метод на «Оттенки». Это позволит нам при необходимости изменить цвет мазков кисти.

Используйте инструмент «Кисть» вместе с новым параметром «Кисть», чтобы добавить определению и детализацию глаз. Обводка глаз и нанесение серии ресниц действительно помогает им выделиться.

На новом слое используйте инструмент «Перо», чтобы примерно нарисовать фигуру, чтобы представить базовую линию волос. Это не имеет большого значения для неловкой формы.

Используйте кисть с настройкой обводки 0,25pt, чтобы нарисовать отдельные пряди волос, чтобы замаскировать уродливые очертания линии роста волос. При необходимости дважды щелкните значок «Кисть» на палитре инструментов, чтобы изменить настройки, например «Сохранить выбранные».

Тонкие блики в волосах можно создать, рисуя тонкими штрихами по 0,15 пт, используя более яркие синие цвета. Графический планшет действительно пригодится здесь.

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

Портрет действительно обретает форму, теперь тона лица и волос завершены, поэтому давайте завершим дизайн прохладным фоном.

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

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

Простая строка текста хорошо завершает дизайн. Здесь я добавил название «Quorra» в сверхлегком Helvetica Neue со сверхвысоким трекингом, аккуратно подчеркнутым тонкой каймой.

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

Источник

Как создать Векторный портрет с вьющимися волосами в Adobe Illustrator

Russian (Pусский) translation by Mavka (you can also view the original English article)

Этот учебник был первоначально опубликован в ноябре 2012 года как учебник Tuts + премиум. Теперь он доступен бесплатно для просмотра. Хотя в этом учебнике не используется последняя версия Adobe Illustrator, методы описанные здесь и процесс по-прежнему актуальны.

Чтобы создать замечательные портреты, рассмотрите одну из наших удивительных Кистей волос для Адобе Иллюстратор от GraphicRiver. Или привлеките помощь профессионала по дизайну, чтобы получить собственные портреты от Envato Studio.

1. Подготовим документ

Шаг 1

Я начну с создания Нового документа, а далее Файл> Поместить чтобы разместить мое стоковое изображение на холсте. Поскольку я хочу, чтобы волосы стали одной из важнейших черт этой композиции, я хочу, чтобы у них было достаточно места, чтобы привлечь внимание зрителя.

Затем я размещаю свои слои, как показано на панели Слои ниже. В слое «BG» я разместила Прямоугольник (M) залитый белым цветом, поверх стокового изображения, с 50% Непрозрачности. Это делается для того, чтобы края моих форм были более заметными по сравнению со стоковым изображением, когда я просматриваю их.

Шаг 2

Затем я выбрала средний тон и использовала Перо (P), чтобы воспроизвести общую форму основы кожи.

2. Воспроизведем кожу

Шаг 1

Для начальных форм затенения кожи я воспользовалась тем самым тоном кожи как основой и обвела участки света на лице с помощью Пера (P). Затем я создала Составной контур (Control-8) с первым набором форм и применила Обработка контуров> Минус верхний с дубликатом основной формы кожи.

Я пользуюсь одним и тем же процессом несколько раз. После этого, я применила к формам Режим наложения Умножение, Непрозрачность 10%, а затем Сгруппировала их (Control-G).

Шаг 2

Используя немного более темный тон кожи, я воспроизвожу участки тени с помощью Пера (P). Снова, после того, как один набор создан, я добавляю его к своему Составному контуру (Control-8). Затем каждый Составной контур устанавливается в Режим наложения Умножение, Непрозрачность 10%, а затем Группируется вместе (Control-G).

Шаг 3

Как вы, возможно, заметили, формы выходят за пределы основной формы. Я скопировала базовую форму и Сгруппировала обе группы теней кожи (Control-G), а затем создала Обтравочную маску (Control-7). Все будущие фигуры для затенения кожи будут добавлены к этой Обтравочной маске, чтобы сохранить края чистыми.

Шаг 4

Применив еще более темный оттенок, я добавляю темные тени с помощью Пера (P), пользуясь тем же процессом. Как правило, чем темнее область, тем меньшие формы создаются. Установите для них Режим наложения Умножение, Непрозрачность 10%.

Шаг 5

Теперь добавим основные моменты. Я создаю прозрачный радиальный градиент, используя легкий тон кожи. Затем я применяю его для заполнения фигур, выделив участки кожи. Не добавляйте эти формы к Составному контуру.

Вместо этого Сгруппируйте каждый набор фигур вместе (Control-G). Для каждого установите Режим наложения Осветление, Непрозрачность 15%.

Шаг 6

Есть области, в которых находятся самые глубокие тени, чем где-либо. Как правило, это участки, где кожа изгибается (веки, губы, складки носа), и еще у волос, вдоль носа, чтобы выделить его, и вокруг ноздрей. Эти формы гораздо темнее и устанавливаются в Режим наложения Умножение, Непрозрачность 15%.

Шаг 7

Для более розовых тонов оттенка кожи я добавлю к коже светло-розовый прозрачный радиальный градиент, разместив его Эллипс (L) немного ниже кости щеки.

Следующий находится на плече. К этим формам применен Режим наложения Умножение, Непрозрачность 60%. Я добавила цвет к щеке над другим затенением кожи, тогда как плечо находится под затенением кожи.

Шаг 8

Чтобы изменить общую основу затенения кожи, я собираюсь добавить градиенты под созданные формы затенения кожи. Дублируйте оригинальную форму основы и сначала добавьте прозрачный радиальный градиент с градиентом света. Пользуясь инструментом Градиент (G), переместите градиенты поверх лица и плеча / руки. Они установлены на Режим наложения Осветление, Непрозрачность 30%.

После этого я добавила прозрачный линейный градиент под затенением кожи, установленный на Режим наложения Осветление основы, и Непрозрачность 100%.

Шаг 9

Пользуясь радиальным градиентом света кожи, я добавила более интенсивное освещение к глазному яблоку и коже. Оно установлено на Режим наложения Осветление, Непрозрачность 60%.

Шаг 10

Верхушка носа обычно более розовая. Поэтому, примените красный радиальный градиент, установленный на Режим наложения Цвет, Непрозрачность 20%, чтобы добавить намек на нос.

Чтобы сделать скулы более выделенными, добавьте затенение под ними. Я добавила больше цвета в скулы с помощью фиолетового прозрачного радиального градиента. Примените к нему Режим наложения Цвет, Непрозрачность 10%.

Шаг 11

Чтобы показать складки в шее, я добавила дополнительный свет, пользуясь градиентами света для кожи. Они установлены на Режим наложения Осветление, Непрозрачность 30%.

3. Воспроизведем губы

Шаг 1

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

Затем я пользуюсь градиентами, чтобы добавить цвет к губам. Я применила розовый прозрачный радиальный градиент на трех формах, созданных для губ: один для общей формы губ, а один для верхней и нижней губ. Они перекрывают один другой в центре, чтобы помочь затемнить эту область, которая находится в тени. Затем мы применим к ним Режим наложения: Затемнение основы, Непрозрачность 40%.

Шаг 2

Я использовала коричневый прозрачный радиальный градиент, чтобы добавить тени и складки к губам. Эти формы установлены на режим Режим наложения: Затемнение основы, Непрозрачность 50%.

Из-за контраста, созданного с помощью этих фигур, я добавила дополнительное затенение к лицу с таким же градиентом. Примените к ним Режим наложения: Затемнение основы, Непрозрачность 100%.

Шаг 3

С помощью инструмента Карандаш (N) и светло-розового прозрачного радиального градиента добавьте основной свет к губам. Инструмент Карандаш (N) позволит вам добавить много форм гораздо быстрее, чем Перо (P). Затем установите эти формы на Режим наложения Перекрытие, Непрозрачность 30%.

Затем, применяя выделенный градиент кожи, добавьте еще более интенсивные формы. Они установлены в Режим наложения Осветление основы, Непрозрачность 40%.

Шаг 4

Я хочу, чтобы губы выглядели более розовыми, а не красно / оранжевыми, поэтому я дублирую форму, которая охватывает всю область губ, и добавляю синий прозрачный радиальный градиент. Установите их в Режим наложения Рассеянный свет, Непрозрачность 100%. Это поможет «нейтрализовать» красный / оранжевый тон.

3. Воспроизведем глаза

Шаг 1

Пользуясь подобной теорией, я собираюсь немного «нейтрализовать» красные / оранжевые тона на глазных яблоках, используя голубой радиальный градиент. Установим для него Режим наложения Цвет и Непрозрачность 30%.

Затем я добавлю основной свет к глазному яблоку, используя градиент света для кожи, установленный на Режим наложения Осветление, Непрозрачность 40%.

Шаг 2

Я добавляю розовый оттенок к ватерлинии с помощью прозрачного розового радиального градиента, установленного на Режим наложения Цвет, Непрозрачность 100%.

Затем добавьте толстый и темный градиент в углы глаз, установленный на Режим наложения Умножение, Непрозрачность 30%.

Шаг 3

С помощью золотисто-коричневого цвета заливки инструментом Карандаш (N), добавьте затенение вокруг ватерлинии и углов глаз. Эти фигуры устанавливаются на Режим наложения Умножение, Непрозрачность 10%.

Затем светло-розовым цветом добавьте основной свет с помощью инструмента Карандаш (N), примените к нему Режим наложения Экран, Непрозрачность 40%.

Шаг 4

Я собираюсь применить Обтравочную маску (Control-7) для радужки. Сначала дублируйте наибольшую форму для глазного яблока. Затем создайте ровный круг инструментом Эллипс (L).

Для создания Обтравочной маски: сначала дублируйте радужку, а затем Обтравочная маска содержит эту маску радужки, с дублированной формой глазного яблока. Это даст вам одну Обтравочную маску в другой. Скоро вы увидите выгоду.

Шаг 5

Шаг 6

Затем градиенты добавляются к радужке. Далее Создать параллельный контур на -1 pt. Инверсионный темно-коричневый радиальный градиент применяется для получения эффекта виньетки вокруг радужной оболочки.

Затем дублируйте его, увеличьте с помощью инструмента Градиент (G) и снизьте к низу радужной оболочки. Это придаст небольшую тень в верхней части радужки.

Затем на дно радужки нанесите зеленый или оранжевый радиальный градиент. Это придаст золотисто-коричневый тон для глаз.

Шаг 7

Шаг 8

Пользуясь Пером (P) и темно коричневой заливкой, нарисуйте фигуры вокруг глаз и складки век. Это поможет построить основу для ресниц и определить веки. Эти фигуры установлены на Режим наложения Умножение, Непрозрачность 30%.

Кроме того, добавьте более тонкие фигуры с черной заливкой и Режимом наложения Умножение, Непрозрачность 10%. Они помогут придать тень к глазному яблоку.

Шаг 9

Используя градиент для осветления кожи, добавьте рефлексы вдоль ватерлинии и над зрачком. Для них Режим наложения Осветление, Непрозрачность от 70% до 100%.

Шаг 10

Ресницы добавляются с помощью кисти Width Profile 1, созданной в предыдущем уроке. Обе ресницы имеют темно-коричневый цвет обводки, но верхним нужен Режим наложения Умножение, Непрозрачность 70%, а нижним — Режим наложения Умножение, Непрозрачность 40%.

5. Воспроизведем волосы

Шаг 1

Прежде чем начать добавлять волосы, я хочу создать эскиз идеи. Для эскиза я воспользуюсь инструментом Кисть-Клякса (Shift-B). Создадим Новый слой выше и ниже основных элементов портрета, чтобы нарисовать волосы сверху и под портретом. Я решила, что в этом случае, я собираюсь заполнить волосами все негативное пространство.

Шаг 2

Пользуясь инструментом Прямоугольник со скругленными углами, создайте форму и примените инструмент Прямое выделение (A), чтобы выделить конечные точки формы. Затем воспользуйтесь инструментом Свободное трансформирование (E), чтобы уменьшить размер формы в конце, для создания конического эффекта. Я хочу добавить к портрету массу зеленых волос.

Шаг 3

Поскольку мы не можем включить градиент или Обтравочную маску в Художественную кисть, я собираюсь создать градиентный эффект с помощью Перехода. Дважды дублируйте коническую форму. Примените Свободное трансформирование (Е), чтобы уменьшить размер формы сверху. Для большей формы, установите 0% Непрозрачность. Затем создайте Переход (Control-Alt-B) с обеими формами с параметром Заданное число шагов 4 pt. Установите Режим наложения Умножение.

Шаг 4

Примените кисть Width Profile 3, чтобы добавить мазки с помощью инструмента Отрезок линии (\) с Толщиной обводки 2 pt на кончике конического конца. Эти мазки должны быть такими же зелеными, как оригинальная коническая форма и расположены под Переходом.

Шаг 5

С помощью кисти Width Profile 1, добавьте 2 pt Обводки с помощью инструмента Отрезок линии (\) в верхней части формы с Режимом наложения Осветление и Непрозрачность 30%, чтобы добавить основной свет. Затем, пользуясь теми же настройками, добавьте темные мазки с Режимом наложения Умножение и Непрозрачностью 30%. Группируйте все элементы всякий раз после создания (Control-G).

Пока группу выбрано на панели Кисти создайте Новую кисть> Художественную кисть и нажмите ОК.

Шаг 6

Пользуясь Пером (P) для более плавной кривой, добавьте завитки вокруг лица под элементами лица. Сгруппируйте их вместе, после создания начальных завитков (Control-G).

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

Шаг 7

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

Потом, когда я завершила раскладку кудрей, я добавляю темно-зеленый Прямоугольник (M) позади всех завитков.

Шаг 8

Используя кисть Width Profile 1 и инструмент Кисть (B), я добавляю мазки средним зеленым цветом вдоль сторон завитков и на кончик. Поскольку каждый локон одинаковый, я хочу, чтобы они выглядели более индивидуально. Поэтому добавление дополнительных мазков поможет мне этого достичь. Эти мазки установлены на Непрозрачность 80%.

Я повторяю этот же метод для завитков позади и добавляю их поэтапно.

Шаг 9

С лаймовым зеленым, пользуясь кистью Width Profile 1 я добавляю мазки к кудрям с 4 pt Толщиной обводки. Они установлены на Режим наложения Осветление основы, Непрозрачность 40%. Эти мазки добавляют свет к кудрям и предоставляют им дальнейшее определение.

Затем я добавляю 2 pt Толщины обводки, чтобы добавить к свету больше деталей. Они установлены на Режим наложения Осветление, Непрозрачность 40%.

Шаг 10

Применяя Карандаш (N), я добавляю зеленый прозрачный радиальный градиент поверх выделенных участков кудрей. Это придаст им более плавное освещение. Они установлены на Режим наложения Осветление основы, Непрозрачность 25%.

6. Создаем брови

Для финальных штрихов, необходимо добавить брови. Я воспользовалась кистью Width Profile 1 из 1 pt Обводки для волос на бровной кости. Начальные мазки устанавливаются на Режим наложения Нормальный, Непрозрачность 80%.

Закончите, установив некоторые мазки на Режим наложения Умножение, Непрозрачность 50%.

Замечательная работа, мы закончили!

Если вы следовали моим урокам в прошлом, вы знаете, что я заканчиваю несколькими родинками на лице и коже. Они созданы с помощью двухслойных коричневых прозрачных радиальных градиентов, установленных на Режим наложения Умножение. Я надеюсь, вам понравился этот урок и вы научились одному из способов создания кудрявых волос.

Кисти волос для Адобе Иллюстратор от GraphicRiver

Чтобы помочь вам сэкономить время с следующим замечательным портретом, попробуйте воспользоваться одной из удивительных Кистей волос для Адобе Иллюстратор от GraphicRiver. Ознакомьтесь с какой-то из этого полезного набора кистей ниже!

Легкие кисти волос для Адобе Иллюстратор

Создавайте быстрые прически, как Pro, с помощью этого удивительного набора кистей! Созданный из 17 простых кистей для волос, которые нужно просто перетащить в предварительно установленную папку, чтобы начать создание реалистичных волос без затрат времени! Идеально подходит для использования с Пером, а также вы можете использовать эти кисти с помощью мыши или графического планшета!

Источник