в

Как создать Бендера из Футурамы

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

1. Как настроить новый файл проекта

Откройте Illustrator и настройте Новый документ (Файл > Новый или Control-N), применив следующие параметры:

  • Количество монтажных областей: 1
  • Ширина: 360 пикселей
  • Высота: 600 пикселей
  • Единицы измерения: пиксели

Во вкладке с Расширенными настройками:

  • Цветовой режим: RGB
  • Растровые эффекты: осветление (72 точек на дюйм)
  • Режим предпросмотра: по умолчанию
setting up a new document

2. Как настроить пользовательскую сетку

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

Шаг 1

Перейдите в Редактировать > Установки > Направляющие и сетка и задайте следующие параметры: 

  • Сетка через каждые: 1 пиксель
  • Разделы: 1
setting up a custom grid

Подсказка: вы можете узнать больше о сетках, почитав это подробное руководство по работе системы сеток в Illustrator.

Шаг 2

Когда настроите пользовательскую сетку, для чёткости фигур нужно активировать функцию Привязки к сетке под меню Вид (если вы используете старую версию Illustrator).

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

3. Как настроить слои

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

Откройте панель Слоёв и создайте два слоя, которые назовём следующим образом: 

  • слой 1: фон 
  • слой 2: персонаж
setting up the layers

Подсказка: я окрасил все свои слои в одинаковый оттенок зелёного, т.к. на нём лучше всего видно выделенные фигуры (с открытыми или закрытыми контурами). 

4. Как создать фон

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

Шаг 1

Создайте прямоугольник 360 х 600 пикселей, который окрасим в цвет #82A1AD, и затем выровняйте его по центру монтажной области при помощи функций Горизонтального и Вертикального выравнивания на панели Выравнивания

creating and positioning the background

Шаг 2

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

locking the background layer

5. Как создать туловище Бендера

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

Шаг 1

Для начала создайте эллипс 86 х 16 пикселей, который окрасим в цвет #A6C1D1 и выровняем по центру Монтажной области, расположив его на расстоянии 220 пикселей от нижнего края.  

creating the lower section of the torso

Шаг 2

Добавьте прямоугольник 86 х 112 пикселей (#A6C1D1) на верхней половине предыдущей фигуры, выровняв обе фигуры по центру, как показано на образце.  

adding the center section of the torso

Шаг 3

Измените только что созданную фигуру, по отдельности выделив её верхние опорные точки Инструментом «Прямое выделение» (А) и сдвинув их на 8 пикселей в стороны при помощи Инструмента «Перемещение» (щелчок правой кнопкой > Трансформирование > По горизонтали > +/- 8 пикселей в зависимости от стороны, с которой вы начнёте).  

adjusting the center section of the torso

Шаг 4

Выделите обе фигуры и затем объедините их в одну большую при помощи Режима объединения фигур на панели Обработки контуров. 

uniting the lower section of the torso

Шаг 5

Создайте контур получившейся фигуры при помощи метода Обводки, создав её копию (Control-C), которую вставим на переднем плане (Control-F), изменим её цвет на #282425 и затем поменяем Заливку с Обводкой местами (Shift-X). Установите Толщину получившегося контура на 2 пикселя и Угол на Круглый стык, выделив и сгруппировав все составляющие фигуры текущей области при помощи комбинации клавиш Control-G.

adding the outline to the center section of the torso

Шаг 6

Начните работать над верхней частью туловища, создав эллипс 102 х 24 пикселей (#CCE5F2), который расположим, как показано на образце.  

creating the upper section of the torso

Шаг 7

Удалите верхнюю половину только что созданной фигуры, выделив её верхнюю опорную точку Инструментом «Прямое выделение» (А) и нажав Delete.  Закройте получившийся контур, нажав комбинацию клавиш Control-J перед тем, как перейти к следующему шагу.  

adjusting the upper section of the torso

Шаг 8 

Создайте прямоугольник 102 х 18 пикселей (#CCE5F2),  выделите и сдвиньте его верхние опорные точки внутрь на 23 пикселя при помощи Инструмента «Перемещение» (щелчок правой кнопкой > Трансформировать > Перемещение > По горизонтали > +/- 23 пикселя в зависимости от стороны, с которой вы начали).  Поместите получившуюся фигуру на верхнюю половину эллипса, как показано на образце. 

adjusting the anchors of the upper half of the torso

Шаг 9

Объедините две фигуры в одну большую при помощи Режима объединения фигур на панели Обработки контуров, создав для получившейся фигуры контур толщиной 2 пикселя (#282425). Когда будет готово, выделите и сгруппируйте (Control-G) обе фигуры перед тем, как перейти к следующему шагу.  

adding the outline to the upper section of the torso

Шаг 10

Нарисуйте переднюю дверь при помощи Обводки толщиной 2 пикселя (#282425), взяв картинку за образец.  

drawing the front door

Шаг 11

Добавьте маленькую ручку из круга 8 х 8 пикселей с Обводкой 2 пикселя (#282425),  который поместим на расстоянии 8 пикселей от правого края двери и 32 пикселя от верхнего края. Когда будет готово, выделите и сгруппируйте все составляющие фигуры туловища при помощи комбинации клавиш Control-G.

adding the handle to the front door

6. Как создать голову Бендера

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

Шаг 1

Создайте эллипс 56 х 12 пикселей, который окрасим в цвет #A6C1D1 и поместим на туловище, как показано на образце.  

creating the lower section of the head

Шаг 2

Создайте прямоугольник 56 х 110 пикселей (#A6C1D1) и измените Радиус его верхних углов на 28 пикселей, перейдя в Свойства прямоугольника на панели Трансформирования. Когда будет готово, поместите получившуюся фигуру на верхнюю половину только что созданного эллипса. 

adding the upper section of the head

Шаг 3

Объедините две фигуры при помощи Режима объединения фигур на панели Обработки контуров, создав для получившейся головы контур толщиной 2 пикселя (#282425). Когда будет готово, выделите и сгруппируйте (Control-G) обе фигуры перед тем, как перейти к следующему шагу.  

adding the outline to the head

Шаг 4

Для лицевого щитка Бендера создайте наружную оболочку из скруглённого прямоугольника 80 х 36 пикселей (#CCE5F2) с Угловым радиусом 18 пикселей, а затем выровняйте его по центру головы, расположив на расстоянии 43 пикселя от верхнего края.  

creating the outer section of the visor

Шаг 5

Добавьте внутреннюю тёмную область из скруглённого прямоугольника 72 х 28 пикселей (#282425) с Угловым радиусом 14 пикселей, а затем выровняйте по центру фигуры из предыдущего шага.  

adding the inner section of the visor

Шаг 6

Измените внешнюю оболочку щитка, добавив новую опорную точку в центре верхнего края при помощи Инструмента «Добавить опорную точку» (+), а затем передвиньте и измените положение угловых точек, как показано на образце. 

adjusting the shape of the outer section of the visor

Шаг 7

Создайте для получившейся фигуры Обводку толщиной 2 пикселя (#282425), выделив и сгруппировав обе фигуры, нажав комбинацию клавиш Control-G.

adding the outline to the visor

Шаг 8

Создайте основную фигуру для левого глаза из круга 28 х 28 пикселей, который окрасим в цвет #FFFAC1, и поместите её на внутреннюю часть щитка на расстоянии 6 пикселей от левого края.  

adding the left eye to the visor

Шаг 9

Добавьте зрачок из квадрата 4 х 4 пикселей, который окрасим в цвет #282425 и выровняем по центру большого круга, расположив на расстоянии 10 пикселей от верхнего края. Когда будет готово, выделите и сгруппируйте обе фигуры, нажав комбинацию клавиш Control-G.

adding the pupil to the left eye

Шаг 10

Создайте правый глаз из копии (Control-C > Control-F) левого глаза и расположите на противоположной стороне щитка, оставив между ними расстояние 6 пикселей.  

creating the right eye

Шаг 11

Инструментом «Перо» (Р) придайте глазам выражение, нарисовав перевёрнутую фигуру #282425, как на образце. Когда будет готово, перейдите к следующему шагу. 

adjusting the expression of the eyes

Шаг 12

Выделите и сгруппируйте (Control-G) два глаза и фигуру из предыдущего шага, замаскировав их при помощи скруглённого прямоугольника 68 х 24 пикселей с Угловым радиусом 12 пикселей (отмечено красным), нажав правой кнопкой и выбрав «Создать обтравочную маску». Когда будет готово, выделите и сгруппируйте все составляющие фигуры щитка, нажав комбинацию клавиш Control-G.

masking the eyes

Шаг 13

Нарисуйте основную фигуру рта при помощи Инструмента «Перо» (Р), взяв цвет Заливки #FFFAC1. Используйте образец, а затем перейдите к следующему шагу.  

drawing the mouth

Шаг 14

Добавьте цифровые линии зубов при помощи пары вертикальных и горизонтальных Обводок толщиной 2 пикселя (#282425), которые замаскируем за копией  (Control-C > Control-F) рта.

adding the teeth to the mouth

Шаг 15

Создайте контур рта толщиной 2 пикселя (#282425) при помощи метода Обводки, а затем выделите и сгруппируйте все составляющие фигуры, нажав Control-G.

adding the outline to the mouth

Шаг 16

Создайте основание антенны из эллипса 16 х 8 пикселей (#CCE5F2) с контуром толщиной 2 пикселя (#282425), которые сгруппируем (Control-G) и расположим на голове, на расстоянии 32 пикселя от верхнего края щитка.  

creating the lower section of the antenna

Шаг 17

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

adding the circular shape for the center section of the antenna

Шаг 18

Создайте прямоугольник 8 х 28 пикселей (#7EA6C4), затем по отдельности выделите и сдвиньте его верхние опорные точки внутрь на 2 пикселя (щелчок правой кнопкой > Трансформировать > Перемещение > По горизонтали > +/- 2 пикселя в зависимости от стороны, с которой вы начали).  Когда будет готово, поместите получившуюся фигуру на верхнюю половину маленького эллипса. 

adding the rectangle shape to the upper section of the antenna

Шаг 19

Объедините две фигуры в одну большую при помощи Режима объединения фигур на панели Обработки контуров, создав контур получившейся фигуры толщиной 2 пикселя (#282425). Затем выделите и сгруппируйте (Control-G) две фигуры перед тем, как перейти к следующему шагу.  

adding the outline to the upper section of the antenna

Шаг 20

Добавьте кончик антенны, создав круг 8 х 8 пикселей (#A6C1D1) с контуром толщиной 2 пикселя (#282425), а затем сгруппируйте (Control-G) и расположите, как показано на образце. Перед тем, как перейти к следующему шагу, выделите и сгруппируйте  (Control-G) все составляющие фигуры текущей секции, а после этого сгруппируйте всю голову.  

adding the round tip to the antenna

7. Как создать руки Бендера

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

Шаг 1

Начните работать над левой рукой робота, создав его плечевой сустав из эллипса 20 х 32 пикселей (#CCE5F2) с контуром толщиной 2 пикселя (#282425), который сгруппируем  (Control-G) и поместим под большой фигурой туловища (щелчок правой кнопкой > Монтаж > Отправить на задний план).  

creating the left shoulder joint

Шаг 2

Возьмите Инструмент «Перо» (Р) и при помощи Обводки толщиной 14 пикселей (#8DA9BF) со Скруглёнными концами нарисуйте руку, как на образце.  

drawing the left arm

Подсказка: вы, наверное, заметили, что мы использовали обычные фигуры для заливок и обводку– для контуров для всех других областей, но в случае с руками получилось иначе. Это потому, что Инструмент «Марионеточная деформация» ведёт себя  иначе со скруглёнными углами, когда вы используете открытые контуры вместо закрытых, что мы увидим совсем скоро.  

Шаг 3

Создайте контур руки толщиной 2 пикселя (#282425) из её копии (Control-C > Control-B) и увеличьте Толщину с 14 пикселей до 18. Когда будет готово, выделите и сгруппируйте (Control-G) две фигуры вместе, расположив их под плечом (щелчок правой кнопкой > Монтаж > Отправить на задний план).  

adding the outline to the left arm

Шаг 4

Возьмите Инструмент «Перо» (Р) и нарисуйте кольцевые части из Обводки толщиной 2 пикселя (#282425), сгруппировав (Control-G) и замаскировав их, взяв разобранную (Объект > Разобрать > Заливка) копию (Control-C > Control-F) контура руки.

adding the ring segments to the left arm

Шаг 5

Нарисуйте ладонь, взяв цвет Заливки #CCE5F2. Когда будет готово, создайте контур получившейся фигуры толщиной 2 пикселя (#282425), сгруппировав (Control-G) и поместив две фигуры, как показано на образце.  

drawing the left palm

Шаг 6

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

adding the fingers to the left palm

Шаг 7

Создайте правую руку из копии (Control-C > Control-F) левой руки и поместите на противоположной стороне большой фигуры туловища.  

creating the right arm

8. Как создать ноги Бендера

Когда руки будут на месте, можем перейти к нижней части его тела, где создадим ноги. 

Шаг 1

Начните работать над левой ногой, нарисовав её основную фигуру из Контура толщиной 14 пикселей (#8DA9BF) с Круглыми концами для фигуры заливки, создав контур  (#282425) из копии толщиной 18 пикселей (Control-C > Control-B). Когда будет готово, выделите и сгруппируйте (Control-G) две фигуры, расположив их, как на образце.  

drawing the left leg

Шаг 2

Как и в случае с руками, добавьте кольцевые части из линий Обводки толщиной 2 пикселя (#282425), сгруппировав (Control-G) и замаскировав при помощи разобранной копии (Control-C > Control-F) большого контура (щелчок правой кнопкой > Создать обтравочную маску).  

adding the ring segments to the left leg

Шаг 3

Добавьте часть стопы из эллипса 56 х 12 пикселей (#CCE5F2), выделите и сдвиньте его верхнюю опорную точку на 16 пикселей в сторону при помощи Инструмента «Перемещение» (щелчок правой кнопкой > Трансформировать > Перемещение > По вертикали > – 16 пикселей). Измените округлость получившейся фигуры и создайте контур толщиной 2 пикселя (#282425), сгруппировав (Control-G) и поместив две фигуры, как показано на образце. 

adding the foot section to the left leg

Шаг 4

Добавьте правую ногу робота из копии (Control-C > Control-F) левой ноги и поместите её на противоположной стороне туловища.  

finishing off the character

Шаг 5

Добавьте круглую тень из эллипса 180 х 32 пикселей (#698791) с контуром толщиной 2 пикселя (#282425), который сгруппируем (Control-G) и поместим за (щелчок правой кнопкой > Монтаж > Отправить на задний план) нашим пьяным героем, как показано на образце.  

adding the circular shadow to the legs

9. Как изменить позу персонажа при помощи Инструмента «Марионеточная деформация» 

Мы прошли через процесс создания нашего героя-робота, но что если мы захотим изменить его позу, расположив по-другому руки или ноги? 

В последнем обновлении Illustrator появился новый инструмент под названием «Марионеточная деформация», которая позволяет «скручивать и видоизменять части рисунка». Это действительно полезное дополнение в области дизайна персонажа, т.к. позволяет быстро изменить позу нашего объекта за пару щелчков.  

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

Давайте посмотрим, как он работает на примере нашего маленького друга-робота. 

Шаг 1

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

Для этого сначала выделим часть руки, которую собираемся изменить, затем возьмём Инструмент «Марионеточная деформация» и наведём его на ту область, которую хотим повернуть, что в данном случае будет верхней опорной точкой Обводки

adding the first warp pin

Шаг 2

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

example of added warp pin

Шаг 3

Добавьте вторую булавку на области запястья, где ладонь соединяется с рукой. Её мы будем использовать для корректировки. 

adding the second warp pin

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

Шаг 4

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

example of ring segments separation

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

Некоторые из вас могут подумать: «Лучше было бы использовать фигуру с закрытым контуром вместо линий обводки». 

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

example of shape distortion when using the puppet warp tool

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

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

example of fixing the ring segments separation

Шаг 5

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

re positioning the right leg

Шаг 6

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

example of shape rotation using the puppet warp tool

Шаг 7

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

adjusting the right arm

Шаг 8

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

adjusting the left leg

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

example of shape distortion when adding pins to the entire character

Мы закончили, поэтому вы можете выделить и сгруппировать (Control-G) все составляющие фигуры персонажа перед тем, как нажать кнопку сохранения.  

Готово!

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

final result preview

Автор: Andrei Stefan

Проголосуйте:

Аватар
Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
kak sozdat milogo koshachego personazha

Как создать милого кошачьего персонажа

risuem dlinnovolosuju devushku

Рисуем длинноволосую девушку в Adobe Illustrator