Вопрос № 4
Зачем используется darkmode для визуализации списка изображений?
Ответ: функция просмотра в инвертированном (темном) исполнении – посмотреть визуализацию изображений до скачивания с целью моделирования ситуации использования в интерфейсе с темным цветом фона.
Вопрос № 5
Почему для веб-интерфейса используется преимущественно графика в формате SVG?
Ответ: масштабируемая векторная графика (SVG) – относительно легкий формат для воспроизведения плоских изображений (flat design) элементов веб- и мобильного интерфейса. При любом размере моделируется без артефактов при наличии одного или нескольких слоев без сложных градиентов.
Практикум № 7Оптимизация загрузки векторной графики для веба
Цель 1. Выполнить технические задачи:
• поиска;
• организации хранения графических файлов;
• конвертирования форматов из растровой в векторную графику;
• оптимизации изображений.
2. Проанализировать баланс качества и веса (размера) результирующих файлов для точной характеристики графических форматов файлов растровой и векторной графики.
Сопутствующие материалы• Горячие клавиши для работы с графикой в редакторе Corel Draw.
Задачи1. Найти 10 горизонтальных логотипов компаний в формате PNG в сервисе Google Images путем применения типового запроса:
где {title} – название компании на английском языке (из списка ниже).
Список компаний:
• Apple;
• Microsoft;
• HP;
• Samsung;
• Nokia; • Dell;
• Canon;
• Xerox;
• Sony;
• Panasonic.
Рисунок 17.1 – Результаты поиска изображения логотипа Apple в формате PNG
1.1. Полученные логотипы необходимо проверить на прозрачность фона. Необходимо получить все 10 источников логотипов с альфа-каналом.
Рисунок 17.2 – Логотипы компаний из поиска Google.Images
1.2. Для некоторых источников потребуется удалить белый фон и оставить только прозрачность за логотипом. Для этого воспользуемся сервисом Remove.bg: https://remove.bg/ru.
Рисунок 17.3 – Стартовая страница сервиса Remove.bg для загрузки (upload) изображений для удаления фона
Рисунок 17.4 – Результаты удаления фона с изображений логотипов компаний по заданию
2. Сохраните все 10 логотипов в исходном каталоге практикума в новой директории с названием /source/.. со следующими названиями (в нижнем регистре):
• apple.png;
• microsoft.png;
• hp.png;
• samsung.png;
• nokia.png; • dell.png;
• canon.png;
• xerox.png;
• sony.png;
• panasonic.png.
3. Откройте полученные логотипы в графическом редакторе Adobe Photoshop и выполните форматирование по размеру файлов: [180 × 180] px.
Рисунок 17.5 – Обработанные логотипы компаний в формате PNG в директории /source
4. Экспортируйте из Adobe Photoshop в PNG, 8 bit, с включением альфа-канала (прозрачность фона).
Рисунок 17.6 – Диалоговое окно экспорта в формат PNG 8 bit с альфа-каналом прозрачности
4.1. Начните последовательно заполнять таблицу параллельного сравнения форматов растровой и векторной графики.
Анализ форматов графики по качеству и весу файлов
5. Откройте логотипы в графическом редакторе Corel Draw и выполните быструю трассировку из растрового формата PNG в векторный вид (без потерь в качестве).
5.1. Для трассировки используйте функционал PowerTrace (см. рис.17.7):
Corel Draw > Верхняя панель > Трассировка абрисом > Изображение высокого качества.
Рисунок 17.7 – Выбор функционала трассировки в Corel Draw
Рисунок 17.8 – Настройки опций в меню PowerTrace для высокого качества результирующего изображения
Рисунок 17.9 – Опции настроек PowerTrace для получения лучшего качества векторного изображения вариативны: определяются путем эмпирического подбора в балансе детализации и сглаживания
6. Выполните экспорт трассировочных векторных логотипов из Corel Draw в SVG с детализацией 1000 точек на единицу измерения (1:1000).
Рисунок 17.10 – Позиционирование логотипа посередине и центру в дизайн-макете [180 ×180] px
Рисунок 17.11 – Экспорт SVG с точностью 1000 точек на единицу измерения (1:1000)
6.1. Результирующие файлы с наименованиями {title}.svg сохраните в директорию /svg/.
Рисунок 17.12 – Результат трассировки изображений
Важно понимать, что трассировка (в техническом дизайне) – это процедура получения контуров и фигур векторного изображения на основе исходного растрового изображения. Дает изображения с потерями, если первоисточник малого размера, как в нашем случае – [180 × 180] px, или без потерь, если первоисточник высокого качества и значительных размеров.
6.2. Размеры и качество результирующих файлов перенесите в таблицу в строку SVG.
7. Выполните экспорт трассировочных векторных логотипов из Corel Draw в PDF с хорошим качеством (визуально качество без потерь).
7.1. Результирующие файлы с наименованиями {title}.pdf сохраните в директорию /pdf/.
7.2. Размеры и качество результирующих файлов перенесите в таблицу в строку PDF.
8. Для конвертирования из PNG (8 bit) в WebP и оптимизации (сжатия) изображений воспользуемся веб-сервисом Squoosh.app: https://squoosh.app/.
Рисунок 17.13 – Сервис Squoosh.app для оптимизации растровой графики
Рисунок 17.14 – Оптимизация логотипа из PNG (8 bit) в формат WebP с качеством 40% и максимальным сжатием (без потерь)
8.1. Оптимизированные логотипы переместите в директорию /webp/.
8.2. Зафиксируйте результаты оптимизации в таблице анализа в строке WebP.
9. В результате выполнения задания студенты получают заполненную таблицу с необходимыми данными для проведения анализа графических форматов и их полезности с точки зрения скорости загрузки (оптимизации) и качества воспроизведения для веб-интерфейсов, для мобильных экранов высокой четкости (Retina), для печати на носителях.
Результат анализа форматов по качеству и весу файлов
10. После проведенной работы выполните самостоятельный анализ по форматам растровой и векторной графики с оценкой качества изображений: со сжатием и без сжатия, с потерями/без потерь.
Студентам необходимо ответить на следующие вопросы по результату анализа.
Вопрос № 1
Какой формат графики наиболее перспективный по скорости загрузки и сжатию для веб-интерфейсов?
Подсказка: проанализируйте данные в таблице результатов.
Вопрос № 2
Почему выпускные файлы PNG (8 bit) меньше по размеру относительно PNG (24 bit) с одинаковым альфа-каналом?
Подсказка: сравните палитры изображений 8 bit и 24 bit.
Вопрос № 3
Почему трассировка дает неидеальный результат в ходе эксперимента с настройками PowerTrace?
Подсказка: рассмотрите исходное изображение для трассировки.
Вопрос № 4
Почему формат PDF не отличается по размеру от исходного PNG после экспорта из CorelDraw?
Подсказка: см. исходный код и сравните файлы PNG и PDF.
Оценка качества исполнения практикума1. Общее время на выполнение практикума не должно превышать один академический час.
2. Трассированные логотипы в SVG должны быть удовлетворительного качества и детализации относительно первоисточника.
3. Правильные ответы на вопросы в отчете.
Вопрос № 1
Ответ: WebP.
Вопрос № 2
Ответ: палитра PNG 8 ограничена 256 цветами по сравнению с PNG 24, где используются N > 256 цветов. Поэтому размер PNG 8 оптимизирован по сравнению с первоисточником.
Вопрос № 3
Почему трассировка дает неидеальный результат в ходе эксперимента с настройками PowerTrace?
Ответ: исходное изображение низкого качества и детализации не позволяет получить путем трассировки векторное изображение высокого качества, т. к. узловые точки выставляются с заданными настройками, но не могут превысить точность первоисточника.
Вопрос № 4
Почему формат PDF не отличается по размеру от исходного PNG после экспорта из CorelDraw?
Ответ: формат PDF трансформирует исходный файл минимально для отображения его в веб-браузерах и других универсальных программах просмотра файлов. Поэтому изменение формата с PNG на PDF не дало изменений размеров файлов.
Практикум № 8Дизайн иллюстрации для вертикального и горизонтального форматов на основе заданного фирменного знака и стиля
Задача Выполнить технический дизайн иллюстрации и верстки дизайн-макетов вертикального и горизонтального форматов в строгом соответствии с фирменным знаком и стилем компании из задания.
Технические требования к дизайн-макетам1. Горизонтальный дизайн-макет
• Формат A5.