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

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

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

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

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

1. Что нужно знать об анимации походки

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

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

анимация походки персонажа

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

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

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

2. Подготовка персонажа к анимации

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

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

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

подготовка персонажа к анимации

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

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

подготовка персонажа к анимации

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

подготовка персонажа к анимации

3. Анимация ходьбы персонажа

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

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

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

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

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

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

анимация походки в фотошопе

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

анимация персонажа

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

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

анимация персонажа

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

анимация персонажа

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

анимация персонажа

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

анимация персонажа

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

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

анимация персонажа

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

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

анимация движения персонажа фотошоп

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

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

Поделиться:

Комментарии ()

  1. Евген Евгеныч 21 декабря 2019, 18:07 # 0
    Очень доходчиво, благодарю!
    1. Александр К 25 августа 2020, 09:23 # 0
      Спасибо, как раз ходьбу пытался разобрать недавно. Пробовал в разных программах, там инструмент кости, но проблема то что программы в основном не на русском, пробовал в Abode Animate 2019 он на русском, но все равно фотошоп ближе, чем больше стараешься использовать вроде как специальные программы для анимации, тем больше понимаешь что лучше всего фотошоп), в котором вроде как функция анимация это только дополнение.
      1. Дмитрий 25 августа 2020, 09:23 # 0
        Персонажную анимацию я предпочитаю делать в After Effects + плагин Duik, там как раз по косточкам всё и принцип создания такой же как я описал про фотошоп, только удобнее в разы. Правда на счёт языка — там английский.
      2. Profit Online 25 августа 2020, 09:25 # 0
        Дмитрий, нужна консультация/помощь! Такая вот проблема, в Фотошопе, создаю и затем сохраняю gif файл, а потом не могу его редактировать — висит замочек. Может, что при сохранении надо сделать?
        1. Дмитрий 25 августа 2020, 09:26 # 0
          Если у вас анимация, сохранённая в гиф, а не просто изображение, то она должна открываться в фотошопе сразу кадрами, т.е. в панели слоёв должно быть много слоёв-кадров. Если открываете простую картинку в гиф формате, а не анимацию, то один слой будет. Замочек (блокировка) снимается простым кликом по нему левой кнопкой мыши. Может у вас не гиф-анимация просто, а картинка в гиф формате?
          1. Profit Online 25 августа 2020, 09:27 # 0
            да, именно статичная картинка
        2. Сергей Васильевич Кондулуков 01 ноября 2020, 20:13 # 0
          Автору большое спасибо. Сейчас анимирую персонажа в Афтере по референсу. Но персонаж у меня получается какой-то больной и однобокий. Принципы анимации в Фотошопе и Афтере совпадают. Только в Афтере ещё есть Дьюик.
          7009
          Посмотреть видео-урок Смотреть видео-урок Скачать исходники урока Скачать исходники урока