Градиентные сетки by UnikFrik

Всем привет! Меня зовут Руслан, живу в Екатеринбурге, учусь в УралГАХА, фрилансер.

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

Времени ушло, примерно, 80 часов.

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

Но, сначала нужно разобраться, что такое Градиентные сетки и как они себя ведут.

Gradient mesh, очень мощный инструмент Adobe Illustrator, позволяет добиться иллюзии 3D эффекта в двухмерной графике.

Скажу сразу, инструмент сложный, на манипуляцию с сеткой потребуется потратить много времени и терпения, но результат того стоит. Здесь очень помогли бы навыки скульптура или 3D моделера.

Все мои советы, основаны на практике, мэш я изучал путем проб и ошибок. И я прекрасно знаю, с какими проблемами, может столкнуться новичок.

Урок предназначен для тех, кто уже знает основы Adobe Illustrator.

Начнем

За основу берем фотографию (Гугл - рулит) актрисы Jessica Alba.

Для начала фотографию лучше немного обработать в фотошопе, добавить чуток блюра, контраста, немного с цветом поработать.

Берем фото, помещаем на верхний слой и блокируем его. Рисовать будем под фотографией.  

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

Есть два способа создавать Градиентную сетку: 1-й - Object – Create Gradient mesh (когда сетка создается автоматически).

 2-й – из панели инструментов (сетка задается вручную). Выбираем второй способ.

Определим центр нашего объекта (в лицах, центром я всегда делаю нос).

Затем добавляем узловые точки на линию глаз и рта. Корректируем контур объекта, из овала – лепим лицо.

Чтобы не мучить себя, всегда используйте горячие клавиши - здесь достаточно 3-х - это Direct Selection tool, пипетка, и mesh tool.

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

Цвет берем с участка картинки под узловой точкой.

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

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

Теперь будем рисовать глаза. За основу, снова берем круг.

Намечаем основные линии.

Заполняем цвета (чтобы стыковка глаз и лица, происходила плавно, цвет для узловых точек, берем не с фото, а с ближайших участков уже закрашенного лица, иногда я нажимаю Ctrl+H (View - Hide Edges), чтобы верно подобрать цвета).

Задача усложняется - рисуем зрачок. Здесь придется закруглять сетку. Как сделать проще - создаем новый слой поверх фото, на месте зрачка рисуем несколько кругов, друг в друге, блокируем слой.  Теперь у нас есть направляющие, по которым мы можем округлить сетку (чтобы изгибать узловые точки, выбираем инструмент Convert Anchor Point Tool (жмем Shift+C)).

Рисуем брови. Создаем сетку с одной узловой точкой, заполняем цветом.

Поверх рисуем волоски при помощи инструмента PaintBrush Tool, выбираем кисти, задаем направление. Чтобы кисти не изменялись, превращаем их в объекты (выделяем все кисти - Object - Expand Appearence). Можно поиграть с прозрачностью.

Далее один за другим создаем новые объекты и заполняем их сеткой и цветом.

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

Сначала намечаем центр сетки.

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

Заливаем цветом.

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

Волосы тоже рисуем мэшем.

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

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

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

Вот и все, ребята, надеюсь, этот урок будет Вам полезен. В приложении, Вы можете загрузить исходный файл (~13.4 mb, Adobe IllustratorCS2), и уже ознакомиться с этой работой «вживую».

Хорошего настроения!

786 0 850 137
54
2009-02-10
я не умею работать в илюстраторе но то что увидел в этом уроке ..... вобщем я просто в шоке !!! очень класный результат очень много труда 80 часов АВТОР МОЛОДЕЦ !!! ВСЕ ПЯТЁРКИ !
2009-02-10
Класссссс. А девушку где такую взял?
2009-02-10
Впечатляет!
2009-02-10
zOw, написал же в (ГУГЛ рулит). Автор урок интересный и результат тоже, конечно тврчества в нем мало:) И еще вопрос, по поводу наложения цвета, подробнее пожалуйста
2009-02-10
to Mark Lee - кликаем по каждой узловой точке и инструментом пипетка берем цвет с фотки, чтобы убедиться что цвета подобраны верно, время от времени, выключаем видимость фотографии(глазик).
2009-02-10
Собственно, автор, сам до этого дошёл?) или кто-то подтолкунул, рассказал, паказал... мож видел уже где?) если ноухау поставлю 5 и 5 точно)
2009-02-10
5/5 !
2009-02-10
to ~SAURON~ - исключительно самостоятельно - "Все мои советы, основаны на практике, мэш я изучал путем проб и ошибок." еслиб, кто видел мои первые шаги в мэше... это просто ужас))
2009-02-10
Написано хорошо, да и технология мощная, НО не написано зачем это нужно.
2009-02-10
to targus внимательнее, написал в самом начале - "Зачем это нужно? Помимо безразмерности векторной графики, мы можем менять освещение объекта, фон, прическу, одежду, цвета, изменять мимику, создавать с нуля, по эскизам реалистичных персонажей... все зависит от вашей фантазии. Но, сначала нужно разобраться, что такое Градиентные сетки и как они себя ведут." в этом уроке, (по просьбам трудящихся)), я показал не ЧТО делать с мэшем, а КАК управлять этим инструментом.
2009-02-10
to targus Мне кажется в полиграфии векторная графика очень даже, можно “рендрить” гигантские разрешения))
2009-02-10
Обалдеть! Автору респект! Я сам не пользовался никогда иллюстратором, собственно он мне и не нужен. Но это нечто. Получил огромное удовольствие от прочтения и просмотра урока... это ж какое терпение надо! В общем, молодец! 5/5
2009-02-10
абалдеть, всю жизнь думал что вектор это линии безье и линейные градиенты.. а тут такое! Мир ушел из под ног.. как дальше жить?
2009-02-10
Прекрасный урок. 5/5 Спасибо. Но вот для реальной практики в полиграфии этот метод слишком долгий. 80 часов это 10 рабочих дней. И это только на портрет! А если делать таким уроком какой-нить пейзаж? За это время обычно требуется полностью подготовить макет приличного по объему и заполненности издания, чем изготовить одну картинку. А вот для банерщиков такой урок может быть находкой.
2009-02-10
земляк - ты маньяк!!!! 5и5
2009-02-10
По поводу безразмерной печати, это идея. Хотя как было замечено, 10 рабочих дней на одну картинку, это всё же многовато. Возможно это касается исключительно данного изображения? Хочу обратиться к Автору - вы не могли бы, так же, показать примеры(хотя бы простенькие) применения данной технологии в области например пром дизайна или авто дизайна, думаю если у вас таковые примеры имеются, читателям было бы интересно, на них взглянуть. Заранее спасибо !
2009-02-10
Отлиный урок по отличной программе 5/5
2009-02-10
Урок супер 5,5 как-то года три назад наткнулся на работы выполненые в этой технике, качество совершеноо фотографическое пытался сам освоить эту технику скажу честно терпения нехватило, за что автру отдельный респект. З.Ы. для тех кого интересует зачем это нужно скажу что в полигафии используется повсеместно практиески каждая вторая упаковка из под сока нарисована этим способом. есче саветую набрать в гугле [i]Gradient mesh[/i] и найдете кучу работ [smile=17]
2009-02-10
да кстате [url=http://basangpanaginip.blogspot.com/2006/07/worlds-most-photorealistic-vector-art.html]вот[/url]
2009-02-10
Огромные благодарности за комментарии! на эту работу ушло 80 часов, т.к. это была моя первая крупная работа с мэшем. Уже на Alba_2 я затратил ~ 60 часов. Сейчас, мэш, мне дается относительно легко, и такие портреты я могу нарисовать за 30 часов - это не так уж и много. to targus я пром диз-ом и отрисовкой авто пока не занимался... подумаю. вообще в следующем уроке(если будет), мне бы хотелось описать меш не как, технологию, а как способ, создавать творческие работы с нуля/по эскизам
2009-02-11
парень, вы реально читор! "хостидж давн!" =)) 5/5
2009-02-11
Великолепный урок 5\5 ) Я как то читал про меши виллюстраторе, но к сожалению никогда им не пользовался, но это потрясло, великолепная картинка получилась.
2009-02-11
Круто!! такие работы видел года два назад на одном из сайтов.там делали всех звезд,Спирс,Джоли,и еще некоторых:) то есть увиденным я не удивился:)но за трудолюбие респект Земляку!!!!
2009-02-11
Аццкий труд!!!
2009-02-11
Ну ты жесткий! Молодец!
2009-02-11
результат потрясающий. 5,5
2009-02-11
5|5 как и обещал)
2009-02-12
Сумашедшый!
2009-02-12
Еще раз огромнейшее спасибо за проделанную работу и ангельское терпение [smile=17]
2009-02-12
Когда-то я думал, что полигоны в 3д - это сложно. Глянув на эту сетку я понимаю, что ошибался. 5/5
2009-02-13
Ура. Спасибо Руслан я ждал этого урока! 5/5
2009-02-13
Слов нет. Результат сшибает с ног. Даже предположить не мого что такого качества можно добиться в векторе. Пять\пять ессно.
2009-02-15
Очень смело ! Джесика Альба была бы в восторге!
2009-02-16
Отличный урок! Большое спасибо! 5/5 [smile=04]
2009-02-16
всё это конечно интересно(хотя.. уже давно не новинка) но, хотелось бы увидеть что-нибудь творческое, а не простое копирование фотографии
2009-02-16
классный урок
2009-02-16
Классный урок... а вот с тканью совсем жесть... мне, как для новичка, очень полезая информация! Спасибо)))
2009-02-16
Руслан, ОГРОМНОЕ СПАСИБО за проделанную работу. Результат как урока, так и самой работы, на мой взгляд, достоин высшей оценки. Сам, сколько не бодался с этим мешем, ничего достойного не получил. Уверен что после более детального разбора урока и препарирования файла всё получится! Удачи!!!
2009-02-17
Всем спасибо, за положительные оценки и коменты! приятно, что урок пригодился!)) to Mia Огромные Благодарности за поддержку!:)
2009-02-28
Согласен с Leshiy (3D Award),урок без творчества.
2009-02-28
[quote=delcon] [/quote] Это ж не галерея, что б на творчество любоваться. А качественный урок налицо. 5/5
2009-03-09
КРУТО -ПРИГОДИТСЯ ВСЕМ
2009-03-18
да класс. в свое время волосы и глаза у меня так и не получились
2009-04-17
[i]жениться вам надо барин[/i]))) респект трудолюбию и усердию
2009-07-17
Khasanov Ruslan скажи как сделать что бы на лице небыло пигментных пятен?
2009-08-14
Спасибо большое за урок, Руслан!!!
2009-12-27
5\5
2010-03-21
Почему то не получается создать градиентную сетку... =( курсор с знаком запрета а почему не пишет в фотошопе хоть пишет почему не дает
2010-07-06
Без сомнения великолепно, НО для полиграфии все равно придется потом растрировать ибо Mesh и RIP взрывоопасная смесь
2010-07-25
Отличная работа! Спасибо!
2010-09-09
Отличный урок! И прекрасная девушка на фотке :)
2011-01-30
Я в шоке! Я так не умею! Я работаю в полиграфии больше 6 лет, но вот до этого инструмента как то руки не доходили! На досуге буду изучать теперь эти сетки! Спасибо за урок! Очень красиво получилось! Раньше, когда видела работы такого плана - думала что это нарисовано на графическом планшете......
2011-06-11
да, не барабаны лабать..80 часов-да, очень да, спасиб за урок..!
2013-12-27
Руслан, скажите, а есть-ли в Adobe Illustrator функция автоматического переноса цветов с "подстилающего" изображения на опорные точки градиентной сетки? В случае со сложным изображением, как-то "муторно" пипеткой по одной точке цвет переносить. Вопрос родился после 6-ти часового размахивания пипеткой.
RENDER.RU