Vectorboom
Уроки / Векторные Иконки / Comments: 4

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

Ярослав Лазунов
26.01.2015
Цель Урока

This article was originally published on Vectips.com in English. You can view the original article here...

В сегодняшнем уроке вы узнаете, как в Adobe Illustrator изображать довольно сложные трехмерные объекты в изометрии на примере создания векторной иконки банка. Урок содержит в себе описание подготовительного этапа, который, надеемся, упростит ваш рабочий процесс и детальные инструкции построения элементов здания. Вполне вероятно, что изометрические иконки станут дизайнерским трендом в 2015 году, поэтому самое время освоить этот стиль!

Шаг 1

Открываем Adobe Illustrator и создаем новый документ (Cmd / Ctrl + N). Рабочая область может быть любого размера. Мы можем работать как в режиме в цвета RGB так и в режиме CMYK.

Шаг 2

Изометрия это разновидность изображения трехмерного объекта на плоскости, при котором масштабы всех трех осей равны между собой. Изометрию часто используют в машиностроительном черчении и дизайне, например в компьютерных играх. Давайте создадим изометрическую сетку, направляющие которой будут наклонены под углом 30 градусов к горизонтали. Эта сетка в дальнейшем поможет нам делать построения в изометрических плоскостях. Берем Polygon Tool и создаем шестиугольник без заливки с обводкой любого цвета и ширины.

Берем Line Tool (\) и создаем три прямолинейных сегмента, которые соединяют вершины шестиугольника.

Группируем все созданные объекты (Cmd/Ctrl + G).

Шаг 3

Смещаем группу в сторону, удерживая клавиши Opt/Alt и Shift до пересечения копии с боковой стороной исходной формы.

Используем комбинацию горячих клавиш Cmd/Ctrl + D несколько раз для последовательного повторения последнего действия. Число копий зависит от того, какую ширину сетки вы хотите получить.

Выделяем и группируем все созданные объекты. Перемещаем полученную группу вбок и вниз, удерживая клавишу Opt/Alt, до пересечения вершин в точке A.

Шаг 4

Выделяем и группируем все объекты, затем перемещаем новую группу вниз, удерживая клавиши Opt/Alt и Shift до пересечения копии с исходной группой в точке B.

Используем комбинацию горячих клавиш Cmd/Ctrl + D несколько раз для последовательного повторения последнего действия. Число копий зависит от того, какую высоту сетки вы хотите получить.

Выделяем и группируем всю сетку. Теперь используем комбинацию Cmd/Ctrl + 5 для создания направляющих из выделенных путей.

Шаг 5

Создадим две наклонных направляющих, которые также помогут нам в дальнейшем строительстве. Рисуем горизонтальный сегмент при помощи Line Tool (\). Теперь переходим Object > Transform > Rotate… и устанавливаем угол 30 градусов в диалоговом окне.

Не снимая выделения с пути, переходим Object > Transform > Reflect…. Выбираем Vertical axis, затем нажимаем Copy в диалоговом окне.

Выделяем оба наклонных сегмента, затем используем комбинацию клавиш Cmd/Ctrl + 5 для создания направляющих.

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

Шаг 6

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

Хочу напомнить, что вы всегда сможете изменить цвет не выделенных направляющих в разделе Guides and Grid диалогового окна Preferences (Cmd/Ctrl + K).

Цвет выделенных направляющих всегда соответствует цвету слоя в панели Layers. На мой взгляд, очень важно выбрать контрастный цвет для Smart Guides. Это можно сделать в разделе Smart Guides диалогового окна Preferences.

Не забудьте также включить функцию Smart Guides (Cmd/Ctrl + U). На этом подготовительная работа закончена. Я так много уделил времени этому процессу, так как изометрические построения дело трудоемкое и удобные настройки сохранят вам много времени и нервов. Для того чтобы не проходить все подготовительные этапы в следующий раз, вы можете сохранить текущий документ, как шаблон (File > Save as Template…). В этом случае, создавая новый документ для изомерии, переходим File > New from Template….

Шаг 7

Блокируем сетку в нижнем слое, берем Pen Tool (P) и создаем форму фундамента банка, основываясь на линии сетки.

Теперь приступим к созданию ступенек. Нарисуем квадрат без заливки с обводкой при помощи Rectangle Tool (M).

Выделяем его верхнюю левую вершину при помощи Direct Selection Tool (A), затем удаляем ее, нажав на клавишу Delete.

Шаг 8

Дублируем полученный путь (Opt/Alt) и перемещаем копию до пересечения в точке A.

Повторяем последнее действие (Cmd/Ctrl + D).

Теперь удаляем нижний левый сегмент.

Соединяем пути в местах их пересечения, используя горячие клавиши иллюстратора Cmd/Ctrl + J.

Шаг 9

Выделяем полученный путь и переходим Object > Transform > Shear…. Устанавливаем угол-30 градусов и выбираем Vertical Axis в диалоговом окне. Как вы можете видеть, наклон ступенек точно соответствует наклону направляющих сетки.

Перемещаем путь до пересечения с фундаментом в точке A.

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

Шаг 10

Основываясь на точки зигзагообразных путей, создадим пять поверхностей ступеней при помощи Pen Tool (P).

Теперь левый зигзагообразный путь может быть удален. Для построения правой поверхности фундамента нам потребуется одна наклонная и одна вертикальная направляющая, которую следует вытащить из вертикальной линейки (Cmd/Ctrl + R). Поместите направляющие, как показано на рисунке ниже.

Продлим оставшийся зигзагообразный путь в соответствии с положением направляющих при помощи Pen Tool (P).

Шаг 11

Приступим к строительству стен банка. Выделяем верхнюю поверхность фундамента, затем переходим Object > Path > Offset Path… и устанавливаем подходящее значение (-40px в моем случае).

Используя полученную форму и две наклонных направляющих, создаем две стены при помощи Pen Tool. Задние стены можно не создавать, так как они будут не видны в дальнейшем.

Шаг 12

Определим место расположения колон. Выделяем верхнюю поверхность фундамента, затем переходим Object > Path > Offset Path… и устанавливаем подходящее значение (-10px в моем случае).

Превратим эту форму в направляющую (Cmd/Ctrl + 5).

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

Шаг 13

Дублируем основание колоны и смещаем копию немного вверх.

На основании этих двух форм создаем боковые стороны основания колонны.

Шаг 14

Теперь наша задача создать изометрическую проекцию шестиугольного сечения колонны. Нарисуем шестиугольник при помощи Polygon Tool.

Из центра шестиугольника создадим окружность, которая будет касаться вершин шестиугольника.

Известно, какие пропорции имеет окружность в изометрической проекции, поэтому мы будем деформировать две формы вместе. Выделяем окружность и шестиугольник, затем устанавливаем новые значения для высоты и ширины в панели Transform. В изометрической проекции высота окружности равна 0,71D, ширина окружности равна 1,22D, где D – диаметр окружности.

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

Шаг 15

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

Группируем все элементы колонны. Дублируем колонну и размещаем копию в нижнем углу направляющей.

Шаг 16

Выделяем обе колонны, затем переходим Object > Blend > Make. После чего переходим Object > Blend > Blend Options… и устанавливаем требуемое количество шагов.

Теперь переходим Object > Blend > Expand и удаляем центральную колонну.

Используя описанную технику, создадим ряд колонн справа.

Шаг 17

Приступим к созданию крыши банка. Дублируем верхнюю сторону фундамента и помещаем две копии как показано на рисунке ниже.

На основании этих форм создаем боковые поверхности крыши.

Шаг 18

Выделяем левую сторону крыши, затем переходим Object > Path > Add Anchor Points. Теперь расположим вертикальную направляющую в точке A.

Таким образом, мы наши положение конька крыши. Теперь мы без труда создадим боковую поверхность ската крыши – фронтон.

Шаг 19

Дублируем фронтон и перемещаем копию в точку B.

На основании двух последних форм создаем две поверхности ската.

Шаг 20

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

Сместим наклонную направляющую к предполагаемому краю углубления на фронтоне.

Шаг 21

Создадим направляющую, которая соответствует наклону правого ската.

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

Теперь нам осталось только ограничить углубление снизу при помощи четвертой направляющей.

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

Шаг 22

Для создания круглого углубления создадим эллипс с пропорциями, указанными в шаге 14.

Для того чтобы окружность правильно лежала в левой изометрической плоскости повернем ее на -60 градусов (Object > Transform > Rotate…).

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

Выделяем оба эллипса, берем Shape Builder Tool и кликаем в месте, которое указано стрелкой на рисунке ниже.

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

Шаг 23

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

И наконец, создадим надпись BANK при помощи Type Tool (T), затем переходим Object > Transform > Shear…. Устанавливаем угол 30 градусов и выбираем Vertical axis в диалоговом окне.

Всего комментариев: 4
0
1  
Здравствуйте, Ярослав!
Спасибо за хороший урок, как Вы считаете, какие еще могут быть тренды в 2015 году?

0
2  
Привет, знал бы прикуп жил бы в Сочи

0
3  
хах,ну да))

0
4  
Думаю, flat останется пока в тренде

Только зарегистрированные пользователи могут добавлять комментарии.
[ Registration | Login ]
twitter RSS facebook deviantart feed dribbble
Логин
Пароль
Новости Форума
 
Перепечатка, копирование или воспроизведение информации в каком-либо виде строго запрещены.
Все материалы, которые размещены на этом сайте не подлежат дальнейшему воспроизведению и/или распространению в любой форме, кроме как с письменного разрешения автора.