Как сделать изометрию в иллюстраторе

Обновлено: 06.07.2024

В последнее время стала очень популярна графика с использованием иллюстраций в изометрии. Что же такое изометрия? Короткое определение – изображение трехмерных объектов без учета перспективы.

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

Эффекты объема позволяют создавать трехмерные (объемные) объекты на двумерной (плоской) поверхности. Управлять оформлением объемных объектов можно с помощью освещения, теней, вращения и других свойств. Можно также помещать рисунки на каждой грани объемного объекта.

Существует два способа создания объемных объектов: вытягивание и вращение. Кроме того, можно вращать плоские или объемные объекты в трех измерениях. Чтобы применить или изменить 3D-эффекты для существующего трехмерного объекта, выберите объект и дважды щелкните эффект на панели Оформление.

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

Создание объемных объектов с помощью вытягивания

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

Экструзия объекта

Нажмите Эффект > 3D (классика) > Вытягивание и фаска (классика).

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

Выберите, как вращать объект и перспективу, с которой следует его рассматривать (см. Параметры положения объемного вращения).

Вытягивание и скос.

Определяет глубину объекта и границы добавляемого или отнимаемого скоса (см. Вытягивание и скос).

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

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

Помещает рисунки на поверхность объемных объектов (см. Отображение рисунка на объемный объект).

Вытянутый объект без скошенной границы (слева) и объект со скосом, направленным внутрь (в середине), и скосом, направленным наружу (справа)

Создание объемных объектов вращением

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

Вращение объекта

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

Нажмите Эффект > 3D (классика) > Поворот (классика).

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

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

Помещает рисунки на поверхность объемных объектов (см. Отображение рисунка на объемный объект).

Параметры положения объемного вращения

Выберите текущее положение в меню Положение.

Для свободного вращения перетаскивайте грань кубика. Передней части объекта соответствует синяя грань кубика, верхняя и нижняя части объекта светло-серые, боковые стороны – серые, а задняя – темно-серая.

Чтобы ограничить поворот по глобальной оси, удерживайте клавишу Shift при перетаскивании по горизонтали (глобальная ось Y) или по вертикали (глобальная ось X). Для поворота объекта вокруг глобальной оси Z перетащите синюю ленту, которая окружает кубик.

Для сохранения вращения вокруг оси объекта перетащите ребро кубика. Курсор будет иметь вид двойной стрелки , и ребро кубика изменит цвет в соответствии с осью, вокруг которой будет вращаться объект. Красное ребро соответствует оси X объекта, зеленое – оси Y, а синее – оси Z.

Введите в текстовые поля значения от -180 до 180 для горизонтальной оси (X) , вертикальной оси (Y) и оси глубины (Z) .

Чтобы скорректировать перспективу, введите значение от 0 до 160 в текстовом поле Перспектива. Маленький угол аналогичен телеобъективу фотоаппарата, большой угол — широкоугольному объективу.

Угол линзы больше 150 может привести к выходу объекта за границы поля зрения и появлению искажений. Кроме того, следует помнить, что имеются оси X, Y и Z объекта и глобальные оси X, Y и Z. Оси объекта зависят от положения объекта в его трехмерном пространстве. Глобальные оси фиксированы относительно экрана компьютера. Ось X расположена горизонтально, ось Y вертикально, а ось Z перпендикулярна экрану.

Оси объекта (черные) перемещаются вместе с объектом, глобальные оси (серые) фиксированы.

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

И так что же такое изометрическое искусство?

Эта техника невероятно популярна в иллюстрации, поскольку позволяет передать все три измерения в полном масштабе, а не в ракурсе. Изометрическая перспектива — это когда стороны объекта располагаются под углом 30 градусов. Лучше всего это показать с помощью изометрического куба (изображение ниже).

Вы можете создавать изометрическую графику в Illustrator, используя изометрическую сетку (как показано на изображении ниже). Это поможет вам создавать изометрические формы по сетке.

1. Создаем новый файл проекта

ШАГ 1

Начнем с создания нового документа. Идем в меню File — New (Файл — Новый) или нажимаем Ctrl+N на клавиатуре. Для этого урока мы используем следующие настройки:

Во вкладке Advanced (Дополнительны параметры) устанавливаем следующие настройки:

ШАГ 2

Нажимаем Ctrl+K, переходим в раздел Preferences — Units (Установки —Единицы измерения) и устанавливаем настройки, показанные ниже.

2. Создаем голову

ШАГ 1

Берем инструмент Ellipse Tool (L) (Эллипс) и рисуем круг. Удерживаем клавишу Shift на клавиатуре, пока кликаем и перемещаем мышь, чтобы создать идеальный круг. Для цвета кожи мы будем использовать настройки ниже, но можно выбирать свои собственные цвета для своего проекта.

ШАГ 2

Берем инструмент Direct Selection Tool (A) (Прямое выделение) и выделяем круг. Станут видны опорные точки формы, что позволит настроить их с помощью инструмента.

ШАГ 3

С помощью инструмента Direct Selection Tool (A) (Прямое выделение) выбираем нижнюю опорную точку и перемещаем ее в сторону, чтобы создать подбородок персонажа.

ШАГ 4

Создаем еще один идеальный круг с помощью инструмента Ellipse Tool (L) (Эллипс) и на этот раз выбираем цвет волос персонажа.

ШАГ 5

Чтобы создать уши, используем инструмент Rounded Rectangle Tool (Прямоугольник со скругленными углами). Рисуем небольшую форму капсулы, используя тот же цвет кожи, что и для головы, и перемещаем ее на место.

ШАГ 6

Используем инструмент Rounded Rectangle Tool (Прямоугольник со скругленными углами), чтобы создать капсулу большего размера. Используем тот же цвет, что и для волос, и слегка поворачиваем её под углом.

ШАГ 7

Берем инструмент Selection Tool (V) (Выделение) и помещаем фигуру на передний план перед головой.

ШАГ 8

Дублируем форму (Ctrl+C) и вставляем (Ctrl+V). Помещаем новую капсулу над головой, чтобы создать дополнительный объем волос.

ШАГ 9

Кликаем правой кнопкой мыши по векторной фигуре, представляющую собой ухо, и выбираем Arrange — Bring to Front (Монтаж — На передний план).

ШАГ 10

Это поместит форму уха поверх волос.

ШАГ 11

Создаем еще две маленькие капсулы и используем инструмент Selection Tool (V) (Выделение), чтобы повернуть их и переместить на место.

ШАГ 12

Создаем капсулу для шеи и перемещаем ее под голову. Для кожи используем более темный цвет.

ШАГ 13

Создаём новый слой для фона.

ШАГ 14

На новом слое с помощью инструмента Rectangle Tool (M) (Прямоугольник) создаём новый фон и выбираем подходящий цвет:

3. Создаем тело в изометрии

ШАГ 1

Инструментом Rectangle Tool (M) (Прямоугольник) рисуем длинный белый прямоугольник. С помощью инструмента Direct Selection Tool (A) (Прямое выделение) смещаем две верхние точки привязки друг к другу, чтобы создать трапецию. Убеждаемся, что все четыре Live Corner Widgets (Виджеты динамического угла) видны (в противном случае снимаем выделение с формы и выбираем ее снова, щелкнув в центре). Выбираем виджеты и перетаскиваем все четыре угла к центру, чтобы скруглить углы.

ШАГ 2

Убеждаемся, что тело выделено. Идем в меню Effect — 3D — Rotate (Эффект — Объемное изображение — Поворот).

ШАГ 3

Во всплывающем окне обязательно выбираем следующее:

Position (Положение): Isometric Right (Справа в изометрии)
Surface (Поверхность): No Shading (Без тени)

ШАГ 4

Это придаст телу вид изометрической формы. Обратите внимание, что вы все еще можете редактировать форму также, как когда она была 2D, и она будет изменяться в реальном времени.

ШАГ 5

Убеждаемся, что тело выделено. Идем в меню Effect — 3D — Extrude & Bevel (Эффект — Объемное изображение —Вытягивание и скос).

ШАГ 6

В появившемся окне устанавливаем следующие настройки:

ШАГ 7

Это создаст изометрический 3D-объект, который мы можем использовать для тела персонажа.

ШАГ 8

Инструментом Selection Tool (V) (Выделение) перемещаем голову на место.

4. Создаем ноги в изометрии

ШАГ 1

Берем инструмент Rounded Rectangle Tool (Прямоугольник со скругленными углами), чтобы создать бедра персонажа. Выбираем новый цвет для ног:

ШАГ 2

Убеждаемся, что бедра выделены. Идем в меню Effect — 3D — Rotate (Эффект — Объемное изображение — Поворот). Во всплывающем окне обязательно выбираем следующее:

Position (Положение): Isometric Right (Справа в изометрии)
Surface (Поверхность): No Shading (Без тени)

ШАГ 3

Убеждаемся, что бедра все еще выделены. Идем в меню Effect — 3D — Extrude & Bevel (Эффект — Объемное изображение —Вытягивание и скос). В появившемся окне устанавливаем следующие настройки:

ШАГ 4

Перемещаем эту форму ниже и позади тела. Щелкаем по форме правой кнопкой мыши и выбираем Arrange — Send to Back (Монтаж — На задний план).

ШАГ 5

Берем инструмент Pen Tool (P) (Перо) и переключаем в режим Stroke (Обводка) с толщиной 21 pt.

ШАГ 6

Инструментом Pen Tool (P) (Перо) рисуем прямую линию, удерживая клавишу Shift на клавиатуре. Дублируем, или рисуем две ноги, и помещаем их ниже бедер.

5. Создаем руки в изометрии

ШАГ 1

Инструментом Rounded Rectangle Tool (Прямоугольник со скругленными углами) создаем белую капсулу для рукава рубашки. Поворачиваем ее под небольшим углом, используя инструмент Selection Tool (V) (Выделение).

ШАГ 2

Помещаем капсулу на плечо персонажа.

ШАГ 3

Дублируем форму и отправляем ее на задний план (Right Click — Arrange — Send to Back) (Правый клик — Монтаж — На задний план). Теперь нужно перевернуть фигуру (Right Click — Transform — Reflect — Vertical) (Правый клик — Трансформировать — Зеркальное отражение — Вертикальная), а затем укорачиваем ее и помещаем поверх плеча персонажа.

ШАГ 4

Берем инструмент Pen Tool (P) (Перо) и настраиваем параметры обводки так, чтобы цвет соответствовал цвету кожи персонажа:

ШАГ 5

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

ШАГ 6

Дублируем (Ctrl+C) и вставляем (Ctrl+V) руку.

ШАГ 7

Отражаем руку — правый клик мышкой, а затем в появившемся меню выбираем Transform — Reflect — Vertical (Трансформировать —Зеркальное отражение — Вертикальная)

ШАГ 8

Инструментом Selection Tool (V) (Выделение) перемещаем руку назад под второй белый рукав.

ШАГ 9

Инструментом Selection Tool (V) (Выделение) вносим окончательные изменения в изометрического персонажа.

6. Создаем юбку в изометрии

ШАГ 1

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

Инструментом Selection Tool (V) (Выделение) выделяем персонаж и дублируем его. На втором персонаже с помощью Direct Selection Tool (A) (Прямое выделение) удаляем волосы.

ШАГ 2

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

ШАГ 3

Чтобы создать юбку, выбираем изометрическую форму —бедро персонажа. Затем используем Selection Tool (V) (Выделение) и тянем фигуру вниз, чтобы увеличить длину.

ШАГ 4

Используем инструмент Direct Selection Tool (A) (Прямое выделение), чтобы настроить Live Corner Widgets (Виджеты динамического угла) так, чтобы углы снова стали резкими. Это упростит корректировку формы юбки — смещение нижних опорных точек навстречу друг другу.

Как только мы настроим общую форму юбки, можем снова использовать инструмент Direct Selection Tool (A) (Прямое выделение), чтобы скруглить углы с помощью Live Corner Widgets (Виджеты динамического угла).

7. Создаем прическу в изометрии

ШАГ 1

Чтобы создать волосы второго персонажа, используем инструмент Ellipse Tool (L) (Эллипс) и создаем идеальный круг. С помощью инструмента Selection Tool (V) (Выделение) помещаем его в нужное место и отправляем на задний план за головой (Right Click — Arrange — Send to Back) (Правый клик — Монтаж — На задний план).

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

ШАГ 2

Создаем еще один круг и помещаем его перед лбом персонажа. С помощью инструмента Selection Tool (V) (Выделение) уменьшаем высоту формы.

8. Создаем грудь

ШАГ 1

Инструментом Ellipse Tool (L) (Эллипс) создаем маленький белый круг и помещаем его на грудь персонажа.

ШАГ 2

Дублируем форму и помещаем ее на другую сторону груди.

ШАГ 3

Выбираем более темный цвет для тени и применяем его к новой группе с помощью инструмента Eyedropper Tool (I) (Пипетка). Убеждаемся, что группа фигур выбрана, а затем с помощью инструмента Eyedropper Tool (I) (Пипетка) кликаем по желаемому цвету.

ШАГ 4

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

ШАГ 5

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

ШАГ 6

Помещаем тень под белый эллипс.

Мы закончили! Поздравляю!

Вы успешно прошли этот урок. Делитесь своими результатами ниже! Увидимся в следующий раз!

Спасибо. всем бодрости!)

))) на первой картинке очки в воздухе висят. Нет тени.

Когда мне будут деньги платить )) за поправки .? ))) за деньги могу больше

.да и если на лампе свет включен , то как под ней может быть её же тень?

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

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

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

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

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

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

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

Ощущение, что аймак кривой. Как будто обратная перспектива. Проверьте.

Вообще, если это изометрия и перспектива не учитывается ( а перспектива это свойство физическое), то почему рисуются тени? (тень это неизменное физическое свойство. Почему одно свойство игнорируется а другое нет? Логично тогда уж и тени не рисовать. Изометрия так изометрия. Просто разверните все предметы так чтобы небыло теней..или тени должны быть символические- как и предметы

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

Потому что это определенного вида стилизация. И у нее есть свои правила построения.

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

Ну вот с этим согласна, да)

А ещё вопрос к вам - кто определял степень вида стилизации. Кто решил оставить тени реальные и размеры перспективы сделать изометрический. Если вы сами, этот гибрид . такой вид стилизации не очень удачный. Я как зритель сужу. Он (этот выбор) не логичен.

Светлана, поинтересуйтесь у википедии, что такое изометрическая проекция, и станет все понятно) К сожалению, не получается у меня скопировать сюда ссылку. Этот стиль пошел из черчения, он предполагает отсутствие классической перспективы, как привыкли ее понимать художники. И это не гибрид, и степень стилизации тут ни при чем. У тех, кто знает, что это за стиль, кто с ним часто сталкивается или работает, у них не возникнет вопросов на самом деле.

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

Рискну вклиниться в разговор с одним маленьким замечанием: здесь все может встать на свои места, если назвать изометрию не стилем, а методом изображения (чем она, на самом деле, и является).

Занятный спор! Параллельная проекция (в данном случае, изометрическая) - это частный случай той самой перспективы. Только точка зрения - очень далеко от картины. Можно просто отодвинуться от изображения (допустим, на пару метров) и тогда оно уже не будет казаться настолько искаженным.

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

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

Конечно, ни о какой "неправильности" говорить - не приходится! Аксонометрия получается, если мы возьмем привычную каждому художнику перспективу (точнее говоря, центральную проекцию) и будем "оттаскивать" точку зрения все дальше и дальше от нашей картины ( в бесконечность). И тогда, в конце концов, мы получим параллельную проекцию (в случае равного искажения по осям - ту самую прямоугольную изометрию). А вот, например, тоже изометрия, но уже "косоугольная":

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

Думаю, что это, как раз, "чистый обман зрения", учитывая (со слов автора):

"Рисовала в Illustrator на изометрической сетке. " Вот, только сам автор из дискуссии выпал, видимо все это ей - неинтересно.

Да, Дмитрий, так и есть. Я понял, там на мониторе, на углах, не продолжается блик толщины, вот и воздействовал на моё тонкое воспириятие :))

Перспектива обратная. Особенно 1 и 2 рисунок мониторы и книга.

Всем спасибо. Любопытно)

Наверно если запостиь Flat design, то тут скажут "как-то слишком плоско") где перспектива)

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

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

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

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

Читайте также: