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

В результате дизайна такой красочной иллюстрации получаем значительный вес экспортируемого из графического редактора файла в формате 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);

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

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

Текст предоставлен ООО «Литрес».

Прочитайте эту книгу целиком, купив полную легальную версию на Литрес.

Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.