Анимация ходьбы (походки) в фотошопе

Посмотреть видео-урок

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

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

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

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

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

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

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

При подготовке персонажа нужно учесть несколько основных моментов:

1) Персонажа нужно рисовать в фотошопе именно векторными инструментами, такими как "Перо" и "фигуры". В процессе анимации мы будем постоянно изменять положение конечностей персонажа, чтобы задать ему определённую позу, делать мы это будем с помощью "Свободной трансформации". При трансформировании векторные слои не искажаются. Если сделать персонаж растровыми слоями или смарт-объектами, то при создании анимации, трансформируя слои мы будем наблюдать их размытие. Кроме того, готовую анимацию вы сможете увеличивать и уменьшать до нужных размеров не теряя в качестве, векторный формат позволяет это делать без проблем.

2) Сам персонаж должен быть разделён на слои, т.е. каждая часть его тела и каждый элемент одежды рисуются на отдельном слое, после чего эти слои группируются по частям тела. Если посмотреть подготовленный мной персонаж, то можно увидеть, что я определил такие группы как рука1 - это правая рука, рука2 - соответственно - левая, Нога1 - правая нога, нога2 - левая, туловище и голова. В свою очередь, каждая группа состоит из соответствующих слоёв, например туловище из элементов одежды, тазовой области и галстука, рука1 из плеча, предплечья и кисти и т.д.. Группы слоёв располагаем соответственно в нужном порядке, например у меня группа слоёв с левой рукой
расположена под группой слоёв с элементами туловища, потому что данная рука должна быть за туловищем.

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

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

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

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

1) Делаем первый кадр. Переименовываем группу слоёв с персонажем, назовём её "один" - это у нас будет первый кадр. Соответственно, мы будем настраивать позу персонажа аналогично фазе №1 на шпаргалке.

Выделяем группу слоёв с ногой, кликнув по ней левой кнопкой мыши, переходим в верхнем меню "Редактирование" - "Свободное трансформирование" и настраиваем положение ноги, аналогично её положения в первой фазе. Устанавливаем нужный градус и настраиваем положение стрелочками на клавиатуре положение, так будет точнее и удобнее, чем мышкой.

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

Далее настроим положение туловища персонажа, оно должно быть немного наклонено вперёд. Выделяем группу "Туловище", вместе с группами обеих рук, удерживая "Ctrl" и кликая по каждой группе левой кнопкой мыши. Берём свободное трансформирование и настраиваем наклон туловища.

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

После того, как мы настроили первый кадр нужно обозначить верхнюю и нижнюю точки персонажа, как на шпаргалке, чтобы можно было настраивать высоту подъёма и опускания тела во время движения. Сделаем мы это с помощью направляющих. Если они у вас, отключены перейдите в верхнем меню "Просмотр" - "Показать" - "Направляющие", там должна стоять галочка. Так же нужно включить линейки, для этого переходим в "Просмотр - "Линейки".

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

2) Делаем все остальные кадры. Теперь у нас есть первый кадр и из данного кадра мы будем делать второй, а точнее из копии данного кадра. Копируем группу слоёв первого кадра, удерживая клавишу "Alt" и левую кнопку мыши тащим группу слоёв в верх или в низ. Переименовываем её в номер "два" - это будет второй кадр.

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

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

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

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

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

и создаём "Анимацию кадра".

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

На первом кадре оставляем видимым только группу с первым кадром, на втором - второй и так далее.

Теперь выделяем все кадры в шкале времени, удерживая "Shift" и кликая по каждому из них левой кнопкой мыши и на любом из кадров кликаем по времени и включаем задержку на 0,1 секунду.

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

3) Теперь зададим персонажу движение, чтобы он не шагал на месте, а именно перемещался. Поочерёдно в шкале времени включаем кадр за кадром и на каждом кадре перемещаем персонажа с помощью инструмента перемещение. При этом смотрим как это выглядит в движении, где-то можно переместить персонажа побольше, где-то поменьше, а именно в момент наступания на первом и шестом кадрах можно перемещение сделать минимальным, потому что персонаж при данном действии практически не перемещается.

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

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

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

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