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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0
21 комментарий
Написать комментарий...
Юрий Климов

очень классно у вас получилось!

Ответить
Развернуть ветку
ICU
Автор

Юрий, спасибо☺️

Ответить
Развернуть ветку
Юрий Долгоруков

мне почему-то ваш стикрепак сразу напомнил Плуто, если бы он был осьминогом

Ответить
Развернуть ветку
ICU
Автор

Юрий, мы даже не задумывались об этом, пока создавали стикеры, но да, что-то схожее в них есть:) Спасибо за наблюдение🙃

Ответить
Развернуть ветку
Кибер Мастера

Знатно заморочились!

Ответить
Развернуть ветку
ICU
Автор

Это точно😅 Нам было очень интересно!

Ответить
Развернуть ветку
Семен Дудник

выглядит вполне не плохо)

Ответить
Развернуть ветку
ICU
Автор

Спасибо🙌🏻

Ответить
Развернуть ветку
Алена Закодякина

Прикольно получилось. Мне такое по душе)

Ответить
Развернуть ветку
ICU
Автор

Алена, спасибо! Сохраняйте стикерпак и пользуйтесь😉 У нас в планах постепенно пополнять его и другими стикерами, так что стикерпак будет становиться разнообразнее⚡️

Ответить
Развернуть ветку
Невероятный Блондин

Ну стикеры еще ладно

А вот создателей анимированных эмодзи надо убивать. Дважды.

Ответить
Развернуть ветку
Igor Batkovich

Стикеры уже Midjourney клепает. Хрен убёшь её)

Ответить
Развернуть ветку
ICU
Автор

Ребята, давайте жить дружно!😜

Ответить
Развернуть ветку
Zinaida Kovrova

Спасибо, что поделились..вопрос, можно интерактивный стикерпак вставить в телегу?

Ответить
Развернуть ветку
ICU
Автор

Добрый день! Рады, что информация была полезна🙌🏻 Насколько мы знаем, стикерпак может быть анимированный, как наш, а вот эмодзи можно загружать интерактивные✨

Ответить
Развернуть ветку
Zinaida Kovrova

Офигеть! Точно эмоджи интерактивные! не замечала, пока ещё не стикерпак..это пока..

Ответить
Развернуть ветку
Анастасия Гнатюк

Здравствуйте! Не смогла найти никакой информации по созданию и загрузке интерактивных эмодзи( Не подскажете маршрут?

Ответить
Развернуть ветку
Tric Gor

типичный офисный работник

Ответить
Развернуть ветку
ICU
Автор

У нас в планах постепенно пополнять стикерпак, так что он будет становиться разнообразнее⚡️

Ответить
Развернуть ветку
Михаил Нежник

Классно, захотелось самому даже попробовать сделать 😌😌😌

Ответить
Развернуть ветку
ICU
Автор

Михаил, спасибо😍 Обязательно попробуйте, это было очень увлекательно!

Ответить
Развернуть ветку
18 комментариев
Раскрывать всегда