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

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

Зачем компаниям стикеры?

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

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

Шаг 1. Выбор персонажа

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

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

Шаг 2. Начало работы

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

Шаг 3. Отрисовка в векторе

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

Шаг 4. Загрузка файла в After Effects

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

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

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

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

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

Шаг 5. Анимация

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

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

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

  • Anchor Point,
  • Position,
  • Scale,
  • Rotation,
  • Opacity.

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

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

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

Шаг 6. Экспорт

Для того, чтобы наш стикер попал в Телеграм, нам нужно экспортировать его в необходимый формат .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.

Шаг 7. Публикация в Телеграм

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

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

Заключение

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

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

0
24 комментария
Написать комментарий...
Olga Chernysheva

Панда с бокалом – ❤️ Стикер для вечера пятницы))

Ответить
Развернуть ветку
Андрей Синица

зачем же себя ограничивать пятницей?)))

Ответить
Развернуть ветку
Ярослав Белов

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

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

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

Ответить
Развернуть ветку
Вешняков

Захотел расчехлить АЕ, спасибо

Ответить
Развернуть ветку
Sergionn Rad

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

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

Буквально на прошлой неделе тоже задался вопросом как без after effects обойтись. В итоге сделал стикеры в figma, экспортировал в haiku animator (очень простенький аниматор для векторной графики. пробный период 7 дней, дешевле ae в 2 с лишним раза). Из него экспортируете анимацию в lottie, а уже его конвертирете в формат телеграма на сайте формата lottiefiles

Ответить
Развернуть ветку
Тамерлан Кагарманов

Больше спасибо, что поделились. Вполне себе варик. 

Ответить
Развернуть ветку
Lex Murrey

Сделать новый софт для стикеров намного сложнее, чем освоить азы работы в Ае, монструозный он только для непосвященных, вполне обычный софт (0= Но да, чтобы создать стикер надо знать и уметь в нескольких программах, а дизайнеры, кто занимаются этим на коммерческой основе – давно покупают подписку на софт и это норма. 
А вот интегрировать стикер в телегу – есть простое решение, бот. 
Хотите самостоятельно – прийдется поработать и потратить время на обучение, или можно заплатить тем, кто уже потратил время и деньги на обучение, всегда есть выбор (0=

Ответить
Развернуть ветку
Sergionn Rad

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

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

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

Ответить
Развернуть ветку
Vladislav Sabenin

В вк были закручены все гайки, пропускающие сторонние стикеры в соцсеть (граффити)

Ответить
Развернуть ветку
DA DesignArt

потому что в Вк загружать стикеры могут только модераторы Вк, и никак иначе. А Вк публикует либо действительно прикольные по их мнению паки, либо брендированные (Сберкот всем думаю известен, ну и еще куча мировых брендов тоже в Вк свои стикеры с логотипами и концепцией бренда публикует Burger King, KFC, McDonald’s, Lays, Coca-Cola, Dirol, Orbit, TicTac, Pringles, Snickers, Durex, Delivery Club, Sprite, Oreo, Colgate, Honor, Mastercard, Сбербанк, ПАО Газпрома, Матч ТВ, российские телеканалы СТС и ТНТ и др.)

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

такой вот маркетинг)

Ответить
Развернуть ветку
Michael Goor

А можно просто озвучить цену на такую работу? Я выбираю персонажа, эмоции, фразы и получаю готовый стикерпак

Ответить
Развернуть ветку
DA DesignArt

это не торговая площадка) плюс цены разные у всех и зачастую зависят от сложности и детализации персонажа и сюжетов стикеров, анимации и пр)

Ответить
Развернуть ветку
Яся Зайцев

- чем щас занимаешься?
я: злой, стучит по клаве

Ответить
Развернуть ветку
Тамерлан Кагарманов

Я начал было...плюнул и просто сделал старую добрую гифку. 

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

А сколько стоит по цене такой один анимированный стикер?

Ответить
Развернуть ветку
DA DesignArt

у всех по разному) тут зависит от сложности анимации, детализации персонажа, скилов художника) 

Ответить
Развернуть ветку
Yulia Shafeeva

Добрый день! как вы оптмизируете файл  до 64 кб? у меня файл с иллюстратора даже просто с одним элементом 340 кб! опорных точек минимум, все перепробовала, может есть какой то плагин для сжатия ? как решить эту проблему? Хелп! 
спасибо!

Ответить
Развернуть ветку
Aziz Tursunov

Здравствуйте как создать анимированные стикеры и эмодзи

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

Добрый день! Как создать анимированные стикеры, можно почитать в нашей статье)

Что касается эмодзи, они загружаются так же через бота Stickers, только имеют другой размер и несколько форматов: статичный, видео, анимированные. Также понадобится подписка на Telegram Premium для удобства редактирования набора.

Ответить
Развернуть ветку
Aziz Tursunov

Ещё я незнаю што такой TGS

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

Комментарий удален модератором

Развернуть ветку
Friflex
Автор

TGS — это специальный формат для анимированных стикеров. Про него написали в разделе «Шаг 6. Экспорт».

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