Рисуем горящую спичку с помощью градиентной сетки в Adobe Illustrator

Программа: Adobe Illustrator CS3 — CS5

Уровень сложности: Средний

Время выполнения: 1 час

Конечный рисунок: вот такую спичку мы будем рисовать

Конечный рисунок

В этом уроке вы научитесь создавать в векторе реалистичный огонь. С помощью Градиентной Сетки и режима Осветление. Поверьте, ничего сверхсложного здесь нет. Итак, начнем!

Шаг 1

Мы будем работать в цветовой модели RGB. Если у вас она не установлена, откройте меню Файл > Цветовой режим документа> RGB. Начнем наш урок с создания фона. Выберите инструмент Прямоугольник (M) и нарисуйте квадрат с черной заливкой.

Создаем фон

Шаг 2

А дальше рисуем спичку. Включите Инструмент Прямоугольник (M) и нарисуйте длинный узкий прямоугольник по форме спички. Залейте его линейным градиентом разных коричневых оттенков.

Заливаем прямоугольник градиентом

Скопируйте этот прямоугольник и вклейте копию сверху (Ctrl + C; Ctrl + F). Уменьшите немного высоту копии и залейте новым линейным градиентом. Выберите для верхнего прямоугольника более темные оттенки, чем для нижнего.

Копируем прямоугольникВыделите оба прямоугольника, откройте меню Объект > Переход > Создать.

Создаем переход

Шаг 3

Создайте еще один прямоугольник. Такой же ширины, как и все предыдущие (см. рисунок ниже). В палитре Прозрачность выберите градиентную заливку и установите прозрачность 0%.

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

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

Создаем новый прямоугольник

Выделите два последних прямоугольника и откройте меню Объект > Переход > Создать.

Создаем переход

Шаг 4

Дальше создаем головку спички. Включите Инструмент Эллипс (L) и создайте круг с центром на той же оси, что и прямоугольник.

Создаем круг

Для удобства включите режим Умные Направляющие (Ctrl + U). Выберите Инструмент Прямое Выделение (A) и растяните круг влево, удерживая клавишу Shift. Затем включите Инструмент Перо (P) и добавьте новые опорные точки на пересечении круга и прямоугольника.

Растягиваем круг

С помощью Инструмента Прямое Выделение (A) измените форму головки так, как показано на рисунке.

Меняем форму

Шаг 5

Залить головку спички радиальным градиентом, цвет от темно-коричневого к светло-коричневому.

Заливаем радиальным градиентом

Скопируйте головку спички и вклейте копию назад (Ctrl + C; Ctrl + B). Залейте копию темно-коричневым цветом и сдвиньте ее немного влево.

Копируем головку спички

Шаг 6

Включите Инструмент Перо (P) и создайте участки, где дерево обгорело. Залейте их линейным градиентом, цвет темные оттенки коричневого.

Заливаем линейным градиентом

Оба объекта должны располагаться ниже слоя с головкой спички.

Шаг 7

Создайте отверстия на головке спички. Включите Инструмент Эллипс (L) и нарисуйте эллипс. Для заливки используйте цвет радиального градиента головки спички. Включите Инструмент Пипетка (I) и, выбирая цвет, удерживайте клавишу Shift.

Выбираем цвет пипеткой

Выделение объекта часто мешает выбрать нужный цвет. Его можно временно отключить. Откройте меню Просмотр > Спрятать границы (Ctrl + H). Чтобы вернуть выделение, используйте эту же комбинацию клавиш. Скопируйте эллипс и вклейте копию вперед (Ctr + C; Ctr + F), уменьшите его размер и залейте темно-коричневым цветом.

Копируем эллипс

Точно так же создайте еще несколько отверстий на головке спички.

Создаем другие отверстия

Шаг 8

А теперь создадим огонь. Но для начала один важный момент: черные объекты, перекрывая другие объекты,  становятся прозрачными, если в цветовом режиме RGB в палитре Прозрачность установить режим наложения Осветление.

Черные объекты становятся прозрачными

Ниже на рисунке те же объекты в цветовом режиме CMYK.

Те же объекты в цветовом режиме CMYK

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

Эффект достигается 100% черным цветом

Шаг 9

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

Рисуем фигуру огня

Шаг 10

Выделите фигуру огня, откройте меню Объект > Создать градиентную сетку… и в диалоговом окне задайте число строк и столбцов.

Создаем градиентную сетку

Сетку, которая создается автоматически, можно редактировать. Чтобы создать новые линии, используйте Инструмент Градиентная Сетка (U). Чтобы удалить линии, используйте этот же инструмент, только удерживайте клавишу Alt. Для искривления линий сетки и перетаскивания узелков используйте Инструмент  Прямое Выделение (A).

Шаг 11

Сделайте сетку так, как показано на рисунке внизу. Огонь — движимый объект, поэтому ваша сетка может быть совершенно другой.

Перетаскиваем узелки сетки

Шаг 12

Выделите градиентную сетку Инструментом Выделение (V) или щелкнув соответствующий слой в палитре Слои и залейте черным цветом. В палитре Прозрачность установите режим наложения Осветление.

Выделяем сетку и заливаем черным цветом

Шаг 13

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

Применяем цвет к узелкам

Шаг 14

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

Создаем объект над спичкой

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

Две градиентные сетки вместе

Шаг 15

А теперь создайте еще два языка пламени.

Создаем языки пламени

А это все элементы огня вместе.

Все элементы вместе

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

Шаг 16

Дыма без огня не бывает и наоборот. Поэтому давайте создадим дым. Включите Инструмент Прямоугольник (M) и нарисуйте прямоугольник с черной заливкой. В палитре Прозрачность установите режим наложения Осветление.

Рисуем прямоугольник

Шаг 17

Не снимая с прямоугольника выделение, откройте меню Объект > Создать градиентную сетку… и в открывшемся окне задайте число строк и столбцов.

Создаем градиентную сетку

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

Меняем цвет узелков на голубой

Шаг 18

А теперь нужно изогнуть прямоугольник по форме дыма. Для этого я использую следующие инструменты: Прямое Выделение (A), Лассо (Q) и Поворот (R).

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

Перетащите прямоугольник

Включите Инструмент Поворот (R),  установите центр вращения в точке A и с помощью того же инструмента изогните объект.

Изгибаем прямоугольник

Сделайте еще один изгиб. С помощью Лассо (Q) выделите узелки сетки, как показано на рисунке.

Выделяем узелки

Включите Инструмент Поворот (R), установите центр вращения в точке B и с помощью того же инструмента изогните объект.

Изгибаем объект

Также можно перетащить отдельные узелки и (или) группу узелков с помощью инструмента Прямое Выделение (A). Думаю, вы поняли принцип. Сделайте так, как на рисунке внизу.

Перетаскиваем узелки

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

Шаг 19

Точно так же создайте еще немного дыма.

Создаем дым

Создаем дым

Создаем дым

Создаем дым

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

Все элементы дыма

Шаг 20

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

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

И дело не только в градиентах. С любым объектом удобно работать, если он расположен вертикально или горизонтально. Освободите все объекты в палитре Слои (в шаге 18 мы закрепили несколько объектов), сгруппируйте все элементы и разверните, как показано ниже.

Поворачиваем объект

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

А теперь спрячьте все объекты, которые выступают за границы фона. Скопируйте черный прямоугольник (фон) и вклейте копию вперед (Ctrl + C; Ctrl + F). В палитре Слои расположите его на самом верху, выше всех слоев.

Прячем все объекты

Выделите все объекты (Ctrl + A). Откройте меню Объект > Обтравочная маска > Создать или выберите соответствующую команду из контекстного меню.

Создаем обтравочную маску

Заключение

Овладев приемами, описанными в этом уроке, можно создать в векторе очень реалистичное пламя, зажигалку или факел. Кто его знает, зачем вам может понадобиться огонь…

Конечный рисунок

RSS
Вы можете подписаться на комментарии к статье: RSS 2.0


3 комментария
  1. CommentsАлександр   |  Пятница, 05 Апрель 2013 at 11:41 пп

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

  2. CommentsAlex Gai   |  Суббота, 15 Февраль 2014 at 5:12 пп

    Спасибо!

  3. CommentsНадежда   |  Понедельник, 31 Март 2014 at 9:52 пп

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


Оставить комментарий







twitter RSS Подписаться на новости по Email

Деньги

Ваш суммарный доход на стоках в месяц:

Посмотреть на результат

Загрузка ... Загрузка ...

Опрос

Какие микростоки самые доходные для Вас (не более 5-ти):

Посмотреть на результат

Загрузка ... Загрузка ...
Rambler's Top100 PR-CY.ru