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

1. Создаем новый документ

Откройте Illustrator и нажмите Control-N, чтобы создать новый документ. Укажите следующие параметры:

2. Настраиваем сетку

Теперь нам нужно настроить сетку, что поможет нам в работе. Для этого зайдите в меню Edit > Preferences > Guides & Grid/Редактировать>Установки>Направляющие и сетка. Теперь просто укажите в полях Gridline Every/Линия через каждые и Subdivisions/Внутреннее деление на... значение в 1 px. Так точность работы будет максимальной. Также включите опцию Snap to Grid/Выравнивать по сетке (View > Snap to Grid/Просмотр>Выравнивать по сетке). Это поможет вам точнее располагать элементы.

3. Работа со слоями

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

4. Определяем цветовую палитру

Наши иконки практически контурные, поэтому нам понадобится совсем немного цветов. По сути нам нужен фоновый цвет и второй, которым мы и будем рисовать иконки. В нашем примере был выбран желтый (#F9DF74) и оранжевый (#EDAE49). Такое теплое сочетание цветов также создает небольшой эффект объема для некоторых деталей

Также для создания эффекта теней и бликов мы будем использовать черный и белый цвета на разных уровнях прозрачности (Opacity) и в разных режимах наложения (Blending Modes):

• Overlay/Перекрытие: 30% для белого
• Darken/Замена темным: 8% для черного

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

5. Внимание к деталям и единство стиля

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

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

Шаг 1

Переключитесь на соответствующий слой. Возьмите инструмент Rounded Rectangle/Прямоугольник со скругленными углами и создайте фигуру размером Corner Radius) в 1 px. Укажите объекту обводку оранжевого цвета #EDAE49 и толщину обводки  4 px. Вы можете преобразовать контур в заливку, выбрав в меню Object > Expand > Fill & Stroke/Объект>Разобрать>Заливку и обводку.

Шаг 2

Создайте еще один прямоугольник со скругленными углами размером в 30 x 4 px и радиусом скругления углов в 2 px, укажите ему цвет заливки того же оранжевого цвета и убедитесь что оба объекта отцентрованы. Для этого выделите их и нажмите указанную ниже кнопку в палитре Align/Выравнивание.

Шаг 3

Инструментом Ellipse/Эллипс (L) создайте фигуру размером 20 x 10 px и укажите ей обводку оранжевого цвета и толщиной в 4 px. Разберите объект и обрежьте половину так, чтобы у вас осталась только верхняя часть эллипса.

Шаг 4

Добавим блик. Для этого создайте прямоугольник размером 16 x 4 px белого цвета, разместите его как показано на картинке ниже и разместите объект под остальными. После этого смените Blending Mode/Режим наложения объекта на Overlay/Перекрытие и снизьте Opacity/Непрозрачность до 30%.

Шаг 5

Создайте пульверизатор при помощи инструмента Rounded Rectangle/Прямоугольник со скругленными углами и начинайте добавлять детали, экспериментируя с различными типами линий (толстыми, тонкими, длинными, короткими). Также добавьте подтеки краски в правой части баллончика при помощи инструмента Rounded Rectangle/Прямоугольник со скругленными углами.

Шаг 6

Завершим работу над первой иконкой, создав два диагональных блика. Для этого создайте при помощи инструмента Rectangle/Прямоугольник (M) два белых прямоугольника одинаковой высоты (60 px) и разной ширины (6 px и 1 px).

Смените Blending Mode/Режимы наложения и Opacity/Непрозрачность прямоугольников и обрежьте их при помощи обтравочной маски размером в 18 x 46 px.

6. Используем вариации уже созданных форм

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

• Губка: 20 px Width / 44 px Height
• T-маркер: 14 px Width / 50 px Height
• Ведро краски: 44 px Width / 48 px Height
• Заправка маркеров: 36 px Width / 48 px Height
• Широкий маркер: 12 px Width / 52 px Height
• Узкий маркер: 8 px Width / 48 px Height

7. Добавляем повторяющиеся детали к иконкам

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

8. Добавляем уникальные детали

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

Автор урока Andrei Stefan

Перевод — Дежурка

Смотрите также:

• Рисуем простые иконки-стикеры в Adobe Illustrator
• Простые контурные иконки в Adobe Illustrator
• Эффект рваной бумаги в Adobe Illustrator