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

Для закрепления теоретического материала, изложенного в курсе основ технического дизайна, студентам предлагается пройти серию практикумов. Это позволит получить практические навыки в работе с графическими форматами, модульными сетками, слоями изображений и кодом HTML + CSS + SVG для выполнения типовых задач графического и веб-дизайна.

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

Рабочее место студента должно быть укомплектовано:

• ПК или ноутбук;

• доступ к сети Интернет;

• графические редакторы Adobe Photoshop CS6 или выше, Corel Draw (любой актуальной и совместимой версии);

• редактор кода с семантической подсветкой синтаксиса, например, Note++ (PC), Brackets (Mac) и т. д.

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

Полный теоретический и практический материал данного обучающего курса вы можете найти в электронной (дистанционной) версии: http://highcourses.ru.

Желаем вам успехов на пути к освоению профессии технического (графического) дизайнера.

Практикум № 1Построение композиции в иллюстрации с применением глифа

Задачи

1. Создать дизайн-макет в графическом редакторе Corel Draw размерами [100 × 100] мм по аналогии с рис. 11.1 на русском языке.

Рисунок 11.1 – Эмблема с сообщением о первой помощи для туристов

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

3. Отформатировать текст и размеры глифа (центрального объекта рекламы) для наглядного восприятия предложенных метрических установок по размерам для комфортного восприятия текста и объекта с рекламного носителя на заданном расстоянии.

4. Сохранить результат практикума в форматах CDR, PNG, PDF, SVG и сравнить размеры и качество выпускных файлов.

4.1. Сделать таблицу с результатами по качеству изображения и размерам файлов по формату из примера на рис. 11.2.

Результаты экспорта изображений в графические форматы

Сравнение форматов по качеству и размеру выпускных файлов

Рисунок 11.2 – Пример расчета размера шрифта в зависимости от удаленности рекламного носителя от зрителя

Выбор оптимального размера шрифта для дизайн-макета рекламы

Формула для расчета оптимальной высоты шрифта в зависимости от расстояния до зрителя:

Высота символа (мм) = 5 × расстояние до зрителя (м)

Лучшим соотношением высоты и ширины рекламного текста считается пропорция 5:3.

Рассмотрим формулу расчета оптимальной длины строки.

Длина = количество символов × высоту символов

Результат

Представить в виде папки с результирующими файлами в форматах CDR, PNG, PDF, SVG и отчетом в документе MS Word, включающим таблицу сравнения и выводы студента по качеству и размерам файла (какие форматы лучше и для каких целей). Также в отчете указать время, затраченное на выполнение практикума.

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

Необходимо выполнить представленный практикум в полном объеме максимум за 1 академический час.

Преподаватель вправе самостоятельно оценить качество исполнения по академическим метрикам (зачет/незачет).

Практикум № 2Дизайн и верстка меню веб-интерфейса с применением глифов в нескольких дизайн-системах

Задача

Подготовить меню навигации с анимацией элементов по событию: при наведении, по клику, используя возможности HTML и каскадных таблиц стилей CSS, графики в SVG и обработки событий в скрипте JavaScript.

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

Инструментарий

• Редактор с подсветкой синтаксиса исходного кода:

– Note++ (PC);

– Brackets (Mac).

• Валидаторы HTML и CSS для быстрой проверки правильности синтаксиса исходного кода.

Валидаторы исходного кода

Ход решения

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

Практикум №2
Главная страница
Каталог продукции
Сертификаты
Фотогалерея
Ответы на вопросы
Контакты

2. Подключите каскадные таблицы стилей CSS к документу HTML в блоке .

Запись menu.css?ver=1.0 обозначает версию изменений (обновления) каскадных таблиц стилей.

3. Создайте файл menu.css с оформлением стилями блока и элементов адаптивного меню навигации.

body {
    width: 100%;
    height: auto;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}
nav#menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #333;
    text-align: center;
}
nav#menu ul, nav#menu ul li {
    list-style: none;
    display: inline-block;
}
nav#menu ul {
    width: fit-content;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}
nav#menu ul li {
    width: fit-content;
    padding: 16px;
}
nav#menu ul li a {
    font-family: Arial,sans-serif;
    color: #fff;
    text-decoration: none;
    text-align: center;
}
nav#menu ul li a:hover,nav#menu ul li a:target {
    color:#cdcdcd;
}

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

Главная страница
Каталог продукции
Сертификаты
 Фотогалерея
Ответы на вопросы
Контакты

5. Добавьте в блок шапки мета-тег viewport с настройкой отображения страницы в зависимости от ее размера по ширине для адаптивного дизайна веб-страницы.

6. Далее добавим псевдоклассы ссылок в меню навигации. Это задаст стиль для вывода пиктограмм в меню.

Рисунок 12.1 – Форматирование меню с пиктограммами для пунктов списка

В стили CSS добавим следующий медиаблок для описания оформления при ширине экрана менее 1000 пикселей.

@media (max-width:1000px) {
    nav#menu {
        min-height:50px;
    }
    nav#menu ul {
        display:none;
        width: fit-content;
        margin: 16px auto;
        padding: 0;
        padding-top: 15px;
        text-align: left;
    }
    nav#menu ul li {
        width: 100%;
        height: 25px;
        margin-bottom: 10px;
        padding-left: 0;
        padding-top: 0;
        padding-right: 20px;
    }
    nav#menu ul,nav#menu ul li {
        text-align:left;
    }
    nav#menu ul li a:before {
 content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 1px solid;
        margin-bottom: -5px;
        margin-right: 10px;
    }
}

Псевдокласс :before задает положение для следующего оформления пунктов меню.

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

Пиктограммы для меню

Рисунок 12.2 – Процесс автозамены цвета в коде источника SVG

При отрисовке в Corel Draw или при выборе бесплатных пиктограмм в маркетплейсе важно соблюдать общее правило визуализации: толщина линий должна быть одинаковая (1x) для всех пиктограмм.

Важно соблюсти англоязычные названия файлов для пиктограмм меню:

• home.svg;

• catalog.svg;

• certificates.svg;

• faq.svg;

• photogallery.svg;

• contacts.svg.

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

Пример автозамены визуально представлен в редакторе кода на рис. 12.2.

Рисунок 12.3 – Раскрытое меню навигации с пиктограммами

Для получения результата, как на рис. 12.3, необходимо реализовать следующий код в стилях CSS для медиагруппы менее 1000 пикселей по ширине.

@media (max-width:1000px) {
    nav#menu ul {
        display:none;
        width: fit-content;
        margin: 16px auto;
        padding: 0;
        padding-top: 15px;
        text-align: left;
    }
    nav#menu ul li {
        width: 100%;
        height: 25px;
        margin-bottom: 10px;
        padding-left: 0;
        padding-top: 0;
        padding-right: 20px;
    }
    nav#menu ul,nav#menu ul li {
        text-align:left;
    }
    nav#menu ul li a:before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        border: none;
        margin-bottom: -5px;
        margin-right: 10px;
    }
    nav#menu ul li a {
        display: block;
        padding: 10px 0 0 20px;
        text-align: left;
    }
    nav#menu ul li a.mainPage:before {
        background-image: url('../img/home.svg');
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: 0 0;
    }
    nav#menu ul li a.catalogProducts:before {
        background-image: url('../img/catalog.svg');
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: 0 0;
    }
    nav#menu ul li a.certificates:before {
        background-image: url('../img/certificates.svg');
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: 0 0;
    }
    nav#menu ul li a.photoGallery:before {
        background-image: url('../img/photogallery.svg');
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: 0 0;
    }
    nav#menu ul li a.faq:before {
        background-image: url('../img/faq.svg');
        background-size: 18px 18px;
        background-repeat: no-repeat;
        background-position: 0 0;
    }
    nav#menu ul li a.contacts:before {
        background-image: url('../img/contacts.svg');
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: 0 0;
    }
}

Для состояний при наведении :hover и при клике :target добавим оформление нажатого вида пунктов в меню.

Рисунок 12.4 – Состояния по умолчанию (default) и при наведении (:hover), при клике/нажатии ( :target)

@media (max-width:1000px) {
    nav#menu ul li:hover {
        background-color: #444;
    }
    nav#menu ul li a:hover {
        color: #dadada;
        opacity: 0.7;
    }
}

Нажатое состояние характеризуется классом nav#menu ul li a:hover для экранов планшетов и смартфонов и оформляется серым цветом фона и ссылки элемента списка и полупрозрачностью.

8. Для стандартного и широкого экранов ПК меню имеет горизонтальный вид.

8.1. Для экранов размером более 1000 пикселей по ширине первый пункт меню Главная страница заменим пиктограммой Дом.

Код стилей CSS для вывода пиктограммы Дом на экранах ПК.

@media (min-width:1000px) {
    nav#menu ul li:first-child {
        position: relative;
        top: -16px;
        display: inline-block;
        width: 30px;
        height: 30px;
        margin: 0;
        padding: 0;
    }
    nav#menu ul li:first-child a {
        display: block;
        width: 22px;
        height: 22px;
        background-image: url('../img/home.svg');
        background-size: 22px 22px;
        background-repeat: no-repeat;
        background-position: center center;
        font-size:0;
    }
}

9. Для вызова адаптивного меню на мобильных экранах необходимо добавить в веб-интерфейс навигации пиктограмму Гамбургер.

Пример: https://www.iconfinder.com/icons/2561466/menu_icon

Рисунок 12.5 – Пиктограмма Гамбургер

Для изменения цвета пиктограммы выполним автозамену HEX кода заливки в источнике SVG.

До изменения:

stroke="#000"
 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http:
//w
ww.w3.org/2000/svg">

После изменения:

stroke="#fff"
 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http:
//w
ww.w3.org/2000/svg">

Для закрытия меню потребуется отрисовать в графическом редакторе или скачать из каталога пиктограмму close.svg:

https://www.iconfinder.com/icons/4115230/cancel_close_delete_icon.

Рисунок 12.6 – Пиктограмма Закрыть окно (close.svg)

Цвет пиктограммы заменить на белый аналогично.

До изменения:

.cls-1{fill: none; stroke:
#000
; stroke-linecap: round; stroke-linejoin: round; stroke-width:2px;}<g id="cross"><line class="cls-1" x1="7" x2="25" y1="7" y2="25"/><line class="cls-1" x1="7" x2="25" y1="25" y2="7"/></g></svg></code></pre></p><br><p>После изменения:</p><p><pre><code><?xml version="1.0"?><svg viewBox="0 0 32 32" xmlns="http:</code></pre><pre><code>//w</code></pre><pre><code>ww.w3.org/2000/svg"><defs><style>.cls-1{fill: none; stroke:</code></pre><pre><code>#fff</code></pre><pre><code>; stroke-linecap: round; stroke-linejoin: round; stroke-width:2px;}</style></defs><title/><g id="cross"><line class="cls-1" x1="7" x2="25" y1="7" y2="25"/><line class="cls-1" x1="7" x2="25" y1="25" y2="7"/></g></svg></code></pre></p><div class='subtitle'><b>Мобильное меню до и после открытия</b></div><p>Рисунок 12.7 – Мобильное меню до и после открытия</p><br><p>Для реализации функционала мобильного меню потребуется подключить библиотеку JQuery и написать скрипты открытия и закрытия списка меню.</p><br><p><pre><code><head></code></pre></p><p><pre><code><title>Практикум № 2

Скрипт на языке JavaScript после блока меню:

Главная страница
 Каталог продукции
Сертификаты
Фотогалерея
Ответы на вопросы
Контакты
</code></pre></p><p><pre><code>  jQuery('#menu').click(function(){</code></pre></p><p><pre><code>     jQuery('.mainMenu').toggleClass('visible');</code></pre></p><p><pre><code>     jQuery('#menu').toggleClass('close');</code></pre></p><p><pre><code>  });</code></pre></p><p><pre><code>

В теге