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

• Программа: Adobe Illustrator
• Версия: CS5
• Сложность: Beginner
• Время: 1 hour

Конечный результат:

Шаг 1

Создайте новый файл в Illustrator и выберите инструмент Ellipse Tool (L). Нарисуйте широкий эллипс и залейте его цветом CMYK = 15, 40, 74, 1.

Шаг 2

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

Шаг 3

Теперь нарисуйте еще два прямоугольника со скругленными углами.  На этот раз сделайте их тоньше и залейте цветом CMYK = 25, 52, 65, 71.

Шаг 4

Выберите Ellipse Tool (L) и нарисуйте небольшие эллипсы — кунжут. Заполните их CMYK = 5, 21, 42, 0.

Шаг 5

Следующий шаг заключается в том, чтобы создать сыр. Выберите Pen Tool (P) и нарисуйте расплавленный ломтик сыра между двумя гамбургерами. Цвет, который мы использовали — CMYK = 0, 27, 85, 0.

Шаг 6

Скопируйте форму с сыром и переместите ее вниз на 10px. Измените цвет на CMYK = 0, 27, 85, 30. Нажмите A, чтобы выбрать инструмент Direct Selection Tool, и измените опорные точки, чтобы создать 3D эффект. 

Шаг 7

Отлично. Приступим к созданию булочки. Выберите Pen Tool (P) и нарисуйте форму, как на первом изображении. Затем, удерживая Shift , выберите верхнюю форму булочки и нажмите кнопку Intersect (Пересечение). Затем скопируйте полученную форму и отобразите ее по горизонтали и переместите на другую сторону. Если у вас есть планшет, вместо этого можно использовать инструмент Path Eraser Tool. 

Шаг 8

Повторите предыдущий шаг для другой части булочки.

Шаг 9

Ваш гамбургер теперь должен выглядеть примерно так.

Шаг 10

Выберите инструмент Pen Tool и нарисуйте форму, как на первом изображении. Дублируйте нижнюю форму булочки. Выделите только-что созданную с помощью инструмента Pen Tool фигуру и, удерживая Shift, нажмите на нижнюю булочку. Нажмите на кнопку Intersect (Пересечение). Измените цвет этой формы на CMYK = 15, 31, 50, 0. Затем копируйте форму, отразите по горизонтали и поместите на другую сторону булочки.

Шаг 11

Повторите предыдущий шаг для верхней булочки.

Шаг 12

Наша иконка гамбургера готова. Теперь создадим еще одну иконку с одного цвета. 

Выберите гамбургер и, удерживая Alt, перетащите его на любое место холста.  Это позволит создать копию гамбургера. Начните с выбора зерен кунжута(выберите первое зерно, а затем, удерживая  Shift, — все остальные). Перейдите к Object-> Paths-> Offset Path и выберите 5px. Затем, удерживая Shift, выберите верхнюю форму булочки. Нажмите кнопку Subtract (вычитание).Переместить форму булочки на 20px вверх (Shift + Up X2).

Шаг 13

Сделайте аналогичные шаги с остальными формами (удалить темно-желтые формы под ломтиками сыра).

Шаг 14

С помощью инструмента Pen Tool сделайте края более гладкими.

Шаг 15

Вот и все. Теперь вы можете редактировать иконку, уменьшить ее или добавить нужные эффекты. Перед тем, как объединить  все формы иконки можно создать копию иконки, чтобы в дальнейшем можно было редактировать ее. 

Варианты:

Автор: Alan Klim

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

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

• Создаем иконку микрофона в Photoshop  
• Создаем iOS иконку ретро-камеры в фотошопе
• Создаем скетч-иконки погоды в Illustrator