Технический дизайн с векторной графикой также подразумевает верстку комплексных иллюстраций рекламных и функциональных веб-страниц и редактирование графики SVG, HTML5, CSS3 и JavaScript. Для этих задач применяется редактор исходного кода EditPlus или его аналоги Note++ и другие подобные редакторы. Его используют для создания и редактирования кода с семантической подсветкой конструкций согласно спецификации выбранного формата.

Для работы с трехмерной графикой и объемной визуализацией дизайнеры используют программные пакеты 3D Max, Maya и другие сопутствующие программы (для последовательного моделирования и рендеринга объемных реалистичных объектов, сцен с целью получения статических и анимированных изображений в результате дизайна).

Это направление графического дизайна требует от специалиста знаний и умений проектирования изометрических проекций для изображения объемных объектов и сцен. Необходимо понимание физических свойств тел различной природы. Например, отражения света от поверхностей матовых и глянцевых материалов отличаются. Начинающему 3D-дизайнеру необходимо это осваивать и практиковаться в целях выработки навыка фотореалистичной 3D-визуализации.

Изучение изометрии позволяет дизайнеру освоить навыки в профессии 3D-визуализатора:

– проектировать сцены и объекты, способные притягивать внимание пользователей, с эффектом фотореалистичной визуализации;

– создавать трехмерные игровые миры с высокой детализацией;

– воплощать задуманную атмосферу (в сценарии), путем цветопередачи, света и теней и т. д.

Все эти навыки в совокупности дают специалисту по 3D-графике широкий выбор возможностей для реализации полноценных коммерческих дизайн-проектов для рекламы брендов (товаров народного потребления), видео и игровой индустрии.

В лекции выделена лишь малая часть из ряда графических редакторов для технического дизайна растровой и векторной графики. Реальная работа графического дизайнера многогранна и требует гибкого подхода к освоению нового инструментария в условиях высокой активности в развитии качественного уровня исполнения дизайна цифровых и печатных продуктов. В зависимости от поставленных задач выбор по используемому инструментарию определяется техническим дизайнером в пользу оптимального решения.

Для интеграции дизайн-макетов или их фрагментов из одной программы в другую используют совместимые форматы: PDF (*.pdf), PNG (*.png), SVG (*.svg) и т. д.

Оценка качества исполнения подготовленного дизайн-макета измеряется практически по нескольким компонентам:

– эмпирически с помощью заданных метрик (например, вес графических файлов, скорость загрузки на клиентском устройстве и т. д.), а также с помощью Google Mobile Test с процентной оценкой в диапазоне от нуля до 100 баллов (по качеству исполнения адаптивного дизайна веб-страниц);

– качественно с точки зрения визуального соответствия заданной тематике дизайн-макета, его смысловой нагрузке, а также соответствию фирменному стилю или заданной дизайн-системе, например, Material Design (компании Google).

В целом следует отметить, что оценочные суждения технических специалистов и потребителей о дизайне цифрового или печатного продукта могут существенно отличаться, т. к. потребительские качества продукта могут быть, к примеру, на высоком уровне, но вся техническая часть реализации дизайна продукта может не соответствовать высоким требованиям профессионального экспертного сообщества дизайнеров.

Для типовых сущностей дизайна, например, для логотипов есть ряд стандартных требований к визуальному решению и оценке его качества. Это несколько упрощает вычисление совокупной оценки по системе качественных и количественных метрик – условно по десятибалльной шкале.

Для оценки качества исполнения логотипов применяются следующие базовые требования:

– ассоциативность логотипа с видами деятельности предприятия,

– оригинальность идеи визуализации,

– уникальность фирменного знака,

– однозначность восприятия знака,

– запоминаемость фирменного символа,

– масштабируемость знака,

– функциональность логотипа,

– адаптивность к форматам воспроизведения,

– мультиязычность (простота и схожесть прочтения названия компании на русском и английском языках),

– визуальная привлекательность.

В первой лекции мы лишь озвучили требования к разработке высококачественного логотипа, а в одной из следующих лекций рассмотрим представленные требования с детальными пояснениями.

Обобщая полученные знания, выделим значимость изучения основ графического дизайна для формирования личностного профиля в образовании технического специалиста в целях разработки не только эффективных, но и удобных, функциональных цифровых и печатных продуктов для коммерческого широкого использования.

В завершении первой лекции отметим, что полноценная работа графического дизайнера обязательно должна быть подкреплена серьезным уровнем знаний теории графического дизайна, типографики, верстки печатной продукции и теории юзабилити для проектирования дизайна интерфейсов. Поэтому постоянное самообразование является неотъемлемой частью работы дизайнера для повышения квалификации по заданной специализации.

Во второй лекции представлены основные графические форматы, их классификация и особенности использования для веб-разработки сайтов и полиграфии. Всего графических форматов множество, и все они специфические, то есть определенного назначения и соответствующих технических свойств хранения, моделирования, сжатия и воспроизведения двухмерной и трехмерной графики.

В повседневной работе дизайнер имеет непосредственное взаимодействие как с композицией дизайн-макетов, так и с отдельными фрагментами: глифами, полупрозрачными, плоскими и градиентными слоями, векторными масками и модульными сетками.

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

Принципиально графические форматы классифицируются по типу хранимой графики: пиксельная, то есть растровая графика и векторная графика.

Указанные виды графики моделируются различными алгоритмами для визуализации заданной композиции в воспроизводимом изображении.

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

Так в векторном формате SVG вес файла будет минимальным из-за элементарности исходного кода с фигурами описания кнопки, но в сравнимом растровом формате PNG вес файла будет чуть больше, но все равно достаточно оптимальным для использования в веб-разработке.

При этом оба формата SVG и PNG имеют оптимальные свойства хранения графики без потерь и с поддержкой альфа-канала, то есть полупрозрачности слоев заданной композиции в воспроизводимом изображении.

При этом есть существенное преимущество SVG над форматом PNG и другими подобными форматами. Это преимущество позиционировано в самом наименовании формата SVG. Расшифруем его. Scalable Vector Graphics в переводе с английского дословно означает – масштабируемая векторная графика, то есть заданная в векторном изображении композиция при масштабировании с целью укрупнения (детализации) на экране не дает потерь в визуализации диагональных и радиальных фигур и полигонов.