Изометрия

Что такое изометрия: просто о сложном

Сейчас нам придется вспомнить школьный курс геометрии. В основе изометрии лежит аксонометрическая проекция трехмерных объектов — способ их изображения с точки, которая не совпадает ни с одной координатной плоскостью. То есть не четко справа, слева, сверху или снизу, а немного сбоку и сверху. В зависимости от того, насколько симметрично выглядит картинка в подобной проекции, различают несколько видов аксонометрических проекций: изометрическую, диметрическую, триметрическую. Нас будет интересовать только первая.

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

В чем разница между 2D- и 3D-графикой рассказали в этой статье.

Зачем нужна изометрия

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

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

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

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

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

Кто такой коммерческий иллюстратор и чем он занимается

Где и для чего применяется изометрия

Рассмотрим современные дизайн-сферы, в которых используется изометрия. Вот основные из них. 

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

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

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

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

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

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

Изометрия в иллюстрации

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

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

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

Изометрия в играх

Изометрия применяется в компьютерных играх для разных целей. Например, для создания объемного и реалистичного пространства, по которому можно перемещаться и с которым можно взаимодействовать. Такие игры обычно имеют жанр стратегии, симулятора или ролевой игры. Примеры таких игр: SimCity 2000, Diablo1, Baldur’s Gate.

Изометрия применяется и просто для создания стильной и креативной графики. Такие игры обычно имеют жанр аркады, головоломки или приключения. Вот несколько примеров: Monument Valley, Fez, Q*bert.

Изометрия в брендинге

Изометрия применяется в брендинге и айдентике для разных целей. Например, для создания:

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

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

Как создать логотип самостоятельно: 3 шага

Изометрия в типографике

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

Что такое изометрическая сетка и зачем она нужна

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

Для построения изометрической сетки нужно выбрать три оси (X, Y и Z), которые будут образовывать углы в 120 градусов между собой. Ось Z обычно направлена вертикально, а оси X и Y — под углом 30 градусов к горизонту. Затем нужно провести параллельные линии вдоль каждой оси с равным шагом. Таким образом получается решетка из ромбов, на которой можно рисовать объекты.

Правила рисования изометрии

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

• Угол между всеми тремя осями координатной плоскости должен быть равен 120 градусам. Оси на изометрии — это длина, ширина и высота объекта. 
• В изометрической проекции отображаются три грани объекта, и все они располагаются симметрично относительно друг друга и равномерно ракурсированы.
• Вертикальные линии остаются вертикальными, тогда как горизонтальные линии проводятся под углом 30 градусов к горизонтальной плоскости. Таким образом, в изометрии не должно быть горизонталей. 
• Круги на изометрических чертежах выглядят как эллипсы, то есть немного вытянуты. Это происходит потому, что зритель смотрит на них как бы сбоку и сверху. В изометрии не может быть круглых объектов. 

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

• Выберите программу для рисования, например Adobe Illustrator или Photoshop.
• Скачайте из интернета или создайте изометрическую сетку. Нарисовать ее самостоятельно можно с помощью инструмента «Направляющие».
• Определите, какая композиция у вас будет. Это можно сделать, нарисовав примерный черновой эскиз на одном из слоев поверх сетки. 
• Начните рисовать сначала простые геометрические фигуры — элементы вашей будущей иллюстрации. Например, если вы изображаете город, то сначала расположите на сетке дома-параллелепипеды разного размера и высоты, нарисуйте дороги на улицах и только после этого приступайте к деталям — окнам, деревьям и т.д.
• Изображайте окружности на горизонтальных плоскостях в виде эллипсов с осью A равной 1,22D и осью B равной 0,71D, где D — диаметр окружности. То есть, например, если круглая кнопка на вашей иллюстрации имеет диаметр 100 пикселей, то вам нужно будет изобразить его в виде «лежачего» эллипса длиной 122 и высотой 71 пиксель. Нарисовать круги в изометрии можно помощью инструмента «Эллипс» в Illustrator или Photoshop.
• Круги на вертикальных плоскостях можно нарисовать по той же логике, как и на предыдущем шаге. 
• Грани прямоугольных объектов располагайте четко по линиям сетки. Используйте привязку к линиям сетки или пересечениям для точного позиционирования объектов. Это можно сделать с помощью функции «Привязка» в Illustrator или Photoshop.
• Проверьте корректность пропорций и перспектив всех объектов. Это значит, что пользователь должен четко понимать, какие объекты находятся дальше, а какие ближе, какие из них имеют больший размер, а какие меньший. Не забудьте про основное правило хорошей композиции — на самых важных объектах должны быть сделаны визуальные акценты. Такие детали могут быть больше по размеру, более светлыми, яркими или насыщенными, чем окружение.
• После того, как все главные объекты будут размещены на картинке, ее можно раскрасить и добавить глубины, то есть света и теней. При этом используйте базовые правила теории цвета.

Советы, как рисовать изометрию быстрее и качественнее

• Используйте изометрическую сетку или направляющие для построения объектов. 

• Начинайте рисование или 3D-моделирование с простых геометрических форм (куб, параллелепипед, шар, цилиндр, пирамида и др.) и только потом добавляйте детали и усложняйте объекты. Это актуально на этапе как обучения, так и создания отдельной взятой картинки. Лучше сначала эскизно распределить по рисунку главные объекты в виде простых фигур и только потом их достраивать. 
• Соблюдайте одинаковую ориентацию и соотносите масштаб всех объектов на сцене. Сцена должна восприниматься как реально существующая плоскость, предметы на которой находятся в определенных отношениях друг с другом: одни больше, другие меньше, одни выше, а другие ниже. 
• Учитывайте направление света и тени при рисовании объектов и окружения. В трехмерной сцене может быть один или несколько источников света, но во всех случаях свет распределятся по строгим правилам. Всегда помните об источнике и выстраивайте освещенность исходя из его местоположения и интенсивности.

• Не забывайте про глубину. Поскольку одни части объектов освещены лучше и находятся ближе к зрителю, они четче и ярче. Иные же могут быть немного размытыми или менее яркими и насыщенными. Такое оформление придает изометрической сцене глубины и реалистичности.
• Не перегружайте или не опустошайте сцену деталями, а находите баланс между заполненностью и пустотой пространства. Изометрия и так сложнее для восприятия, чем плоская картинка. Поэтому не стоит размещать на рисунке слишком много зданий, предметов или персонажей. Рассматривать такую иллюстрацию может быть интересно, но ее точно не получится визуально «считать» быстро, а именно это требуется во многих областях дизайна.
• Соблюдайте правила композиции. Располагайте объекты таким образом, чтобы привлекать внимание к главным смысловым точкам, направляйте взгляд зрителя с помощью линий, форм, цветов или других указателей, соблюдайте баланс между элементами, при необходимости повторяйте элементы для создания ритма и единства композиции.
• Изучайте хорошие примеры изометрических работ от других художников. Их можно найти по ключевым запросам на различных ресурсах для художников и иллюстраторов, например Pinterest или Behance. Не просто смотрите работы, а анализируйте их композицию, глубину, цветовые решения и пробуйте применять подобные техники в своих проектах.

• Используйте специальные плагины для ускорения работы. Вот несколько популярных и полезных программ: Sketch Isometric (плагин для Sketch), Easometric (плагин для Figma), Isometric Line Tool (плагин для Illustrator).
• Практикуйтесь регулярно. Если ваша профессия или учебная специальность связана с иллюстрацией и дизайном и вы хотите научиться хорошо рисовать изометрию, рекомендуем делать по одной, пусть и небольшой, работе 2-3 раза в неделю. Это поможет применять изученные приемы и совершенствовать навык постепенно. Рисовать или моделировать ежедневно необязательно — это может привести к преждевременному выгоранию и пресыщению. Важна регулярность и ваша заинтересованность в проектах.

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

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

Ошибки в рисовании изометрии

Вот несколько типичных ошибок в рисовании изометрии.

• Отсутствие внутреннего построения. Это происходит, когда художник берется за детали, прежде чем построить объекты примитивами. Такой подход затрудняет контроль над формой и пропорциями.
• Неправильное построение кривых форм. Кривые в изометрии строить несколько сложнее, чем прямые линии. Нужно учитывать углы между осями и правильно разбивать кривую на сегменты.
• Несоответствие объектов одной изометрической сетке. Все нарисованные объекты должны быть ориентированы одинаково относительно сетки, иначе они будут выглядеть так, как будто находятся в разных плоскостях.
• Разница масштабов. Если объекты на сцене имеют разный масштаб относительно друг друга или относительно реальности, то это может вызвать путаницу у зрителя или создать визуальное искажение, неприятное для глаз.
• Разный уровень детализации. Если некоторые объекты на сцене очень детальные, а другие — очень абстрактные, то это может создать дисбаланс и нарушить единство стиля.
• Неправильное освещение и тени. Они должны соответствовать направлению света и форме объектов, а также учитывать окружающую среду. 
• Излишняя перегруженность или пустота сцены. Слишком много деталей или, наоборот, слишком малое количество интересных элементов могут сделать картинку неприятной для глаз или сложной для восприятия. Нужно найти баланс между заполненностью и пустотой пространства.
• Нарушение цветового контраста и гармонии. Цвета должны быть подобраны таким образом, чтобы создавать приятный эффект для глаза и подчеркивать нужные акценты. Цветовая гамма также должна соответствовать настроению и атмосфере сцены.
• Недостаточная глубина или неправильная перспектива. Изометрия не имеет перспективных искажений, но это не значит, что все объекты должны быть одинаково четкими и резкими. Можно использовать размытие фона, изменение цвета или контраста для создания эффекта глубины поля или перспективы.

Для того, чтобы избежать ошибок в рисовании изометрии, можно следовать следующим советам:

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