Читать онлайн Основы графического дизайна. О применении векторной графики в веб-дизайне и рекламе. Теоретические лекции бесплатно
Термины и определения
Для изучения лекций начнем с терминов и определений.
Брендбук – это корпоративный документ публичного коммерческого предприятия, в котором последовательно представлена концепция и философия бренда, а также сформулирована ценность компании для потребителей, визуальные атрибуты бренда, указаны группы основных потребителей, в совокупности формирующие целевую аудитории (в английской литературе: 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 м.
Визуальное ранжирование при зрительном восприятии дизайн-макета
Обычно модульная сетка имеет четное количество делений по горизонтали и вертикали, чтобы равномерно распределить элементы с учетом отступов и баланса в композиции, а также приоритетов внимания. На них мы остановимся подробнее.
Приоритетами задается визуальное ранжирование для последовательности восприятия, точнее прочтения зрителем рекламного сообщения в композиции дизайн-макета. Так, например, благодаря выделенному крупно и цветом символу, зритель сфокусирует внимание в первую очередь на его значении, а лишь затем на тексте рекламного сообщения.
Работа графического дизайнера требует особого внимания к деталям и всем возможным требованиям, чтобы исключить множество итераций корректировок, которые занимают рабочее время. Поэтому следует с определенной серьезностью относиться к самоконтролю в исполнении задачи по дизайну рекламного или функционального макета, проверяя выполненную работу самостоятельно по всем основным требованиям, как по техническому заданию, так и по общим правилам.
Техническое задание как основа качественного исполнения дизайна имеет приоритетное значение для специалиста-исполнителя. Фактически графический дизайнер должен следовать всем представленным в документе требованиям к выполнению поставленных задач.
О практическом подходе к графическому дизайну
Тема изучения графического дизайна естественно требует восприятия визуальных примеров и их декомпозиции для детального рассмотрения. В книгах «Введение в векторную графику» (издательство «ЛАНЬ», 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).
В целом следует отметить, что оценочные суждения технических специалистов и потребителей о дизайне цифрового или печатного продукта могут существенно отличаться, т. к. потребительские качества продукта могут быть, к примеру, на высоком уровне, но вся техническая часть реализации дизайна продукта может не соответствовать высоким требованиям профессионального экспертного сообщества дизайнеров.
Базовые требования к качеству исполнения дизайна логотипов
Для типовых сущностей дизайна, например, для логотипов есть ряд стандартных требований к визуальному решению и оценке его качества. Это несколько упрощает вычисление совокупной оценки по системе качественных и количественных метрик – условно по десятибалльной шкале.
Для оценки качества исполнения логотипов применяются следующие базовые требования:
– ассоциативность логотипа с видами деятельности предприятия,
– оригинальность идеи визуализации,
– уникальность фирменного знака,
– однозначность восприятия знака,
– запоминаемость фирменного символа,
– масштабируемость знака,
– функциональность логотипа,
– адаптивность к форматам воспроизведения,
– мультиязычность (простота и схожесть прочтения названия компании на русском и английском языках),
– визуальная привлекательность.
Заключение лекции
В первой лекции мы лишь озвучили требования к разработке высококачественного логотипа, а в одной из следующих лекций рассмотрим представленные требования с детальными пояснениями.
Обобщая полученные знания, выделим значимость изучения основ графического дизайна для формирования личностного профиля в образовании технического специалиста в целях разработки не только эффективных, но и удобных, функциональных цифровых и печатных продуктов для коммерческого широкого использования.
В завершении первой лекции отметим, что полноценная работа графического дизайнера обязательно должна быть подкреплена серьезным уровнем знаний теории графического дизайна, типографики, верстки печатной продукции и теории юзабилити для проектирования дизайна интерфейсов. Поэтому постоянное самообразование является неотъемлемой частью работы дизайнера для повышения квалификации по заданной специализации.
Лекция №2. Графические форматы и типовые операции
Вступление
Во второй лекции представлены основные графические форматы, их классификация и особенности использования для веб-разработки сайтов и полиграфии. Всего графических форматов множество, и все они специфические, то есть определенного назначения и соответствующих технических свойств хранения, моделирования, сжатия и воспроизведения двухмерной и трехмерной графики.
В повседневной работе дизайнер имеет непосредственное взаимодействие как с композицией дизайн-макетов, так и с отдельными фрагментами: глифами, полупрозрачными, плоскими и градиентными слоями, векторными масками и модульными сетками.
Естественно все это многообразие элементов должно быть четко, логично и главное качественно структурировано и храниться в соответствующих графических форматах, чтобы в результате работы получить сбалансированный цифровой или печатный продукт без потерь в визуальном и тактильном качестве.
Классификация графических форматов
Принципиально графические форматы классифицируются по типу хранимой графики: пиксельная, то есть растровая графика и векторная графика.
Указанные виды графики моделируются различными алгоритмами для визуализации заданной композиции в воспроизводимом изображении.
Сопоставление форматов SVG и PNG
Если изображение кнопки Play из элементарного круга и треугольника посередине в двухцветном виде сохранить в различные форматы растровой и векторной графики, то сравнимый вес результирующих файлов будет отличаться.
Так в векторном формате SVG вес файла будет минимальным из-за элементарности исходного кода с фигурами описания кнопки, но в сравнимом растровом формате PNG вес файла будет чуть больше, но все равно достаточно оптимальным для использования в веб-разработке.
При этом оба формата SVG и PNG имеют оптимальные свойства хранения графики без потерь и с поддержкой альфа-канала, то есть полупрозрачности слоев заданной композиции в воспроизводимом изображении.
При этом есть существенное преимущество SVG над форматом PNG и другими подобными форматами. Это преимущество позиционировано в самом наименовании формата SVG. Расшифруем его. Scalable Vector Graphics в переводе с английского дословно означает – масштабируемая векторная графика, то есть заданная в векторном изображении композиция при масштабировании с целью укрупнения (детализации) на экране не дает потерь в визуализации диагональных и радиальных фигур и полигонов.
Это достигается путем воспроизведения векторных ключевых точек моделирующих границы слоев заданной композиции. Пожалуй, именно в этом и заключается поистине гениальная простота и визуальная эффективность в сбалансированной четкости воспроизведения графики в SVG при относительно низком весе результирующего файла изображения.
В свою очередь формат PNG имеет иное преимущество в возможности воспроизведения множества слоев с полупрозрачными градиентами. Допустим, мы хотим воспроизвести в изображении цветок с десятками лепестков, где отдельные из них темнее у центра и светлее у краев, как бы объемные и полупрозрачные из-за их тонкости, при этом наложить капли на них со свойственной полупрозрачностью и отливом у краев.
Все эти визуальные эффекты возможно воспроизвести в композиции с помощью редактора Adobe Photoshop или Illustrator (на выбор исполнителя), но именно при сохранении для веб-страницы нам потребуется формат PNG с сохранением с галочкой поддержки альфа-канала (в настройках экспорта для веб-ресурсов: Save for web), которая дает возможность отображения полупрозрачных фрагментов слоев сложносоставной иллюстрации с полупрозрачностью и градиентами. Поддержка прозрачности – с помощью опции Прозрачность (Transparency).
В результате дизайна такой красочной иллюстрации получаем значительный вес экспортируемого из графического редактора файла в формате PNG из-за множества эффектов, слоев, градиентов в заданной палитре изображения. А при сохранении того же файла в формат SVG мы получим проблему в воспроизведении сложной графики, т. к. формат предназначен для относительно простой и средней по сложности композиции, но точно не для сложных композиционных иллюстраций с полупрозрачностью слоев и градиентами.
Зафиксируем для себя, что формат SVG полезно использовать для четкого масштабируемого воспроизведения логотипов, элементов навигации в веб-интерфейсе, относительно простых глифов и плоских иллюстраций для веб-страниц.
Именно поэтому важно самостоятельно экспериментировать с графикой и экспортом в форматы, чтобы лично убедиться в технических особенностях форматов для различных целей использования в графическом дизайне.
WebP
У читателей может возникнуть вполне логичный вопрос: какой же формат является наиболее прогрессивным в плане оптимального веса, хранения и воспроизведения графики для веб-ресурсов в качестве как с потерями, так и без потерь?
На первый взгляд, возможно это векторный формат SVG, но как мы выяснили, он мало пригоден для сложных иллюстративных изображений с градиентами и поддержкой прозрачности наложенных слоев. Поэтому правильный ответ – это формат WebP (*.webp).
Это специфический графический формат сжатия изображений для веб-ресурсов как с потерями, так и без потерь, внедренный в широкое использование компанией Google в 2010 г. В его основе прогрессивный алгоритм сжатия статических изображений, первоначально использованный в видеокодеке VP8.
Тесты показали, что формат WebP дает до 98% экономии в результате оптимизации для полноцветной композиции графического файла с цифровой камеры фотоаппарата или смартфона. Это гарантирует максимум оптимизации с минимальными потерями среди прочих аналогичных форматов.
Работа с форматом WebP подразумевает использование программ или веб-сервисов по оптимизации графики, где в параллельном визуальном сопоставлении изображений – исходного («До» слева) и оптимизированного изображения («После» справа), для ручного регулирования уровней детализации и сжатия после оптимизации исходной графики.
Этот формат технически является растровым, но с прогрессивным алгоритмом сжатия в собственном исходном коде, чтобы воспроизвести в результате графику и быстрее, и качественнее без особых визуальных потерь при загрузке в веб-браузере.
Благодаря функционалу оптимизации графики формат WebP будет особенно интересен фотографам, блогерам и техническим службам новостей, где необходимо выдать на веб-странице серию инфоблоков с красочными фото с быстрой загрузкой без потерь в визуализации графического контента для пользователей.
Так с основными прогрессивными форматами для веб-разработки мы ознакомились – это форматы SVG, PNG и WebP.
Форматы для полиграфии
Далее изучим графические форматы для дизайна полиграфии.
Перейдем к рассмотрению основных графических форматов для редактирования и воспроизведения растровой и векторной графики для печати в цифровой и офсетной полиграфии.
В отличии от веб-разработки в полиграфии требуется, как правило, качество графики без потерь – то есть в высоком разрешении – от 300 точек на дюйм, или технически 300 dpi (в расшифровке dots per inch).
Практически в каждом техническом задании для приема файлов на печать в цифровой и офсетной типографии вы найдете пункты о допустимых форматах файлов: например, CorelDRAW (CDR), Adobe Illustrator (AI), изображения без сжатия в TIFF или BMP, а также о разрешении изображений от 300 dpi.
Рассмотрим по порядку указанные форматы CDR, AI, TIFF и BMP.
Векторный формат CDR
Формат CorelDRAW (сокращенно CDR) предоставляет возможность совмещения, хранения и воспроизведения как слоев векторной графики, так и растровых фонов и элементов с высоким разрешением. Таким образом результат работы дизайнера по созданию рекламного буклета с журнальной версткой и обработанными комплексными фигурными иллюстрациями с элементами векторной и растровой графики подходит по техническим требованиям для печати в полиграфии.
Векторный формат AI
Формат Adobe Illustrator (сокращенно AI) по функционалу схож с CorelDRAW (CDR), но в большей степени предназначен для разработки иллюстративного материала с различными масками и эффектами графической визуализации для печати статических полноцветных изображений в высоком разрешении.
CorelDRAW преимущественно встречается в арсенале технических специалистов старшего возраста, а Adobe Illustrator предпочтителен для более прогрессивной аудитории дизайнеров. Развитие функционала CorelDRAW уже давно достигло максимума, и теперь представляет собой определенно необходимый и достаточный уровень для дизайнера-полиграфиста цифровой типографии по печати рекламной продукции.
Вес результирующих файлов при сохранении из CorelDRAW может существенно отличаться.
Ключевой вопрос: почему так происходит?
В одном случае если дизайнер сохраняет результат верстки визитной карточки исключительно сформированный из векторных фигур, линий и текста, то в результате файл визитки в CDR будет весить порядка в среднем от 100 до 200 Кб.
В другом случае, если использована подложка (то есть фон из фотографии с высоким разрешением в 300 точек на дюйм), это технически означает что часть файла CDR будет содержать тяжеловесную растровую фоновую картинку (в размере до 1 мегабайта или более), что в принципе и создаст дополнительную нагрузку в итоговом весе результирующего файла в формате CDR.
Следует отметить важную техническую особенность – в форматах CDR и AI по умолчанию каждый слой имеет собственную палитру в зависимости от настроек, поэтому перед сдачей дизайн-макета в печать по правилам необходимо проверить, что все слои экспортируемого для печати файла переведены в кривые и в палитру CMYK, чтобы исключить искажения цветопередачи тонов при цифровой или офсетной печати.
Растровый формат TIFF
Перейдем к формату TIFF. Это тяжеловесный формат хранения растровых, то есть пиксельных изображений. В свое время TIFF стал весьма популярным форматом среди дизайнеров-полиграфистов для хранения полноцветных растровых изображений с большой глубиной цвета для печати визуально многоплановой фотографии или иллюстрации с тенями и полутонами в передаче объема или фотореалистичности изображения.
Полноцветное изображение в формате TIFF занимает несколько Мб, а то и больше в зависимости от разрешения (в 300 или более точек на дюйм) и размеров по ширине и высоте сохраненного изображения. Поэтому этот формат имеет существенный недостаток в плане транспортировки по весу, но достаточно эффективно сжимается с помощью архиватора ZIP и других с прогрессивными алгоритмами сжатия растровых изображений.
Еще одна важная техническая особенность – в формате TIFF изображение с разделенными слоями весит относительно больше того же файла, но со слитыми воедино слоями. Технически во втором случае удаляются лишние атрибуты и настройки позиционирования слоев по координатам, прозрачности. Так получаем единое пиксельное изображение в TIFF без артефактов потери качества результирующей визуальной составляющей.
Поэтому в типографиях, как правило, указывают в технических требованиях, чтобы клиенты и дизайнеры высылали графические файлы в формате TIFF со слитыми воедино слоями в целях экономии веса файла для оперативной транспортировки через Интернет.
Растровый формат BMP
Рассмотрим также формат BMP.
Растровый формат BMP по наименованию – это сокращение от bitmap, то есть дословно в переводе с английского – точечная карта, это в принципе один из первых графических форматов и уже технически устарел в наши дни. Формат BMP хранит изображения с глубиной цвета от 8 до 64 бит, поддерживает альфа-канал, т. е. прозрачность. Но не все приложения поддерживают этот формат. Иными словами, файлы BMP лучше конвертировать в другие более прогрессивные растровые форматы: PNG, WebP или JPEG.
Типовые операции для работы с графикой
Рассмотрим типовые аспекты графического дизайна в полиграфии и что они означают технически для дизайнеров-новичков. Выделим основные операции для работы с графикой и сформулируем основные тезисы об их использовании в графическом дизайне.
Трассировка растрового изображения
Операция трассировка (по-английски tracing) применима к растровому изображению с целью перевода его в векторный вид с целью улучшения качества результирующего дизайн-макета.
Данное преобразование растровых изображений (JPEG, PNG, PSD, BMP и др.) в векторную графику проходит преимущественно с потерями, т. к. при построении композиции из пиксельной сетки в векторные формы и линии выделяются именно четко контрастные и линейно описанные элементы изображения.
Технически трассировка формирует преобразование графической структуры изображения из пикселей в векторные формы (линии, кривые, полигоны) на основе существующей графической композиции.
Графический дизайнер, например, в редакторе CorelDRAW, используя функционал Powertrace, имеет возможность выполнить трассировку с ручной регулировкой точности конвертации в результирующее векторное изображение. Это способствует в достижении необходимой детализации воспроизведения результата (в векторном виде).
Используется в дизайне для работы с графикой для крупноформатных дизайн-макетов, где необходимы четкие масштабируемые изображения без пикселизации (то есть разбиения на точки). Трассировка позволяет устранить визуальные потери с целью получения векторного вида исходного изображения для использования в дизайн-макете.
Оптимизация изображений
При необходимости воспроизведения с высокой четкостью и скоростью загрузки в веб-интерфейсе ограниченного множества графических элементов в векторном формате SVG или растровом PNG, графическому дизайнеру необходимо применять оптимизацию исходных изображений.
Польза от использования графических утилит – высокая. Специальные утилиты для оптимизации графики способствуют в работе дизайнеру с целью обеспечить оптимальную загрузку на клиентском устройстве без задержки на долгую загрузку.
Стилизация
Требования по заданию к визуально-стилистическому оформлению исходной графики могут быть сформулированы в следующем виде: стилистическое соответствие фирменному стилю или соответствие правилам дизайн-системы Material Design.
В любом из двух представленных требований в целом специалист должен привести дизайн-макет к заданному стилю. Эта процедура называется стилизацией. Технически это набор действий графического исполнения на стороне Исполнителя – графического дизайнера по работе с векторными элементами дизайн-макетов.
В результате цифровой продукт с графическим интерфейсом характеризуется как оформленный под необходимые по заданию стили дизайн-системы, например, Material Design.
Предпечатная подготовка PrePress
В полиграфии для воспроизведения при печати на бумаге с точностью (1:1), как в макете, требуется детально спроектированные дизайн-макеты векторной графики. Именно в векторном формате относительно «легкие» по размеру фигуры, линии и текст редактируются по запросу без особого труда. По умолчанию для качественной печати дизайн-макета требуется грамотная предпечатная подготовка: для настройки макета и печатной машины под требования заказчика.
Предпечатная подготовка дизайн-макетов выполняется графическим дизайнером с соблюдением следующих технологических требований:
– точная цветопередача в палитре CMYK подразумевает использование веера Pantone для точного задания номеров цветов в дизайн-макете;
– допустимый уровень глубины «черного цвета» (без превышения по насыщенности);
– все шрифты в дизайн-макете к печати должны быть в кривых (без редактируемых источников);
– полное соответствие модульной сетке без каких-либо вылетов за границы блоков и линий отреза по формату.
Сохранение графических файлов в кривых, в векторе и в слоях
В зависимости от технической потребности дизайнер-исполнитель должен по команде от руководителя или по техническому заданию предоставить результирующий дизайн-макет в следующих состояниях:
– в кривых (с текстовыми блоками, переведенными в векторные формы);
– в векторном формате (условно «в векторе», то есть в формате CDR или AI);
– в слоях (без объединения составных видимых и скрытых от воспроизведения слоев в композиции изображения).
Если руководителю необходимо предоставить графический дизайн-макет в двух видах: для редактирования и для печати, то в первом случае (с возможностью редактирования) – это означает с текстовыми блоками (без конвертации в кривые) и с сохранением слоев (без их объединения в композиции изображения), а во втором случае – для печати с конвертацией текстов в кривые и сохранением в слитом для печати воедино растровыми слоями и векторными слоями поверх подложки.