Другое измерение, новое мастерство — учебник по изометрической иллюстрации

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

Нужно оживить лендинг? Визуализировать скучные данные? Добавить изюминку в мягкую упаковку? Иллюстрация — это ответ по всем фронтам.

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

В Adobe Illustrator традиционный процесс изометрической иллюстрации утомителен. Создайте изометрическую сетку, нарисуйте квадрат, наклоните его на -30°, поверните на -30° и так далее. К счастью, есть лучший способ. Illustrator имеет 3D-эффекты, которые делают изометрические иллюстрации быстрыми и легкими: «Выдавливание и скос», «Вращение» и «Поворот».

В этом учебном пособии показано, как создавать изометрические иллюстрации с помощью функции «Вращение», но полученные сведения также применимы к остальным 3D-эффектам Illustrator.

Готовы произвести впечатление на клиентов, порадовать пользователей и узнать секреты изометрической иллюстрации?

Revolve & Refine: учебник по изометрической иллюстрации

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

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

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

1.1) Создайте новый документ Adobe Illustrator.

1.2) Добавьте ссылку на бутылку в документ.

1.3) Нарисуйте контур бутылки и жидкости внутри.

1.4) Разделите бутылку и жидкость пополам (как показано ниже).

1.5) Толщина штриха контура бутылки определяет толщину стекла.

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

Шаг № 2: примените эффект вращения

Как следует из названия, «Вращение» поворачивает фигуру вокруг своей оси. В Illustrator положение оси «Вращение» фиксировано по вертикали. Вот почему бутылка была очерчена и разделена пополам.

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

2.1) Чтобы найти эффект «Вращение», перейдите в: Эффект > 3D > Вращение…

2.2) В верхней части диалогового окна есть поле с надписью «Позиция». Выберите «Изометрия слева».

2.3) Угол – это градус вращения вокруг оси объекта. Если установлено значение 180°, результатом будет вертикально разделенная пополам бутылка. Установите угол на 360° для полностью вращающейся бутылки.

2.4) Смещение — управляйте расстоянием смещения от вертикальной оси объекта. Введите «0».

2.5) Поверхность — установите материал объекта и свойства освещения. Выберите «Без затенения».

Та-да! Изометрическая бутылка с жидкостью. Время расслабиться, расслабиться и – ждать! Эта бутылка нуждается в этикетке.

* Совет для профессионалов: не используйте функцию «Расширить внешний вид» на бутылке, пока не будет создана этикетка.

Шаг № 3: Подготовьте этикетку

3.1) Используйте бутылку для определения размеров этикетки.

3.2) На примере изображения (ниже) высота метки тела очевидна, но высота метки шеи не ясна, потому что поверхность не параллельна оси. Приблизительной высоты будет достаточно.

3.3) Длина этикетки рассчитывается по формуле длины окружности 2πr.

3.4) При удовлетворительном дизайне этикетки преобразуйте обе этикетки в символы. Палитра «Символы» находится в разделе: «Окно» > «Символы».

3.5) По отдельности перетащите рисунки этикеток в палитру для создания символов.

*Примечание. Символы в Illustrator и Sketch работают одинаково.

Шаг № 4: нанесите этикетку на бутылку

Пока бутылка не была векторизована с помощью функции «Расширить внешний вид», ее можно полностью редактировать.

4.1) Выберите бутылку и отобразите палитру «Внешний вид»: Окно > Внешний вид

4.2) Затем выберите «3D Revolve», и появится диалоговое окно из предыдущего.

4.3) Чтобы сопоставить дизайн с бутылкой, нажмите кнопку в левом нижнем углу: «Map Art».

4.4) Это позволяет выбрать и настроить символ для бутылки.

4.5) Убедитесь, что символ соответствует правильной поверхности (см. ниже).

4.6) Нажмите «Масштабировать по размеру», и этикетка сопоставляется с бутылкой.

4.7) Выполните те же действия для этикетки на шее.

Шаг № 5: избегайте грязного файла

5.1) Теперь пришло время превратить бутылку в кривые Безье, используя функцию «Расширить оформление»: Объект > Разобрать оформление

Illustrator не предназначен в первую очередь для манипулирования 3D-объектами. Расширение внешнего вида объекта создает сгруппированную коллекцию более мелких элементов, которые создают иллюзию трехмерного объекта.

5.2) Чтобы все было аккуратно, объедините элементы с помощью инструмента «Навигатор» или «Создатель фигур» (см. ниже).

*Совет: при соединении объектов создаются нежелательные опорные точки. Уменьшите их, выбрав Объект > Контур > Упростить. Тем, кто регулярно использует Illustrator, настоятельно рекомендуется плагин VectorScribe и его инструмент для удаления точек.

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

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

Привет изометрическим иллюстрациям!

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

Поделитесь с нами вашими мыслями! Пожалуйста, оставьте свои мысли, комментарии и отзывы ниже.

• • •

Дальнейшее чтение в блоге Toptal Design:

• Визуальный срок годности — почему иллюстрации веб-дизайна устаревают
• Пошаговое руководство по созданию пользовательских иллюстраций без каких-либо навыков рисования
• Новые реальности: VR, AR, MR и будущее дизайна
• The Designer's Edge — обзор плагинов Photoshop
• Эволюция эмодзи: дизайн для нового лица обмена сообщениями