Основы графического дизайна. О применении векторной графики в веб-дизайне и рекламе. Теоретические лекции
Егор Юрьевич Поляков
Данная книга содержит всего 9 коротких и познавательных лекций о теории графического дизайна и применении векторной графики в прикладных задачах веб-дизайна и рекламы.Автор курса лекций: Егор Юрьевич Поляков, инженер информационных технологий в сфере образования, дипломированный специалист ИТМО, ведущий разработчик студии графического дизайна Inmotus Design.Читателям представлены базовые теоретические понятия графического дизайна, их практическая ценность в реализации проектов дизайна и веб-разработки цифровых продуктов, в том числе для рекламы продукции широкого потребления.
Егор Поляков
Основы графического дизайна. О применении векторной графики в веб-дизайне и рекламе. Теоретические лекции
Термины и определения
Для изучения лекций начнем с терминов и определений.
Брендбук – это корпоративный документ публичного коммерческого предприятия, в котором последовательно представлена концепция и философия бренда, а также сформулирована ценность компании для потребителей, визуальные атрибуты бренда, указаны группы основных потребителей, в совокупности формирующие целевую аудитории (в английской литературе: target auditory).
Брендбук определяет коммерческое позиционирование компании на рынке товаров и услуг и другие сопутствующие требования к представлению бренда, которыми следует пользоваться отделу рекламы, маркетинга и руководителям корпоративных подразделений данной компании для стратегического построения визуальных коммуникаций с потребителями и развития бизнеса компании в целом.
Верстка дизайна веб-страницы – это создание структуры гипертекстового документа на основе HTML-разметки с использованием каскадных таблиц стилей CSS и клиентских сценариев, в идентичном отображении функциональных элементов дизайна аналогично заданному макету.
Гарнитура – это совокупное семейство шрифтов одного стиля и наименования, различных по начертанию. Начертание может быть тонким, курсивным, жирным, широким, узким. Например, Open Sans – это гарнитура, в которой шрифты с начертаниями Open Sans Regular, Open Sans Italic, Open Sans Bold и другие. У классификации шрифтов есть базовый и профессиональный уровни. Каждый шрифт по-своему уникален, и в мире постоянно создаются новые их вариации.
Глифы – это векторные символы, используемые для визуальной связи между рекламодателем (или владельцем цифрового продукта) и потребителями. Функциональное значение символов (глифов) – это ключевая часть семантического звена иллюстративного содержания рекламного макета. Функциональная роль глифов в установлении связи между потребителем (точнее зрителем) и его автором посредствам рекламного сообщения с помощью визуально-понятного символа, чтобы побудить зрителя к действию, представленному в рекламной иллюстрации.
Дизайн-система – это комплекс компонентов, правил, предписаний и инструментов для повышения качества и скорости разработки продуктов, а также эффективной поддержки существующих. Это условная модель взаимодействия дизайнера при работе с материалами для публикации в публичных источниках в рекламных целях.
Композиция иллюстрации в рекламе – это сложный структурированный дизайн-макет, исполненный в соответствии с заданными требованиями и правилами, применяемыми к выпуску рекламной продукции.
Логотип – это графический знак в значении визуального идентификатора государственной, коммерческой или социальной организации для улучшения узнаваемости и распознаваемости в обществе.
Рекламная иллюстрация – это графический способ визуальной коммуникации между поставщиком товаров (и услуг) и их потребителями.
Формат SVG (сокращенно от Scalable Vector Graphics) – это векторный формат для хранения, обработки и применения масштабируемой графики. Дословно переводится как масштабируемая векторная графика. Формат SVG имеет широкое применение в различных направлениях деятельности от полиграфии до веб-интерфейсов.
Перейдем далее к рассмотрению первой лекции.
Лекция №1. Введение в основы графического дизайна
Вступление
Современный мир в развитии постоянно сопряжен с технологическим прогрессом. Повседневная работа графического дизайнера совмещает в себе инженерный подход с художественным подходом к визуализации семантического значения и графического сообщения зрителю в заданном формате.
Выделим специализации графического дизайна по направлениям деятельности:
– дизайнер-иллюстратор книг, журналов и других периодических изданий;
– дизайнер веб-интерфейсов, мобильных приложений, веб-ресурсов и других цифровых продуктов;
– дизайнер интерьеров по стилистическому оформлению жилой и коммерческой недвижимости;
– 3D-дизайнер в области трехмерной визуализации объектов и композиции в инженерно-проектировочной, рекламной и иных сферах деятельности.
В зависимости от выбранной специализации графический дизайнер должен уметь проектировать и воспроизводить решения визуализации объектов и композиции изображении? с заданной точностью в двухмерной и трехмерной графике.
Освоение основ графического дизайна
Принципиально графический дизайн способствует в работе коммерческих предприятии? для вывода на рынок новых продуктов, успешной конкуренции среди аналогов в борьбе за выбор потребителей.
В основе теории графического дизайна:
– изучение цветовых палитр, модульных сеток;
– правила форматирования текста;
– верстка в дизайне и многое другое.
Все что сможет освоить дизайнер на первых шагах, станет вкладом в успех его практической работы в выбранной специализации. Теория способствует рациональному мышлению в дизайне и выбору правильных решений в практических задачах.
Назначение цветовых палитр в дизайне
Стандартно графика для веб-ресурсов, отображаемых в интернет-браузерах, воспроизводится в палитре RGB. Это необходимо учитывать при сохранении графических элементов дизайна веб-интерфейса. Зафиксируем это в памяти: графика для веба в палитре RGB.
Фактически графические файлы (компоненты) для оформления в композиции веб-интерфейса по умолчанию сохраняются с цветовым профилем в палитре RGB. Соответственно цвета задаются числовыми индикаторами. Например, черный цвет в RGB имеет соответствующую запись: (0,0,0). Аналогично задается в шестнадцатиричном формате (HEX) записью: #000.
В отличие от веб-ресурсов функционально в полиграфии, то есть в печатной продукции, требуется от графических дизайнеров соблюдение базового правила: сохранения графических файлов, дизайн-макетов с цветовым профилем в палитре CMYK.
Черный цвет будет иметь числовую запись в палитре CMYK в формате (0,0,0,100), то есть по четырем индикаторам тональности для точного воспроизведения цвета на плоскости печатного носителя.
Что характерно веб-разработчики используют в работе собственно отличительные цветовые решения по заданному значению: либо из палитры безопасных цветов, либо из фирменного стиля для точного воспроизведения цветов в дизайне цифрового продукта. Безопасные цвета из открытых источников допустимо использовать, когда не указан по техническому заданию фирменный стиль для дизайна веб-страниц.
В полиграфическом дизайне, что отличительно от веб-разработки дизайнеры рекламной продукции, зачастую используют так называемые вееры Pantone с выбором цвета по оттиску на типовой мелованной бумаге, чтобы точно указать номер цвета в дизайн-макете с учетом его воспроизведения по тону и насыщенности. Pantone допустимо использовать аналогично таблицам безопасных цветов только в случае, когда не задан фирменный стиль для дизайна, диктующий выбор номеров цветов по умолчанию.
Модульные сетки в дизайне
В графическом дизайне работа специалиста по созданию любого дизайн-макета требует действий в горизонтальном или вертикальном формате заданного размера в пикселях для веб-ресурсов или в миллиметрах, сантиметрах для полиграфии. Поэтому применение модульной сетки является базовым правилом проектирования четкого и сбалансированного дизайн-макета.
В зависимости от назначения дизайн-макета задается модульная сетка. Так, например, для веб-дизайна интерфейса модульные сетки задаются специально с учетом шага деления в определенном размерном формате, чтобы дизайнеру было легко задать отступы от краев экрана и отступы между функциональными элементами с учетом правил размещения инфоблоков и навигации.
Для полиграфической продукции модульные сетки аналогично необходимы для задания отступов от краев печатного формата. Например, для визитной карточки в пределах нормы погрешность обрезного формата в размере 1-2 мм. Шаг между элементами должен быть не менее 5 мм, а оптимально в размере 10 мм, чтобы отделять составные части: блоки описания друг от друга смысловыми отступами.
Для печатной рекламы на крупноформатном билборде размеры шрифта задаются дизайнером пропорционально удаленности рекламного носителя от зрителя. Поэтому и шаг модульной сетки по горизонтали и вертикали пропорционально больше и измеряется в см, т. к. средний размер билборда 6 на 3 м, а удаленность печатного формата от зрителя в среднем составляет от 5 до 15 м.
Визуальное ранжирование при зрительном восприятии дизайн-макета
Обычно модульная сетка имеет четное количество делении? по горизонтали и вертикали, чтобы равномерно распределить элементы с учетом отступов и баланса в композиции, а также приоритетов внимания. На них мы остановимся подробнее.
Приоритетами задается визуальное ранжирование для последовательности восприятия, точнее прочтения зрителем рекламного сообщения в композиции дизайн-макета. Так, например, благодаря выделенному крупно и цветом символу, зритель сфокусирует внимание в первую очередь на его значении, а лишь затем на тексте рекламного сообщения.
Работа графического дизайнера требует особого внимания к деталям и всем возможным требованиям, чтобы исключить множество итераций корректировок, которые занимают рабочее время. Поэтому следует с определенной серьезностью относиться к самоконтролю в исполнении задачи по дизайну рекламного или функционального макета, проверяя выполненную работу самостоятельно по всем основным требованиям, как по техническому заданию, так и по общим правилам.
Техническое задание как основа качественного исполнения дизайна имеет приоритетное значение для специалиста-исполнителя. Фактически графический дизайнер должен следовать всем представленным в документе требованиям к выполнению поставленных задач.
О практическом подходе к графическому дизайну
Тема изучения графического дизайна естественно требует восприятия визуальных примеров и их декомпозиции для детального рассмотрения. В книгах «Введение в векторную графику (https://www.litres.ru/book/e-u-polyakov/vvedenie-v-vektornuu-grafiku-uchebnoe-posobie-dlya-vuzov-67765070/?lfrom=174836202)» (издательство «ЛАНЬ», 2023) и «Векторная графика для начинающих. Теория и практика технического дизайна (https://www.litres.ru/book/e-u-polyakov/vektornaya-grafika-dlya-nachinauschih-teoriya-i-praktika-tehn-68397985/?lfrom=174836202)» (издательство «БОМБОРА», 2022) автора данного курса Егора Полякова вы найдете ряд показательных примеров и их полное рассмотрение с различных аспектов графического дизайна.
Сбалансированный формат лекций и практикумов позволит начинающим дизайнерам последовательно осваивать компетенции в специальности графического дизайнера. Также даст возможность осмыслить выбор специализации для развития по интересующему направлению дизайна.
Актуальные примеры из веб-разработки и сопутствующих задач графического дизайна способствуют читателям в пошаговом изучении профессии.
Типовые задачи в практикумах направлены именно на формирование навыков работы с векторной и растровой графикой для решения поставленных заданий веб-, рекламного и других направлений.
Текст, форматирование и верстка в дизайне
Рассмотрим основные сущности, задающие форматирование текста в дизайн-макете.
Шрифт, точнее семейство шрифтов определенного стиля обычно задается фирменным стилем. Например, для дизайна фирменной продукции Apple используется специально разработанное семейство шрифтов San Francisco. Так все стили оформления текста шрифтом от нормального до курсива форматируются единым стилем, заданным семейством шрифтов с определенным названием.
Форматирование текста позволяет выделить отдельные слова и фразы в заголовки H1, H2 и т. д., в параграфы текста, цитаты, сноски и другие текстовые элементы.
Это требует от дизайнера знаний верстки текста с учетом норм русского языка, правил типографики и специфики форматов размещения текста в дизайн-макетах различного назначения. В этом вопросе рекомендуется ознакомиться детально с содержанием книги «Типографика, шрифт, верстка, дизайн (https://www.ozon.ru/product/tipografika-shrift-verstka-dizayn-2-e-izd-pererab-i-dop-felichi-dzheyms-327003051)» Джеймса Феличи.
Уровень исполнения дизайн-макета профессионалы оценивают по качеству верстки и отсутствию каких-либо графических, орфографических, семантических и иных технических ошибок, недочетов. Поэтому дизайнерам так важно знать все действующие правила, рекомендации технического содержания к оформлению сложных дизайн-макетов для получения высокой профессиональной оценки среди экспертов отрасли в целях карьерного роста.
Важно знать, что все тексты в дизайн-макете для печати по умолчанию должны быть переведены из текстовых блоков в кривые, то есть слиты в векторные формы, в целях исключения ошибок отображения на ПК оператора полиграфического цеха типографии. Не реалистично держать в локальном ПК всевозможные шрифты для корректного отображения дизайн-макета для печати.
Графические редакторы для дизайна цифровых и печатных макетов
В зависимости от задач графического дизайна специалисты используют различные по назначению программные инструментарии графических редакторов. Рассмотрим основные редакторы для работы с векторной и растровой графикой.
Графический редактор CorelDRAW используется преимущественно для дизайна векторной графики и верстки дизайн-макетов полиграфической малостраничной продукции. Например, для дизайна логотипов, верстки буклетов, рекламных листовок и иной продукции средней сложности. Рекомендуется использовать редактор старшей версии, чтобы применять полный функционал CorelDRAW, включая трассировку и другие функции для качественной работы графического дизайнера. Характерный формат CorelDRAW – CDR (*.cdr).
Графический редактор Adobe Illustrator применяется преимущественно для создания высококачественного иллюстративного материала в специальном векторном формате AI. Также подходит для обработки глифов, масок слоев, иллюстраций, форматирования текстов и их верстки для печати. Характерный формат Adobe Illustrator – AI (*.ai).
