Рисуем ноутбук в изометрии с нуля

(Дипломная работа, сделанная под руководством MAD RABBIT)

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

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

Основным объектом во многих изометрических иллюстрациях, является ноутбук.

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

Азы

Для построения объектов в изометрии используется метод SSR, как один из самых удобных.

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

Итак, в чем суть метода SSR?

Все очень просто:

Мы рисуем объект в анфас;
С помощью инструмента "Масштаб" задаем строго следующие значения (по горизонтали: 100%; по вертикали: 86,062%);
С помощью инструментов "Наклон", а затем " Вращение", переводим объект в нужную плоскость.

В этой шпаргалке указаны нужные значения наклона и вращения для каждого положения объекта:

Построение в развертке

Основные элементы

На этом этапе объект рисуется в развертке (как будто девайс сложили об колено в другую сторону).

Начинаем мы с пропорций объекта, при этом следим за соотношением сторон, чтобы не получился ноутбук - фрик.

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

Клавиатура

Рисуем первую кнопку клавиатуры:

Теперь нам нужно расположить кнопки в ряд на одном расстоянии относительно друг друга.

Для этого:

Зажимаем комбинацию Ctrl/Cmd+K и в окошке "Перемещение курсора" выставляем такое значение px, при котором следующая клавиша будет находится на оптимальном расстоянии относительно предыдущей;

Теперь кликаем на нашу нарисованную кнопку и с зажатым Alt ом нажимаем на клавишу ➡

Таким образом у нас появилась еще одна кнопочка, соответствено на каждый клик ➡ у нас появляется новая кнопка на заданном расстоянии.

Равняем ряд кнопок по центру через инструмент "Выравнивание":

Рисуем кнопку второго ряда клавиатуры и с помощью квадратов-близнецов размещаем ее на одном расстоянии относительно первого ряда:

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

Вот что получится:

Так дорисовываем клавиатуру до конца.

Остальные детали

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

Работа в изометрии

Перевод в изометрию

Вооружившись методом SSR, переводим в изометрию монитор и нижнюю часть ноутбука по отдельности.

Сперва монитор:

Важный нюанс.

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

Например у меня это такие значения:

Теперь переводим нижнюю часть ноутбука (не забывая про скругления углов):

Соединяем все составные части ноутбука и сталкиваемся с нюансом номер два.

При построении в развертке, все наши объекты располагались строго по центру, но при переводе в изометрию замечаем, что некоторые объекты будто сдвинуты в сторону.

В этом виноваты не ошибки программы, а устройство нашего мозга и для исправления этого момента, нужно сдвинуть эти элементы немного правее (например соединитель).