Векторная графика для начинающих: теория и практика технического дизайна — страница 13 из 31

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

Задача

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

• горизонтальная полоса – [1200 × 800] px;

• вертикальная полоса – [640 × 1200] px;

• цветовая схема Иттена для палитры дизайн-макета;

• рекламный заголовок: Ремонтные шипы от российского производителя;

• формат представления заголовка см. ниже.

Сопутствующие материалы

• Изометрическая прямоугольная проекция (оси для подстановки в дизайн-макет).

Рисунок 13.1 – Схема представления осей OX, OY, OZ в изометрической прямоугольной проекции

• Схемы размещения рекламного заголовка и объекта в дизайн-макете.

Вариант А. Параллельное (горизонтальное) размещение заголовка и объекта иллюстрации

Вариант B. Параллельное (вертикальное) размещение заголовка и объекта иллюстрации

• Схема воспроизведения изометрической проекции.

Рисунок 13.2 – Изометрическая проекция для иллюстрации

Объект для технического дизайна – это типовое комплектующее для транспортного средства (ремонтный шип) в размере.

Рисунок 13.3 – Транспортный ремонтный шип в разрезе

Путь решения

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

2. Определите количество рядов модульной сетки для визуализации композиции.

Если вам трудно моделировать объекты в композиции и посчитать количество рядов, можете использовать шахматную доску, развернув к себе под углом 45 градусов (углом к зрителю) и разместив на нее похожие объекты. Это позволит смоделировать композицию и рассчитать количество рядов.

3. Согласно намеченной композиции, выделите количество планов (передний и задний и, возможно, дополнительные планы в рекламной иллюстрации). Задайте им порядковые номера – от переднего плана до заднего. Так получим от двух до пяти слоев композиции, включая основной объект иллюстрации.

4. Затем, в зависимости от количества слоев (объектов и связей в композиции), выберите сочетания цветов для палитры по одной из основных схем по методу Иттена. Разместите их коды в палитре графического редактора, используя RGB-палитру и задание шестнадцатеричных (HEX) кодов выбранных цветов.

5. Смоделируйте модульную сетку с заданным количеством рядов в прямоугольном виде.

• Если планируется квадратная иллюстрация, то количество строк равно количеству столбцов.

• Если иллюстрация прямоугольная продольная – количество строк не равно количеству столбцов.

6. Подготовьте вспомогательные оси на макете с точкой пересечения чуть выше центра дизайн-макета, чтобы основной элемент попадал в центр композиции (если это необходимо по черновику композиции). Точка пересечения OX, OY, OZ создает визуальную линию горизонта при выставлении горизонтальной или диагональной вспомогательной направляющей.

7. Разместите вспомогательную модульную сетку (как показано на рис. 13.2 в состоянии B на формате дизайн-макета) для удобства отрисовки изометрической проекции.

8. Для отрисовки объектов используйте деления модульной сетки как размерные единицы для ширины и длины объектов в заданной проекции.

9. При задании цветов важно учитывать условное положение источника освещения (на схеме C в рис. 13.2 источник расположен где-то слева на уровне 11–13-го деления по оси OX и по высоте на уровне 4-го деления по OZ).

Логично располагать более светлые тона ближе к условному источнику освещения и темные – в противоположной от него стороне в заданной изометрической проекции.

10. После завершения отрисовки удалите или скройте вспомогательные слои модульной сетки и осей OX, OY, OZ перед экспортом результирующего изображения иллюстрации.

11. Экспортируйте файлы в форматы PDF, PNG, JPG, SVG со следующими названиями и проверьте баланс качества и размера в каждом формате. Сделайте собственные выводы о качестве графики в форматах и балансе качества и размера (веса) файлов.

Результат

Папка с дизайн-макетами с точными наименованиями:

• design-detail-1200x800px.pdf;

• design-detail-640x1200px.pdf;

• design-detail-1200x800px.png;

• design-detail-640x1200px.png;

• design-detail-1200x800px.jpg;

• design-detail-640x1200px.jpg;

• design-detail-1200x800px.svg;

• design-detail-640x1200px.svg.

Оценка качества исполнения практикума

Базовые критерии оценки качества работы по результатам практикума.

1. Соответствие прямоугольной изометрической проекции в дизайн-макете.

2. Соответствие размеров и отступов в макете.

3. Применение цветовой схемы Иттена.

Допустимое время на исполнение задачи – 1–1,5 часа.

Практикум № 4Дизайн и верстка многоплановой иллюстрации для веб-сайта

Задача

Сделать промо-иллюстрацию с многоплановой композицией.

Инструментарий

Adobe Photoshop, Corel Draw, Note++.

Пример результата

Рисунок 14.1 – Адаптивная иллюстрация в диапазоне от минимума 420 px до 1000 px по ширине

Технологический стек для сборки иллюстрации

• HTML – верстка контейнера и элементов иллюстрации по слоям.

• CSS – стили позиционирования и оформления элементов иллюстрации.

• SVG – уголки (маски) для форматирования иллюстрации, облака + звезды.

• PNG – слоган I love Paris.

Схема верстки иллюстративного блока по слоям

Рисунок 14.2 – Слоеный пирог комплексного иллюстративного блока