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

    display: block;
    min-width: 498px;
    min-height: 498px;
    width: 498px;
    height: 498px;
    background: -moz-radial-gradient(center, ellipse cover,
    rgba(0,0,0,0.61) 0%,rgba(0,0,0,0) 32%, rgba(0,0,0,0.9) 100%);
    background: -webkit-radial-gradient(center,
    ellipse cover, rgba(0,0,0,0.61) 0%,rgba(0,0,0,0) 32%,
    rgba(0,0,0,0.9) 100%);
    background: radial-gradient(ellipse at center,
    rgba(0,0,0,0.61) 0%, rgba(0,0,0,0) 32%,rgba(0,0,0,0.9) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr='#9c000000', endColorstr='#e6000000',
    GradientType=1 );
    border-radius: 250px;
}

Слой № 4. Слой маска с выемкой глифа загрузки

Графическая идея: визуально обрамить и создать эффект визуального сообщения о загрузке множества приложений.

Создается согласно последовательности по рис. 15.4 в векторном графическом редакторе Corel Draw или Adobe Illustrator (на выбор дизайнера) путем выреза из квадратной фигуры белого цвета фигурного глифа в форме символа загрузки (loading).

Желательно соблюсти размеры, равные формату макета и заданному блоку иллюстрации (условно [500 × 500] px), но необязательно – при сохранении результирующей маски с выемкой фигуры в формате SVG получим масштабируемое векторное изображение с возможностью гибких настроек вывода в стилях CSS для фонового изображения (background-image).

Слой маска выводится с помощью кода HTML:

    …

Уточнение

Тег выбран для этого слоя по причине минимального кода. В действительности можно выбрать , или

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

Код CSS для оформления слоя с маской глифа загрузки

section.content div#catalog.illustration div.appsSprite div.radialFade i {
   display:block;
   min-width: 500px; /* Задает ширину слоя, равную блоку иллюстрации */
   min-height: 500px; /* Задает высоту слоя, равную блоку иллюстрации */
   width:100%;
   height:100%;
   /* Следующие свойства задают вывод маски слоя без повтора */
   background-image:url("../img/mask.svg");
   background-size:100% 100%;
   background-position:center center;
   background-repeat:no-repeat;
}

Слой № 5. Слой вывода центрального графического элемента

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

Центральное изображение желательно сохранять в формате SVG для масштабирования без визуальных потерь при максимальном увеличении. Важно сделать ключевое изображение композиции контрастным цветом на фоне темных слоев подложки.

Рисунок 15.6 – Центральное изображение композиции для иллюстрации

Код CSS для оформления центрального слоя с логотипом Apple

section.content div#catalog.illustration div.appsSprite div.radialFade i img {
   float: left; /* Позиционирование в блоке */
   display: block; /* Позиционирование в блоке */
   width: 120px; /* Фиксированная ширина */
   height: 120px; /* Фиксированная высота */
   margin: calc(50% – 80px) auto 0 calc(50% – 80px); /* Позиционирование
   в блоке */
   padding: 20px; /* Внутренние отступы в изображении для задания тени */
   border-radius: 25px; /* Скругление формы изображения */
   box-shadow: inset 0 10px 20px; /* Для задания внутренней тени */
   vertical-align: top;
}

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

Важно сопоставить результат технической работы с различных точек зрения.

Ключевой вопрос: лучше ли данное решение, чем статическое изображение в формате PNG или JPG?

Давайте сравним форматы вывода иллюстрации и проанализируем по весу, объему кода и детализации.

Рисунок 15.7 – Масштабирование иллюстрации от минимального до максимального размера

Результат

Папка с результирующими файлами index.html, изображениями img, стилями css.

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

• Общее время для верстки и отрисовки элементов многослойной иллюстрации не должно превышать одного рабочего часа.

• Качество результата необходимо проверить на валидаторе (на отсутствие ошибок в коде исполнения).

• Визуальный результат сборки верстки должен быть сходным с исходным примером.

Практикум № 6Организация хранения, оптимизации, воспроизведения каталога растровой и векторной графики и поиска по каталогу в веб-интерфейсе

Организация хранения, оптимизации, воспроизведения каталога графики

Цель

Выполнить комплекс задач для удобного поиска изображений в форматах PNG и SVG с возможностью просмотра с изменением цветопередачи интерфейса (dark mode).

Рисунок 16.1 – Веб-интерфейс поиска изображений

Рисунок 16.2 – Структура проекта (практикума)

Задачи

1. Для достижения поставленной цели потребуется серия из N изображений.

Используем пиктограммы из открытого источника:

https://www.iconfinder.com/search?q=flower

1.1. Выгрузите 20 изображений в форматах PNG и SVG для каталога графики.

Рисунок 16.3 – Результаты поиска по запросу ключевой фразы flower в веб-сервисе IconFinder.com

Получим всего 20 изображений в двух форматах растровой (PNG) и векторной графики (SVG). Разместим их в директории /img/.. в соответствующих директориях ../png/ и ../svg/.

Рисунок 16.4 – Директории растровой (PNG) и векторной (SVG) графики

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

 –>
Abstract flower and bud