Инструкция: как сделать анимированные стикеры в Телеграме

Привет! Меня зовут Дарья Алёхина, я дизайнер в Friflex. Недавно мы запустили наши первые фирменные стикеры в Телеграме. Делюсь опытом – как это сделать.

Стикеры – это визуальный инструмент коммуникации. Картинка понятно и быстро выражает эмоции собеседника. Современные пользователи соцсетей привыкли общаться через эмодзи и стикеры.

Стикеры компании – это и элемент для общения внутри коллектива и за его границами. Это и имиджевый инструмент. Корпоративные стикеры можно использовать не только в Телеграме, но и в айдентике и элементах фирстиля. Итак, что нужно сделать, чтобы создать стикерпак для компании?

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

Персонаж Friflex – панда – дружелюбная, добрая и умная. Милая панда отражает нашу философию – гибкая и дружелюбная разработка цифровых решений. Мы говорим об ИТ на простом языке, не прикрываемся кипой бумажек, от ТЗ до релиза и дальнейшей поддержки идем с клиентом в очень доверительных отношениях.

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

После того, как персонажи есть на бумаге, нужно перевести их в вектор. Сфотографируйте набросок и поместите его в векторный редактор. Я работаю в Adobe Illustrator. Далее обведите все основные линии. Советую соблюдать нейминг в слоях, объединять в группы отдельные части тела со всеми составляющими. Так работа пойдет гораздо быстрее. К тому же, это понадобится нам в будущей анимации. Определитесь с цветовой палитрой. Добавьте деталей в виде бликов и теней, но не перегружайте своего персонажа. Помните о том, что стикеры в наборе будут в миниатюре. Чем больше элементов, тем сложнее будет их анимировать, к тому же, стикер будет большой по весу и Телеграм не опубликует его.

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

Только после этого можно закидывать наш файл в AE. Открываем AE, выбираем New Composition и дальше выставляем настройки, как у меня.

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

Загружаем наш AI файл, просто перетянув его в After Effects. В открывшемся окошке выбираем Composition/Document size.

Изначально слои сохранены в формате AI. Для того, чтобы мы могли работать с точками наших форм, нужно преобразовать их в кривые. Нажимаем правой кнопкой мыши и выбираем Create/Create Shapes from Vector Layer, слои AI удаляем.

Для того, чтобы нам было удобней работать, нужно сначала выстроить слои в правильном порядке и связать их между собой. Для каждого слоя ставим Motion Blur. Я объединила все составляющие головы в прекомпозицию, это почти то же самое, что и группа. Делается это для того, чтобы мы могли вращать голову со всеми ее элементами. Также мы можем анимировать элементы внутри этой группы.

Также не забудьте выставить Anchor Point. Он нужен нам для того, чтобы изменять точку, вокруг которой будет происходить вращение. Я выставила anchor point у основания головы, также у руки в районе плеча.

После того, как мы разобрались со всеми привязками и расставили anchor point, можем идти в таймлайн нашей композиции. Нажимаем на нужный слой и открываем его настройки transform. У нас есть несколько составляющих.

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

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

А что если, я хочу, чтобы голова двигалась сначала быстрее, затем медленно опускалась? Сделать это я могу через Graph Editor, он позволяет изменять скорость нашей анимации. Можно еще выбрать настройки и, кликнув на ключе правой кнопкой мыши, выбрать Keyframe Assistant и перевести его в easy ease/easy ease in/easy ease out, останется отрегулировать скорость с помощью кривых и плавная анимация готова.

Для того, чтобы наш стикер попал в Телеграм, нам нужно экспортировать его в необходимый формат .tgs. через специальный плагин Bodymovin-TG. Размер анимированного стикера не должен превышать 64 КБ. Иначе экспорт (Bodymovin-TG) завершится ошибкой.Также использование этих функций в AE приведет к ошибкам при экспорте стикера:

Masks, Mattes, Layer Effects, Images, Solids, Texts, 3D Layers, Merge Paths, Star Shapes, Gradient Strokes, Repeaters, Time Stretching, Time Remapping, Auto-Oriented Layers

Дальше идем по такому пути Window - Extensions - Bodymovin for Telegram stickers. Отмечаем композицию и выбираем место сохранения нажатием на троеточие. После нажимаем на кнопку Render. Если всё пройдет удачно, в выбранном вами месте появится файл .tgs.

Открываем Телеграм и находим в поиске бота @Stickers. Для начала работы с ним отправляем команду /start. Отправляем команду /newanimated. После выбираем название и получаем инструкцию:

Следующий шаг – отправить смайл, который соответствует анимированному стикеру. Заканчиваем создание набора командой /publish, если больше нет стикеров для добавления. В дальнейшем через бота можно будет добавлять новые стикеры. Также бот предложит вам установить иконку вашего набора, можете нажать skip и сделать это позже, а пока иконкой будет первый стикер в наборе.

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

Посмотрите наш стикерпак