Егор Поляков – Основы графического дизайна. О применении векторной графики в веб-дизайне и рекламе. Теоретические лекции (страница 2)
Техническое задание как основа качественного исполнения дизайна имеет приоритетное значение для специалиста-исполнителя. Фактически графический дизайнер должен следовать всем представленным в документе требованиям к выполнению поставленных задач.
О практическом подходе к графическому дизайну
Тема изучения графического дизайна естественно требует восприятия визуальных примеров и их декомпозиции для детального рассмотрения. В книгах «Введение в векторную графику» (издательство «ЛАНЬ», 2023) и «Векторная графика для начинающих. Теория и практика технического дизайна» (издательство «БОМБОРА», 2022) автора данного курса Егора Полякова вы найдете ряд показательных примеров и их полное рассмотрение с различных аспектов графического дизайна.
Сбалансированный формат лекций и практикумов позволит начинающим дизайнерам последовательно осваивать компетенции в специальности графического дизайнера. Также даст возможность осмыслить выбор специализации для развития по интересующему направлению дизайна.
Актуальные примеры из веб-разработки и сопутствующих задач графического дизайна способствуют читателям в пошаговом изучении профессии.
Типовые задачи в практикумах направлены именно на формирование навыков работы с векторной и растровой графикой для решения поставленных заданий веб-, рекламного и других направлений.
Текст, форматирование и верстка в дизайне
Рассмотрим основные сущности, задающие форматирование текста в дизайн-макете.
Шрифт, точнее семейство шрифтов определенного стиля обычно задается фирменным стилем. Например, для дизайна фирменной продукции Apple используется специально разработанное семейство шрифтов San Francisco. Так все стили оформления текста шрифтом от нормального до курсива форматируются единым стилем, заданным семейством шрифтов с определенным названием.
Форматирование текста позволяет выделить отдельные слова и фразы в заголовки H1, H2 и т. д., в параграфы текста, цитаты, сноски и другие текстовые элементы.
Это требует от дизайнера знаний верстки текста с учетом норм русского языка, правил типографики и специфики форматов размещения текста в дизайн-макетах различного назначения. В этом вопросе рекомендуется ознакомиться детально с содержанием книги «Типографика, шрифт, верстка, дизайн» Джеймса Феличи.
Уровень исполнения дизайн-макета профессионалы оценивают по качеству верстки и отсутствию каких-либо графических, орфографических, семантических и иных технических ошибок, недочетов. Поэтому дизайнерам так важно знать все действующие правила, рекомендации технического содержания к оформлению сложных дизайн-макетов для получения высокой профессиональной оценки среди экспертов отрасли в целях карьерного роста.
Важно знать, что все тексты в дизайн-макете для печати по умолчанию должны быть переведены из текстовых блоков в кривые, то есть слиты в векторные формы, в целях исключения ошибок отображения на ПК оператора полиграфического цеха типографии. Не реалистично держать в локальном ПК всевозможные шрифты для корректного отображения дизайн-макета для печати.
Графические редакторы для дизайна цифровых и печатных макетов
В зависимости от задач графического дизайна специалисты используют различные по назначению программные инструментарии графических редакторов. Рассмотрим основные редакторы для работы с векторной и растровой графикой.
Графический редактор CorelDRAW используется преимущественно для дизайна векторной графики и верстки дизайн-макетов полиграфической малостраничной продукции. Например, для дизайна логотипов, верстки буклетов, рекламных листовок и иной продукции средней сложности. Рекомендуется использовать редактор старшей версии, чтобы применять полный функционал CorelDRAW, включая трассировку и другие функции для качественной работы графического дизайнера.
Графический редактор Adobe Illustrator применяется преимущественно для создания высококачественного иллюстративного материала в специальном векторном формате AI. Также подходит для обработки глифов, масок слоев, иллюстраций, форматирования текстов и их верстки для печати.
Графический редактор Adobe Photoshop активно применяется для обработки растровой графики при подготовке фото и других изображений с учетом требований веб-оптимизации без потерь и с потерями. Эти задачи иначе обозначаются в совокупности как технический дизайн растровой графики.
Данный редактор является одним из основных в арсенале графического дизайнера по умолчанию.
Для оптимизации растровой графики в формате 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).
В целом следует отметить, что оценочные суждения технических специалистов и потребителей о дизайне цифрового или печатного продукта могут существенно отличаться, т. к. потребительские качества продукта могут быть, к примеру, на высоком уровне, но вся техническая часть реализации дизайна продукта может не соответствовать высоким требованиям профессионального экспертного сообщества дизайнеров.