Инструкция: как сделать анимированные стикеры в Телеграме
Привет! Меня зовут Дарья Алёхина, я дизайнер в 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 и сделать это позже, а пока иконкой будет первый стикер в наборе.
Заключение
Вашими стикерами обязательно будут пользоваться, если вы сделаете их не только красивым, но и подходящими для переписки. Для этого передайте в них эмоции: радость, восторг, удивление, грусть. Или состояния: работаю, обнимаю, целую, сплю. Классно будет использовать повседневные или локальные фразы, которые поймут коллеги.
Посмотрите наш стикерпак
Панда с бокалом – ❤️ Стикер для вечера пятницы))
зачем же себя ограничивать пятницей?)))
Может кто подскажет ссылки на исполнителей качественных стикерпаков, к кому возможно обратиться за созданием? Смотрю в телеграм большое количество годных, а как выйти на авторов неизвестно.
можно сколько угодно вываливать на рынок стикерпаки, но признание получат только действительно годные
остальные погрязнут в тоннах очередных авокадо, панд, котиков и прочей ереси
и это хорошо
Захотел расчехлить АЕ, спасибо
Неужели никто до сих пор не сделал простой и лекговесный редактор-аниматор заточенный непосредственно для подобных стикеров (работ), а то получается, чтобы создать стикер, такой монстроузный воркфолоу (и по сути не созданный для таких задач) иметь/устанавливать/покупать необходимо.
Буквально на прошлой неделе тоже задался вопросом как без after effects обойтись. В итоге сделал стикеры в figma, экспортировал в haiku animator (очень простенький аниматор для векторной графики. пробный период 7 дней, дешевле ae в 2 с лишним раза). Из него экспортируете анимацию в lottie, а уже его конвертирете в формат телеграма на сайте формата lottiefiles
Больше спасибо, что поделились. Вполне себе варик.
Сделать новый софт для стикеров намного сложнее, чем освоить азы работы в Ае, монструозный он только для непосвященных, вполне обычный софт (0= Но да, чтобы создать стикер надо знать и уметь в нескольких программах, а дизайнеры, кто занимаются этим на коммерческой основе – давно покупают подписку на софт и это норма.
А вот интегрировать стикер в телегу – есть простое решение, бот.
Хотите самостоятельно – прийдется поработать и потратить время на обучение, или можно заплатить тем, кто уже потратил время и деньги на обучение, всегда есть выбор (0=
Очевидно, что вы не поняли вопроса и сообщили нам капитан-очевидные истины - "написать софт сложнее чем разобраться в нем" - ну-да))).
Вопрос же был в другом: может быть, кто-то знает или пробовал сделать стикеры в другом софте, т.к. например есть необходимость, но нет желания ставить этот монстроузный комбайн под названием адобе, который захлямляет оперативку, грузит проц в фоне, ради простой задачи, и еще, как я понимаю, сам процесс анимации стикеров в AE он не совсем скажем так прямолинейный, а такой, через одно место)) т.к. затачивался AE под другие задачи.
Вопрос не по теме. Почему в телеге столько классных стикеров, а в вк - один слащавый шлак с дебильными надписями? В вк не пропускают нормальные стикеры?
В вк были закручены все гайки, пропускающие сторонние стикеры в соцсеть (граффити)
потому что в Вк загружать стикеры могут только модераторы Вк, и никак иначе. А Вк публикует либо действительно прикольные по их мнению паки, либо брендированные (Сберкот всем думаю известен, ну и еще куча мировых брендов тоже в Вк свои стикеры с логотипами и концепцией бренда публикует Burger King, KFC, McDonald’s, Lays, Coca-Cola, Dirol, Orbit, TicTac, Pringles, Snickers, Durex, Delivery Club, Sprite, Oreo, Colgate, Honor, Mastercard, Сбербанк, ПАО Газпрома, Матч ТВ, российские телеканалы СТС и ТНТ и др.)
Так вот за загрузку в Вк брендированного пака, модераторы (официалы) берут не слабые деньги, цифры исчисляются в миллионах )) цена зависит от количества стикеров в паке, а также в зависимости от бренда, который к ним обратился)
такой вот маркетинг)
А можно просто озвучить цену на такую работу? Я выбираю персонажа, эмоции, фразы и получаю готовый стикерпак
это не торговая площадка) плюс цены разные у всех и зачастую зависят от сложности и детализации персонажа и сюжетов стикеров, анимации и пр)
- чем щас занимаешься?
я: злой, стучит по клаве
Я начал было...плюнул и просто сделал старую добрую гифку.
А сколько стоит по цене такой один анимированный стикер?
у всех по разному) тут зависит от сложности анимации, детализации персонажа, скилов художника)
Добрый день! как вы оптмизируете файл до 64 кб? у меня файл с иллюстратора даже просто с одним элементом 340 кб! опорных точек минимум, все перепробовала, может есть какой то плагин для сжатия ? как решить эту проблему? Хелп!
спасибо!
Здравствуйте как создать анимированные стикеры и эмодзи
Добрый день! Как создать анимированные стикеры, можно почитать в нашей статье)
Что касается эмодзи, они загружаются так же через бота Stickers, только имеют другой размер и несколько форматов: статичный, видео, анимированные. Также понадобится подписка на Telegram Premium для удобства редактирования набора.
Ещё я незнаю што такой TGS
Комментарий удален модератором
TGS — это специальный формат для анимированных стикеров. Про него написали в разделе «Шаг 6. Экспорт».