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

Ход решения задачи

1. Создадим в Note++ файл index.html с базовой структурой для представления иллюстрации.

Код HTML > index.html

Практикум №4
…

Код CSS > illustration.css

div.illustration {
    display:block;
    width: 100%;
    max-width: 1000px;
    height: 420px;
    margin:20px auto 0 auto;
    background: #3d5077; /* Old browsers */
    background: -moz-linear-gradient(top, #3d5077 0%, #5a6d95 25%, #6a82b4 50%, #7893ce 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #3d5077 0%, #5a6d95 25%,#6a82b4 50%,#7893ce 100%); /* Chrome10-25, Safari5.1-6 */
    background: linear-gradient(to bottom, #3d5077 0%, #5a6d95 25%,#6a82b4 50%, #7893ce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d5077', endColorstr='#7893ce',GradientType=0 ); /* IE6-9 */
}

В этом коде представлен вертикальный градиент, созданный с помощью онлайн-сервиса Colorzilla CSS Gradient Generator по четырем ключевым точкам (сверху вниз):

• цвет № 1 – #3D5077;

• цвет № 2 – #5A6D95;

• цвет № 3 – #6A82B4;

• цвет № 4 – #7893CE.

Источник для доступа Colorzilla CSS Gradient Generator:

https://www.colorzilla.com/gradient-editor/

Рисунок 14.3 – Настройка вертикального градиента для фона иллюстрации

Рисунок 14.4 – Иллюстративный блок с вертикальным градиентом

2. Подготовим уголки для фигурной формы иллюстрации в редакторе Corel Draw. На скриншотах показаны уголки с черной заливкой. Важно перед выгрузкой поменять цвет на белый, т. к. уголки создают маску формы иллюстрации.

Рисунок 14.5 – Верхний центральный уголок (top-line-corner.svg), [1000 × 47] px

Рисунок 14.6 – Нижний центральный уголок (top-line-corner.svg), [1000 × 47] px

Рисунок 14.7 – Верхний левый уголок (top-left-corner.svg), [85 × 90] px

Рисунок 14.8 – Верхний правый уголок (top-right-corner.svg), [85 × 90] px

Рисунок 14.9 – Нижний левый уголок (bottom-left-corner.svg), [85 × 90] px

Рисунок 14.10 – Нижний правый уголок (bottom-right-corner.svg), [85 × 90] px

Рисунок 14.11 – Левый средний уголок (left-corner.svg), [42 × 420] px

Рисунок 14.12 – Правый средний уголок (right-corner.svg), [42 × 420] px

Все уголки поместить при экспорте в SVG с точностью 1:100 единиц в папку img в данной директории практикума.

Рисунок 14.13 – Модульная сетка верстки иллюстративного блока

Код стилей CSS для позиционирования уголков

div.illustration div.mainBlock div.topLeftCorner {
    position: absolute;
    top: 0;
    left: 0;
    width: 85px;
    height: 90px;
    border: 1px solid red;
    background-image: url('../img/top-left-corner.svg');
    background-size: 85px 90px;
    background-repeat: no-repeat;
    background-position: 50%;
}
div.illustration div.mainBlock div.topRightCorner {
    position: absolute;
    top: 0;
    right: 0;
    width: 85px;
    height: 90px;
    border: 1px solid red;
    background-image: url('../img/top-right-corner.svg');
    background-size: 85px 90px;
    background-repeat: no-repeat;
    background-position: 50%;
}
div.illustration div.mainBlock div.bottomLeftCorner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 85px;
    height: 90px;
    border: 1px solid red;
    background-image: url('../img/bottom-left-corner.svg');
    background-size: 85px 90px;
    background-repeat: no-repeat;
    background-position: 50%;
}
div.illustration div.mainBlock div.bottomRightCorner {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 85px;
    height: 90px;
    border: 1px solid red;
    background-image: url('../img/bottom-right-corner.svg');
    background-size: 85px 90px;
    background-repeat: no-repeat;
    background-position: 50%;
}
div.illustration div.mainBlock div.leftCorner {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid red;
    display: block;
    width: 42px;
    height: 420px;
    background-image: url('../img/left-corner.svg');
    background-size: 42px 420px;
    background-position: center center;
}
div.illustration div.mainBlock div.rightCorner {
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid red;
    display: block;
    width: 42px;
    height: 420px;
    background-image: url('../img/right-corner.svg');
    background-size: 42px 420px;
    background-position: center center;
}

Рисунок 14.14 – Надпись I love Paris шрифтом Bitter Medium Italic, размер 20 пунктов, белый цвет

3. Шрифт надписи I love Paris выполнен шрифтом Bitter Medium Italic, доступным бесплатно в сети Интернет.

3.1. Подготовить надпись на прозрачном фоне в дизайн-макете [1000 × 420] px с размещением строго по центру посередине макета (в редакторе Corel Draw). Для перевода текста в кривые использовать сочетание клавиш Ctrl + Q.

Рисунок 14.15 – Надпись I love Paris на прозрачном фоне в дизайн-макете [1000 × 420] px

4. Звезды и облака подготовим в редакторе Corel Draw: на заданном формате 1000 × 420 px. Цвет звезд и облаков предлагается выставить самостоятельно по заданному примеру (в задании к практикуму).

Рисунок 14.16 – Облака и звезды в дизайн-макете размером [1000 × 420] px, экспорт в формат SVG

5. Далее следует отрисовка, или обработка в графическом редакторе Corel Draw или PhotoShop центрального объекта – Триумфальной арки, [195 × 157] px.

6. Далее – сборка слоев по заданной схеме сначала в коде HTML-документа и затем в стилях CSS.

Рисунок 14.17 – Подготовка здания Триумфальной арки в Adobe PhotoShop.

Размер дизайн-макета объекта: [195 × 157] px

Полный код HTML > div.illustration

        
            Предыдущая
        
        Стр. 14 из 31
        
            Следующая