Графический редактор 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
