Основы графического дизайна. О применении векторной графики в веб-дизайне и рекламе. Теоретические лекции

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

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

– дизайнер-иллюстратор книг, журналов и других периодических изданий;

– дизайнер веб-интерфейсов, мобильных приложений, веб-ресурсов и других цифровых продуктов;

– дизайнер интерьеров по стилистическому оформлению жилой и коммерческой недвижимости;

– 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 м.

Визуальное ранжирование при зрительном восприятии дизайн-макета

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

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

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

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

О практическом подходе к графическому дизайну

Тема изучения графического дизайна естественно требует восприятия визуальных примеров и их декомпозиции для детального рассмотрения. В книгах «Введение в векторную графику» (издательство «ЛАНЬ», 2023) и «Векторная графика для начинающих. Теория и практика технического дизайна» (издательство «БОМБОРА», 2022) автора данного курса Егора Полякова вы найдете ряд показательных примеров и их полное рассмотрение с различных аспектов графического дизайна.

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

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

Типовые задачи в практикумах направлены именно на формирование навыков работы с векторной и растровой графикой для решения поставленных заданий веб-, рекламного и других направлений.

Текст, форматирование и верстка в дизайне

Рассмотрим основные сущности, задающие форматирование текста в дизайн-макете.

Шрифт, точнее семейство шрифтов определенного стиля обычно задается фирменным стилем. Например, для дизайна фирменной продукции Apple используется специально разработанное семейство шрифтов San Francisco. Так все стили оформления текста шрифтом от нормального до курсива форматируются единым стилем, заданным семейством шрифтов с определенным названием.

Форматирование текста позволяет выделить отдельные слова и фразы в заголовки H1, H2 и т. д., в параграфы текста, цитаты, сноски и другие текстовые элементы.

Это требует от дизайнера знаний верстки текста с учетом норм русского языка, правил типографики и специфики форматов размещения текста в дизайн-макетах различного назначения. В этом вопросе рекомендуется ознакомиться детально с содержанием книги «Типографика, шрифт, верстка, дизайн» Джеймса Феличи.

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

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

Графические редакторы для дизайна цифровых и печатных макетов

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

Графический редактор CorelDRAW используется преимущественно для дизайна векторной графики и верстки дизайн-макетов полиграфической малостраничной продукции. Например, для дизайна логотипов, верстки буклетов, рекламных листовок и иной продукции средней сложности. Рекомендуется использовать редактор старшей версии, чтобы применять полный функционал CorelDRAW, включая трассировку и другие функции для качественной работы графического дизайнера. Характерный формат CorelDRAW – CDR (*.cdr).

Графический редактор Adobe Illustrator применяется преимущественно для создания высококачественного иллюстративного материала в специальном векторном формате AI. Также подходит для обработки глифов, масок слоев, иллюстраций, форматирования текстов и их верстки для печати. Характерный формат Adobe Illustrator – AI (*.ai).

Графический редактор Adobe Photoshop активно применяется для обработки растровой графики при подготовке фото и других изображений с учетом требований веб-оптимизации без потерь и с потерями. Эти задачи иначе обозначаются в совокупности как технический дизайн растровой графики. Характерный формат Photoshop – PSD (*.psd).

Данный редактор является одним из основных в арсенале графического дизайнера по умолчанию.

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

Утилита JpegOptim аналогично используется для оптимизации растровой полноцветной графики в формате JPEG (*.jpeg) как без потерь, так и с потерями в результирующих изображениях в палитре RGB.

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

Векторный редактор Inkscape применяется также для оптимизации векторной графики в формате SVG (*.svg). Оптимизация векторных файлов в SVG выполняется путем удаления из исходного кода формата сопутствующих атрибутов формата до минимально необходимого к моделированию заданной композиции.

Технический дизайн с векторной графикой также подразумевает верстку комплексных иллюстраций рекламных и функциональных веб-страниц и редактирование графики SVG, HTML5, CSS3 и JavaScript. Для этих задач применяется редактор исходного кода EditPlus или его аналоги Note++ и другие подобные редакторы. Его используют для создания и редактирования кода с семантической подсветкой конструкций согласно спецификации выбранного формата.

3D визуализация объектов и сцен

Для работы с трехмерной графикой и объемной визуализацией дизайнеры используют программные пакеты 3D Max, Maya и другие сопутствующие программы (для последовательного моделирования и рендеринга объемных реалистичных объектов, сцен с целью получения статических и анимированных изображений в результате дизайна).

Это направление графического дизайна требует от специалиста знаний и умений проектирования изометрических проекций для изображения объемных объектов и сцен. Необходимо понимание физических свойств тел различной природы. Например, отражения света от поверхностей матовых и глянцевых материалов отличаются. Начинающему 3D-дизайнеру необходимо это осваивать и практиковаться в целях выработки навыка фотореалистичной 3D-визуализации.

Изучение изометрии позволяет дизайнеру освоить навыки в профессии 3D-визуализатора:

– проектировать сцены и объекты, способные притягивать внимание пользователей, с эффектом фотореалистичной визуализации;

– создавать трехмерные игровые миры с высокой детализацией;

– воплощать задуманную атмосферу (в сценарии), путем цветопередачи, света и теней и т. д.

Все эти навыки в совокупности дают специалисту по 3D-графике широкий выбор возможностей для реализации полноценных коммерческих дизайн-проектов для рекламы брендов (товаров народного потребления), видео и игровой индустрии.

Гибкий подход к освоению нового инструментария

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

Для интеграции дизайн-макетов или их фрагментов из одной программы в другую используют совместимые форматы: PDF (*.pdf), PNG (*.png), SVG (*.svg) и т. д.

Качество исполнения графического дизайна

Оценка качества исполнения подготовленного дизайн-макета измеряется практически по нескольким компонентам:

– эмпирически с помощью заданных метрик (например, вес графических файлов, скорость загрузки на клиентском устройстве и т. д.), а также с помощью Google Mobile Test с процентной оценкой в диапазоне от нуля до 100 баллов (по качеству исполнения адаптивного дизайна веб-страниц);

– качественно с точки зрения визуального соответствия заданной тематике дизайн-макета, его смысловой нагрузке, а также соответствию фирменному стилю или заданной дизайн-системе, например, Material Design (компании Google).

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

Базовые требования к качеству исполнения дизайна логотипов

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

Для оценки качества исполнения логотипов применяются следующие базовые требования:

– ассоциативность логотипа с видами деятельности предприятия,

– оригинальность идеи визуализации,

– уникальность фирменного знака,

– однозначность восприятия знака,

– запоминаемость фирменного символа,

– масштабируемость знака,

– функциональность логотипа,

– адаптивность к форматам воспроизведения,

– мультиязычность (простота и схожесть прочтения названия компании на русском и английском языках),

– визуальная привлекательность.

Заключение лекции

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

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

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

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

В повседневной работе дизайнер имеет непосредственное взаимодействие как с композицией дизайн-макетов, так и с отдельными фрагментами: глифами, полупрозрачными, плоскими и градиентными слоями, векторными масками и модульными сетками.

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

Классификация графических форматов

Принципиально графические форматы классифицируются по типу хранимой графики: пиксельная, то есть растровая графика и векторная графика.

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

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

Так в векторном формате SVG вес файла будет минимальным из-за элементарности исходного кода с фигурами описания кнопки, но в сравнимом растровом формате PNG вес файла будет чуть больше, но все равно достаточно оптимальным для использования в веб-разработке.

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

При этом есть существенное преимущество SVG над форматом PNG и другими подобными форматами. Это преимущество позиционировано в самом наименовании формата SVG. Расшифруем его. Scalable Vector Graphics в переводе с английского дословно означает – масштабируемая векторная графика, то есть заданная в векторном изображении композиция при масштабировании с целью укрупнения (детализации) на экране не дает потерь в визуализации диагональных и радиальных фигур и полигонов.

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

В свою очередь формат PNG имеет иное преимущество в возможности воспроизведения множества слоев с полупрозрачными градиентами. Допустим, мы хотим воспроизвести в изображении цветок с десятками лепестков, где отдельные из них темнее у центра и светлее у краев, как бы объемные и полупрозрачные из-за их тонкости, при этом наложить капли на них со свойственной полупрозрачностью и отливом у краев.

Все эти визуальные эффекты возможно воспроизвести в композиции с помощью редактора Adobe Photoshop или Illustrator (на выбор исполнителя), но именно при сохранении для веб-страницы нам потребуется формат PNG с сохранением с галочкой поддержки альфа-канала (в настройках экспорта для веб-ресурсов: Save for web), которая дает возможность отображения полупрозрачных фрагментов слоев сложносоставной иллюстрации с полупрозрачностью и градиентами. Поддержка прозрачности – с помощью опции Прозрачность (Transparency).