7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Effects

Создаём Супер-Пластичные Эффекты с Цветными Линиями

Scroll to top
Read Time: 27 mins

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

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


Видео Урок

Наш видео редактор Гэвин Стил создал этот видео урок в качестве бонуса + дополнение к уроку.


Подготовка

Вначале, давайте подберём исходные материалы, которые мы используем для создания данного урока: девочка и тедди, данные изображения взяты на одном из моих любимых стоковых ресурсах 123rf.com. А также изображение воздушного шарика, взятое на сайте sxc.hu.


Шаг 1

Вначале откройте исходное изображение с девочкой, а затем выберите инструмент Перо (Pen). Теперь приступите к выделению изображения девочки. Когда вы закончите создание контура, щёлкните правой кнопкой мыши по созданному контуру и в появившемся окне, выберите опцию Создать выделение (Make Selection). Далее, нажмите клавиши (Сtrl+C), чтобы  скопировать выделенное изображение.

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


Шаг 2

Создайте новый документ 1200рх х 950рх в программе Photoshop. Установите разрешение 300px/inch. Создайте новый слой, а затем назовите его Задний Фон (Background). Поменяйте цвет Переднего плана (Foreground Color) на #f0ce46, а цвет Заднего плана (Background Color) на #f78414. Выберите инструмент Градиент (Gradient) (G), а затем в верхней панели управления данного инструмента, установите тип градиента на Радиальный (Radial). Теперь потяните градиент от левого верхнего угла. Нажмите клавиши (Сtrl+V), чтобы вклеить скопированное изображение девочки на наш рабочий документ. Назовите этот слой Девочка (Girl), а затем идём Изображение - Коррекция - Выборочная коррекция цвета (Image > Adjustments > Selective Color). Поэкспериментируйте с настройками Красного (Red) и Желтого (Yellow) цвета. Я попытался провести коррекцию цвета изображения девочки, чтобы она лучше вписывалась в оранжевый фон.

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


Шаг 3

Теперь выберите инструмент Затемнитель (Burn (O), а затем в панели управления данного инструмента, установите Диапазон (range) на Средние тона (Midtones), а значение Экспозиции (Exposure) на 30%. Убедитесь, что вы находитесь на слое Девочка (Girl), а затем придайте небольшой контраст ее волосам путём прокрашивания. И если другие части ее силуэта покажутся вам немного тусклыми, вы можете снова повторить этот процесс.


Шаг 4

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

Для начала нам необходимо создать тень. Итак, посмотрите на пункт 1 ниже. Это оригинал изображения, которое мы используем. Увеличьте изображение в области тени под девочкой, и, как вы видите, у нас очень простая задача: Данное изображение уже указывает нам, как были расположены тени на оригинальном изображении. Поэтому, всё что вам сейчас нужно – это восстановить это же самый эффект тени (как показывают 3 скриншота). Используйте пункт 1 в качестве руководства для данного процесса.

Тем не менее, перед тем, как вы сделаете что-либо,давайте перейдём к следующему шагу.

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


Шаг 5

Перед тем, как мы продолжим, создайте новый слой поверх слоя Задний фон (Background). Назовите этот слой Земля (Ground). Поменяйте цвет переднего плана на #ffe07c, а затем выберите инструмент Градиент (Gradient (G). В панели управления данного инструмента, установите тип градиента на Радиальный (Radial). Создайте градиент в центре холста. Сейчас у вас должна получиться большая желтая точка. Далее, идём Редактирование - Трансформация - Искажение (Edit > Transform > Distort). Придайте точке немного перспективы, чтобы придать ей вид земли (второй скриншот ниже).

Создайте новый слой ниже слоя Девочка (Girl). Назовите этот слой Тень (Shadow). Поменяйте цвет на какой-нибудь оттенок, примерно #8f4121 (коричневый). Выберите инструмент Кисть (Brush (B), установите Жесткость (Hardness) на 0%, Нажим (Flow) примерно 10%, диаметр кисти небольшой. Далее, начните прокрашивать под девочкой там, где должны быть тени. Варьируйте диаметр кисти, чтобы получить различные тени. Для коррекции тени, используйте инструмент Ластик (Erase (E) с Жёсткостью (Hardness) 0% и Нажимом (Flow) 50%.

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

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


Шаг 6

Теперь перейдите на слой Девочка (Girl). Идём Изображение - Коррекция - Уровни (Image > Adjustments > Levels), чтобы немного усилить контраст. Далее, идём Изображение - Коррекция - Цветовой тон/Насыщенность (Image > Adjustments > Hue/Saturation). Уменьшите степень Насыщенности (Saturation). Нам не нужно, чтобы изображение девочки было слишком ярким. Теперь мы сбалансируем изображение и добавим немного глубины цвета. Продублируйте (Ctrl+J) слой Девочка (Girl). Назовите этот слой Глубина цвета (Color depth). Поменяйте режим наложения для данного слоя на Мягкий свет (Soft Light), а затем идём Изображение - Коррекция - Карта градиента (Image > Adjustments > Gradient Map). Установите следующие цвета градиента: от #1b130c к #969696.

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

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

Примечание: Перед тем, как применять карту градиента (gradient map), убедитесь, что вы поменяли режим наложения на Мягкий свет (Soft Light). Далее, вы увидите предварительный результат при использовании конкретного градиента.


Шаг 7

Я обратно включил видимость слоя Задний фон (Background) с оранжевой заливкой, и решил осветлить его.  Итак, давайте поработаем над этим. Мы также приступаем к работе над добавлением контуров, которые станут нашими пластичными цветными линиями.

Создайте новый слой поверх слоя Задний фон (Background). Назовите этот слой Фоновые цвета (Back colors). Поменяйте цвет на efd8a5 (красивый ярко-желтый цвет). Выберите инструмент Кисть (Brush(B), установите Жёсткость (hardness) на 0%, Нажим (Flow) примерно 20-40%, а затем добавьте одно или несколько больших пятен за девочкой. Переключитесь на инструмент Перо (Pen (P). Далее, создайте несколько красивых контуров, окружающих девочку.

Если у вас возникли какие-либо проблемы при работе с инструментом Перо (Pen Tool),то вы можете просмотреть это Полное Руководство по работе с Пером в Photoshop, чтобы узнать, как правильно создавать кривые контуры.


Шаг 8

Создайте новую группу поверх слоя Девочка (Girl). Назовите эту группу Синяя линия (Blue line), а затем создайте новый слой внутри созданной группы. Назовите этот слой с_линия (b_line). Далее, возвращаемся к инструменту Кисть (Brush (B), поменяйте настройки Жёсткости (Hardness) на 100%, а Нажим (flow) на 100%, а также установите диаметр кисти 7-10 px (в зависимости от размеров вашего изображения). Далее, идём в настройки кисти и устанавливаем Минимальную форму (Minimum Roundness) на 25%. Затем переключитесь на инструмент Перо (Pen (P). Щёлкните правой кнопкой мыши созданному контуру и в появившемся окне, выберите опцию Выполнить обводку контура (Stroke Path).

Не забудьте поставить галочку в окошке Имитировать нажим (Simulate pressure). Мы будем использовать эту опцию в течение всего урока во время создания каждого контура (всегда проверяйте галочку в окошке), поэтому, с этого момента я больше не буду упоминать об этом.

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

Теперь удерживая клавишу (Ctrl), щёлкните правой кнопкой мыши по миниатюре слоя Девочка (Girl), чтобы загрузить активное выделение. Далее, добавьте слой-маску к слою с_линия (b_line), а затем перейдите на маску слоя. Выберите инструмент Кисть (Brush (B), цвет кисти чёрный, установите все настройки кисти на 100%, чтобы сделать её жесткой. Затем прокрасьте участки, которые выделены на втором скриншоте ниже. Нам необходимо создать эффект, как будто линия огибает девочку. 

Технический пункт: я не знаю по какой причине не работает опция Минимальная форма (Minimum Roundness) в настройках кисти, но иногда её невозможно включить. Если вы столкнётесь с этой проблемой, просто перезапустите Photoshop. Следующее, что мы должны сделать – это открыть панель настроек кисти и убедиться, что данная настройка установлена на 25%.


Шаг 9

Теперь давайте поиграем с Параметрами наложения (Blending Options) для нашей линии. Стандартные настройки Параметров наложения (Blending Options) делают все элементы совершенно плоскими без какого-либо ощущения глубины. Хотя я видел, как люди применяли стандартные настройки, но у них по-прежнему были проблемы с добавлением объёма. Поэтому, вам нужно быть предельно аккуратными с этим.

В зависимости от того, какого цвета вы хотите создать линии, стили слоя (layer styles) будут различными. Если вы решите раскрасить линию в синий цвет, то вам нужно будет поиграть с различными оттенками синего цвета.

Также, очень важная опция – это Контур глянца (Gloss Contour) в настройках Тиснения (Beveland Emboss) (второй скриншот ниже). Я создал свой собственный контур глянца, подходящий под мои требования. Если вы поиграете с контрольными точками кривой, то вы уловите принцип их работы. Убедитесь, что вы поставили галочку в окошке Просмотр (Preview), тогда вы сможете применять эффекты в режиме реального времени.

Еще одна важная опция – это Угол (Angle) и Высота (Attitude) тени (расположенные в настройке Контур Глянца (Gloss Contour) – второй скриншот ниже). Потратьте немного времени, чтобы настроить эту небольшую опцию. Она позволяет более точно настроить эффекты освещения.


Шаг 10

Теперь выберите инструмент Кисть (Brush) (B), установите Жёсткость (Hardness) на 0%, диаметр кисти варьируйте в пределах 1-2 px, создавая, таким образом, новые контуры, превращая их в линии. Нам необходимо сделать несколько штрихов, чтобы сделать синюю линию завершенной.

Итак, создайте новый слой поверх слоя с_линия (b_line), а затем назовите новый слой с_линия заливка (b_line fills). Создайте контуры. Создайте много контуров начиная и заканчивая в разных точках. См. скриншоты ниже. На 3м и на 4м скриншоте ниже, стрелки указывают на точки, где я расположил опорные точки. Я создал их с различными настройками и разным размером кисти (от 1 до 2px).

Если вам не нравятся определенные участки линий, просто удалите их, используя  инструмент Ластик (Eraser) (E) Жёсткостью (Hardness) 0% и Нажимом (Flow) 50%.


Шаг 11

Я уверен, что у вас появилось много идей по поводу обводки линий. Итак, добавьте ещё линий, расположите их на своё усмотрение.

Теперь давайте поработаем над цветом этих маленьких линий. В основном, я скопировал стили слоя с_линия (b_line), а затем вклеил для слоя с_линия заливка (b_line fills). Затем я открыл окно Параметров наложения (Blending Options) для слоя с_линия заливка (b_line fills) и изменил только цвет для стиля слоя Внутреннее свечение (Inner Glow) на светло-синий #c1dbff. Вы также можете изменить цвет стиля слоя Глянец (Satin) на какой-нибудь другой оттенок синего. Я использовал оттенок #54abbb для стиля слоя Глянец (Satin). Больше я ничего не менял. Внесённые изменения едва уловимы, но теперь эти линии разного цвета.

Я не играл со стилями слоя с_линия заливка (b_line fills), поскольку эти линии очень маленькие и все эффекты будет трудно заметить. Достаточно того, что вы просто измените цвет для стиля слоя Внутреннее свечение (Inner Glow) (и, если вы захотите, поменяйте цвет для стиля слоя Глянец (satin), как я уже говорил ранее.


Шаг 12

Давайте повторим тот же процесс, что и в Шаге 9. Новая линия будет пересекаться с синей линией, и мы зальём её зелёным цветом. Итак, создайте новую группу поверх слоя с группой Синие линии (Blue lines), назовите эту группу Зелёная линия (Green line). Создайте новый слой внутри созданной группы, назовите этот слой з_линия (g_line). Выберите инструмент Кисть (Brush (B), поменяйте размер кисти на 6-8px, установите Жёсткость (hardness) и Нажим (flow) кисти на 100%. Далее, выберите инструмент Перо (Pen (P),нарисуйте аккуратный контур, пересекающий синюю линию, а затем щёлкните правой кнопкой мыши по нарисованному контуру и в появившемся окне, выберите опцию Выполнить обводку контура (Stroke path). После этого, примените те же самые стили слоя, которые вы применяли ранее, только поиграйте с тенью в стиле слоя Тиснении (Bevel and Emboss). И на этот раз используйте зеленый цвет для всех настроек.

Как только вы закончите, выберите инструмент Ластик (Eraser (E). Убедитесь, чтобы слой з_линия (g_line) был активным. Далее, удалите отдельные участки, где обе линии пересекаются, чтобы добавить немного глубины. Вы также можете выполнить это с помощью Слой-маски (Layer Mask). Это тоже отличный способ коррекции.


Шаг 13

Теперь мы просто повторим Шаги 10 и 11, только применительно к зелёной линии. Итак, создайте новый слой внутри группы Зелёная линия (Green line), назовите этот слой з_линия заливка (g_line fills). Теперь выберите инструмент Кисть (Brush) (B), установите Жёсткость (Hardness) и Нажим (Flow) кисти на 0%, варьируйте размер кисти между 1-2px, а затем создайте много контуров. Далее, выполните обводку этих контуров. После этого, скопируйте стили слоя з_линия (g_line), а затем вклейте для слоя з_линия заливка (g_line fills), точно так же, как мы это проделывали ранее.

И теперь нет необходимости корректировать яркость цветовых оттенков для слоя з_линия заливка (g_line fills), поскольку они уже хорошо выглядят. Но если вы хотите, то вы можете использовать более яркий цвет для стиля слоя Внутреннее свечение (Inner Glow). Если вас беспокоят какие-либо нежелательные линии, просто удалите их с помощью инструмента Ластик (Eraser) (E), предварительно установив настройки Жёсткости (Hardness) на 0% и Нажима (Flow) на 50%.


Шаг 14

Уже выглядит отлично. Далее, мы создадим следующую линию, чтобы сделать нашу сцену более интересной. Итак, создайте новую группу поверх всех остальных слоёв. Назовите эту группу Розовая линия (Pink line). Создайте новый слой внутри созданной группы. Назовите этот слой р_кольцо (p_ring). Выберите инструмент Перо (Pen (P). Нарисуйте контур кривой вокруг ножки девочки (вместо создания контура вы можете воспользоваться инструментом Эллипс/Овал (Ellipse (U) и создать круг. Далее, щёлкните правой кнопкой мыши по созданному контуру и в появившемся окне, выберите опцию Выполнить обводку контура (Stroke path). Теперь примените несколько красивых стилей слоя таким же образом, как мы проделывали это ранее. Вы можете применить мои настройки или поэкспериментировать со своими настройками на своё усмотрение.


Шаг 15

Если ваше кольцо требует небольшой коррекции, тогда, перейдите на слой р_кольцо (p_ring), продублируйте этот слой (Ctrl+J), а затем идём Редактирование - Трансформация - Отразить по вертикали (Edit > Transform > Flip Vertical). Примените коррекцию, чтобы получился эллипс. Затем выберите инструмент Ластик (Eraser (Е). Удалите лишние участки, чтобы создать ощущение, как будто кольцо проходит вокруг ножки девочки.

Как только вы завершите, снова перейдите на слой р_кольцо (p_ring). Продублируйте его (Ctrl+J) 3-4 раза, а затем идём Редактирование - Свободная трансформация (Edit > Free Transform), чтобы подогнать дубликаты колец под ножку девочки.


Шаг 16

Создайте новый слой. Назовите этот слой р_линия (p_line). Выберите инструмент Перо (Pen), а затем нарисуйте красивый искривленный контур. Это будет наша третья линия.

Откройте окно Параметров наложения (Blending Options), чтобы применить те же эффекты, что и ранее. В данном случае, вам необходимо поиграть с настройками стиля слоя Тиснение - Тень (Bevel and Emboss > Shading). Убедитесь, чтобы Угол (Angle) и Высота (Altitude) подходили под ваши линии. В зависимости от направления вашей линии и ее формы, направление тени будет разным. Вам нужно подбирать значения до тех пор, пока вас не устроит результат.


Шаг 17

Еще раз повторите процесс. Используйте ту же самую технику, которая описана в Шагах 10 и 11, но уже для розовой линии. Вкратце,:создайте новый слой, назовите этот слой р_линия заливка (p_line fills), нарисуйте контуры вокруг основной линии, используя инструмент Перо (Pen) (P), а затем выполните обводку нарисованных линий мягкой кистью диаметром 1-2px. Далее, скопируйте стили слоя слоя р_линия (p_line), а затем вклейте скопированные стили слоя для слоя р_линия заливка (p_line fills).


Шаг 18

Теперь давайте поиграем немного с креативностью. Перейдите на слой р_линия заливка (p_line fills), а затем выберите инструмент Лассо (Lasso). Создайте выделение вокруг некоторых оборванных линий (первый скриншот). Теперь щёлкните правой кнопкой мыши по созданному выделению и в появившемся окне, выберите опцию Скопировать на новый слой (Layer Via Copy). Таким образом, мы скопируем выделенный фрагмент линии на новый слой вместе со стилями слоя. Теперь щёлкните правой кнопкой мыши по слою с фрагментом линии и в появившемся окне, выберите опцию Преобразовать в Смарт-объект (Convert to Smart Object). После этого, создайте примерно 4-5 дубликатов слоя (Ctrl+J), а затем распределите их вокруг розовой линии. Примените поворот к дубликатам слоёв с помощью свободной трансформации, для этого идём Редактирование - Свободная трансформация (Edit > Free Transform).

Причиной, по которой мы используем опцию Преобразовать в Смарт-объект (Convert to Smart Object), это избежать эффекта пикселизизации. До тех пор, пока они являются смарт-объектами, вы можете изменять их размер и разворачивать столько раз, сколько захотите, при этом вы не потеряете качество. Но не увеличивайте их размер, это не векторный объект.


Шаг 19

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


Шаг 20

Теперь мы создадим более интересные эффекты. Пользователи раньше создавали такой тип фигур в программе Illustrator, а затем экспортировали в Photoshop. Итак, не все знают, как правильно пользоваться Illustrator, поэтому. я покажу вам, как создать эти фигуры в Photoshop. Единственный минус заключается в том, что эти фигуры остаются растровыми объектами, но ничего страшного, поскольку их легко воссоздать.

Вначале создайте новую группу поверх всех остальных слоёв, назовите эту группу синие капли (blue drops). Внутри созданной группы, создайте новый слой. Назовите этот слой с_капля (b_drop). Откройте Палитру кистей (Brushes Palette), для этого идём Окно - Кисти (Window > Brushes). Выберите опцию Динамика формы (Shape Dynamics), а затем примените следующие настройки, которые указаны ниже. Убедитесь, что настройки кисти установлены на Жёсткости (Hardness) 100% и Нажиме (Flow) 100%. Далее, выберите опцию Форма отпечатка кисти (Brush Tip Shape) (второй скриншот ниже). Примените следующие настройки, которые указаны ниже. Убедитесь, чтобы Интервал (Spacing) был установлен на 1%. Что касается размера кисти, то это зависит от того, насколько большие фигуры вы хотите создать. Но для этого урока я рекомендую использовать все настройки, которые указаны ниже.

Далее, выберите инструмент Эллипс (Ellipse (U). Удерживая клавишу (Shift), нарисуйте круг примерно такого же размера, как на скриншоте ниже. Затем выберите инструмент Перо (Pen), щёлкните правой кнопкой мыши по нарисованной фигуре и в появившемся окне, выберите опцию Выполнить обводку контура (Stroke Path).


Шаг 21

Откройте окно Параметров наложения (Blending Options) для слоя с_капля (b_drop), а затем поиграйте с настройками. Это важно, поскольку стандартный стиль слоя создаёт слишком плоский вид. Чтобы избежать этого, убедитесь, что ваша фигура имеет соответствующие цвета, блики и тени.


Шаг 22

Теперь, когда вы создали 3D фигуру, пришло время продублировать ее (Ctrl+J) несколько раз, чтобы совместить с основной синей линией. Помните, всегда нужно оставлять одну фигуру в качестве запасной, поэтому отключите видимость одного из этих дубликатов (никогда не знаешь, когда он может пригодиться). Что касается остальных дубликатов, все зависит от того, что вы хотите сделать, мы оставим некоторые из них как обычные объекты, а некоторые преобразуем в смарт - объекты.

В предыдущих шагах я объяснял, как использовать смарт - объекты. Здесь я использовал только одну фигуру в качестве смарт-объекта (щёлкните правой кнопкой мыши по слою  - Преобразовать в смарт – объект (Convert to Smart Object), поскольку я искал хорошее положение для этой фигуры, для этого я много раз применял поворот к ней, Редактирование - Трансформация - Поворот (Edit > Transform > Rotate). Что касается остальных объектов, я не преобразовывал их в смарт – объекты, потому что я хотел сохранить их стили слоя. И как только вы уменьшаете размер обычных объектов, стили слоя остаются нетронутыми и они сохраняют взаимодействие. Вы можете увидеть на скриншоте ниже, что маленькие фигуры темнее. Например, стиль слоя Внутреннее свечение (Inner Glow) имеет то же самое значение, а объект при этом стал меньше.

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


Шаг 23

Как вы помните, мы назвали этот слой с_капля (b_drop) (буква с (b) означает слово синий (blue). И я упомянул, чтоб вы оставили резервный слой с_капля (b_drop). Итак, продублируйте этот нетронутый слой. Назовите дубликат слоя з_капля (g_drop). Создайте новую группу, назовите эту группу Зелёные капли (green drops). Поместите в новую группу слой з_капля (g_drop). Затем поменяйте настройки Параметров наложения (Blending Options) для этого слоя. Установите все цвета на различные оттенки зеленого. Также поиграйте со стилем слоя Тиснение - Тень (Emboss > Shading) (второй скриншот ниже).

Затем повторите весь процесс из предыдущего шага. Создайте несколько дубликатов (Ctrl+J) этой зелёной капли, а затем придайте им динамики, для этого используйте трансформацию, идём Редактирование - Трансформация - Поворот (Edit > Transform > Rotate).


Шаг 24

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

Всегда нужно подбирать соответствующие цвета. Начните экспериментировать с ними, и вы убедитесь, насколько важны настройки Параметров наложения (Blending Options), чем какие-либо другие настройки. Постарайтесь уделить этому столько времени, сколько сможете, чтобы все получилось.


Шаг 25

После того, как вы закончили работу над всеми линиями и каплями, пришло время поработать над задним фоном. Просто выберите инструмент Кисть (Brush (B), установите достаточно большой размер кисти, а также установите Жёсткость (Hardness) на 0%, а Нажим (Flow) примерно 12-15%. Создайте новый слой поверх слоя с Задним фоном (Background). Назовите этот слой Цвет заднего фона (background color).  Используйте цвета кисти, которые указаны ниже, и просто рисуйте.

Не сильно нажимайте на кисть, параметр Нажим (Flow) кисти реагирует на нажим. Если вы слишком много раз проводите кистью в одном месте, то цвет станет слишком насыщенным, поэтому наносите только лёгкие штрихи. Не удерживайте кнопку мыши во время рисования.

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


Шаг 26

ОК, задний фон выглядит фантастически, он глубокий и сбалансированный. Теперь мы можем двигаться дальше. Откройте исходное изображение с воздушным шариком, а затем отделите его с помощью инструмента Волшебная палочка (Magic Wand (W). Мы можем используем данный инструмент, т.к. шарик легко выделить. Вероятно, он уже был ранее вырезан и помещён на белый задний фон. Переместите выделенное изображение шарика на наш рабочий документ, уменьшите его размер, а затем отразите по горизонтали, для этого идём Редактирование - Трансформация (Edit > Transform). Переименуйте его в Зелёный шарик (green balloon), а затем примените несколько цветовых коррекций. Они представлены ниже:

  • Изображение - Коррекция - Цветовой тон/Насыщенность) (Image > Adjustments > Hue/Saturation)
  • Изображение - Коррекция - Яркость/Контраст (Image > Adjustments > Brightness/Contrast)
  • Изображение - Коррекция - Выборочная коррекция цвета (Image > Adjustments > Selective Color)
  • Изображение - Коррекция - Уровни (Image > Adjustments > Levels)

Шаг 27

Ещё раз переместите красный шарик на наш рабочий документ, а затем продублируйте его (Ctrl+J). Назовите первый слой Розовый шарик (pink balloon), а второй слой Синий шарик (blue balloon). Для слоя Розовый шарик (pink balloon), используйте только Изображение - Коррекция - Цветовой тон/ Насыщенность (Image > Adjustments > Hue/Saturation), потому что он красный, а мы хотим получить что-то среднее между пурпурным и розовым. Для слоя Синий шарик (blue balloon), используйте следующее:

  • Изображение - Коррекция - Цветовой тон/ Насыщенность (Image > Adjustments > Hue/Saturation)
  • Изображение - Коррекция - Выборочная коррекция цвета (Image > Adjustments > Selective Color)
  • Изображение - Коррекция - Яркость/ Контраст (Image > Adjustments > Brightness/Contrast)

Шаг 28

Теперь вернитесь к настройкам кисти из Шага 8. Создайте два новых слоя, затем назовите их Синяя веревочка (blue rope) и Зелёная веревочка (green rope). Затем нарисуйте кривой контур под каждым шариком. Убедитесь, что размер кисти установлен на 1 px, а Нажим (flow) кисти на 100%. Щёлкните правой кнопкой мыши по созданному контуру и в появившемся окне, выберите опцию Выполнить обводку контура (Stroke Path). Используйте синие и зелёные цвета для обводки контура. Вы также можете скопировать стили слоя с предыдущих слоев линий/капель и вклеить к слоям с веревочками.


Шаг 29

Итак, мы подошли к моей любимой части этого урока. Возможно, что вам она тоже понравится. Создайте новую группу поверх слоя Задний фон (Background). Назовите этот слой Эффекты (Effects), и теперь мы будем работать в этой группе. Выберите инструмент Произвольная фигура (Custom Shape (U), в панели управления данного инструмента, установите режим на Слой-фигура (Shape Layer). Выберите фигуру на своё усмотрение (настройки показаны на первом скриншоте ниже).

Подберите какое-нибудь пустое место в нашей композиции и продолжайте работать на нём. Создайте контур (вы можете удерживать клавишу (Shift) для создания идеальной фигуры). Она автоматически зальётся цветом переднего плана, который может быть белым. Назовите этот слой Оранжевый (Orange), а затем идём в настройки Параметров наложения (Blending Options), чтобы применить к нему красивые эффекты.

Я попытался подобрать различные оттенки оранжевого цвета: от коричневого до желтого. Расположение теней здесь не так важно. Единственное, что вам здесь нужно – хорошее сочетание одного цвета (используя различные тона).


Шаг 30

Теперь у нас есть красивая векторная фигура, и она редактируемая. Идём Редактирование - Трансформация - Деформация (Edit > Transform > Warp). Изогните и скрутите эту фигуру, чтобы получить желаемый результат. Я просто обожаю этот шаг, вы можете экспериментировать с этими фигурами. После каждой трансформации нажимайте клавишу (Enter), и снова идём Редактирование - Трансформация - Деформация (Edit > Transform > Warp).

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


Шаг 31

Вот к чему мы пришли вместе с этой замечательной фигурой (по-прежнему векторной!), и теперь мы можем поместить ее где угодно. Повторяя весь процесс, мы можем украсить весь задний фон за девочкой, используя различный дизайн фигур. Теперь, используя эту технику, добавьте ещё таких фигур, расположив их за девочкой. Используйте опцию скопировать / вклеить стили слоя каждый раз, когда создаёте новую фигуру. Не применяйте стили слоя каждый раз вручную, иначе вы потеряете уйму времени.

То, о чём вы должны помнить: хотя это и векторная фигура, она может иногда становиться слишком острой. Когда вы чересчур сильно скручиваете фигуру, она превращается в тонкую линию, на которой могут проявиться зазубренные края. Поэтому, будьте внимательны, если вдруг у вас произошло что-то подобное, начните заново с новой фигуры. Или вы можете растрировать векторный объект (щёлкните правой кнопкой мыши по слою и в появившемся окне, выберите опцию Растрировать слой (Rasterize Layer). Далее, используйте инструмент Ластик (Eraser (E) Жёсткостью (Hardness) 0% и Нажимом (Flow) примерно 80-100%, чтобы удалить лишние точки.


Шаг 32

Мы завершили работу над маленькими фигурами. Теперь, давайте перейдём к большим линиям. Для создания линии, которую вы видите на первом скриншоте ниже, я использовал ту же самую технику. Далее, я растрировал этот слой (щёлкните правой кнопкой мыши и выберите опцию Растрировать слой (Rasterize layer), и с помощью инструмента Ластик (Eraser (E), я удалил несколько точек. Небольшое описание по скриншотам ниже:

  • На втором скриншоте ниже, я создал линию за шариком.
  • На третьем скриншоте, я создал новую фигуру, используя ту же самую технику.

На следующих скриншотах, я просто продублировал (Ctrl+J) данную кривую линию. Я растрировал слой при необходимости (щёлкнуть правой кнопкой мыши - Растрировать слой (Rasterize layer), а затем использовал инструмент Ластик (Eraser (E). Чтобы разместить эти линии, используйте команду Редактирование - Трансформация - Поворот (Edit > Transform > Rotate). Весь процесс размещения линий занял у меня около 30 минут, потому что я изменял их примерно 10 раз. Так что не сдавайтесь, чем больше вы приложите усилий к работе, тем лучше она будет выглядеть.


Шаг 33

ОК, теперь просто повторите Шаги 29, 30 и 31, но теперь уже с зелёным цветом. Используя ту же технику, создайте несколько зелёных фигур, расположив их за девочкой, а также совместите их с оранжевыми фигурами.


Шаг 34

Сейчас на мой взгляд, я покажу вам кое-что интересное. Поскольку вы создали несколько тонких, зелёных фигур, как вы видите на первом скриншоте ниже, ещё раз идём Редактирование - Трансформация - Деформация (Edit > Transform > Warp). Теперь попытайтесь растянуть их в красивую кривую (второй скриншот ниже).

Теперь идём Редактирование - Трансформация (Edit > Transform), чтобы повернуть эту фигуру так, чтобы она сочеталась с другими частями зелёной линии (третий скриншот ниже). Ещё раз идём Редактирование - Трансформация - Деформация (Edit > Transform > Warp), чтобы идеально деформировать линию. Для проведения коррекции, щёлкните по слою правой кнопкой мыши и выберите опцию Растрировать слой (Rasterize Layer), далее, выберите инструмент Ластик (Eraser (E), чтобы удалить нежелательные участки.

Также, если у некоторых краев появились неровности, используйте инструмент Палец (Smudge (R) со степенью Интенсивности (Strength) 12%. Теперь размажьте края прямо по линии (вы можете это увидеть на 5 и 6 скриншотах ниже).


Шаг 35

ОК, теперь давайте добавим несколько финальных штрихов. Выберите инструмент Кисть (Brush),установите Жёсткость (Hardness) кисти на 0%, а Нажим (Flow) кисти примерно 10%. Поменяйте цвет переднего плана на #481e39, создайте новый слой поверх слоя Розовый шарик (pink balloon). Назовите этот слой р_тень (p_drop shadow). Затем начните рисовать под этой каплей, чтобы создать красивый штрих тени.

Далее, перейдите на слой с этой каплей (как показано на скриншоте ниже), чтобы продублировать этот слой (Ctrl+J). Теперь мы будем работать с этим дубликатом. Обратите внимание на третий скриншот ниже: в Параметрах наложения (Blending Options), поменяйте размер Внутреннего свечения (Inner Glow) для дубликата капли. Далее, уменьшите Непрозрачность (opacity), а затем расположите этот слой ниже слоя р_тень (p_drop shadow), чтобы создать отражение.


Шаг 36

Чтобы придать данной картине некий смысл, я решил добавить какую-нибудь забавную вещь, например, вот этого мишку Тедди. Я подумал, что раз есть маленькая девочка, много цветов, то надо добавить чего-то ещё забавного.

Поэтому, отделите изображение мишки от оригинального заднего фона с помощью инструмента Перо (Pen (Р). Переместите выделенное изображение мишки на наш рабочий документ. Назовите этот слой Тедди (Teddy), расположив слой с мишкой поверх всех остальных слоёв. Теперь давайте проведём небольшую цветовую коррекцию, идём Изображение - Коррекция - Цветовой тон/Насыщенность (Image > Adjustments > Hue/Saturation), а затем идём Изображение - Коррекция - Уровни (Image > Adjustments > Levels).

Продублируйте слой с мишкой Тедди (Teddy), для этого нажмите клавиши (Ctrl+J). Теперь перейдите на данный дубликат слоя. Поменяйте режим наложения для дубликата слоя на Мягкий свет (Soft Light). Далее, идём Изображение - Коррекция - Чёрно-белый (Image > Adjustments > Black and White), чтобы добавить насыщенных цветов и немного усилить контраст.

На мой взгляд, мишке нужно добавить больше цвета. Поэтому, удерживая клавишу (Ctrl), щёлкните по миниатюре слоя с мишкой, чтобы загрузить активное выделение. Затем, создайте новый слой поверх всех остальных слоев. Поменяйте режим наложения для данного слоя на на Перекрытие (Overlay). Далее, я установил цвет переднего плана на #fbc83a, а затем с помощью инструмента Кисть (Brush (B) с очень мягкими краями, слегка прокрасил внутри выделенной области.


Шаг 37

Поскольку у нас до сих пор активно выделение, нажмите клавиши (Сtrl+Shift+C) (чтобы скопировать совмещённые данные), а затем дважды нажмите клавиши (Ctrl+V) (чтобы вклеить). Расположите этих медвежат так, как вы видите на первом скриншоте ниже. Далее, возьмите одного из мишек, поместите его за Зелёным шариком (Green balloon). Сделайте так. чтобы его рука была похожа на ногу.

Теперь создайте отражение со вторым мишкой. Для этого перейдите на другой дубликат слоя с мишкой, а затем идём Редактирование - Трансформация - Искажение (Edit > Transform > Distort). Сделайте этого мишку более плоским (второй скриншот ниже). Расположите его ниже оригинального слоя с мишкой, чтобы он смотрелся, как отражение. Если у вас есть некоторые выходящие за пределы края, удалите их с помощью инструмента Ластик (Eraser (Е). Примените эту же саму технику для создания отражения ноги (как вы можете увидеть на 4 скриншоте ниже).

Далее, загрузите активное выделение слоя Зелёный шарик (Green balloon) (удерживая клавишу (Ctrl), щёлкните по миниатюре слоя Зелёный шарик (Green balloon). Теперь создайте новый слой ниже слоя Тедди (Teddy), поменяйте цвет переднего плана на #212b04. Выберите инструмент Кисть (Brush (B), установите мягкую кисть, Жёсткость (Hardness) кисти 0%, Нажим (Flow) кисти 10-15%. Прокрасьте кистью под мишкой для создания тени. Нажмите клавиши (Сtrl+D), чтобы отменить активное выделение.


Шаг 38

Итак, мы подошли к концу. Нажмите клавиши (Ctrl+А), чтобы выделить весь холст, а затем нажмите клавиши (Ctrl+Shift+C), (чтобы скопировать совмещённые данные). Перейдите на самый верхний слой в панели слоев, а затем нажмите клавиши (Ctrl+V), чтобы вклеить сколированные совмещённые данные на новый слой. Назовите этот слой Заключительные цвета (final colored). Поменяйте режим наложения для данного слоя на Мягкий свет (Soft Light). Теперь идём Изображение - Коррекция - Карта градиента (Image > Adjustments > Gradient Map). Подберите подходящие цвета, чтобы сбалансировать цвета нашей сцены. Ниже указаны цвета градиента, которые я использовал. В конце, я немного уменьшил Непрозрачность (Opacity) этого слоя.


Заключение

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

Спасибо за прочтение урока. Вы можете увидеть итоговый результат ниже или посмотреть более масштабную версию здесь.

Подписывайтесь на Psdtuts+ RSS Feed, чтобы получать рассылку об лучших уроках Photoshop и статьях в сети.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.