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

}
div.illustration div.mainBlock div.cloudsStars:before {
    position: absolute;
    top: 130px;
    left: 20%;
    content: "";
    display: block;
    width: 60%;
    height: 260px;
    background: -moz-radial-gradient(center, ellipse cover, rgba(128,166,222,1) 0%, rgba(128,166,222,0.99) 1%, rgba(255,255,255,0) 100%);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(128,166,222,1) 0%,rgba(128,166,222,0.99) 1%,rgba(255,255,255,0) 100%);
    background: radial-gradient(ellipse at center, rgba(128,166,222,1) 0%,rgba(128,166,222,0.99) 1%, rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a6de', endColorstr='#00ffffff',GradientType=1 );
    filter: blur(100px);
    border-radius: 250px 250px 0 0;
}
@media (max-width:540px) {
div.illustration div.mainBlock div.slogan {
position: absolute;
z-index: 5;
display: block;
width: 100%;
height: 420px;
background-image: url('../img/slogan.png');
background-size: auto 260px;
background-repeat: no-repeat;
background-position: center 0;
}
}

Рисунок 14.18 – Иллюстрация I love Paris с выделением Триумфальной арки

Медиаблок @media (max-width: 540px) задает размеры и положение слогана в иллюстрации при размере менее размера самой надписи, позиционируя ее относительно макета.

Сложный вопрос для студентов: как сделать свечение рассвета за изображением Триумфальной арки?

Рисунок 14.19 – Иллюстрация I love Paris

Ответ: для слоя под зданием (object) – stars & clouds > добавить псевдокласс :before, и он будет выстроен в слоях над облаками и под зданием. Далее задать в нем скругленный блок с радиальным градиентом, который фильтром blur будет размыт по краям со смещением по центру вниз ниже границы уголка bottom-line-corner.svg.

div.illustration div.mainBlock div.cloudsStars:before {

    position: absolute;

    top: 130px;

    left: 20%;

    content: "";

    display: block;

    width: 60%;

    height: 260px;

    background: -moz-radial-gradient(center, ellipse cover, rgba(128,166,222,1)

    0%, rgba(128,166,222,0.99) 1%, rgba(255,255,255,0) 100%);

    background: -webkit-radial-gradient(center, ellipse cover, rgba(128,166,222,1) 0%,rgba(128,166,222,0.99) 1%, rgba(255,255,255,0) 100%);

    background: radial-gradient(ellipse at center, rgba(128,166,222,1) 0%, rgba(128,166,222,0.99) 1%,

    rgba(255,255,255,0) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient(

    startColorstr='#80a6de', endColorstr='#00ffffff',

    GradientType=1 );

    filter: blur(100px);

    border-radius: 250px 250px 0 0;

}

Детализируем псевдокласс: before по пунктам:

• ширина width: 60% задает неполное заполнение блока с радиальным градиентом;

• абсолютное позиционирование задает положение блока со смещением относительно верхнего края;

• скругление верхнего левого и правого краев задается стилем border-radius: 250px 250px 0 0;

• фильтр blur задает сглаживание краев градиента относительно других слоев в иллюстрации.

В результате сборки этой адаптивной иллюстрации мы получили многослойную композицию с высоким качеством отображения, по ширине минимум от 420 px максимум до 1000 px.

Важный вопрос: как оптимизировать загрузку слоев при вставке нашей иллюстрации в реальную страницу веб-сайта?

Ответ: используем следующий JavaScript для предварительной загрузки изображений (размещается в блоке ).

Общий вес (размер) – 11.графических файлов в предварительной загрузке (preloadImages) – составляет 55,5.Кб. В реальной сложной иллюстрации количество слоев может быть значительно больше с добавлением анимации. В будущем такое решение пригодится студентам для использования в практической работе.

Результат

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

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

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

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

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

Практикум № 5Построение масштабируемой иллюстрации на основе векторных изображений для веб-сайта

Задача

Пошагово выполнить урок по созданию многослойной иллюстрации для раздела веб-ресурса, продвигающей приложения на платформе iOS (вместо логотипа Android использовать фирменный знак Apple и пиктограммы в дизайн-системе iOS).

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

Многослойная иллюстрация для каталога приложений iOS представлена на рис. 15.1.

Рисунок 15.1 – Многослойная иллюстрация для каталога мобильных приложений на платформе Apple iOS

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

• логотип Apple в SVG: https://www.iconfinder.com/icons/104490/apple_icon

Решение задачи

Многоплановая иллюстрация с высокой детализацией в коде HTML-верстки похожа на слоеный пирог, как это представлено на рис. 15.2. Это первое приближение, необходимое для понимания структуры и состава сложной иллюстрации.

Рисунок 15.2 – Слои структуры многоплановой иллюстрации для маркетинговых задач продвижения цифровых продуктов в коммерческих веб-ресурсах

Пример решения

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

Рассмотрим все слои иллюстрации (см. рис. 15.3).

Рисунок 15.3 – Слои комплексной иллюстрации

1. Фон иллюстративного блока.

2. Спрайт пиктограмм приложений на платформе iOS.

3. Радиальный градиент с фокусировкой на центр иллюстрации.

4. Маска SVG с формой прелоадера.

5. Логотип Apple.

6. Сборка многослойной композиции.

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