Изометрия в иллюстрировании: наглядные композиции и технические решения
Что такое изометрия
Изометрическая проекция (с греч. ἴσος равный + μετρέω измеряю) – это разновидность аксонометрической проекции, при которой в отображении объемного трехмерного объекта на плоскость коэффициент искажения (отношение длины спроецированного на плоскость отрезка, параллельного координатной оси, к действительной длине отрезка) по всем трем осям один и тот же.
Простыми словами, это частный случай объемной визуализации объекта на плоскости по заданным геометрическим параметрам.
Определяющая характеристика слова изометрическая в описании проекции в греческом языке, в сущности, означает равный размер: в этой проекции масштабы по всем осям – OX, OY, OZ – равны. В других видах проекций это условие не действует.
Рисунок 3.1 – Схема представления осей OX, OY, OZ в изометрической прямоугольной проекции
Наряду с прямоугольной изометрической проекцией также применяются косоугольная фронтальная и косоугольная горизонтальная проекции (см. на рис. 3.2).
В эволюции визуальных решений для рекламы и интерфейсов изометрический стиль (isometric) дизайна иллюстраций пришел на смену привычным решениям flat design и 3D.
Рисунок 3.2 – Косоугольная фронтальная и косоугольная горизонтальная проекции (слева направо)
Изометрический дизайн – это псевдообъемный стиль визуального изложения композиции физических объектов (в развернутой изометрической проекции), предлагающий иллюстративный ряд, аналогичный трехмерному воспроизведению, но с фиксированной или движущейся по направляющим объектам композицией (на переднем или заднем плане).
Рисунок 3.3 – Рекламная иллюстрация в правильной изометрической проекции для представления ремонтного транспортного шипа в разрезе.
Выполнена техническим дизайнером по чертежу от производителя в псевдообъемном разрезе в графическом редакторе Adobe Photoshop.
На визуализацию этой иллюстрации затрачено всего 8 часов с учетом корректировок заказчика
С точки зрения коммерческой ценности изометрическая иллюстрация позволяет визуализировать технические характеристики объекта (товара) в применении к реальности.
Рисунок 3.4 – Примеры изометрических проекций объектов в реалистичной визуализации на плоскости
Визуальное сравнение стилей: flat design, 3D и isometric design
Рассмотрим основные стили визуализации иллюстраций и пиктограмм для дизайна актуального на 2021 г. веб-интерфейса.
Рисунок 3.5 – Параллельное сравнение иллюстраций в стилях flat design, realistic 3D и isometric design (слева направо)
По смыслу плоский дизайн удобен для восприятия при малом и среднем масштабе в качестве элементов веб- и мобильного интерфейса (адаптивного дизайна) в виде масштабируемой векторной графики (SVG) для нажатий на функциональные элементы.
Сравнение реалистичного 3D-изображения и его изометрической аналогии с технической точки зрения позволяет сделать такие выводы. 3D дает лучшее качество воспроизведения материала (в объекте) – изометрия дает упрощенную псевдообъемную проекцию объекта по заданному формату (аналогично 3D выставлен источник света и освещение объекта, тень на плоскости от объекта). Технически воспроизведение в изометрии проще для реализации (для графических дизайнеров, не обладающих опытом работы с 3D), поэтому выбор способа реализации объемных объектов зависит от навыков дизайнера и требований ТЗ.
Воспроизведение фотореалистичной модели в точности 1:1 с первоисточником по фотографии (от заказчика) значительно сложнее, поэтому обычно используется только 3D-визуализация по чертежу с учетом материалов объекта и плоскостей фона, метрических размеров объекта в соотношении с другими объектами в композиции.
Рисунок 3.6 – 3D-визуализация ремонтного шипа компании «РемШип» в разрезе шины Michelin X Ice. Источник: https://inmotus-design.ru/portfolio/info/3d-spike-in-tire-michelin-x-ice.
Идея иллюстрации: с точностью до 1 мм выполнить – по аналогии с рекламой Nokian – визуализацию для ремонтных шипов российского производства.
Иллюстрация выполнена в редакторе 3D Max
Всего затрачено около 40 часов рабочего времени с учетом корректировок. Это достаточно много (примерно 1 неделя в зависимости от штатного расписания технического дизайнера). Пример характеризует 3D как трудоемкую технологию с высокой точностью воспроизведения и сложностью в реализации.
Начинающим дизайнерам лучше начинать с изометрических иллюстраций, чтобы научиться работать с источником света, тенями и отблесками от объекта в зависимости от композиции, свойств материалов (глянцевых и матовых поверхностей), типов теней и т. д.
Качество визуализации изометрической проекции объекта на рис. 3.7 достаточное для применения в рекламной продукции, где нет жестких привязок к размерам (как в примере шипы в шине определенной марки и радиуса).
Рисунок 3.7 – Аналогичный 3D-пример изометрических проекций ремонтных шипов на плоскости (без жестких требований с точностью до 1 мм).
Иллюстрации ремонтных шипов для ошиповки шин выполнены техническим дизайнером по чертежам заказчика в графическом редакторе Adobe Photoshop с учетом соблюдения пропорций шипов в разрезе.
Источник: https://inmotus-design.ru/portfolio/info/oshipovka-shipy
Как обосновать выбор технологии воспроизведения изометрической иллюстрации заказчику?
Есть основные критерии для выбора технологии воспроизведения изометрии в коммерческой иллюстрации.
1. Следовать требованиям ТЗ.
• Например, если указана точность 1:1 до мм, это, вероятнее всего, требует 3D-визуализации по чертежу заказчика – со всеми размерами деталей и типами материалов на поверхности объекта в изометрической иллюстрации. Время на реализацию — ориентировочно от 4 до 40 часов, в зависимости от квалификации технического дизайнера и сложности композиции.
• Если требуется более-менее реалистичная иллюстрация объекта в изометрии, желательно иметь фото объекта в заданной проекции и сделать технический дизайн в Adobe PhotoShop. Ориентировочно от 2 до 10 часов, в зависимости от квалификации технического дизайнера и т. д.
• Если требуется стилизованная изометрическая иллюстрация (в короткие сроки) для полиграфии (при наличии чертежа и фото объекта), этого достаточно для воспроизведения изометрической проекции на плоскости для полиграфической печати на любом размере. Ориентировочно от 2 до 10 часов на реализацию в зависимости от квалификации технического дизайнера и т. д.
2. Сопоставить бюджет, сроки и требования на выполнение задачи (если все три блока полностью указаны в ТЗ).
Рисунок 3.8 – Реалистичная визуализация векторных объектов в малом масштабе для меню каталога ювелирной продукции (в веб-сайте)
Рисунок 3.9 – Пример комплексной векторной иллюстрации в изометрической проекции (серверного решения как цифровой услуги Облачного хранилища).
Автор: @upklyak (Freepik.com).
Источник: https://www.freepik.com/author/upklyak
Чтобы обосновать выбор именно этой технологии, следует сопоставить трудоемкость в часах и стоимость часа работы технического дизайнера.
Опытный дизайнер должен аналитически выбирать инструментарий для решения задачи в зависимости от условий ТЗ. Правильный выбор сократит время на техническую реализацию.
В довершение описания технологий реализации изометрической проекции укажем, что даже в векторном графическом редакторе возможно выполнить реалистические изображения объектов, особенно если это необходимо для малого масштаба воспроизведения на экране в меню выбора.
Предпосылки для использования изометрического дизайна в иллюстрировании цифровых продуктов
Целесообразно использовать изометрический стиль в следующих ситуациях.
1. Нужно представить центральный и сопутствующие объекты во взаимодействии – с целью описания события или явления.
2. Визуальное преимущество по сравнению с аналогичными веб-сайтами или рекламой компаний-конкурентов, использующих в практике неинтересный, плоский дизайн (flat design).
3. Формат целевой страницы landing page позволяет использовать зеркальную верстку (с чередованием 50/50 текста и иллюстраций слева и справа) для представления товаров и услуг, сопутствующих условий использования и преимуществ.
4. Основной объект визуализации имеет несложную форму для технического изометрического представления (оптимальное решение для баланса затраченного времени и результата).
Возможно ли совмещать плоский и изометрический дизайн в коммерческой иллюстрации?
Да, возможно – если это не противоречит фирменному стилю компании. Например, для компании «Учетный Специалист» технический дизайнер выполнил заставку для цифрового продукта 1С «СОУ» с параллельным совмещением плоского и изометрического дизайна – в целом визуально привлекательную рекламную иллюстрацию цифрового продукта.
Рисунок 3.10 – Параллельное горизонтальное совмещение плоского дизайна надписи СОУ и изометрической проекции в иллюстрации для заставки цифрового продукта 1С «СОУ: Материальное обеспечение крупных строительных проектов» для компании «Учетный Специалист»
Особенности изометрического дизайна с технической точки зрения
С точки зрения точности технического воспроизведения композиции в изометрии графическому дизайнеру необходимо иметь следующие навыки.
1. Художественная композиция объектов в перспективе с учетом светотеней и их соразмерности на плоскости под углом зрения от лица пользователя. Этот навык позволяет дизайнеру сделать черновой технический эскиз для согласования с Заказчиком на этапе подготовки иллюстрации.
2. Проектирование композиции векторных фигур объектов для визуализации художественного черновика. Выбор между 2D (в векторном графическом редакторе) или 3D (в 3D Max или аналогичном софте) зависит от навыков дизайнера и требований ТЗ. Построить изометрическую проекцию объектов в псевдо 3D-пространстве X, Y, Z возможно в любом графическом редакторе на плоском или объемном макете по заданным размерам и направляющим.
3. Цветоделение и визуальное выделение центрального объекта иллюстрации с помощью градиентов позволяют отразить формы и направление освещения от заданного дизайнером источника света для отображения псевдообъема фигур, теней и отражений от плоскости.
Цветоделение в иллюстрации
Детализируем термин цветоделение в контексте корректного применения RGB, CMYK или HEX-палитры для полноцветной иллюстрации. Такое решение корректно, если ТЗ не требует жесткого соответствия фирменным цветам палитры бренда (по правилам, изложенным в брендбуке).
Многие дизайнеры применяют рекомендованные экспертами палитры Flat UI Colors [1], доступные в режиме онлайн по адресу: https://flatuicolors.com.
Рисунок 3.11 – Скриншот цветовой палитры Flat UI Colors для выбора безопасных цветов
Речь идет о выборе палитры безопасных цветов для веб-интерфейса цифрового продукта. Условное деление палитр Flat UI Colors по национальному признаку (по цветовым предпочтениям пользователей):
• Flat UI Palette v1;
• American Palette;
• Aussie Palette;
• British Palette;
• Canadian Palette;
• Chinese Palette;
• Dutch Palette; • French Palette;
• German Palette;
• Indian Palette;
• Russian Palette;
• Spanish Palette;
• Swedish Palette;
• Turkish Palette.
Цветоделение по национальному признаку условно и может быть использовано графическим дизайнером по желанию или по требованию.
Желательно выбирать 3–4 цвета: из них 1 или 2 тона одного основного цвета (светлый и темный тон), один цвет на контраст (возможно в светлом и темном тонах) и нейтральный цвет – для визуализации фигур и контуров объектов.
Цвета основного объекта и цвет на контраст следует выбирать (на инвертировании) в палитре по всем правилам колористики и цветовой гаммы.
Рисунок 3.12 – Фирменные цвета для логотипа компании Platinum Data Recovery
Цветовой круг Иттена
При выборе дополнительного цвета рекомендуется ориентироваться на противоположные цвета в круге Иттена – это подбор контрастирующего цвета. Так, красный сочетается с зеленым, желтый – с фиолетовым, синий – с оранжевым и т. д. Если эти цвета находятся рядом, они усиливают эффект друг друга, а при смешивании – гасят. Они расположены на противоположных сторонах цветового круга и составляют прямоугольник или квадрат. При подборе родственного цвета (последовательная схема, или принцип аналогии) берут три цвета, расположенных в соседних секторах.
Рисунок 3.13 – Рулетка цветового круга Иттена для выбора сочетаний цветов в дизайне (интерьера, одежды и т. д.).
Применяется, когда у дизайнера есть возможность самостоятельно подобрать сочетания цветов и согласовать выбор с заказчиком
Аналогично вееру цветов палитры Pantone на практике применяется круг Иттена в виде рулетки выбора палитры (рис. 3.13). Во многих художественных фильмах цветопередача в кадре выстроена именно по цветовому кругу Иттена для соблюдения нормы (т. е. цветовой гармонии в кадре) – в качестве палитры визуального ряда, согласно заданному в сцене настроению.
Рисунок 3.14 – Примеры палитры кадров художественных фильмов в цветовой гармонии, заданной по кругу Иттена
Основные цветовые схемы по методу Иттена
Для понимания цветовой гармонии в палитре рекламной иллюстрации рассмотрим основные цветовые схемы по методу Иттена.
• Комплементарные, или дополнительные цвета
По теории Иттена, комплементарными, или дополнительными, являются любые два цвета, расположенные напротив друг друга на цветовом круге.
Например, синий и оранжевый, красный и зеленый. Эти цвета создают высокий контраст в палитре визуальной композиции. Используются, когда надо что-то выделить в рекламной иллюстрации. Желательно использовать один цвет как фон, а другой – в качестве визуального акцента (приоритета).
• Классическая триада
Классическая триада – это четкое сочетание трех цветов, в равной степени расположенных друг от друга на цветовом круге Иттена.
Например, красный, желтый и синий. Триадная схема также обладает высокой контрастностью, но более сбалансированной, чем дополнительные цвета. Принцип в том, что один цвет доминирует и акцентирует с двумя другими. Такая композиция выглядит живой даже при использовании бледных и ненасыщенных цветов.
• Аналоговая триада
Аналоговая триада – это сочетание минимум двух и максимум пяти (желательно от двух до трех) цветов, находящихся рядом друг с другом на цветовом круге. Например, сочетания приглушенных цветов: желто-оранжевый и желтый, желто-зеленый – зеленый, сине-зеленый.
• Контрастная триада (сплит-дополнительные цвета)
Использование сплит-дополнительных цветов дает высокую степень контрастности, но они не настолько насыщенные, как дополнительный цвет. Сплит-дополнительные цвета дают большую гармонию, чем использование прямого дополнительного цвета.
• Тетрада – сочетание четырех цветов
Схема из четырех цветов включает один основной и два дополняющих цвета палитры, а также дополнительный цвет для создания визуального акцента, иначе говоря, приоритета внимания в композиции.
Пример тетрады: сине-зеленый, сине-фиолетовый, оранжево-красный, оранжево-желтый. Это наиболее сложная схема, разнообразнее, чем какая-либо другая. Но если все четыре цвета используются в равных количествах, схема может выглядеть несбалансированной, поэтому нужно выбрать один цвет доминирующим. Надо избегать использования чистого цвета в равных количествах.
• Квадрат
Включает сочетание четырех цветов, равноудаленных друг от друга на цветовом круге Иттена. Выбранные цвета отличаются по тональности, но при этом дополняют друг друга в палитре композиции.
Пример квадрата Иттена: фиолетовый, оранжево-красный, желтый, сине-зеленый.
• Теплые и холодные цвета
В цветовом круге Иттена есть еще одно смысловое разделение цветов – на теплые и холодные.
У каждого цвета своя возможность передать эмоции. Теплые тона – энергия и радость, холодные – спокойствие и мир. Разделение на цветовом круге дает представление о том, какие цвета теплые, а какие холодные.
Как использовать круг Иттена в графическом дизайнеВ первую очередь, нужен цветовой круг Иттена.
Согласно намеченной композиции, выделяем количество планов (передний и задний и, возможно, дополнительные планы в рекламной иллюстрации). Задаем им номера – от переднего плана до заднего. Получим от двух до пяти слоев композиции, включая основной объект иллюстрации.
Затем, в зависимости от количества, выстраиваем палитру по одной из основных схем по методу Иттена. Схематично это показано на рис. 3.15.
Рисунок 3.15 – Выбор триады и квадрата для палитры на цветовом круге Иттена
Генерация градиента для каскадных таблиц стилей CSS
В качестве полезного дополнения для веб-разработчиков, использующих технологический стек HTML+CSS+SVG, для изометрического дизайна рекомендуется использовать автогенераторы кода CSS для выгрузки стилей линейного и радиального градиентов.
Рисунок 3.16 – Скриншот Ultimate CSS Gradient Generator.
Источник: https://www.colorzilla.com/gradient-editor/
Выгрузка кода в виде стандартной нотации стилей CSS позволяет оперативно решать задачи наполнения стилей методом Copy/Paste.
Пример кода CSS для линейного вертикального градиентаПрименяется для оформления объектов и фона в HTML-страницах.
background: #23b239; /* Old browsers */
background: -moz-linear-gradient(top, #23b239 0%, #4adb29 50%, #81ef91 100%); /* FF3.6-15 */
b
ackground: -webkit-linear-gradient(top, #23b239 0%, #4adb29 50%, #81ef91 100%);
/* Chrome10-25, Safari5.1-6 */
background: linear-gradient(to bottom, #23b239 0%, #4adb29 50%, #81ef91 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#23b239', endColorstr='#81ef91', GradientType=0); /* IE6-9 */
Этот полезный и удобный веб-инструмент позволяет сэкономить графическому дизайнеру и фронтенд-разработчику время на рутинный процесс задания стилей CSS для визуального оформления иллюстраций, в том числе в изометрической проекции.
Технический дизайн изометрической проекции для рекламной иллюстрации
Для исполнения технического дизайна (вне зависимости от выбранного графического редактора) воспроизводится следующая схема подготовки и последующей отрисовки объектов в прямоугольной изометрической проекции (см. рис. 3.17).
1. Подготовьте в черновике примерную визуальную композицию с учетом прямоугольной проекции основного (центрального) объекта, дополнительных объектов, возможных элементов связи между ними.
2. Определите количество рядов модульной сетки для визуализации композиции.
Если вам трудно моделировать объекты в композиции и посчитать количество рядов, можете использовать шахматную доску, развернув к себе под углом 45 градусов (углом к зрителю) и разместив на нее похожие объекты. Это позволит смоделировать композицию и рассчитать количество рядов.
3. Выделите количество планов (передний и задний и, возможно, дополнительные планы). Задайте им порядковые номера от переднего плана до заднего. Получим от двух до пяти слоев композиции, включая основной объект иллюстрации.
4. Затем – в зависимости от количества слоев (объектов и связей в композиции) – выберите сочетания цветов для палитры по одной из основных схем по методу Иттена. Разместите их коды в палитре графического редактора, используя RGB-палитру и задание шестнадцатеричных (HEX) кодов выбранных цветов.
5. Смоделируйте модульную сетку с заданным количеством рядов в прямоугольном виде.
• Если планируется квадратная иллюстрация, то количество строк равно количеству столбцов.
• Если иллюстрация прямоугольная продольная – количество строк не равно количеству столбцов.
В примере рассматривается квадратная модульная сетка.
6. Подготовьте вспомогательные оси на макете с точкой пересечения чуть выше центра дизайн-макета, чтобы основной элемент попадал в центр (если это необходимо по черновику композиции).
Точка пересечения OX, OY, OZ создает визуальную линию горизонта при выставлении горизонтальной или диагональной вспомогательной направляющей.
7. Разместите вспомогательную модульную сетку (как показано на рис. 3.17 в состоянии B на формате дизайн-макета) для удобства отрисовки изометрической проекции.
8. Для отрисовки объектов используйте деления модульной сетки как размерные единицы для ширины и длины объектов в заданной проекции.
9. При задании цветов важно учитывать условное положение источника освещения (на схеме C в рис. 3.17 источник расположен где-то слева на уровне 11–13 деления по оси OX и по высоте – на уровне 4-го деления по OZ).
Логично располагать более светлые тона ближе к условному источнику освещения и темные – в противоположной от него стороне в заданной изометрической проекции.
10. После завершения отрисовки удалите или скройте вспомогательные слои модульной сетки и осей OX, OY, OZ перед экспортом результирующего изображения иллюстрации.
Рисунок 3.17 – Подготовка дизайн-макета для отрисовки объектов в прямоугольной изометрической проекции с учетом переднего и заднего планов
Использование форматов для экспорта, хранения и воспроизведения иллюстрации изометрического дизайна
Выбор результирующего формата экспорта иллюстрации зависит от источника применения. Рассмотрим основные форматы применительно к экспорту, хранению и воспроизведению рекламных иллюстраций.
1. Для полиграфии используются форматы PDF, CDR, AI, TIF, EPS. Редко BMP.
2. Для веб-ресурсов: WebP, SVG, PNG, JPG. Редко GIF.
Каждый графический формат из представленных выше имеет собственные технические характеристики, включая особенности использования: хранение, воспроизведение, цветопередача и т. п.
Есть техническая тонкость в визуализации изометрических изображений: диагональное размещение объектов на плоскости относительно зрителя создает на границе фигур объектов и фона так называемую елочку из пикселей, которая при сжатии и рендеринге в меньший размер может визуально размывать границы объектов (в случае использования растровых форматов JPG, PNG и GIF).
Рассмотрим базовые характеристики графических форматов для работы с растровыми и векторными иллюстрациями, включая изометрические изображения.
Заключение
В ходе лекции студенты смогли ознакомиться с базовой терминологией применительно к изометрическому дизайну иллюстрации, методу построения цветовой палитры (по кругу Иттена), освоить воспроизведение изометрической композиции и получить представление о форматах экспорта, хранения и воспроизведения иллюстраций с изометрической проекцией.
Полученные навыки будут полезны в работе по техническому дизайну с воспроизведением иллюстрацией с правильной и косоугольной изометрией. Эти навыки являются базовыми для графического и технического дизайнера.
В ходе следующего практикума студентам среди прочего предлагается самостоятельно поэкспериментировать с экспортом одного и того же изображения с изометрической проекцией в данные графические форматы, чтобы получить опыт по визуальному анализу качества выпускных (результирующих) файлов иллюстрации, их весу и т. д.
Рекомендуемая литература
1. Иттен Иоханнес. Искусство формы. Мой форкурс в Баухаузе и других школах. – Издатель Дмитрий Аронов, 2014.
2. Гордон Ю. О языке композиции. – Студия Артемия Лебедева, 2018.
3. Устин Виталий. Композиция в дизайне. Методические основы композиционно- художественного формообразования в дизайнерском творчестве. – АСТ, 2006.
4. Элам Кимберли. Геометрия дизайна. Пропорции и композиция. – Питер, 2011.
Лекция № 4