Создание иллюстрации для стартового экрана приложения

Попробовал записать впервые на видео процесс отрисовки скетча. Заодно это первый опыт иллюстрации в изометрии.

Изометрические иллюстрации эффектны сами по себе, объемные фигуры в них притягивают внимание. Не зря в 2017-2018 изометрия стала массовым трендом в иллюстрациях для веба, интерфейсов. Хотя это и похоже на 3D, тут не учитывается перспектива, поэтому стиль по-своему уникальный.

Обилие изометрии на Dribbble

О процессе

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

Изометрическая сетка на видео всего лишь вспомогательная. Ее я использовал для отрисовки базовых фигур на скетче.

Сетка в Иллюстраторе строится на дублированных линиях под углом 30°. Далее они преобразуются в направляющие в View →  Guides  → Make Guides

В дальнейшем процесс шел с использованием метода SSR (Scale Skew Rotate). Он позволяет быстро переводить сразу группы объектов в нужную проекцию. Об этом методе написано много статей с разбором примеров, поэтому покажу только краткую суть.

Плагины

Рисование по сетке, метод SSR вручную все равно утомительны, поэтому я подыскал несколько бесплатных дополнений, которые использовал для ускорения работы в Иллюстраторе:

  • Экшены для изометрии Awesometric от Хейдена Эйбы. Основаны на методе SSR, большим плюсом является то, что в сет входят экшены для возврата объектов обратно во фронтальный вид, если нужно допилить объект.
  • Плагин IsoTool от Рика Джонсона. С помощью него можно перемещать объекты или выделенные точки по изометрическим осям.