Создание в фотошопе циклической анимации бега. Часть I. в фотошоп

сделать закладку в соцсетях

Сложность урока: средняя
Продолжительность: увеличенная


(то, что мы будем создавать)

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

1. Подготовка основы
Прежде всего, нас интересуют позы, которые животное принимает при беге. Если мы не знакомы с его анатомией, то можно воспользоваться каким-либо наглядным пособием. И здесь начинаются проблемы. Большая часть высококачественного видео с бегущим животным, особенно замедленное, снимается только для наиболее популярных видов. Допустим, нам повезло, и у нас есть такое видео. Но вот незадача, оно снято с совершенно неприемлемого ракурса… Впрочем, если вам не интересно это введение с теорией, пропустите его и приступайте сразу к практической части урока.

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

Наверное, второй пункт следует немного пояснить. Давайте обратимся к философии бегового цикла. Вращающееся колесо идеально подходит для перемещения в пространстве: оно вращается постоянно, равномерно, без пауз, увлекая за собой какой-либо связанный с ним объект. Животные не имеют колес, и если бы они вдруг решили использовать для перемещения описанный выше принцип, то это выглядело бы примерно так:



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



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



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



Самое важное заключение, которое мы можем сделать из всего сказанного выше, это то, что любое движение состоит из определенного набора фаз. То есть фазы (1) – отталкивание от пола, и фазы (2) – когда лапа поджимается под себя. Бег состоит из последовательности толчков, и моментов, когда конечность отрывается от пола, перемещаясь ближе к корпусу. Это необходимо, что бы конечность достигла какой-то точки впереди и в следующий раз оттолкнулась уже от нее. Вот так и работает беговой цикл.

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



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



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



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

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




(туловище находится в постоянном движении, и голова как будто постепенно смещается назад)

Теперь, когда мы получили представление как это работает, мы можем воспользоваться любым наглядным фото, и приступать к созданию нашего бегового цикла. Желательно подобрать фото с исходной позой. Затем следует определиться с походкой животного (то есть в какой последовательности конечности перемещаются, и как при этом располагаются относительно друг друга). Фото, может быть примерно вот такого качества:



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



Позу нужно подогнать под плоское основание. После этого изображение с примером нам больше не понадобится!



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



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


(если все понятно, то можно приступать к анимации)

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



Шаг 2
На этом этапе лучше всего использовать Illustrator, но если у вас с этим проблема, то вполне можете использовать и Photoshop. Все зависит от степени вашего владения векторными инструментами.

Итак, создайте новый файл (Control-N), и вставьте на него набросок исходной позы. Уменьшите Непрозрачность (Opacity) наброска до 20%. Для этого достаточно нажать клавишу 2 при активном инструменте Перемещение (Move Tool (V)).



Шаг 3
Нарисуйте векторными фигурами еще один эскиз. Овалы можно рисовать инструментом Эллипс (Ellipse Tool), линии – инструментом Перо (Pen Tool). Цвет не имеет значения, выберите любой понравившийся вам. Нарисуйте лапы целиком, и не важно, какая часть каждой лапы будет, на самом деле, видна при данной позе.
Почему именно векторные фигуры? Они сохраняют свое качество при трансформировании (повороте, изменении размера). Кроме того, их легко модифицировать.



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



Шаг 5
Продублируйте созданную группу (Duplicate (Control-J). Эта группа станет вторым кадром. Уменьшите Непрозрачность (Opacity) первого кадра до 20%.



Шаг 6
Подкорректируйте положение элементов во втором кадре, так, чтобы получилась следующая фаза движения. Чем меньше изменений будет в каждом кадре, тем плавнее получатся движения, и тем кропотливее будет процесс анимации. Кроме того, это добавит вам работы при окрашивании.



Шаг 7
Отключите видимость первого кадра и повторите шаги с 5 по 7, заканчивая весь цикл движения. Вот что примерно должно получиться:



Шаг 8
Прежде чем продолжить работу, нужно протестировать созданную анимацию. Пройдите в меню Окно > Шкала времени (Window > Timeline) и откройте редактор анимации. Затем кликните по кнопке “Создать временную шкалу для видео” (Create Frame Animation)



Шаг 9
Включите отображение всех слоев. Выделяя каждый из них по отдельности, кликайте по нему ПКМ и выберите в открывшемся контекстном меню пункт Преобразовать в смарт-объект (Convert to Smart Object). Таким образом вы получите возможность модифицировать каждую группу, при этом фотошоп будет воспринимать их как единые слои. Вот как должны выглядеть ваши группы:



Шаг 10
Откройте меню шкалы времени и выберите пункт Создать кадры из слоев (Make Frames From Layers) (1). Задайте цикл – Бесконечный (Forever) (2) и Задержку (Delay) (3) – другое > 0.07. Выделите все кадры.
Нажмите Пробел, чтобы увидеть тестовую анимацию. Возможно, в зависимости от количества кадров, вам придется немного подкорректировать величину задержки.



Шаг 11
Внимательно понаблюдайте за анимацией. Где не хватает плавности движений? Почему так получилось? Возможно в какой-то момент, там где лапа должна перемещаться вверх, она, почему-то резко идет вниз. Выявив допущенные ошибки, дважды кликните по нужному слою – смарт-объекту, чтобы открыть диалоговое окно. Внесите необходимые изменения, сохраните и вернитесь к просмотру анимации. При сохранении внесенные изменения автоматически вступят в силу.
Уделите побольше времени данному шагу. Если что-то будет не так со скелетом, вся дальнейшая работа может оказаться напрасной. Выявите и устраните все, даже самые незначительные ошибки.



2. Деформация тела и мускулатура

Шаг 1
Настало время добавить формы тела. Чтобы сохранить структуру кадров, мы сделаем это в виде отдельных фрагментов, пригодных к многократному использованию. Я снова советую использовать здесь Illustrator, но это – дело опыта и личных предпочтений.
Откройте первый кадр – смарт-объект и уменьшите его Непрозрачность (Opacity) до 20%. Добавьте на скелет следующие формы в соответствии с упрощенной мускульной схемой. Для того, чтобы фигуры оставались редактируемыми, используйте инструмент Перо (Pen Tool) в режиме Слой-фигуры. Снова группируйте локальные части, присваивая им соответствующие значения. Затем поместите их все в одну общую группу. Сохраните файл и вернитесь к анимации, не закрывая его.



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



Шаг 3
Уменьшите Непрозрачность (Opacity) слоя со скелетом до 20% и трансформируйте фигуры скопированной группы в соответствии с позой. Иногда для этого достаточно лишь слегка повернуть их, но в других случаях вам придется существенно изменить их форму, особенно в тех частях тела, которые сильно изгибаются вовремя бега. Повторное использование одних и тех же форм, образующих туловище, позволяет сделать движение максимально равномерным и естественным. А если бы мы каждый раз перерисовывали все заново, то целой серии ошибок было бы не избежать.
Повторите шаги 2 и 3, прорабатывая, таким образом, все остальные кадры. Протестируйте анимацию и выявите допущенные ошибки.



Шаг 4
Далее нам предстоит нарушить созданную анимацию. Но причин беспокоиться нет, все под контролем! Откройте меню шкалы времени и выберите пункт Удалить видео (Delete Animation). Настало время заняться более спонтанным по сравнению со скучным прорисовыванием тела векторными фигурами, творчеством.

Прежде всего изменим размер изображения (Control-Alt-I) на максимально возможное. В моем случае это 7000x3500 пикселей. Возможно, в зависимости от производительности вашего компьютера, вам придется использовать меньший размер. Больший размер позволит вам более тщательно проработать детали, и, в то же время, заметно замедлить вашу анимацию. На финальное разрешение данная операция не повлияет, так как в данном случае это всего лишь увеличенное рабочее пространство.

Шаг 5
Создайте новый слой (Control-Shift-Alt-N) над первым кадром. Выберите жесткую кисть с Жесткостью (Hardness) и Непрозрачностью (Opacity) 100%, и прокрасьте тело гепарда. Чтобы упростить себе задачу можете сначала обвести контур, а потом просто залить остальное пространство при помощи инструмента Заливка (Paint Bucket Tool). Используйте векторные фигуры в качестве направляющих, но всегда учитывайте особенности строения тела гепарда. На этом этапе не обязательно особенно тщательно прорабатывать голову. Достаточно просто обозначить ее позицию.

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

Если вы заходите протестировать анимацию на данном этапе, сохраните работу как отдельный файл, удалите все смарт-объекты и создайте новую анимацию скелета.



Шаг 6
- Перетащите каждый силуэт под соответствующую направляющую и уменьшите его Непрозрачность (Opacity) до 20%.
- Выделяя слои-фигуры, нажатием Control-Alt-G создайте обтравочные маски, избавляясь от участков, где кисть случайно вышла за пределы эскиза.
- Выделите оба слоя (силуэт и соответствующую фигуру) и нажатием Control-E объедините их. С этого момента вы больше не сможете изменять векторные фигуры, поэтому, чтобы сохранить их редактируемую версию, сохраните этот файл под другим названием.





Шаг 7
Нажмите Control-R, чтобы включить отображение линейки. Теперь расставьте направляющие линии, определяющие уровень головы и спины. Так вы сможете контролировать правильное расположение кадров относительно друг друга. При необходимости незначительного смещения направляющих, воспользуйтесь клавишами с соответствующими стрелками, активировав инструмент Перемещение (Move Tool (V)).



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

Создайте новый файл и нарисуйте эскиз головы гепарда. Детали здесь не очень важны. Гораздо важнее правильная общая ее форма. Нажатием Control-I инвертируйте цвета, так чтобы можно было использовать однотонный фон. Сохраните файл.



Шаг 9
Скопируйте и вставьте голову на свой рабочий документ. Преобразуйте ее в смарт-объект и, активировав Свободную трансформацию (Ctrl+T), подгоните ее размер и положение под первый кадр. Далее повторите процесс для каждого следующего кадра. Придерживайтесь положения, обозначенного ранее, иначе голова будет скакать с места на место в каждом кадре. В этом вам должны помочь направляющие линии:



Шаг 10
При помощи инструмента Ластик (Eraser Tool) избавьтесь от головы, нарисованной ранее на слое-фигуре. Здесь же, при помощи кисти, можно немного размыть образовавшийся переход между головой и шеей. Закончив это, объедините каждую голову с ее соответствующим телом.

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



Шаг 11
С этого момента каждый добавляемый новый слой будет нарушать анимацию. Чтобы этого избежать, нам нужно вытравливать каждый из них на соответствующем слое с силуэтом. Для этого используется сочетание клавиш Control-Alt-G.

Обратимся к мускульной схеме кошачьих. Подберите для этого наглядный образец. Мускулатуру придется соответствующим образом деформировать. Основная проблема здесь состоит в том, что мышцы очень эластичны, и изменяют свою форму и положение по очень сложной траектории. К счастью, мы можем воспользоваться здесь очень эффективной опцией – режимом Деформация (Warp) инструмента Свободная трансформация (Ctrl+T). Всех проблем это, конечно, не решит, но процесс заметно ускорится без значительно ущерба для качества прорисовки.

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



Шаг 12
Скопируйте и вставьте этот рисунок над следующим слоем. Вытравите его и активируйте Свободную трансформацию (Ctrl+T). Теперь кликните по иконке Деформация (Warp) на панели опций в верхней части окна программы. Деформируя сетку, придайте мускулам нужное положение. Возможно, вам придется подтереть некоторые участки, а некоторые дорисовать вручную. Это наиболее действенный метод в подавляющем большинстве случаев. Постарайтесь не растягивать сильно мышцы лап – они должны точно следовать расположенному ниже силуэту и не могут значительно изменять свой размер в процессе дижения.



Шаг 13
Повторите шаг 12 для каждого кадра. Если вы все сделаете правильно, мускулы будут плавно перемещаться в процессе движения. Пусть вас не смущают резкие линии, это всего лишь набросок.



Шаг 14
Повторите шаги 11-13 для задней ноги и холки. Закончив с этим, объедините слои с мышцами с соответствующими кадрами, освобождая некоторое пространство на палитре слоев – оно нам еще понадобится! Кроме этого, если вы использовали белые линии, инвертируйте их в черные (Control-I).


Создание в фотошопе циклической анимации бега. Часть I.
сделать закладку в соцсетях