Vectorboom
Уроки / Иллюстрации / Comments: 0

О необходимости внедрения 3D редактора в пайплайн векторного художника

Сергей Королько
09.01.2013

 

Цель урока
фотореалистичный голубой бриллиант в Adobe Illustrator

 

 

Вы можете скачать исходный векторный файл к данному уроку

 

 

 

 

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

Давайте разберемся, что такое пайплайн векторного художника в принципе, и из каких этапов он состоит. В большинстве случаев перед появлением на свет векторная иллюстрация проходит следующие этапы: Идея (Концепт) > Скетч или референсная фотография > Векторная иллюстрация. Иногда, не очень часто, второй этап скетча отбрасывается за ненадобностью, так как идею можно полностью реализовать в векторном  редакторе. Но давайте вернемся к типичной ситуации, когда форма или цвет объекта настолько сложны, что для реализации идеи в векторе необходим референс.

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

Именно в такой ситуации на помощь векторному художнику приходит редактор трехмерной графики. На протяжении этого урока мы создадим фотореалистичный голубой бриллиант в Adobe Illustrator на основании референсных изображений, подготовленных в редакторе трехмерной графики. Я специально не делаю акцент на определенном трехмерном редакторе, так как все они на сегодняшний день практически равны по возможностям, и выбор не имеет принципиального значения. Вы можете выбрать 3ds Max, Maya, Cinema 4D, Blender или любой другой. Я остановил свой выбор на последнем, потому что Blender является свободным, и имеет небольшой установочный размер. Но хочу еще раз повторить - выбор редактора трехмерной графики не имеет принципиального значения.

Приступим.


Шаг 1

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

Схематическое изображение бриллианта в трех проекциях

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

Итак, первым делом создаем из полигонов форму бриллианта.

создаем из полигонов форму бриллианта

Размещаем его необходимым образом и устанавливаем камеру.

Добавляем подложку под бриллиант, настраиваем освещение и материалы. Хотя о материале бриллианта мы подробней поговорим в следующем шаге.

настраиваем освещение и материалы

Шаг 2

Одним из очень важных параметров материала для бриллианта является количество переотражений внутри кристалла. Давайте посмотрим на изображение ниже. Что мы видим? Переотражений в нем настолько много, что это создает эффект двоения, хотя сам бриллиант выглядит достаточно резким. Так же, в таком виде бриллиант практически невозможно векторизовать. В реальном мире количество отражений в прозрачной среде подчиняется законам физики. И мы не можем ими манипулировать.

Одним из очень важных параметров материала для бриллианта является количество переотражений внутри кристалла

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

В следующем изображении немного изменены свойства материала для бриллианта

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


Шаг 3

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

Тень от прозрачных объектов называется каустикой

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

Мы можем отрендерить объект в режиме Wireframe

Отдельно можем получить информацию о цвете (цветовую составляющую)

можем получить информацию о цвете

А так же тень от объекта или каустику.

Очевидно, что возможность работать над каждым этапом отдельно, дает неоспоримые преимущества в процессе векторизации.

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


Шаг 4

Ну что ж, давайте приступим к основной цели нашего урока, а именно к созданию фотореалистичной векторной иллюстрации голубого бриллианта. Но прежде, скачаем скрипт Extended Select и распакуем его в директорию Adobe Illustrator Folder\Presets\en_US\Scripts\. Он обязательно нам пригодится в дальнейшем.

Откроем Adobe Illustrator, и создадим новый документ размером 2000x2000 px. Такой размер имеют наши референсные изображения. Несмотря на то, что размер достаточно большой для векторной иллюстрации, работать с ним будет удобно. Также это позволит нам создать детализированную иллюстрацию.

Откроем Adobe Illustrator, и создадим новый документ размером 2000x2000 px

Разместим первое референсное изображение diamond_wire.jpg в рабочей области документа (File > Place...), и заблокируем его в панели Layers.

Теперь откроем Preferences (Ctrl+K), перейдем в настройки Smart Guides и выставим параметры как на скриншоте внизу. После этого включим Smart Guides (Ctrl+U).

включим Smart Guides (Ctrl+U)

Шаг 5

Переходим непосредственно к отрисовке. Выбираем инструмент Pen Tool (P), и начинаем обрисовывать контуры изображения. Толщину обводки можно выбрать 1-2 px, цвет контрастный к референсу, например красный. Заливка обязательно должна быть отключена.

Выбираем инструмент Pen Tool (P), и начинаем обрисовывать контуры изображения

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

контуры отчетливо видны

Шаг 6

В прошлом шаге мы закончили создание формы бриллианта, поэтому референсное изображение diamond_wire.jpg нам больше не понадобится, удалим его. Сейчас наша задача создать из отдельных отрезков замкнутые области. Для этого нажимаем Draw Behind (Shift+D) на панели инструментов.

наша задача создать из отдельных отрезков замкнутые области

И инструментом Rectangle Tool (M) создаем прямоугольник перекрывающий размеры бриллианта.

создаем прямоугольник перекрывающий размеры бриллианта

Затем выделяем все Ctrl+A и в панели Pathfinder нажимаем Divide.

на панели Pathfinder нажимаем Divide

Шаг 7

В результате этих действий все получившиеся объекты будут сгруппированы, разгруппируем эту группу Object > Ungroup (Ctrl+Shift+G). Выделим объект который выходит за пределы бриллианта.

И удалим его. В результате мы имеем 54 замкнутых контура.

мы имеем 54 замкнутых контура

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

для большего удобства можно раскрасить в разные цвета

Каждый из этих контуров будет отвечать за определенную грань бриллианта.

Шаг 8

Сейчас мы приступаем к самой длительной, но не очень сложной части нашего проекта. Размещаем в рабочей области второе референсное изображение diamond_color.jpg и блокируем его (Ctrl+2) в панели Layers.

Размещаем в рабочей области второе референсное изображение

Группу замкнутых контуров из предыдущего шага сделаем видимой (Ctrl+Alt+3) и разгруппируем (Ctrl+Shift+G).

Группу замкнутых контуров из предыдущего шага сделаем видимой

Теперь продублируем изображение с бриллиантом (Ctrl+C, Ctrl+F), и удерживая клавишу Shift зажатой, выделяем какой-нибудь контур. В данном случае я выделил светло-коричневый.

продублируем изображение с бриллиантом

Нажимаем Ctrl+7. Теперь, не снимая выделения с Clip Group, кликаем правой клавишей мыши, и в выпадающем меню выбираем Isolate Selected Clipping Mask.

выбираем Isolate Selected Clipping Mask

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

Шаг 9

Раскроем группу Clip Group, продублируем Clipping Path (Ctrl+C, Ctrl+F) и переместим его за пределы этой группы, которую заблокируем (Ctrl+2).

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

меняем цвет обводки на красный

Теперь с помощью Pen Tool (P) последовательно отрисовываем все видимые контуры, которые можем различить. Здесь важно помнить, что от тщательности с которой мы будем отрисовывать детали зависит конечный результат.

последовательно отрисовываем все видимые контуры

Так же важную роль играет Ваш монитор. Чем лучше его цветопередача, тем больше оттенков Вы сможете различить, а значит лучше будет результат.


Шаг 10

Когда все видимые контуры будут обрисованы, выделяем все (Ctrl+A), и инструментом Shape Builder Tool (Shift+M) начинаем создавать замкнутые области.

начинаем создавать замкнутые области

После этого последовательно выделяем каждый замкнутый контур, и пипеткой Eyedropper Tool (I) берем для него цвет с изображения.

В результате у нас должен получиться примерно такой результат.

должен получиться примерно такой результат

Двумя оставшимися контурами с красной обводкой мы займемся в следующем шаге, а сейчас удалим мусор в виде маленьких открытых путей с обводкой но без заливки. Запустим скрипт Extended Select из меню File > Script > Extended Select. В диалоговом окне выберем Unfilled Open Path, после чего он найдет все открытые пути без заливки и выделит их. Нажмем Exit.

удалим мусор в виде маленьких открытых путей с обводкой но без заливки

Оставшийся выделенным мусор просто удалим.


Шаг 11

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

Выделим все контуры с заливкой из меню Select > Same > Stroke Color, сгруппируем их (Ctrl+G) и заблокируем (Ctrl+2).

воспользуемся функцией автотрейса

Снимем блокировку с Clip Group, и нажмем Ctrl+Alt+7. Затем продублируем референсное изображение (Ctrl+C, Ctrl+F).

Теперь воспользуемся способом кадрирования растровых изображений в Adobe Illustrator, который описал Ярослав Лазунов в этом уроке. Выделим растровое изображение и один из двух оставшихся путей, и нажмем Ctrl+7. Изменим режим наложения для получившейся группы с Normal на Darken.

воспользуемся способом кадрирования растровых изображений в Adobe Illustrator

Шаг 12

Не снимая выделения с группы перейдем в пункт меню Object > Flatten Transparency, выставим параметры как на скриншоте внизу, и нажмем OK.

выставим параметры как на скриншоте внизу

После этих действий в группе останется кадрированное растровое изображение и два Clipping Path.

в группе останется кадрированное растровое изображение и два Clipping Path

Удаляем все лишнее, оставив один Clipping Path и растровое изображение.

Удаляем все лишнее, оставив один Clipping Path и растровое изображение

Шаг 13

Оставив выделенным только растровое изображение, переходим в меню Image > Trace, и в диалогом окне выставляем параметры, соответствующие скриншоту.

Затем нажмем Expand для преобразования результатов трассировки в группу путей.

нажмем Expand для преобразования результатов трассировки в группу путей

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

вместо растрового изображения мы имеем группу векторных объектов

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

Аналогичным образом поступаем со второй копией растрового изображения

Шаг 14

Теперь сгруппируем объекты (Ctrl+G), как показано на скриншоте внизу.

сгруппируем объекты

Выделим оставшийся путь, и переместим его вверх (Ctrl+]).

Выделим оставшийся путь, и переместим его вверх

И нажмем комбинацию клавиш Ctrl+A, затем Ctrl+7.

нажмем комбинацию клавиш Ctrl+A

Шаг 15

Сейчас работа над этой областью изображения закончена. Выйдем из режима изоляции два раза нажав на Back one level.

Выйдем из режима изоляции

Вот так выглядит наша иллюстрация к данному моменту.

так выглядит наша иллюстрация

Шаг 16

Ну что ж, мы векторизовали одну область бриллианта из 54. Как Вы могли убедиться, процесс отрисовки не представляет большой сложности. Главное, делать это аккуратно.

Повторяя шаги с восьмого по пятнадцатый, постепенно векторизуем новые грани нашего бриллианта. На рисунке ниже отрисованы все части "короны” бриллианта.

постепенно векторизуем новые грани нашего бриллианта

К завершенной "короне” добавился "пояс”.

<img data-cke-saved-src="http://ru.vectorboom.com/Tutorials/diamond/16-1.jpg" src="http://ru.vectorboom.com/Tutorials/diamond/16-1.jpg" alt="добавился " пояс”"="" border="0" height="600" width="600">

И вот, весь бриллиант мы перевели в векторный формат.

бриллиант мы перевели в векторный формат

Это конечно потребовало много времени и сил, но ведь результат того стоит!


Шаг 17

Если после предыдущих шагов в панели Layers осталась копия референсного изображения diamond_color.jpg, ее можно удалить, больше она нам не понадобится.

Давайте сейчас выделим все (Ctrl+A), и откроем панель Document Info > Objects

откроем панель Document Info

Мы увидим, что в документе присутствует определенное количество открытых путей.

в документе присутствует определенное количество открытых путей

Дело в том, что операция Flatten Transparency, которую мы использовали каждый раз при кропе растровых изображений, приводит к появлению открытых Clipping Path. Почему так происходит я не знаю, но знаю что с этим сделать.

Откроем скрипт Extended Select из меню Scripts, в диалоговом окне выберем Unfilled open paths. После непродолжительной работы, когда он найдет все открытые пути в документе, и выделит их, нажмем на Close selected paths.

Откроем скрипт Extended Select из меню Scripts

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

Шаг 18

С помощью меню File > Place разместим в рабочей области последний референсный файл diamond_floor.jpg, а группу с бриллиантом скроем (Ctrl+3) в панели Layers.

Выберем инструмент Rectangle Tool (M) и создадим прямоугольник размером 2000 x 2000 px.

создадим прямоугольник размером 2000 x 2000 px

Переместим в панели Layers созданный только что прямоугольник под референсное изображение, которое заблокируем (Ctrl+2).

Переместим в панели Layers созданный только что прямоугольник

Шаг 19

Выберем инструмент Mesh Tool (U) и поставим точку примерно в средине прямоугольника. Это действие преобразует прямоугольник в Gradient Mesh.

Это действие преобразует прямоугольник в Gradient Mesh

Теперь, с помощью Mesh Tool (U) и Direct Selection Tool (A) постепенно прорабатываем Gradient Mesh, добавляя новые узлы, и корректируя их положение.

постепенно прорабатываем Gradient Mesh

Учитывая, что некоторая часть отражения будет находиться под бриллиантом, особая точность здесь не нужна. Сетки, которую Вы видите на рисунке будет достаточно.


Шаг 20

В этом шаге мы раскрасим Gradient Mesh. Инструментом Direct Selection Tool (A) выделим два верхних ряда узлов, как на рисунке, и зальем их черным цветом.

мы раскрасим Gradient Mesh

Теперь раскрасим оставшиеся узлы градиентной сетки в цвета, которые возьмем с референсного изображения в местах нахождения узлов. Для этого выберем, или убедимся что уже выбран инструмент Direct Selection Tool (A), после чего сразу включим пипетку Eyedropper Tool (I). Далее, с зажатой клавишей Ctrl выделяем узел, затем Ctrl отпускаем, и пипеткой берем образец цвета рядом с выделенным узлом.

раскрасим оставшиеся узлы градиентной сетки в цвета

Таким образом мы должны раскрасить каждый оставшийся узел градиентной сетки.

Вот как будет выглядеть Gradient Mesh после этих действий.

Gradient Mesh после этих действий

Осталось удалить референсное изображение diamond_floor.jpg, включить видимость группы с бриллиантом (Ctrl+Alt+3) и снять с нее блокировку (Ctrl+Alt+2).

 

 

Вы можете скачать исходный векторный файл к данному уроку

 

 

 

 

мы закончили создание реалистичного голубого бриллианта в Adobe Illustrator

Ну что ж, мы закончили создание реалистичного голубого бриллианта в Adobe Illustrator. На примере этого урока я показал Вам преимущества использования редакторов трехмерной графики перед фотографиями. Вывод очевиден - использование программ трехмерного моделирования открывает перед иллюстратором новые возможности, не доступные при использовании традиционных референсных изображений. Будьте всегда в курсе свежих новостей о векторной графике, новых   уроков   работы в Adobe Illustrator, статей и интервью посвященных   графическому   дизайну. Команда RU.Vectorboom работает для Вас!

Всего комментариев: 0
Только зарегистрированные пользователи могут добавлять комментарии.
[ Registration | Login ]
twitter RSS facebook deviantart feed dribbble
Логин
Пароль
Новости Форума
 
Перепечатка, копирование или воспроизведение информации в каком-либо виде строго запрещены.
Все материалы, которые размещены на этом сайте не подлежат дальнейшему воспроизведению и/или распространению в любой форме, кроме как с письменного разрешения автора.