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

• Размеры [210 × 148] мм.

• Внутренние отступы от краев дизайн-макета: 15 мм.

• Текст с левым выравниванием.

• Схема дизайн-макета (рис. 18.1).

• Шрифты в кривых.

• Палитра CMYK.

2. Вертикальный дизайн-макет

• Формат 1/3 A4.

• Размеры: [99 × 210] мм.

• Внутренние отступы от краев дизайн-макета: 15 мм.

• Текст с центральным выравниванием.

• Схема дизайн-макета (рис. 18.2).

• Шрифты в кривых.

• Палитра CMYK.

Фирменный стиль

• Фирменные цвета (табл. 18.1).

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

• Слоган компании визуально приоритетно по восприятию: Путешествуйте вместе с Tour Avia.

• Официальная информация о рекламе мелким читаемым размером шрифта (см. пример ниже).

• Шрифт Open Sans.

Пример описания официальной информации о рекламе

Рекламная информация только для граждан Российской Федерации. Соответствует ФЗ «О рекламе» от 13.03.2006 № 38-ФЗ. ООО «Тур Авиа». Подробнее на сайте компании: https://touravia.ru.

Рисунок 18.1 – Горизонтальный дизайн-макет для технического дизайна

Графическая идея:

Показать глиф скидки на туристические поездки в г. Сочи, РФ на фоне видовой характеристики (объекта) курорта.

Глиф скидки:

Рисунок 18.2 – Вертикальный дизайн-макет для технического дизайна

Графическая идея:

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

Глиф безопасности ребенка:

Фирменные цвета

Рисунок 18.3 – Горизонтальный логотип компании Tour Avia для дизайна печатных рекламных носителей

Задача

Использовать трассировку растрового изображения логотипа.

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

• Проверка изображений на антиплагиат: TinEye, источник: https://tineye.com/.

• Горячие клавиши графического редактора Corel Draw.

Результат

Выгрузить дизайн-макеты в формате PDF со следующими названиями:

• вертикальный макет – vertical-design-advert-99x210mm;

• горизонтальный макет – horizontal-design-advert-210x148mm.

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

1. Общее время на выполнение задания 1,5 часа.

2. Соответствие графическим идеям, фирменным цветам и размерам.

3. Проверка на антиплагиат.

Практикум № 9Подготовка иллюстрации для адаптивного дизайна под экраны пользовательских устройств всех форматов

Задача

Выполнить технический дизайн и верстку адаптивной веб-иллюстрации под экраны на следующие ключевые точки по ширине экрана по следующей композиции в соответствии с фирменными цветами бренда.

Ключевые точки по ширине экрана для адаптивного дизайна

Рисунок 19.1 – Адаптивная иллюстрация на экране ПК с шириной 1024 пикс. для пропорции стандартного экрана ПК [1024 × 768] px

Рисунок 19.2 – Адаптивная иллюстрация на экране ПК с шириной 320 пикселей для минимальной пропорции смартфона [320 × 600] px

Решение

1. На подготовительном шаге необходимо выбрать пиктограммы для фонового оформления, фото ребенка для изображения в глифе геоположения.

1.1. Для оформления используем пиктограммы из открытого источника: https://iconfinder.com. Для оформления данной иллюстрации потребуются пиктограммы с визуальными символами геоположения и применения смартфона. Необходимо и достаточно всего 6 пиктограмм.

Зачастую полученные из Интернета источники SVG имеют различное оформление в стилях. Техническому дизайнеру требуется привести их к единообразному виду (по цвету и названиям).

Состояние А

До редактирования пиктограмм

Состояние B

После редактирования пиктограмм

Рисунок 19.3 – Пиктограммы в формате SVG до и после редактирования для использования в веб-разработке

Уточнения к рисунку

1. Для редактирования цветов в формате SVG используйте атрибут fill="#…" в исходном коде пиктограмм. Для всех пиктограмм выставим цвет #000.

Для простоты использования источники пиктограмм необходимо переименовать по маске: "icon-{N}.svg", где N – порядковый номер от 1 и т. д.

Это существенно упростит работу в будущем для управления позиционированием пиктограмм в зависимости от ширины экрана и положения объектов в композиции веб-иллюстрации.

Пример № 1 по изменению цвета в слоях изображения в формате SVG

До редактирования

…
</code></pre></p><p><pre><code><![CDATA[</code></pre></p><p><pre><code>    .fil0 {fill:#323232}</code></pre></p><p><pre><code>   ]]></code></pre></p><p><pre><code>
…

После редактирования

…
</code></pre></p><p><pre><code><![CDATA[</code></pre></p><p><pre><code>    .fil0 {fill:#000}</code></pre></p><p><pre><code>   ]]></code></pre></p><p><pre><code>
…

В примере № 1 подключение оформления задается стилями в блоке

…

через класс .fill0. Соответственно цвет в стиле .fil0 {fill:#323232} для изменения на черный цвет (HEX: #000).

Пример № 2 по изменению цвета в слоях изображения в формате SVG

До редактирования

После редактирования

В примере № 2 подключение оформления задается через атрибут fill="#…" в теге , задающем координаты и цвет векторной фигуры.

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

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

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

Рисунок 19.4 – Поиск изображений в Google Images

Для поиска изображения используем сервис Google Images по запросу «girl school» с настройкой размера изображения: Image size: Large.

Найденное изображение требует обработки в Adobe PhotoShop.

Необходимый формат изображения: PNG, 24 bit, с альфа-каналом (прозрачный фон), размер: [512 × 512] px, позиционирование объекта по центру (как в примере).

Вопрос студентам

Как удалить фон с первоисточника растрового изображения для использования в многослойной композиции веб-иллюстрации?

Ответ: для устранения фона с фотографического изображения есть как минимум два варианта решения задачи.

1. Вручную, используя инструмент кривая Безье в Adobe PhotoShop, с последующим экспортом в формат PNG с альфа-каналом (прозрачностью). Этот вариант удобен для простых геометрических форм без высокой детализации – как в нашем примере, где волосы девушки имеют сложную структуру и требуют значительных усилий при техническом устранении фона в Adobe PhotoShop.

2. Автоматически, используя веб-сервис Remove.bg, выполняющий данную процедуру методом машинного обучения на основе нейронной сети, дающей быстрый и эффективный результат устранения фона с фотоисточника растрового изображения, оставляя только основной объект на картинке.

Состояние A

Состояние B

Рисунок 19.5 – Изображение до и после обработки с использованием веб-сервиса Remove.bg для быстрого устранения фона с фотоисточников

1.3. Подготовка глифа геоположения для веб-иллюстрации.

Рисунок 19.6 – Первый шаг подготовки глифа по скриншоту веб-иллюстрации путем применения кривой Безье и заливки по цветам выбранным инструментом пипетка (colorpicker):

• цвет геометки – #FFF;

• цвет кольца – #00B856;

• цвет тени – #00a345.

Рисунок 19.7 – Второй шаг подготовки глифа. Необходимый размер дизайн-макета глифа: [370 × 512] px

Рисунок 19.8 – Третий шаг подготовки глифа: необходимо убрать контуры слоев векторного изображения.

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

Выгрузка в файл: object.svg

2. Сборка иллюстрации.

2.1. Многослойная композиция иллюстрации реализуется в исходном коде HTML-документа (веб-страницы) с применением стилей CSS.

Воспроизведите представленный код HTML (в новом созданном файле проекта с названием index.html) и код CSS в директории /css/.. с названием banner.css.