Иллюстрация под моушн дизайн и анимацию

Проверить цветовое пространство RGB, не CMYK. Это первое что нужно сделать при создании проекта. Бывает вообще у всех и каждого, независимо от опыта. Как это происходит не понятно до сих пор, каким-то магическим образом иногда проект сам создается в CMYK. Стоит просто глянуть рядом с названием проекта.

Рисовать все части элементов/персов. Очень часто можно наблюдать такую картину. В статике это ок, но когда мы начинаем двигать (расставляем слои по глубине, например) получается не очень. Моушены могут дорисовать часть сами, но нарисуют как смогут, в своем стиле и очень маловероятно что этот стиль совпадет со стилем иллюстратора.

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

3. Разбивать на слои структурно. Старайтесь разбивать объекты на слои — голова со всем что к ней относится в одном слое, кисть с пальцами в другом и так далее. Мы тратим на этот процесс очень много времени, потому что, мы не знаем где что лежит у вас в проекте, где его искать. Применимо ко всем объектам (UI, окружения, все что вы только не придумаете). Еще это ситуативно и зависит от задачи (на картинке ниже нужно было разбить правую руку), главное чтобы слои назывались понятно.

Да! Части тела стоит называть так как они и называются независимо от ракурса и поворота перса. Классика когда перс стоит к нам лицом и правая рука называется левой и т.д.). — Но она же слева от нас!, — может кто-то сказать, — так же понятнее. Это нужно чтобы при развороте перса, например, левая рука не стала называться “Правой”.

4. Не юзать compound path, clipping mask, все что содержит слова compound и clipping...Это вообще изобретение дьявола — его нельзя нормально экспортировать, нельзя перевести в обычный вектор, нельзя вообще ничего сделать! Просто не используйте это, пожалуйста! А если используете, то при передаче постарайтесь сделать так чтобы этого не было.

5 минут Карл! Столько мне понадобилось чтобы справится с Compound path. Без него это делается секунд за 10

5. Скидывать шрифты которые используются в иллюстрации/дизайне. Понятно зачем.

6. Переводить текста в fill и оставить(!) редактируемую копию, чтобы можно было исправить текст при необходимости. Переводить нужно по нескольким причинам. Первая: текстовый слой не всегда экспортируется корректно (рулетка, бывает не везет). Вторая: лично я анимирую текст через шейпы, стандартными текстовыми аниматорами не пользуюсь, у них есть много ограничений. Оставлять слой текста стоит на случай если нужно будет изменить текст, поменять шрифт и т.п.

7. Удалять пустые слои — бывает такое что из 10 слоев, 2–3 ничего не содержат. Я наблюдал как работают иллюстраторы, с какой скоростью они создают новые слои и прыгают между ними, поэтому понимаю что бывает сложно уследить где что рисуется. Просто это странно, когда после экспорта в АЕ, мы видим path которые состоят из одной точки или вообще пустые. Дело в том что каждый слой, даже если он пустой, в АЕ создает своеобразную группу — чем их больше, тем сложнее ориентироваться в одном только слое, поэтому чем чище там, тем проще работать.

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

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

10. Не читерить с эффектами. Бывает иллюстраторы делают какую-то магию с эффектами, которую аниматорам потом стоит разгадать. Мы не так хорошо знаем Illustrator. Keep it as simple as possible.

Слева — картинка в Illustrator, справа — картинка в AE после импорта. Разница между этими картинками заключается вооон в той галочке обведенной красным (игнорит Opacity каждого отдельного слоя в группе, если что), уверен даже не все иллюстраторы про неё знают. К сожалению AE не так умён, поэтому приходилось заходить в каждый кружочек и редактировать так чтобы было похоже

11. Если это изометрия — используйте встроенный 3D эффект и оставляйте изомметричные объекты во фронтальном виде. Мы повторим тот же угол поворота в АЕ. Это нужно чтобы при движении камеры, изометрия выглядела правильно. С персами немного сложнее, их можно рисовать сразу в изометрии. Но если предполагаются сложные движения (разворот), стоит еще нарисовать линейку разных ракурсов перса.

12. Не делать “Expand” строука в филл — в АЕ гораздо удобнее анимировать пасс из трех точек, нежели из 20. Наверное, так делают когда нужно сохранить в какой-нибудь svg. Лучше сохраняйте отдельную версию под экспорт (поверьте, вас это тоже может спасти).

13. Не юзать фигурные строуки — АЕ пока что не умеет в фигурные строуки, поэтому переводит их в обычный. Т.е. тот вид который вы задаете фигурными строуками все равно потеряется.

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

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

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

Так скоро будут советы моушен-дизайнерам по ведению проектов в АЕ так, чтобы они были понятны другим людям при передаче, быстро работали и красиво выглядели:) Подписывайтесь, будет полезно!

Автор: Vlad Zhelikhovskyi