Создание анимированных стикеров для Telegram: наш первый опыт

Мы в ICU регулярно создаем полезный контент для наших подписчиков в соцсетях. А вот развлекательный не так часто. Немного подумав, как можно побаловать нашу аудиторию, приняли решение сделать стикеры для Telegram. Мы прокачаемся в анимации персонажей, а подписчики получат необычного героя в свои эмодзи-коллекции. Делимся, как это было, для тех, кто решит запилить свой стикерпак (ссылка на скачивание будет в конце).

Этап 1. Составляем список первых эмоций

Погружаясь в тему стикеров, наткнулись на пост про самые популярные эмодзи в разных городах России от ВК. Проанализировав его, увидели, что чаще всего встречаются «сердечко/влюбленный», «смех», «большой палец». Также в списке присутствовали «огонь», «в солнечных очках», «клевер». В итоге, все эти эмодзи решили включить в стартовый набор, кроме "клевера".Итого с пятью определились, но до уровня пака этого количества маловато.

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

Желание удивить коллег только добавило фана в процесс, ведь теперь это уже не просто кейс, а полноценный заказ на любимую эмоцию. Так, по стикеру «В огне» пришлось даже немного забрифовать коллегу, что придало созданной эмодзи более персональный окрас.

Этап 2. Выбираем образ

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

а) Выбрать характер героя.

При поиске удачного характера мы шли от ценностей, применяемых в агентстве.

1. Открытость — персонаж должен быть позитивным, эмоциональным и много всего пробовать.
2. Амбициозность — делаем героя смелым, даже дерзким.
3. Структурность — решили добавить сосредоточенность, хотя признаемся в конечном варианте, герой проявляет эту ценность меньше всего, т.к. важнее стало сделать более выразительный образ.

б) Выбрать эстетику иллюстрации.

Здесь мы шли от принципа «такого мы не видели». Провели небольшое изучение, текущих стилей в ТГ. Что выделили:

• насыщенные и яркие цвета
• милота доминирует
• мультяшный дутый стиль
• образы редко детализированы

Чтобы быть понятными массовой аудитории, мы остались в рамках мультяшек, но в визуле пошли против системы: выбрали своей эстетикой американские мультфильмы 30-50х годов от Fleischer Studios, Disney и недавнего Cuphead. Где атмосфера странности и даже безумия пропитывала каждый кадр.

в) Определить пластику и детализацию персонажа.

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

г) Определить узнаваемый элемент в образе.

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

Этап 3. Разрабатываем сюжеты для эмоций.

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

После генерации идей начали отбирать их по следующим принципам:

• иногда должна появляться одежда
• внедрить разные позы: сидение, лежание, стояние
• внедрить разные ракурсы: профиль, анфас, 3/4 и пр.
• комбинировать простые сюжеты с неожиданными
• сюжеты, где герой не ключевой объект
• комбинировать малоподвижные ситуации с интенсивными
• вся анимация должна быть зациклена без заметных склеек
• помещается в 3 сек, заложенные техническими требования сервиса

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

Этап 4. Оживляем нашего героя.

На продакшене сначала отрисовали все позы и состояния в Illustrator, а потом долго и упорно анимировали в After Effects.

Какие тут советы можно дать:

1. Все телодвижения героя и одежды мы построили на перемещении точек кривых (Path), а движения объектов вокруг на простейших функциях Position, Scale, Rotate. Отсюда рекомендация: когда создаете объект типа щупальца/лента/веревка, создавайте минимальное количество точек в кривой, иначе вы устанете перемещать их при простейшем изгибании.
2. При организации слоев в Иллюстраторе не нужно все элементы до мельчайших разносить на разные слои. Разбивка нужна, но логически верная. Например, глаз состоящий из века, белка и зрачка, можно поместить на один слой «Глаз». В After Effects есть возможность контролировать форму каждого из трех объектов.
3. Некоторые переходы могут выглядеть неточными в деталях, но тестируйте анимацию на той скорости, на которой ее будут видеть зрители. И если огрех незаметен, и непонятно, как это быстро исправить, то смысла в такой детализации нет. Когда анимации готовы, переводим их с помощью специального плагина для After Effects в формат для Telegram, настраиваем бота и готово!

Стикерпак в студию

Возможно, кто-то скажет «это же обычный стикерпак в телегу, камон! зачем целая статья?». Но оказывается такого контента нет в вебе, и мы очень хотели бы такой гайд, чтобы понимать, насколько это трудозатратный и технически сложный путь. Оказалось, все реально даже в первый раз.

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