Как освоить новое измерение: туториал по созданию изометрических иллюстраций

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

Создание изометрических иллюстраций может быть сложным и трудоемким процессом. Однако я несколько лет занимался созданием векторных изометрических иллюстраций для клиентов и обнаружил более быстрый способ их создания. В этом уроке по созданию изометрических иллюстраций для UI-дизайнеров я объясняю, как использовать эффект «3D-вращение (классика)» в Adobe Illustrator для создания изометрических объектов за шесть простых шагов.

Как создать изометрическую иллюстрацию в Adobe Illustrator

Adobe Illustrator предлагает два рабочих процесса для работы с 3D: современные инструменты «3D» и панель «Материалы», которые поддерживают расширенный рендеринг, освещение и материалы Adobe Substance, а также эффект «3D (классика)». Если вам не нужны дополнительные возможности управления освещением и материалами, предоставляемые современными инструментами 3D и «Материалы», традиционные 3D-эффекты Illustrator – это простой и быстрый способ создания базовых изображений в векторном стиле. В этом уроке мы воспользуемся эффектом «Вращение (классическое)», чтобы создать простой изометрический рисунок бутылки.

Шаг 1: Нарисуйте бутылку и жидкость

Создайте новый документ в Adobe Illustrator и добавьте в него изображение бутылки. Нарисуйте контур бутылки и жидкости внутри. Разделите бутылку и жидкость пополам. Толщина обводки контура бутылки будет определять толщину стекла.

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

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

Шаг 2: Применение эффекта «Вращение»

Как следует из названия, эффект «Вращение» поворачивает контур по кругу вокруг оси Y (оси вращения) для создания 3D-объекта. В Adobe Illustrator положение оси вращения зафиксировано по вертикали. (Именно поэтому мы обвели контур бутылки и разделили ее пополам.)

Совет: не используйте градиенты в качестве цвета заливки ни для контура бутылки, ни для объекта «жидкость». У вас будет возможность добавить градиенты, блики и другие визуальные эффекты в конце урока.

Чтобы найти эффект «Вращение», перейдите в меню «Эффекты» > «3D и материалы» > «3D (классические)» > «Вращение (классика)». В верхней части диалогового окна вы увидите поле с надписью «Положение». Выберите «Изометрический левый». В разделе «Вращение» настройте следующие параметры вращения и затенения поверхности:

• Угол: определяет степень поворота вокруг оси объекта. При значении 180° бутылка будет разделена пополам по вертикали. Установите угол равным 360°, чтобы создать целую бутылку.
• Смещение: регулирует расстояние смещения от вертикальной оси объекта. Введите 0.
• Поверхность: задает свойства материала и освещения объекта. Выберите «Без затенения».

Вы создали изометрическую бутылку с жидкостью. Теперь пришло время добавить этикетку.

Совет: у вас может возникнуть желание применить эффект «Расширить внешний вид» на этом этапе, но не делайте этого, пока мы не создадим этикетку.

Шаг 3: Подготовка этикетки для бутылки

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

Когда вы останетесь довольны дизайном этикеток, преобразуйте обе этикетки в символы. Панель «Символы» находится в меню «Окно» > «Символы». Перетащите каждый дизайн этикетки по отдельности на панель, чтобы создать символы.

Совет: символы в Adobe Illustrator – это многократно используемые мастер-ресурсы, аналогичные компонентам Figma.

Шаг 4: Наложение этикетки на бутылку

Пока бутылка не была преобразована в вектор с помощью эффекта «Развернуть внешний вид», она полностью доступна для редактирования. Выберите бутылку, а затем перейдите в меню «Окно» > «Внешний вид» > «3D-вращение».

Чтобы наложить дизайн этикетки на бутылку, нажмите на опцию «Наложить графику» в левом нижнем углу панели «3D-вращение». Это позволит вам выбрать и настроить изображение. Убедитесь, что изображение привязано к правильной поверхности. Нажмите «Масштабировать по размеру», и этикетка будет наложена на бутылку.

Выполните те же шаги для этикетки на горлышке.

Шаг 5: Обработка файла

Теперь пришло время применить к бутылке кривые Безье – они используются в компьютерной графике для создания непрерывных кривых, которые выглядят плавными в любом масштабе. Выберите «Объект» > «Развернуть внешний вид».

Развертывание внешнего вида объекта создает сгруппированный набор мелких элементов, которые создают иллюзию трехмерного объекта. Объедините эти элементы с помощью инструментов «Pathfinder» или «Shape Builder», чтобы сохранить порядок.

Объединение объектов приведет к появлению ненужных опорных точек. Уменьшите их количество, выбрав «Объект» > «Контур» > «Упростить». (Для более тщательной очистки можно попробовать кисть «Smart Remove Brush» от VectorScribe; однако для работы с этим плагином требуется платная подписка.)

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

Шаг 6: Доработайте иллюстрацию с помощью цветов и градиентов

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

Примеры изометрических иллюстраций в дизайне пользовательского интерфейса

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

Брошюра для цифровой конференции

Штефан Ковач – дизайнер шаблонов для платформы Adobe Stock. В данном примере представлен шаблон брошюры для цифровой конференции, который он создал с помощью простых линий, фигур, текстовых рамок и монохромных градиентов. Для создания этих рисунков Штефан использовал эффекты InDesign «Поворот +/- 30°» и «Наклон +/- 30°», чтобы добиться изометрического искажения.

Путеводитель по цифровому офису

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

Кампания для Asyad Group

В честь 50-летия Национального дня Омана Вафа Бабасаил получила заказ на создание уникальной кампании для Asyad Group, логистической компании на Ближнем Востоке. Вафа использовала приемы изометрической иллюстрации и преувеличенные масштабные соотношения, чтобы создать карту, демонстрирующую широкое влияние компании на морские порты Омана.

Оживите свои проекты пользовательского интерфейса с помощью изометрических иллюстраций

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

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