Как правильно готовить персонажа под анимацию, чтобы никому не было больно

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

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

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

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

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

Но помните! Лучше переразложить, чем недоразложить.

Подготовка

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

На правильном дизайне история не заканчивается. Персонаж продуман и нарисован, и теперь его нужно подготовить для анимации в технике перекладки. Никакого CMYK, только RGB!

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

Здесь необходимо сделать оговорку. У аниматора есть разные инструменты для создания рига персонажа. Некоторые используют плагины, чтобы создать инверсную кинематику (Duik, Character tool, Rubber hose, и т. д.). Есть хардкорные типы, которые делают всё вручную, обходясь без инверсной кинематики. Но про таких давайте не будем.

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

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

Чтобы заанимировать персонажа в After Effects, аниматор будет делать риг, то есть создавать условный скелет, настраивать взаимосвязи и привязки частей. Скорее всего, он будет использовать плагины, например Duik или Rubber hose. Для рига лица, к примеру, отлично подходит Joystik’n’sliders.

Главное, что нужно понимать иллюстратору:

1. Всё, что должно двигаться, должно находиться на отдельном слое.
2. Части конечностей персонажа (плечо и предплечье или голень и бедро) должны заходить друг на друга внахлёст, образуя идеально ровную окружность в месте своего соединения (окружность в локте и окружность в колене).
3. Критически важно правильно определить центры (anchor points) всех окружностей, лежащих в основе всех суставов. Это касается не только коленей и локтей, важно найти центры для запястья, щиколотки, головы и туловища. Аниматор чаще всего работает в условиях горящих сроков, поэтому пожалейте его. Если он будет тратить время на поиск центров окружностей, чтобы правильно расположить якорные точки (anchor points), то, скорее всего, сделает это на глаз, а персонаж в итоге получится кривым.
4. Если какой-то части персонажа не видно на стилшоте, например его рука находится в кармане, это не значит, что можно не рисовать эту часть. В анимации персонаж вытащит руку из кармана, и всем будет неловко.
5. Название файла должно быть максимально коротким. Если путь к иллюстрации превышает 260 символов — у моушен-дизайнера могут возникнуть сложности при открытии файла.

Это пять главных правила клуба. Дальше предлагаю погрузиться в детали и нюансы процесса.

Начало

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

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

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

Гайды для аниматора

Сделайте отдельный слой с гайдами для аниматора и поместите его в самом верху в иерархии слоёв (назвать его можно «Guides»). Чтобы конечности вращались корректно, аниматору нужно правильно выставить якорные точки (anchor points) в местах сочленений суставов. Эти точки — центры окружностей, которые скругляют суставы. Гораздо проще и быстрее нарисовать эти центры в иллюстраторе и поместить их на отдельный слой, чем аниматору искать их заново и выставлять с нуля.

Рука

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

1. Плечо
2. Предплечье
3. Кисть
4. Пальцы, каждый на отдельном слое (если они вообще есть в дизайне персонажа)

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

Небольшое отступление про одежду:

Рукав футболки — часть слоя с плечом. Так внутри одного слоя будет плечо и рукав. Если есть задача менять персонажу одежду, то части одежды (рукав на плече, рукав на предплечье, одежда на туловище, отдельные детали (капюшон, если есть, и прочие) должны располагаться на отдельных слоях.

1. Плечо. Скругление в локте. Если у тела героя нарисованы плечи, то со стороны примыкания к телу можно оставить ровный обрез. Если стилистика подразумевает обводку, то на линии этого среза обводки быть не должно. При этом важно найти правильный центр и у примыкания к телу, и у примыкания к предплечью.
2. Предплечье. Скругление в запястье. В локте остаётся ровный срез. Если стилистика подразумевает обводку, то на линии этого среза обводки быть не должно. При этом важно найти правильный центр и у примыкания к плечу, и у примыкания к кисти.
3. Кисть. В месте соединения с предплечьем нужно оставить ровный срез. Если стилистика подразумевает обводку, то на линии этого среза обводки быть не должно.

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

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

1. Рисуем окружности в центрах соединения частей конечностей. Если нужно, используем направляющие, чтобы точно попасть в центры.
2. Каждую из окружностей дублируем. В итоге у нас получится по 2 окружности в каждом месте сочленения суставов. Верхние окружности нужно уменьшить (каждую от своего центра) и покрасить в контрастный цвет.
3. Создаём новый слой и переносим на него уменьшенные окружности. На этом слое будут храниться все точки, обозначающие центры соединения суставов. Он нужен для аниматора, сейчас его можно скрыть.
4. Выделяем предплечье и окружность со стороны примыкания к кисти. Объединяем с помощью Pathfinder.
5. Со стороны локтя нужно оставить ровный срез. Если есть обводка, то на срезе её нужно удалить.
6. То же самое проделываем с плечом. Скругление будет в локте, ровный срез в месте примыкания к плечу.

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

Нога

Нога должна делиться на 4 основные части:

1. Бедро
2. Голень
3. Стопа (пятка)
4. Стопа (носок)

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

Тело

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

Попа

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

Лицо

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

Про детали раскладки для анимации:

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

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

Детали волос (чёлка, хвост, определённые пряди, пучок и прочее) должны находиться на отдельных слоях.

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

В основном, нужно нарисовать гласные звуки (А/Я, Е/Э, И/Ы, О/Ё, У/Ю) и некоторые согласные, требующие специфического положения рта (В/Ф, Б/М/П, Л, Н, Г/К/Х, Ж/Ш/Щ). Качество подготовки ассетов рта персонажа к анимации опять же зависит от стилистики. Иногда достаточно нарисовать рты и положить каждый на отдельный слой. В анимации они будут сменяться прямой склейкой, получится что-то в стиле «Саус Парка» или «Робоцыпа». Если это оправдано общей стилистикой, то всё супер. Но если вся анимация должна быть плавной, то рот необходимо разложить на составляющие части: зубы, язык, полость рта, маска, повторяющая шейп полости рта.

Эффекты и маски

Некоторые эффекты внутри иллюстратора лучше отключить. Например, это касается ситуации, когда стилистика персонажа подразумевает использование эффекта Roughten для создания более живой, дрожащей линии. Аниматор воссоздаст его внутри AE с помощью внутренних эффектов программы (Turbulent displace). То же самое касается эффектов блюра, падающих теней, свечений и прочего. Важно всё это отключить именно в подготовленном для анимации файле. При этом аниматор должен видеть стилшот, на котором все эти эффекты включены, чтобы корректно воссоздать их в AE.

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

Правильное название для слоёв:

Называть следует всегда латиницей.

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

Так называются кости в плагине для создания рига DUIK:

• Слой с гайдами — 01. Guides
• Кисть правой руки — 02. Hand_R
• Предплечье правой руки — 03. Forearm_R
• Плечо правой руки — 04. Arm_R
• Голова — 05. Head
• Тело, верхняя часть — 06. Torso Upper
• Шея — 07. Neck
• Таз — 08. Hips
• Тело, нижняя часть — 09. Torso Lower
• Стопа правой ноги — 10. Foot_R
• Пальцы правой ноги — 11. Toes_R
• Голень — 12. Calf_R
• Бедро — 13. Thigh_R
• Стопа левой ноги — 14. Foot_L
• Пальцы левой ноги — 15. Toes_L
• Голень левой ноги — 16. Calf_L
• Бедро левой ноги — 17. Thigh_L
• Кисть левой руки — 18. Hand_L
• Предплечье левой руки — 19. Forearm_L
• Плечо левой руки — 20. Arm_L

У каждого моушен-дизайнера есть свои правила в наименовании слоев. Кто-то называет тело «Torso», кто-то — «Body». Невозможно идеально попасть в стиль каждого моушен-дизайнера, но главное, что надо усвоить — названия должны быть понятными, без мата, неуместных шуток и дезинформации.

В своей работе я привык сокращать названия. Например, слой с кистью правой руки персонажа я называю R_Wrist. Это трансформировалось в R_WR.

Из нюансов восприятия

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

Ох уж эти лайны

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

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