Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Illustration

Создаём портрет из четырёх цветов!

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Vector Portraits.
Create a Sparkly Female Portrait in Illustrator
This post is part of a series called Mastering Vector Portraits.
Creating with Vector Blends In-Depth
How to Create a Hair Braid Pattern Brush in Illustrator

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

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

Вы можете найти файлы источника в каталоге под названием 'source', который есть среди скачанных вами файлов. Вы можете кратко просмотреть их перед началом.  


Введение

Я буду использовать стоковое изображение, представленное TasaStock, для создания портрета в оттенках серого с всплесками цвета и градиентным оформлением в волосах.  

В этом руководстве я собираюсь использовать только четыре цвета. 

  • Светло-серый: C=0, M=0, Y=0, K=20
  • Серый: C=60.59, M=51.57, Y=49.38, K=19.48
  • Розовый: C=0, M=95, Y=20, K=0
  • Зелёный: C=80, M=10, Y=45, K=0

Если вы сами следуете руководству, чтобы создать свою собственную версию, этот «серый» тон может быть не совсем тем результатом, который вы получите. Причина этого непостоянного оттенка серого будет объяснена в этом руководстве. 


Шаг 1

Откройте стоковое изображение в Photoshop и используйте Инструмент «Рамка» (С) (Crop Tool), чтобы обрезать изображение под соответствующую композицию по вашему усмотрению. В моём случае фокус на руках и лице, т.к. мне кажется, что руки помогут откадрировать портрет и будут вести взгляд зрителя по изображению.  



Шаг 2

Перетащите слой «Фон» на иконку «Создать новый слой» на палитре слоя, чтобы скопировать его. 

Я собираюсь изменить контраст стокового референса, использовав установленные наборы в «Кривых» ("Curves"). Перейдите в Изображение > Коррекции > Кривые и выберите «Светлее» ("Lighter") в выпадающем меню, затем нажмите ОК. Повторите этот процесс с набором «Линейный контраст» ("Linear Contrast").

Чтобы изменить изображение на оттенки серого, перейдите в Изображение > Коррекции > Чёрно-белый (Image > Adjustments > Black & White) и выберите набор «Зелёный фильтр» ("Green Filter") в выпадающем меню. При использовании таких наборов выделяются контрастные цвета в изображении, поэтому Зелёный фильтр подчеркнёт красные оттенки.   В результате контуры теней кожи и губ будут усилены и их будет легче использовать как направляющие при изображении кожи.  



Шаг 3

Теперь, когда референсное изображение переведено в оттенки серого, я собираюсь Сохранить для Web и устройств (Save for Web & Devices) при ширине 600 пикселей.

В Illustrator создайте новый портретно ориентированный документ и перейдите в Файл > Поместить (File > Place), чтобы расположить референс на холсте.  Инструментом «Свободное трансформирование» (Е) (Free Transform Tool) измените размер изображения под монтажную область. Дважды кликните на папке слоя «Слой 1» и назовите её «Референс», затем нажмите ОК. Заблокируйте папку слоя.

Создайте Новый слой и назовите его "Фон". Инструментом «Прямоугольник» (Rectangle Tool (M)) нарисуйте прямоугольник с белой заливкой над холстом и снизьте Непрозрачность (Opacity) до 30%. Заблокируйте папку слоя. Создайте Новый слой и назовите его «Основы». 



Шаг 4

Если не указано другое, фигуры будут нарисованы со светло-серым цветом заливки. Сначала создайте фигуры основы кожи. 



Шаг 5

Создайте Новый слой и назовите его «Тени». Я собираюсь начать добавлять тени на коже при помощи разных Режимов наложения (Blending Modes) и Непрозрачности (Opacities).

Первая серия фигур будет для средних и тёмных теней и оттенков кожи, включая детализацию губ. Я скопировала базовые фигуры кожи из папки слоя «Основы» и использовала Обработку контуров > Вычитание переднего (Pathfinder > Minus Front), чтобы удалить подсвеченные области кожи и оставить более тёмные участки кожи.  

Установите эти фигуры на Режим наложения «Умножение» (Blending Mode Multiply) и Непрозрачность (Opacity) 10%. Режим наложения «Умножения» добавит более тёмный оттенок серого/чёрного над нижними слоями – за исключением нижних оттенков.  Умножение – это хороший режим наложения для добавления тени с разными цветами, т.к. сохраняется цвет первоначальной фигуры. 




Шаг 6

Продолжайте добавлять фигуры для областей с тёмной тенью при помощи Режима наложения «Умножение» и Непрозрачностью 10%. 




Когда будет готово, Сгруппируйте (Group) фигуры из шага 5 и 6 (Command + G).



Шаг 7

Скопируйте фигуру основы кожи и поместите её поверх группы фигур теней кожи в папке слоя «Тени». Выделите обе фигуры и создайте Обтравочную маску (Command + 7).



Шаг 8

Я собираюсь добавить другие затенённые участки при помощи Режима наложения «Выцветание цвета» (Blending Mode Color Burn) и Непрозрачность 25%. Режимы наложения «Выцветание цвета» и «Осветление основы» (Color Dodge) повышают контраст любой лежащей ниже фигуры.  Выцветание цвета усиливает самые тёмные фигуры внизу, а Осветление основы усиливает более светлые фигуры.  Если располагать фигуры с Выцветанием цвета поверх Размноженных фигур, будет усилена тень в более тёмных областях (где перекрывается больше фигур) и не очень усилена в областях, где не так много пересекающихся фигур.  

Когда фигуры будут нарисованы, Сгруппируйте (Group) их (Command + G) и перетащите в группу Обтравочной маски.  






Шаг 9

Начните добавлять фигуры бликов на коже. Эти фигуры будут настроены на Режим наложения «Экран» (Blending Mode Screen) и Непрозрачность (Opacity) 10%.  Т.к. Умножение добавляет оттенки серого/чёрного в изображение, Осветление придаёт более белый/светло-серый оттенок нижним фигурам. Помните о разнице в этих Режимах наложения:  

  • Выцветание цвета/Осветление основы: увеличивают контраст для осветления или затемнения участков. Увеличится насыщенность нижних цветов/цвета. 
  • Умножение/Экран: добавляют чёрные/белые оттенки для затемнения/осветления участков. Уменьшается насыщенность нижних цветов/цвета. 



Когда будет готово, Сгруппируйте фигуры (Group) (Command + G) и затем перетащите группу в Обтравочную маску.  



Шаг 10

Я собираюсь добавить другие детали и объём коже, добавив маленькие, более тёмные фигуры. Эти фигуры будут созданы в Режиме наложения «Выцветание цвета» с Непрозрачностью 60%.  Когда будет готово, Сгруппируйте фигуры (Command + G) и перетащите группу в Обтравочную маску. 






Шаг 11

Т.к. мы создали более сфокусированные фигуры на тени, я хочу добавить другие подсвеченные области, но в этот раз с увеличенной Непрозрачностью.  Установка будет на Режим наложения «Экран» с 30% Непрозрачности. По завершении, фигуры нужно Сгруппировать (Command + G) и перетащить в Обтравочную маску.  




Шаг 12

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



Когда будет готово, Сгруппируйте фигуры (Command + G) и поместите их в Обтравочную маску. 



Шаг 13

Убедитесь, что все векторные объекты видимы, а затем увеличьте изображение на 400-600%. Сделайте скриншот работы и Вставьте (Command + V) в Photoshop.  Инструментом «Пипетка» (Eyedropper Tool (I)) выделите самый тёмный оттенок серого в рисунке. Я выбрала самый тёмный серый ближе к верху руки. 


Дважды кликните на цвете в Цветовой палитре, чтобы получить шестнадцатеричный код и затем Скопируйте (Command + C) этот код.  Вернитесь в Illustrator, дважды кликните на любом цвете в палитре и Вставьте (Command + V) код в соответствующее поле.  Нажмите ОК и затем перетащите этот цвет на Палитру образцов (Swatch Palette). Это будет нерегулярный пронумерованный серый тон, описанный в начале. 

Создайте Новый слой над папкой слоя «Фон». Дважды кликните на слое и назовите его «Фон1». Инструментом «Прямоугольник» (М) (Rectangle Tool) нарисуйте прямоугольник над монтажной областью с новым серым оттенком.  


При предпросмотре вы можете заметить края других фигур, однако, когда вы Сохраните для Web и устройств (Save for Web & Devices), то не увидите это так, как показано ниже: 



Шаг 14

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





Шаг 15

Мне кажется, что некоторые области требуют ещё серых фигур для усиления объёма.  Т.к. руки и лицо выходят из теней и по определению эта область является самой тёмной, я не буду использовать затемняющие Режимы наложения, такие как Умножение и Выцветание цвета.  Фигуры будут установлены на Режим наложения «Нормальный» и Непрозрачность 60%. В эти фигуры не будет входить Обтравочная маска (это также касается и ранее созданных переходов), т.к. они должны перекрываться кожей и тенью. 



Шаг 16

Создайте Новый слой над слоем «Тени» и назовите его «Глаза». Действия с одним глазом нужно проделать и с другим.  Выбрав серый цвет, добавьте фигуры вокруг глаза и для радужки, как показано ниже (установите на Непрозрачность 60%). Добавьте вторую фигуру со сниженной Непрозрачностью 30%, чтобы также создать впечатление тени на радужке. 



Шаг 17

Создайте прозрачный радиальный градиент светло-серого оттенка. Добавьте его на кольцеобразную фигуру зрачка с Режимом наложения «Экран» и Непрозрачностью 40%.  



Шаг 18

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



Шаг 19

Чтобы нарисовать ресницы, брови и волосы, вам нужно создать кисть «Профиль ширины 1» ("Width Profile 1") из этого руководства.  

Инструментом «Кисть» (В) (Paintbrush Tool) нарисуйте штрихи для верхних ресниц с Толщиной обводки 0.5. (Weight). Установите их на Режим наложения «Нормальный» и Непрозрачность 70%. Сгруппируйте по завершении (Command + G).  Затем нарисуйте штрихи для нижних ресниц с такой же Толщиной обводки и Режимом наложения, но в этот раз измените Непрозрачность на 50%. Снова Сгруппируйте их по завершении (Command + G). 



Шаг 20

Таким же образом нарисуйте штрихи для бровей с Толщиной обводки 1 и Непрозрачностью 20%. 



Шаг 21

Взяв светло-серый прозрачный радиальный градиент и Инструмент «Эллипс» (Ellipse Tool (L)), нарисуйте круги для отражений света в глазах. Установите Режим наложения на Осветление цвета и Непрозрачность 100%. 



Шаг 22

Создайте Новый слой над папкой слоя «Глаза» и назовите её «Волосы». Инструментом «Перо» (Р) (Pen Tool) нарисуйте направление волос для получения плавных, скруглённых линий.  



Шаг 23

Использовав направление волос, создайте фигуры базового слоя волос. Я использовала копию фигуры основы кожи, чтобы удалить фигуры вокруг лица. 


Заполните фигуры светло-серым, прозрачным, радиальным градиентом. Инструментом «Градиент» (Gradient Tool (G)) расположите источники градиентов там, где волосы будут более освещены – на отдалении от корней. Установите эти фигуры на 30% Непрозрачности. 




Шаг 24

Инструментом «Кисть» (В) (Paintbrush Tool) я собираюсь нарисовать пряди волос поверх градиентных основ. Я использую кисть Профиля ширины 1, Толщину обводки 2, светло-серый цвет обводки и 30% Непрозрачности. Сгруппируйте эти пряди (Command + G).



Шаг 25

Взяв такие же настройки, как в Шаге 24, и установив Режим наложения на Экран и 50% Непрозрачности, добавьте блики на волосах. 


Когда будет готово, Сгруппируйте пряди (Command + G).



Шаг 26

Скопируйте группы, созданные в шагах 24 и 25. Затем перейдите в Объект > Расширить (Object > Expand) дважды, пока не останется цвета обводки и останется только цвет заливки.  Затем Объедините (Unite) фигуры при помощи инструментов панели Обработки контуров (Pathfinder). Чтобы убедиться в том, что это единая фигура, создайте Составной контур (Command + 8).


Создайте линейный градиент от розового до зелёного и заполните Составной контур. 


Затем установите Режим наложения на Жёсткий свет (Hard Light) и Непрозрачность 50%.  



Шаг 27

Я собираюсь усилить цвета в градиенте, чтобы сделать их более яркими. Сначала я добавлю зелёный на кончиках волос Инструментом «Кисть» (В) (Paintbrush Tool).  Взяв кисть Профиля ширины 1, добавляю Толщину обводки 1 и Режим наложения «Мягкий свет» (Soft Light) с 50% Непрозрачности.  



Шаг 28

Затем используйте розовый цвет ближе к верху волос и добавьте пряди с Режимом наложения «Экран» и Непрозрачностью 50%. 



Шаг 29

Я собираюсь проявить цвет у корней. Это больше усиление цвета, чем затемнение. Для этого я нарисую штрихи с Режимом наложения «Перекрытие» (Overlay) и 20% Непрозрачности.  




Шаг 30

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




Шаг 31

Скопируйте фигуры основы волос – те, на которых есть светло-серый градиент, - и перетащите группу на штрихи. Измените цвет заливки на линейный градиент от розового до зелёного.  Инструментом «Градиент» (Gradient Tool (G)) измените направление градиента, чтобы розовый цвет был в верхней части фигур, а зелёный – ближе к низу. Добавьте две дополнительные фигуры на прядь волос сверху и сбоку.  

Установите Режим наложения на Цветовой тон (Hue) и Непрозрачность на 80%. Вы заметите, что добавятся синие оттенки там, где градиент изменяется на волосах, что создаёт иллюзию присутствия более четырёх цветов! 




Шаг 32

Создайте Новый слой над папкой слоя «Волосы» и назовите её «Передняя часть». Инструментом «Прямоугольник» (М) (Rectangle Tool) нарисуйте серый прямоугольник поверх монтажной области с Режимом наложения «Выцветание цвета» и Непрозрачностью 20%. Это усилит контраст всего изображения.  


Теперь скопируйте прямоугольник, заполните его зелёным цветом и измените Непрозрачность на 10%. Это ещё больше усилит контраст, а также создаст мягкий зелёный нюанс.  



Шаг 33

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



Шаг 34

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



Шаг 35

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

Инструментом «Звезда» (Star Tool) (в параметрах инструмента фигуры) нарисуйте звезду с Толщиной обводки 1 и серым цветом обводки. Затем используйте Инструмент «Отрезок линии» (Line Segment Tool (\)), чтобы разделить звезду линиями, проходящими через центр. Установите толщину этих линий на 2.  



Шаг 36

Выделите весь линейный рисунок звезды и используйте Быструю заливку (Live Paint Bucket (K)), чтобы заполнить секторы розовым и зелёным цветом. 



Шаг 37

Выделите группу Быстрой заливки и затем расширьте её. Сгруппируйте серый линейный рисунок и затем сгруппируйте розовые/зелёные фигуры (Command + G).  Скопируйте группу с розовыми/зелёными фигурами и примените серый прозрачный линейный градиент. Инструментом «Градиент» (Gradient Tool (G)) измените направление градиента.


Измените Режим наложения на Умножение и Непрозрачность на 40%. Сгруппируйте все три элемента (Command + G).



Шаг 38

Несколько раз скопируйте звезду и разместите копии на руке. Инструментом «Свободное трансформирование» (Е) (Free Transform Tool (E)) измените размер и поверните звёзды. Когда будет готово, Сгруппируйте их (Command + G).



Шаг 39

Перейдите в папку «Основы» и скопируйте основу кожи. Нарисуйте прямоугольник на области со звёздами. Инструментами панели Обработки контуров (Pathfinder) Пересеките (Intersect) область, чтобы звёзды стали частью Обтравочной маски (Command + 7).



Шаг 40

Выделите Обтравочную маску и перейдите в Объект > Искажение конверта > Создать с деформацией (Object > Envelope Distort > Make with Warp) и выберите фигуру Рыбы (Fish) в выпадающем меню. Измените настройки, как показано ниже, чтобы создать впечатление, что татуировка огибает руку и искажается на мышце.  


Снизьте Непрозрачность объекта Искажения конверта до 50%. Затем скопируйте объект и измените Режим наложения на Замену светлым (Lighten).



Шаг 41

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



Заключение

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


Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.