Изометрические иконки еды

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

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

Запустите Illustrator и выберите «Файл» > «Создать», чтобы открыть пустой документ. Введите имя для своего файла, настройте размеры, а затем выберите Пикселы в качестве единиц и RGB в качестве цветового режима .

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

Создаем изометрическую сетку

Шаг 1

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

Возьмите инструмент Отрезок лини (\) и щелкните в любом месте на вашей монтажной области, чтобы открыть окно настроек. Введите 400 пикселей в поле Длина и 30 градусов в поле Угол, потому что в изометрических чертежах все должно быть нарисовано под этим углом. Поместите линию где-нибудь на левой стороне вашего артборда размером 200 x 200 пикселей и нарисуйте 1 штрих .

Шаг 2

С выделенной линией перейдите в Эффект > Исказить и трансформировать > Трансформировать . Введите 18 px в поле Перемещение > По горизонтали и укажите 30 копий, чтобы размножить линию. У вас должно быть достаточно линий, чтобы покрыть артборд.

Шаг 3

С выделенной линией перейдите в Объект > Разобрать оформление, чтобы разобрать эффект Трансформация, примененный на предыдущем шаге. Оставьте получившуюся группу выбранной и нажмите «Горизонтальное выравнивание по центру», а затем «Вертикальное выравнивание по центру» на панели «Выравнивание» , убедившись, что установлен флажок «Выровнять по монтажной области» (1).

С выбранной группой линий, перейдите в  Объект > Трансформировать > Зеркальное отражение . Установите Вертикальное и нажмите Копировать, чтобы получить отражение этих линий над монтажной областью (2).

Шаг 4

Я не считаю необходимым добавлять вертикальные линии в сетку, поэтому выберите две группы линий и перейдите в меню «Просмотр» > «Направляющие» > «Создать направляющие» . Это оно! Изометрическая сетка готова. Держите ее на отдельном слое, назвав его «сетка », и создайте новый слой над ним для первой иконки еды.

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

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

Как создать изометрическую иконку сэндвича 

Шаг 1

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

Возьмите Перо (P) и нарисуйте первый путь, длина которого составляет 7 квадратов сетки. Отсчитайте еще 7 квадратов сетки для других сторон и закройте фигуру, чтобы получить изометрический квадрат. Придайте ему бежевый цвет заливки и темно-коричневую обводку размером 2 pt . На панели «Обводка» нажмите параметры «Круглые концы» и «Круглые углы» . Я назову эту форму «нижний хлеб ».

Шаг 2

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

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

Нарисуйте правую сторону хлеба таким же образом.

Шаг 3

Теперь рассмотрим как сделать изометрические круги в Иллюстраторе. Сначала скопируйте и вставьте (Shift-Control-V) «нижний хлеб», чтобы получить копию (1). Перейдите в Эффект > Стилизация > Скругленные углы и примените очень высокое значение Радиуса, например 100 px или настолько высокое, насколько это возможно. Выберите Разобрать оформление в меню Объект. Вы только что получили изометрический круг (2). Легко, правда?

Пока круг остается выделенным, выберите «Объект»> «Контур» > «Добавить опорные точки», чтобы добавить дополнительные точки слева, справа, сверху и снизу. Эти точки полезны при выравнивании круга с сеткой или другими фигурами в вашем дизайне (3).

Шаг 4

Уменьшите круг, полученный на предыдущем шаге, удерживая клавишу Shift, чтобы сохранить пропорции. Затем переместите его рядом с нижним правым краем хлеба. Залейте его указанным цветом и примените ту же обводку (1).

Сделайте несколько маленьких копий этого круга и расположите их случайным образом сверху. Используйте три оттенка розового, чтобы окрасить их, и на этот раз не применяйте обводку. Это будет «ломтик салями» в бутерброде, и вы можете сгруппировать все составляющие его фигуры (2).

Сделайте копию «ломтика салями» и расположите его рядом с нижним левым краем хлеба (3).

Шаг 5

Скопируйте и вставьте (Shift-Control-V) «нижний хлеб», чтобы сделать его копию на переднем плане. Используйте технику Круглых углов , чтобы получить новый изометрический круг, как показано ранее (1).

Пока круг остается выделенным, перейдите к «Эффекту»> «Исказить и трансформировать» > «Зигзаг» и примените показанные настройки, чтобы получить волнистые края. Не забудьте разобрать этот эффект, перейдя в Объект > Разобрать оформление, и вы получите форму салата. Залейте его светло-зеленым и примените те же настройки обводки (2).

Шаг 6

Снова выберите «нижний хлеб» и перейдите в Объект > Трансформировать > Масштабирование . Введите 90% в поле Равномерно и нажмите Копировать, чтобы получить уменьшенную копию изометрического квадрата. Поместите его поверх всех фигур, перейдя в Объект > Монтаж > На передний план (Shift-Control-]) . Это будет «кусочек сыра» в бутерброде, и вы можете покрасить его в желтый цвет. Переместите его немного вверх, пару раз нажав клавишу со стрелкой вверх на клавиатуре.

Шаг 7

Выделите весь хлеб в нижней части бутерброда, а затем скопируйте и вставьте его (Shift-Control-V), чтобы сделать его копию. Сгруппируйте (Control-G) три фигуры и переместите их вверх на три квадрата сетки (1).

Чтобы создать текстуру на верхнем хлебе, случайным образом расположите несколько маленьких изометрических кругов, как вы делали для салями. Окрасьте их с бежевым и уменьшить непрозрачность до 35% (2).

Шаг 8

На этом этапе квадратный значок сэндвича готов, и вот как выглядит значок без сетки

Как создать изометрическую прямоугольную сэндвич-иконку 

Шаг 1

Давайте создадим новый артборд внутри документа для второй иконки. Возьмите инструмент Прямоугольник (M) и нарисуйте новый квадрат 200 x 200 px ; затем перейдите в Обект> Монтажые области > Преобразовать в монтажные области.

Теперь создайте новую изометрическую сетку, как описано в начале урока, или скопируйте существующую. Просто убедитесь, что вы выровняли вторую сетку по Монтажной области №2.

Создайте новый слой под названием «длинный сэндвич » на панели «Слои» , и мы готовы создать вторую иконку еды.

Шаг 2

Мы будем использовать ту же технику для создания изометрического круга, начиная с изометрического квадрата, поэтому возьмите инструмент Перо (P) и нарисуйте квадрат, отсчитывая по 4 квадрата сетки с каждой стороны. Сделайте копию и поместите ее в верхнюю правую часть монтажной области (1).

Выбрв оба квадрата, перейдите в  Эффект > Стилизация > Скругленные углы  и примените радиус в 100 пикселей или выше. Выберите Разобрать оформление в меню Объект, чтобы разобрать примененный эффект, и вы получите два круга (2).

Шаг 3

Используйте инструмент прямого выбора (A), чтобы выбрать только указанные точки, и нажмите клавишу Delete на клавиатуре, чтобы удалить их (1). Вы получите два полукруга.

Продолжая использовать инструмент прямого выбора (A) , выберите две соответствующие конечные точки и нажмите Control-J, чтобы соединить их (2). Повторите то же самое с двумя другими конечными точками вверху, и вы получите практически изометрический прямоугольник с закругленными углами. Покрасьте хлеб светло-бежевым и добавьте такую же темную обводку в 2 пт (3).

Шаг 4

Скопируйте и вставьте обратно (Control-B) форму хлеба и используйте инструмент прямого выбора (A), чтобы выбрать только указанные точки (1). Слегка сдвиньте их вниз, нажав клавишу со стрелкой вниз на клавиатуре несколько раз. Я назову получившуюся форму «нижней булочкой». Измените цвет заливки на чуть более темный оттенок бежевого (2).

Шаг 5

Теперь, когда вы освоили рисование изометрических кругов, создайте и расположите три из них на хлебе в виде помидоров. Цвет их красный (1).

Сделайте меньшие копии трех кругов и замените красную заливку белым. Это будет моцарелла в бутерброде (2).

Шаг 6

Выберите форму хлеба, а затем скопируйте ее (Shift-Control-V), чтобы сделать копию поверх остальных. Перейдите в Объект > Трансформировать > Перемещение и введите -18 px в поле  По вертикали и 90 градусов в поле Угол. Вы получите верхнюю булочку. Замените цвет заливки на более темный оттенок бежевого.

Шаг 7

Давайте добавим последние штрихи. Возьмите инструмент Отрезок линии (\) и используйте его, чтобы нарисовать линию длиной  40 пикселей под углом 120 градусов . Сделайте три копии и разместите их на верхней булочке, как показано (1).

Дайте им обводку 8 пт и выберите «Профиль» на панели «Обводка» . Выберите «Разобрать оформление» в меню «Объект» , чтобы превратить обводки в заполненные фигуры, а затем перейдите в «Объект» > «Составной контур» > «Создать» (Control-8) (2).

Шаг 8

Выберите верхнюю булочку, а затем скопируйте (Shift-Control-V), чтобы сделать ее копию поверх остальных фигур. Перейти к Объект > Контур > Создать параллельный контур и применять смещение  -1 px, чтобы получить немного меньшую форму (1).

Теперь выберите синюю форму и группу линий и нажмите «Пересечение» на панели «Обработка контуров». Заполните получившиеся фигуры более светлым бежевым оттенком, и это будет разрез на булочке (2).

Шаг 9

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

Как создать иконку изометрического супа

Шаг 1

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

Шаг 2

Нарисуйте изометрический круг, начиная с квадрата 10 х 10, как вы узнали ранее (1). С выделенным кругом перейдите в Объект > Трансформировать > Масштабирование  и введите 89 % в поле  Равномерно . Нажмите «Копировать», чтобы получить меньший круг внутри (2).

Шаг 3

Сделайте копию большего черного круга и измените значение высоты на 130 пикселей на панели «Трансформирование» . Вы получите красную овальную форму (1).

Затем выберите красную форму вместе с копией черного круга и нажмите Разделить в панели Обработка контуров, затем Разгруппировать (Shift-Control-G) . В результате вы получите три отдельные фигуры, окрашенные в пурпурный, розовый и зеленый цвета на изображении ниже (2).

Удалите верхнюю фиолетовую фигуру, потому что она нам не нужна, и теперь у нас есть суповая тарелка (3).

Шаг 4

Раскрасьте розовые и зеленые фигуры светло-серым и примените все туже коричневую обводку, чтобы сохранить общий стиль (1). Затем выберите оригинальные черные и оранжевые круги и перейдите в Объект > Составной контур > Создать (Control-8) . Переместите получившийся составной путь перед остальными, перейдя в  Объект > Монтаж > На передний план (Shift-Control-]) , и это будет внешний край чаши. Покрасьте его белым и примените те же настройки обводки (2).

Выберите круг, который раньше был розовым; перейдите в  Объект > Трансформировать > Масштабирование  и введите  40%в поле  Равномерно. Нажмите Копировать, и вы получите меньший круг. Переместите его на дно чаши (3).

Шаг 5

Выберите белый край чаши, а затем скопируйте и вставьте (Control-F) . Затем перейдите в Объект > Составной контур > Отменить,  чтобы получить отдельные круги. Возьмите меньшую из двух фигур, потому что она нужна нам для создания супа (1).

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

Шаг 6

Теперь возьмите больший круг из предыдущего шага и немного переместите его вниз. Возьмите Ножницы (С) и нажмите на две указанные точки, чтобы разрезать контур, а затем удалите верхний сегмент (2).

Выберите нижний сегмент и добавьте ему красную обводку в 2 пт, чтобы создать декоративную линию на чаше (3). Выберите Объект > Разобрать, чтобы превратить обводку в заполненную форму.

Шаг 7

Выберите основную форму чаши, а затем скопируйте и вставьте ее (Shift-Control-V), чтобы сделать копию поверх остальных. Перейти к Объект > Контур > Создать параллельный контур и применить Смещение от — 1 , чтобы получить немного меньшую форму. Уберите у этой фигуры обводку и залвку, хотя по визуальным причинам я покрасил ее в зеленый (1).

Выберите эту меньшую форму чаши вместе с красной полосой и нажмите Пересечение на панели Обработка контуров (2).

Шаг 8

Давайте добавим немного лапши в суп. Возьмите инструмент Отрезок линии (\) и используйте его, чтобы нарисовать линию длиной  111 px под углом 30 градусов, потому что даже лапша должна быть изометрической при создании изометрического рисунка. Сделайте две копии этой линии и расположите их в верхней левой части супа (1).

Задайте им все ту же обводку; затем перейдите в Эффект > Исказить и трансформировать > Зигзаг и примените показанные настройки. Вы получите волнистый вид лапши (2).

Шаг 9

Выберите форму супа, а затем скопируйте и вставьте (Shift-Control-V), чтобы сделать копию поверх остальных форм. Затем перейдите в  Объект > Контур > Создать параллельный контур  и применять смещение в -1 px, чтобы получить немного меньшую форму. берите у копии обводку и заливку, хотя по визуальным причинам я выделил ее синим цветом (1).

Теперь выберите лапшу вместе с меньшей формой супа и перейдите в Объект > Обтравочная маска > Сделать (Control-7) (2).

Шаг 10

Давайте добавим последние штрихи в виде нескольких маленьких изометрических кругов с зеленой обводкой в 2 пт .

Шаг 11

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

Шаг 12

Вот три монтажных области внутри документа с изометрическими иконками еды. Это упрощает сохранение значков по отдельности.