Создание изометрических иллюстраций — с помощью геометрической техники

Узнайте, как быстро создавать изометрическую графику Eye-Popping в соответствии с вашими требованиями к дизайну.

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

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

Вот была разработана серия иллюстраций в изометрическом стиле для различных приложений uvdesk.

Изометрическая иллюстрация для приложения uvdesk

Как правило, иллюстраторы сначала рисуют изометрическую сетку и затем вручную рисуют объекты поверх сетки.

Традиционная изометрическая сетка

Мы же будем использовать Геометрическую Технику вместо традиционной.

Перед началом

Статья предназначена для начинающих иллюстраторов / дизайнеров, которые имеют базовые знания Adobe Photoshop.

Геометрическая техника

Плоскость — двумерная поверхность, которая простирается до бесконечности.
Изометрические иллюстрации создаются с использованием 3D-геометрии, которые имеют 3 отличные геометрические плоские структуры.

• XY-плоскость — Объект находится на послости XY. Размер объекта измеряется по направляющим X и Y, в то время как размер высоты, глубины или расстояния измеряется по направлению Z.

Плоскость XY в 3-мерном пространстве

• YZ-плоскость—Объект находится в плоскости YZ. Размер объекта измеряется по направляющим Y и Z, в то время как размер высоты, глубины или расстояния измеряется по направлению X.

Плоскость YZ в 3-мерном пространстве

• XZ-плоскость — Объект находится в плоскости XZ. Размер объекта измеряется по направляющим Xи Z, в то время как размер высоты, глубины или расстояния измеряется по направлению Y.

Плоскость XZ в 3-мерном пространстве

Шаги по созданию изометрического объекта в XY-плоскости

• Откройте Photoshop и создайте новый документ
• Нарисуйте квадрат, каждая со сторонами ≈400px, используя Rectangle Shape Tool(U)

• Выберите нарисованный квадрат, используя инструмент Move Tool (V) и уменьшите его высоту до90%.

• Выберите квадрат с помощью инструмента Move Tool (V) и задайте горизонтальный скос на -30 градусов

• Теперь задайте угол поворота на +30 градусов и в результате вы получите объект находящийся на плоскости XY в 3-мерном пространстве

Давайте скомпонуем все шаги посмотрим еще раз:

Теперь можно добавить высоту квадрату по оси Z путем дублирования этого же самого квадрата используя "Alt" + "Стрелка вниз" несколько раз (≈75+).

Вы можете использовать Clipping Masks чтобы добавить граням параллелепипеда.

Вуаля! Легко, правда? Теперь вы научились и можете создавать Изометрические Объекты в плоскости XY.

Теперь давайте расположим изометрический объект в плоскости XZ

• Создайте новый документ в Photoshop
• Нарисуйте квадрат, каждая со сторонами ≈400px, используя Rectangle Shape Tool(U)

• Выделите квадрат, используя инструмент Move Tool (V) и поверните его на -45 градусов

• Теперь уменьшите высоту до 56%

• Теперь снова поверните его на +60 градусов

• Для создания глубины по оси Y продублируйте этот слой комбинациями "Alt" + "Стрелка Вверх" и "Alt" + "Стрелка Вправо" несколько раз (≈75+)

Посмотрим как это выглядит в компоновке

Используйте Clipping Masks, чтобы задать цвет граням

Отлично! Теперь вы можете делать изометрическую иллюстрацию в плоскости XZ

Ну и напоследок разберем создание изометрической фигуры в плоскости YX

• Создайте новый документ в Photoshop
• Нарисуйте квадрат, каждая со сторонами ≈400px, используя Rectangle Shape Tool(U)

• Выделите квадрат, используя инструмент Move Tool (V) и поверните его на +45 градусов

• Теперь уменьшите высоту до 56%

• Теперь снова поверните его на -60 градусов

• Для создания глубины по оси X продублируйте этот слой комбинациями "Alt" + "Стрелка Вверх" и "Alt" + "Стрелка Влево" несколько раз (≈75+)

Посмотрим снова все шаги:

Как и в предыдущих примерах зададим цвета граням нашей фигуры и получаем:

Ура! Теперь вы профи в создании изометрических псевдо-3D иллюстраций

Вот вам несколько примеров использования иллюстрации в изометрическом стиле:

An App UI with Isometric Illustration for Mobikul eCommerce App Builder

A Concept Illustration for Webkul Contact Section

Lead Page Design with Isometric Illustration for Cloudkul eCommerce Optimiser

[muzli]