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

3. Визуализация иллюстрации на вертикальной ориентации планшета iPad

4. Визуализация иллюстрации на горизонтальной ориентации планшета iPad

5. Визуализация иллюстрации на iPhone 6, 7, 8 plus

6. Визуализация иллюстрации на Moto G4

Рисунок 19.12 – Адаптивная верстка веб-иллюстрации

Практикум № 10Проектирование визуальных динамических эффектов анимации для рекламной веб-страницы

Задача

Выполнить рекламную анимацию (preloader) для загрузки статьи блога с действием по клику.

Условия задачи

• Анимация поворота (rotate).

• Анимация проявления (fade in).

• Событие по клику: переход к контенту страницы без перезагрузки.

Визуализация результата

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

Инструменты

• Adobe PhotoShop.

• Corel Draw.

• Редактор кода Note++.

• Логотип (из практикума № 7) условной компании Tour Avia.

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

• Горячие клавиши Adobe PhotoShop.

• Горячие клавиши Corel Draw.

• Спецификация CSS, раздел Анимация.

• Сервис оптимизации графики Squoosh.app.

Применение технологий

• Адаптивная верстка HTML.

• Оформление стилей в CSS 3.

• Скрипт JavaScript.

• Растровая графика PNG.

• Векторная графика SVG.

Рис. 20.1. Визуальный ряд анимации

Композиция иллюстрации в слоях верстки

Уточнения к таблице

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

2. Оформление дизайна слоев задается стилями по классам в таблицах CSS: точнее «/css/animation.css».

Решение

Для выполнения анимации необходимо последовательно выполнить следующие логические шаги.

1. Подготовка графических файлов

1.1. Мультиградиент (фон в формате PNG)

Для начала необходимо создать дизайн-макет в Adobe PhotoShop: размер 640 × 640 px.

Выставить направляющие (см. рис. 20.2):

• по OX – по центру;

• по OY – посередине.

Далее добавить по схеме фигуры (эллипсы) на основе инструмента Круг со следующими цветами (см. рис. 20.4) по часовой стрелке:

• 00:00 (HEX: #21bbc4);

• 01:30 (HEX: #b9973e);

• 03:00 (HEX: #ac628e);

• 04:30 (HEX: #c84dab);

• 06:00 (HEX: #e4c518);

• 07:30 (HEX: #fb5257);

• 09:00 (HEX: #d99800);

• 11:00 (HEX: #238ab8).

Рисунок 20.2 – Мультиградиент в формате PNG

Процесс технического дизайна мультиградиента в Adobe PhotoShop

Выделить (в панели Слои) все видимые слои эллипсов. В контекстном меню (вызывается правой кнопкой мыши) выбрать функцию Растрировать слои.

Затем, выделив все растрированные слои эллипсов, необходимо объединить вызовом функции Объединить слои:

• сочетание горячих клавиш Ctrl + E;

• Фильтр > Размытие > Размытие по Гауссу > Настройка > Радиус: 30 > Применить (ОК).

Рисунок 20.3 – Направляющие в дизайн-макете мультиградиента для обозначения центра

Далее дублировать полученный слой (Ctrl + J) и повернуть на 23 градуса путем выбора инструмента Прямоугольник (на панели инструментов), выделения дублированного слоя (в панели Слои), нажатия правой кнопкой мыши на макете на данном слое и выбора Свободное трансформирование.

В верхней панели в ячейке ввода угла поворота необходимо выставить 23 градуса. Затем немного изменим палитру полученного слоя – путем использования функции Цветовой тон/Насыщенность через верхнее меню: Изображение > Коррекция > Цветовой тон/Насыщенность > Настройки.

Выставить следующие настройки:

• Цветовой тон: +15;

• Насыщенность: +5.

Рисунок 20.4 – Добавление эллипсов с цветами по заданной схеме размещения

В панели Слои выставить Непрозрачность – 75% для данного слоя, затем объединить слои там же путем выделения двух слоев и нажатия Ctrl + E.

Далее для полученного слоя сделать Радиальное размытие по Гауссу с настройкой радиуса: [50] px.

Так как полученный слой имеет полупрозрачность по краям, необходимо продублировать его путем выделения слоя в панели Слои и дублировать (Ctrl + J).

Экспортируем полученный градиент из Adobe PhotoShop через верхнюю панель:

• Файл > Экспортировать > Сохранить для Web

или

• быстро используя горячую функцию по сочетанию клавиш Alt + Shift + Ctrl + S, в формат PNG 24 bit без прозрачности.

Полученный градиент – размером 280 Кб. Это можно оптимизировать для быстрой загрузки в веб-странице. Используем веб-сервис Squoosh.app для оптимизации и сохранения в формате WebP с настройками:

• сжатие (efforts): 100%;

• качество (quality): 40%.

Рисунок 20.5 – Растрирование векторных эллипсов (слоев)

При данных настройках получили сжатие на 99%, и на выходе файл multigradient.webp (размер: 3,47 Кб) сохранить в директорию /img/.. данного проекта практикума.

Рисунок 20.6 – Полученный мультиградиент после всех операций редактирования

Рисунок 20.7 – Оптимизация источника PNG в формат WebP с заданными настройками

1.2. Создание маски SVG для формы прелоадера

В графическом редакторе Corel Draw необходимо создать дизайн-макет размером [640 × 640] px. Далее выставить направляющие, образующие на пересечении центральную точку. Это позволит выполнить симметричную композицию маски для прелоадера (см. рис. 20.8).

Рисунок 20.8 – Направляющие в дизайн-макете маски прелоадера для обозначения центра

Рисунок 20.9 – Границы прелоадера внутри дизайн-макета ограничены в блоке [320 × 320] px

С помощью инструмента Прямоугольник выставить квадрат размером [320 × 320] px строго по центру. Далее выставить направляющие горизонтально и вертикально по границам квадрата. Удалить слой фигуры. Останутся только направляющие. Это задает условные границы для композиции маски прелоадера (см. рис. 20.9).

Для формирования структуры элементов маски прелоадера используем сгруппированные по три фигуры кругов с уменьшением диаметра (по приближению к центру макета) и равными отступами между ними (см. рис. 20.10).

Рисунок 20.10 – Формирование элементов маски прелоадера из элементарных фигур (кругов)

Сгруппированные элементы продублируем с поворотом на 45 градусов – как это выполнено на рис. 20.11.

Рисунок 20.11 – Образование прелоадера путем дублирования и поворота сгруппированных элементов

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

Рисунок 20.12 – Рисунок прелоадера

Следующий шаг – выделяем все элементы в панели Слои и переводим фигуры в кривые путем использования горячих клавиш Ctrl + Q.

Таким образом, есть визуально интересная композиция прелоадера. Далее необходимо сделать из нее маску в формате SVG.

Рисунок 20.13 – Объединение слоев прелоадера

Выставим фигуру квадрат, равную размеру дизайн-макета. Важно разместить слой квадрата под наш образованный слой композиции прелоадера. Квадрат необходимо перевести в кривую путем выделения в панели Слои данного объекта и применения горячих клавиш Ctrl + Q.

Рисунок 20.14 – Готовая к экспорту векторная маска рисунка будущего прелоадера для анимации поворота

Экспорт векторной маски для анимации из редактора Corel Draw выполняется путем выбора данной функции в верхнем меню программы: Файл > Экспортировать > Формат: SVG > Точность 1:1000 (тысяча точек на условную единицу).

Название файла экспорта маски: mask.svg.

Сохранение в директорию img в проекте:

«../img/mask.svg».

Ключевой вопрос студентам

Зачем необходимо было выполнить дизайн-макет размером [640 × 640] px, когда условная рамка прелоадера по центру и посередине фиксирована на размере: [320 × 320] px?

Ответ: