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

Е. Ю. Поляков, 2023

Данная книга содержит всего 9 коротких и познавательных лекций о теории графического дизайна и применении векторной графики в прикладных задачах веб-дизайна и рекламы.Автор курса лекций: Егор Юрьевич Поляков, инженер информационных технологий в сфере образования, дипломированный специалист ИТМО, ведущий разработчик студии графического дизайна Inmotus Design.Читателям представлены базовые теоретические понятия графического дизайна, их практическая ценность в реализации проектов дизайна и веб-разработки цифровых продуктов, в том числе для рекламы продукции широкого потребления.

Лекция №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);

— в слоях (без объединения составных видимых и скрытых от воспроизведения слоев в композиции изображения).

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

Конец ознакомительного фрагмента.