Применение вексельной графики в иллюстрации

ВВЕДЕНИЕ

Тема «Применение вексельной графики в иллюстрации» для индивидуального раздела сайта магистра была выбрана не случайно. Вот уже 3 года создание вексельных иллюстраций является моим хобби. Представленные в данном разделе вексельные изображения выполнены мной, Годла Анастасией Сергеевной.

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

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

Вексельная графика – современное направление векторной графики, объекты в которой представляют собой растровые слои с формами, залитыми сплошным цветом либо градиентом. Внешне объекты вексельной графики напоминают объекты векторной графики. Понятие «вексель» ввел Сет Вулли (Seth Wolley), соединив слова «вектор» и «пиксель».

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

Так как вексельное иллюстрирование является молодым направлением компьютерной графики, то количество дизайнеров, занимающихся данным видом искусства, сравнительно невелико. В качестве примера можно привести таких специалистов, как Lilly van der Zwan (Нидерланды), Carolina Matthes (Германия), Marjolein Rinckes (Нидерланды), Gilbert Ryan Sapnu (Филиппины), Thai Ha Nguyen (Австралия), Binjoo (США).


КРИВЫЕ БЕЗЬЕ КАК ОСНОВА ВЕКТОРНОЙ И ВЕКСЕЛЬНОЙ ГРАФИКИ

Математика является постоянно расширяющейся базой знаний, движущей силой которой является плодотворный человеческий ум. Работа одного человека в определенной области исторически включает в развитие последующие поколения. Фамильное дерево кривых Безье берет свое начало от четырех ключевых личностей:

  1. Карл Вейерштрасс (1815–1897): Немецкий математик, создавший теорему Вейерштрасса, в которой говорится, что любая функция или множество чисел может быть смоделирована как последовательность многочленов, равномерно сходящихся к этой функции на отрезке. Достаточно сказать, что простые многочлены очень легко изобразить, т.к. они производят гладкие и непрерывные кривые или линии.
  2. Сергей Натанович Бернштейн (1880–1968): Советский математик, который доказал теорему Вейерштрасса через многочлены Бернштейна.
  3. Поль де Кастельжо (1930–1999): Французский физик и математик, который работал на компанию Citroen. Он использовал многочлены Бернштейна для разработки алгоритма Кастельжо, применяющегося для вычисления кривых Безье, что позволило Citroen точно создавать более красивые кривые в своих автомобилях.
  4. Пьер Безье (1910–1999): Французский современник Поля де Кастельжо. Безье был инженером, который работал для производителя автомобилей Renault. Он ответственный за патентование и популяризацию кривых Безье в цифровой среде посредством CAD /CAM программного обеспечения. Именно поэтому кривые Безье носят его имя.

До создания кривых Безье было невозможным создавать изящные и элегантные кривые на ранних CAD /CAM системах. После разработки технологии в 1970–1980 годах, они появились в Illustrator, а затем и в Free Hand [1].

По мнению Р. Фон Глички, основным изобретателем кривых Безье является де Кастельжо, но из–за того, что название «Кривые де Кастельжо» звучит более сложно, чем «Кривые Безье», было принято решение дать кривым последнее название.

Рассмотрим кривые Безье с точки зрения математических основ машинной графики.

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

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

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

Рисунок 1 – Кривая Безье

Рисунок 1 – Кривая Безье

Т.к. базис Безье является бернштейновским, становятся известными некоторые свойства кривых Безье. Например:

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

В настоящее время кривые Безье используются в таких компьютерных программах, как Adobe Illlustrator, Adobe Photoshop, Adobe Flash, Inkscape, Corel Draw и др. для создания векторных и вексельных изображений.


ОБОСНОВАНИЯ ДЛЯ ИСПОЛЬЗОВАНИЯ ВЕКСЕЛЯ В ИЛЛЮСТРАЦИИ

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

Далее подробно рассмотрим преимущества вексельных иллюстраций.

Компьютерная графика делится на два главных типа: векторная графика (объектно–ориентированная), и ориентированная на пиксели графика (растровая).

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

JPEG – формат, который моментально распознают любые программы, работающие с изображениями. Этот формат хорошо подходит для сжатия больших файлов до маленького размера, но за это придется дорого заплатить. Каждый раз при открытии и закрытии JPEG файла его качество снижается. Сохранять JPEG в сильном сжатии можно лишь в том случае, если файл будет просматриваться только на мониторе компьютера.

Увеличив такое изображение, можно увидеть пиксели. При сохранении изображения в небольшом формате по мере увеличения картинки будут выглядеть все более и более размытыми и зернистыми.

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

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

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

Немаловажны и анатомические преимущества применения вексельной графики перед векторной графикой.

Сетчатка глаза содержит горизонтальные клетки, которые соединяют малые кластеры рецепторов. Когда рецептор освещен, смежные рецепторы делаются менее чувствительными из–за горизонтальных клеток, увеличивая местный контраст. Это предварительная форма обнаружения края, которая вызывает оптический эффект, известный как эффект Маха. Каждый прямоугольник содержит однородный оттенок серого, но край, расположенный возле более темного прямоугольника, выглядит светлее. Точно так же край, расположенный возле более светлого прямоугольника, выглядит темнее. Эффект Маха может вызвать проблемы в компьютерной графике; если нужна гладкая градация переходов, моделируемая малым числом оттенков, необходимо избегать резкие переходы для уменьшения данного эффекта [4].

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

Преимущество вексельной графики также состоит в сходстве подбора цветов с RGB–моделью.

Цветовое тело модели RGB имеет форму куба, расположенного в трехмерной системе координат (рис. 2).

Рисунок 2 – Цветовая модель RGB

Рисунок 2 – Цветовая модель RGB

Все цветовое пространство находится внутри этого куба. В точке пересечения координатных осей все составляющие равны нулю, излучение отсутствует, следовательно, это точка черного. Три вершины куба, лежащие на осях, представляют собой четыре основных цвета. Каждая из трех вершин, лежащих в плоскостях осей координат, определяет цвет, полученный при смешении двух составляющих.Последняя верщина куба, не лежащая ни в одной из плоскостей и соответствующая координате с максимальным значением каждого основного цвета, является точкой белого. На диагонали, расположенной между вершинами белого и черного цвета, расположены все оттенки серого [5].

Цвет, получающийся в результате смешивания двух цветных источников света, может быть точно предсказан; это есть сумма координат цвета для двух источников света. Координата цвета из смеси 50 на 50 двух источников света есть таким образом средняя координата цвета.

Это важное свойство, названное аддитивностью, позволяет предсказать цвет смеси произвольного числа источников света[4].

Аддитивность используется в треугольнике Максвелла – упрощении кубической модели RGB. Для определения цветности необходимо знать значения только двух координат (например, r и g), при этом значнеие третьей координаты (b) может быть вычислено из первых двух: b=1-(r+b) [6].

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

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


ПРИМЕР ВЕКСЕЛЬНОЙ ИЛЛЮСТРАЦИИ

В качестве примера изготовим вексельную иллюстрацию на основе фотографии Filippa Hamilton–Palmstierna, фотограф Solve Sundsbo, сделанной в 2002 году (рис. 3). Воспользуемся программой Adobe Photoshop.

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

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

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

Рисунок 3 – Исходная фотография и конечная иллюстрация

Рисунок 3 – Исходная фотография и конечная иллюстрация

Выбираем основной цвет кожи, с помощью кривых Безье создаем замкнутый контур и заливаем его выбранным цветом. Далее необходимо подобрать наиболее светлый оттенок кожи по сравнению с основным. Создаем замкнутый контур, который приблизительно совпадает со светлым участком, и также заливаем его. После этого, на слое между двумя базовыми цветами, создаем замкнутый контур немного большего размера, чем второй слой и заливаем его самым светлым цветом, но с прозрачностью, пониженной примерно на 20%. Продолжаем создавать промежуточные слои до тех пор, пока не получится плавного перехода цвета. Следует помнить, что цвета для последующего слоя нужно брать с предыдущего, а прозрачность новых слоев остается неизменной – 80% (рис.4).

Рисунок 4 – Создание кожи

Рисунок 4 – Создание кожи

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

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


ЗАКЛЮЧЕНИЕ

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

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

  • Принцип создания вексельных иллюстраций связан с построением кривых Безье – революционной технологией создания гладких линий и контуров в компьютерной графике, что позволяет менять размер изображения до момента окончательного сохранения без потери качества.
  • Вексельные иллюстрации по своей структуре из–за наличия двух основных цветов и оттенков между ними сходны с аддитивной RGB моделью цветов. Это является преимуществом для компьютерной графики, т.к. границы цветов сглаживаются вручную.
  • Самым главным достоинством вексельных иллюстраций является то, что они практически идеально воспринимаются зрением человека, т.к. в них отсутствуют грубые цветовые переходы, что позволяет исключить эффект Маха.

Нельзя не отметить и существенный недостаток данного вида иллюстрирования – это большое количество слоев, и, следовательно, создание вексельной иллюстрации энергозатратно, занимает много времени и памяти. К примеру, в процессе создания иллюстрации для данной статьи было применено 333 слоя, файл программы Adobe Photoshop с расширением .psd, в котором хранится изображение, имеет размер 9 Мб. Файл .png данной иллюстрации занимает всего лишь 411 кБ.

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


СПИСОК ЛИТЕРАТУРЫ

  1. Glitschka Von R. Vector Basic Training: A Systematic Creative Process for Building Precision Vector Artwork/ USA, Berkley: New Riders, 2010. – 256 p. p.3–4.
  2. Роджерс Д., Адамс Дж. Математические основы машинной графики: Пер. с англ./М.: Мир, 2001. – 604 с., ил. с. 265, 296–298.
  3. Дэбнер Д. Школа Графического дизайна/Дэвид Дэбнер: пер. с англ. В.Е. Бельченко. – М.:РИПОЛ классик, 2007. – 192 с. с.65, 70.
  4. Lilley C., Colour in Computer Graphic./Sheffield:UCoSDA, 1993/Пер. с англ. Мачехина Л.Р., Анисимов С.Ю., 1999. – 109 с. с. 8, 17.
  5. Яцюк О. Основы графического дизайна на базе компьютерных технологий./ СПб.:БХВ–Петербург, 2004. – 240 с.:ил. с.79.
  6. Домасев М.В., Гнатюк С.П. Цвет, управление цветом, цветовые расчеты и измерения. – СПб.: Питер, 2009. – 224 с.:ил. с.37.