Создание изометрических иллюстраций 

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

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

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

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

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

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

Для начала 

Статья предназначена для начинающих иллюстраторов/дизайнеров, которые имеют базовые знания Adobe Photoshop. Если вас интересует, что вы сможете сделать после того, как научитесь Геометрической технике в этой статье, посмотрите Isometric Space Bucket.

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

Плоскость (Plane)- двумерная поверхность, которая простирается до бесконечности.

Изометрические иллюстрации создаются с использованием 3D-геометрии, в которую входят 3 разные геометрические структуры плоскостей (Geometric Plane Structures).

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

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

• ZX Plane - Объект лежит в плоскостях Z и X. Размер объекта контролируется в плоскости Z и X, в то время как изменение глубины, высоты или расстояния происходит в плоскости Y.

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

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

• Выберите форму квадрата с помощью Move Tool (V) и установите Height на уровне 90% в Option Bar.

• Выберите форму квадрата с помощью инструмента Move Tool (V) и установите Horizontal Skew на -30 degrees в Option Bar.

• Теперь установите Rotation Angle на +30 degrees в Option Bar. Результатом будет квадрат, лежащий на поверхности XY.

Давайте скомпилируем все эти шаги и посмотри на все вместе сразу -

Теперь глубину квадрата можно экструдировать в Z-плоскости, несколько раз (≈75 +) дублируя один и тот же слой квадрата клавишей "Alt" + "Down Arrow". Результат будет примерно таким, как ниже:

Теперь вы можете использовать Clipping Masks, чтобы добавлять разные цветов в Scene, и конечный результат будет выглядеть так, как ниже:

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

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

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

• Выберите Square Shape с помощью инструмента Move Tool (V) и установите Rotation Angle на -45 degrees в Option Bar.

• Теперь установите Height на уровне 56% в Option Bar.

• Теперь установите Rotation Angle на +60 degrees в Option Bar. Результатом будет квадрат, лежащий на поверхности XZ.

Теперь глубину квадрата можно экструдировать в Y-плоскости, несколько раз (≈75 +) дублируя один и тот же слой квадрата, поочередно нажимая клавиш клавишами "Alt" + "Up Arrow” и "Alt" + "Right Arrow". Результат будет примерно таким, как ниже:

Давайте скомпилируем все эти шаги и посмотри на все вместе сразу -

Теперь вы можете использовать Clipping Masks, чтобы добавлять разные цветов в Scene, и конечный результат будет выглядеть так, как ниже:

Невероятно! Вы уже здесь, и теперь можете создать изометрический объект, который лежит на ZX Plane.

И последнее, но не менее важное: создадим изометрический объект в YZ -поверхности

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

• Выберите Square Shape с помощью инструмента Move Tool (V) и установите Rotation Angle на 45 degrees в Option Bar.

• Теперь установите Height на уровне 56% из Option Bar.

• Теперь установите Rotation Angle на -60 градусов в Option Bar. Результатом будет квадрат, лежащий на поверхности YZ.

Теперь глубину квадрата можно экструдировать в X-плоскости, несколько раз (≈75 +) дублируя один и тот же слой квадрата, поочередно нажимая клавиши "Alt" + "Up Arrow” и "Alt" + "Left Arrow". Результат будет примерно таким, как ниже:

Давайте скомпилируем все эти шаги и посмотри на все вместе сразу -

Как было сделано ранее, вы можете использовать Clipping Masks, чтобы добавлять разные цветов в Scene, и конечный результат будет выглядеть так, как ниже:

Wooo Hoooo! Вы теперь PRO во всех трех поверхностях. Потратьте минутку и попытайтесь создать несколько ослепительных изотермических 3D-иллюстраций.

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

Надеюсь, вам понравится эта статья, и вы найдете ее полезной.