Анимированные стикеры. How-to. Часть 1

Всем привет! В этом цикле статей хочу поделиться своим опытом создания анимированных стикеров для Телеграма (хотя все эти принципы работают и для ВК, и для Одн..тьфу-тьфу..да и в целом для мобильной lottie-анимации). Отличие lottie-анимирования от другой анимации расскажу позже, в следующей статье.

Идея 💡

Я начинаю стикер со скетча. Рисую в Procreate. Как референсы можно использовать гифки с Tenor или Giphy, искать идеи на Pinterest’е. Бывает заглядываю на сайты с мемами, например, Memepedia или похожие. Очень клевые идеи можно ловить в мультиках, там весьма высокая концентрация эмоций. В целом очень важна насмотренность, она сформируется со временем.

Так же стараюсь наделять своего персонажа каким-то характером и индивидуальными особенностями. Например, у меня хорек очень шустрый и гибкий, а резиновая собачка может изменять свою форму. Да и вообще стараюсь наделять пак некоторой "фишкой", а не просто делать персонажа с эмоциями, которые в принципе могли бы быть у любого другого маскота. Это может быть ностальгическая тема (1 или 2), медицина или спорт. Все это разнообразит эмоции, да и придумывать каждую сцену будет гораздо проще и интереснее. По моему скромному мнению, старайтесь избегать заезженные сюжеты, типа плачущего в луже собственных слез или тысячный стикер на мем “It's fine”. Меньше шаблонности,  больше юмора, не бойтесь гипертрофированности.

Иллюстрация ✏️

Итак, эскизы готовы. Далее я перехожу к отрисовке персонажа в Adobe Illustrator.

• Стикер должен быть квадратным, общепринято делать 512x512 px (хотя мы же понимаем, что это вектор и знаем про его масштабируемость). Следовательно создаю новый документ с такими же размерами и RGB-цветовым режимом. Весь стикерпак я рисую в одном файле, используя только разные арт-борды. Так я всегда вижу набор как целую картину и легко использую уже готовые элементы персонажа.

• Можно рисовать прямо по скетчу, используя обычную кисточку (B) или карандаш (N). А можно юзать pen tool (P), кто как привык. Для корректного экспорта в After Effects - чтобы линия оставалась там линией, а не шейпом (объектом), кисть должна быть только Basic. Ширина линии (stroke width) для стикеров у меня обычно 4-5px.
• Очень полезный инструмент при рисовании "от руки" - Join tool, который помогает закрывать контур. Использую часто, повесил шорткат на (J).

• Так же рекомендую использовать Alt (Option на маке) при работе с кистью - помогает сглаживать контур.

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

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

Что касается точек, то это весьма важный вопрос при анимации стикеров, от них зависит вес файла (про требования непосредственно к стикерам расскажу в следующей статье). Поэтому нужно стараться минимизировать их количество. Лично я постоянно пользуюсь мегаудобным инструментом от Astute Graphics - Smart Remove Brush Tool, но можно юзать и стандартный Object - Path - Simplify.

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

• Так же советую автоматизировать самые частые операции, создав для них Actions. Например, у меня это отражение по X и Y-осям и Expand. А еще с помощью экшнов я автоматизировал процесс создания теней. Вот так выглядит мой пресет Expand+ :

Таким образом, я создаю копию объекта (форма, состоящая из заливки и обводки). После чего помещаю ее наверх (paste in front), разбираю на составляющие (expand) и удаляю все части объектов, которые являются скрытыми(trim). У меня получается заливка, границы которой заканчиваются до прежней обводки, обводка, которая стала объектом (далее я ее удаляю), а также остается прежняя форма в первоначальном виде. Далее я просто двигаю, одновременно копируя, зажав alt новообразовавшуюся заливку и с помощью инструмента Shape Builder (Shift-M), зажав опять же alt, отрезаю лишнее. Таким образом, получается идеально подогнанная к краю тень. Звучит все это как-то архисложно, но вы просто посмотрите видео ниже, это просто песня:)

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

Stay tuned!