Как сделать анимированные стикеры для telegram
Перейти к содержимому

Как сделать анимированные стикеры для telegram

  • автор:

Создание анимированных стикеров

Telegram поддерживает анимированные стикеры начиная с версии 5.9. Любой пользователь может создать и управлять своим набором анимированных стикеров.

Telegram использует Lottie — свободный формат для создания анимаций. Ознакомиться с документацией и описанием формата можно тут.

Чтобы создать свой набор, вам понадобится:

  • Приложение Adobe After Effects
  • Любой графический редактор, который позволяет экспортировать векторные объекты в Adobe After Effects
  • Плагин Bodymovin-TG — форк Bodymovin для Adobe After Effects, который позволит экспортировать анимацию в .TGS — специальный формат для Telegram.

Технические требования

  • Стикер/холст должен быть размером 512х512 пикселей
  • Изображение на стикере не должно выходить за края холста
  • Анимация должна длиться не дольше 3 секунд
  • Анимация должна быть зацикленной
  • Стикер должен весить не более 64 кб
  • У всех стикеров в наборе должен быть одинаковый FPS (30 или 60)
  • В анимации нельзя использовать выражения (Expressions) и эффекты (Effects). В частности: Masks, Mattes, Layer Effects, Images, Solids, Texts, 3D Layers, Merge Paths, Star Shapes, Gradient Strokes, Repeaters, Time Stretching, Time Remapping, Auto-Oriented Layers. Использование этих инструментов не позволит вам сохранить стикер в нужном формате .TGS.

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

Загрузка стикеров

Как только ваши стикеры будут готовы, отправьте боту @stickers команду /newanimated , затем отправляйте ему файлы в формате .TGS.

Ещё вашему набору можно добавить иконку. Она должна быть 100х100 пикселей, с зацикленной анимацией длиной не более 3 секунд.

Установка плагина Bodymovin-TG

  1. Закройте After Effects, если он открыт
  2. Установите программу ZXP Installer
  3. Скачайте последнюю версию bodymovin-TG (bodymovin-tg.zxp)
  4. Откройте ZXP Installer и перетащите туда расширение bodymovin-tg
  5. В After Effects перейдите в меню Правка (Edit) > Настройки (Preferences) > Сценарии и выражения (Scripting & Expressions) и установите флажок «Разрешить сценариям выполнять запись файлов и осуществлять доступ к сети» (Allow Scripts to Write Files and Access Network).
  1. В меню Window > Extensions вы увидите Bodymovin for Telegram Stickers. Готово!

Сайт про Telegram на русском (неофициальный).

Здесь собраны приложения на базе MTProto, переведена некоторая документация с официального сайта, а также работает Webogram.

Создание анимированных стикеров в Telegram

как сделать анимированные стикеры в телеграм

Анимированные стикеры используют свой собственный формат изображения, известный как TGS, работать с которым на момент написания статьи могут только десктопные приложения от Adobe, а именно After Effects и Illustrator, поэтому понадобится их загрузить и установить.

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

как сделать анимированные стикеры в телеграм-1

  1. Нужное дополнение для After Effects называется Bodymovin-TG и получить его можно в официальном GitHub-репозитории разработчика по вышеуказанной ссылке.
  2. После загрузки страницы найдите блок с последним релизом плагина (обычно он идёт первым в списке), затем отыщите в нём ссылку с именем bodymovin-tg.zxp и кликните по ней.

как сделать анимированные стикеры в телеграм-3

Lumpics.ru

Шаг 2: Создание стикеров

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

    Если вы обладаете достаточными художественными навыками, можете нарисовать нужные изображения с нуля, благо Adobe Illustrator достаточно дружелюбен к новичкам.

На изображении появится перечень объектов, которые распознала программа. Далее воспользуйтесь кнопкой «Разгруппировать».

как сделать анимированные стикеры в телеграм-15

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

Важно! Техническое требование к анимированным стикерам – не превышать объём в 64 килобайта, поэтому обязательно удалите лишние объекты или проведите их слияние!

Выберите папку, куда желаете поместить проект, и убедитесь, что формат задан как «Adobe Illustrator (*.AI)», после чего нажмите «Сохранить».

как сделать анимированные стикеры в телеграм-18

Шаг 3: Анимирование стикера

Теперь переходим к самой ответственной части – превращении стикера в анимированный.

как сделать анимированные стикеры в телеграм-20

    Запустите Adobe After Effects и в его главном меню выберите пункты «Композиция»«Новая композиция».

Настройки будущей анимации задайте следующим образом:

  • «Ширина» и «Высота» – 512 на 512 пикселей;
  • «Частота кадров» – 30 либо 60, последнее предпочтительнее;
  • «Длительность» – 3 секунды;
  • «Цвет фона» – желательно белый.

Остальные параметры можно оставить по умолчанию. Проверьте, правильно ли всё введено, затем нажмите «ОК».

Важно! Частота кадров для всех стикеров должна быть одинаковой: в один набор нельзя поместить анимации 30 и 60 кадр/сек!

Откроется отдельная панель управления экспортом. Первым делом выберите созданную композицию (отметка в левой части соответствующей строки), после чего кликните по трём точкам.

как сделать анимированные стикеры в телеграм-34

Посредством «Проводника» выберите папку, куда желаете сохранить итоговый стикер.

как сделать анимированные стикеры в телеграм-35

Далее щёлкните «Render».

как сделать анимированные стикеры в телеграм-36

Если всё сделано правильно и лимит в 64 Кб не превышен, рендеринг завершится успешно, о чём программа вас и уведомит. Для продолжения нажмите «Done» и закройте окно плагина.

как сделать анимированные стикеры в телеграм-37

Шаг 4: Импорт стикеров в Telegram

Для создания своего набора стикеров в Телеграме предусмотрен отдельный бот – @Stickers, который позволяет добавить и анимацию.

  1. Загружать стикеры удобнее всего с десктопного клиента, которым мы и воспользуемся. Запустите приложение, введите в поиске название требуемого бота и выберите результат, отмеченный на скриншоте ниже. как сделать анимированные стикеры в телеграм-39
  2. Выполните команду /start для начала работы с ботом. как сделать анимированные стикеры в телеграм-40
  3. Появится список доступных команд и вариаций, кликните в нём по ссылке /newanimated. как сделать анимированные стикеры в телеграм-41
  4. Введите название будущего набора (можно использовать как русские, так и английские буквы, но последние предпочтительнее). как сделать анимированные стикеры в телеграм-42
  5. Теперь можно добавить к созданному паку первый стикер, просто перетащив файл из папки в диалог с ботом. как сделать анимированные стикеры в телеграм-43

Далее укажите пак, к которому будет добавлен стикер.

как сделать анимированные стикеры в телеграм-48

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

Как сделать видеостикер из видео или GIF для Telegram

Telegram выпустил новые версии своих клиентов, ключевым новшеством которых стала поддержка видеостикеров в открытом формате .WEBM, совместимом со многими графическими редакторами.

Код Дурова Игорь Савкин

Для создания таких видеостикеров понадобится ПО, которое позволяет экспортировать проект в .WEBM с альфа-каналом.

Требования к видеостикерам

  • Формат: .WEBM с кодеком VP9 и 30 к/с.
  • Размер: ровно 512px по одной стороне и до 512px по другой.
  • Вес: до 256 КБ.
  • Продолжительность: до 3 секунд.
  • Прочее: видео должно быть зациклено для оптимального восприятия пользователем, содержать в себе прозрачный слой (альфа-канал — временное требование) и не содержать аудиопоток.

Создание видеостикеров

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

Например, изначально поддерживает экспорт в .WEBM с кодеком VP9 и альфа-каналом (прозрачным слоем) консольное приложение ffmpeg. К слову, в ближайшем обновлении Telegram планирует отменить требование к альфа-каналу, и тогда можно будет воспользоваться приложением Handbrake с открытым кодом.

Любителям пакета Adobe можно воспользоваться Adobe Media Encoder с модифицированным плагином byfnord (ссылка на GitHub):

    — положить в папку C:\Program Files\Adobe\Common\Plug-ins\7.0\MediaCore — положить в папку

После установки плагина .WEBM появится в списке форматов на вкладке «Очередь». В macOS может потребоваться перейти в Настройки — Безопасность и конфиденциальность, чтобы подтвердить установку.

Параметры рендеринга

Если вы впервые работаете с ПО для конвертации (или экспорта) файлов, то вот несколько советов от Telegram, которые могут помочь.

  • Убедитесь, что в настройках кодека выбран VP9 некоторые приложения могут по умолчанию использовать VP8.
  • Обязательно удалите все аудиопотоки (например, снимите флажок «Экспорт аудио» в программах Adobe).
  • Убедитесь, что частота кадров является постоянной и соответствует 30 кадрам в секунду.
  • Используйте постоянную и более низкую (или самую низкую) настройку качества — размер резко уменьшится без значительного ухудшения картинки.
  • В Adobe Media Encoder убедитесь, что Renderer установлен на «Software Only».
  • Проекты After Effects напрямую интегрируются c Media Encoder через File — Export — Add to Media Encoder Queue.

Загрузка видеостикеров в Telegram

Для создания стикерпака и загрузки видеостикеров необходимо воспользоваться официальным ботом @Stickers. Команда для добавления видеостикеров /newvideo. Далее нужно следовать инструкциям бота.

При желании, набору стикеров можно добавить иконку в формате .WEBM. Она должна быть размером 100×100px и иметь зацикленную анимацию не более 3 секунд. Бот запросит иконку во время одного из этапов создания стикерпака.

А можно попроще?

Можно. Если ваша задача лишь сделать стикерпак из любимых «гифок», то мы нашли способ. Разбработчик бота @fStikBot, который позволяет легко создавать наборы из любимых стикеров, уже реализовал поддержку нового формата.

Просто следуйте инструкции, кидайте боту желаемые GIF-файлы и получаете готовый стикерпак. Профит!

Безумный конвертер GIF’ок в анимированные стикеры для Telegram

А теперь о подробностях реализации.

Всё началось с дискуссии в чатике Telegram-разработчиков о грядущей фиче:

Мужик сказал — мужик сделал! Первый прототип на Pillow и svgwrite, разбирающий GIF’ку на пиксели и преобразующий их в векторные квадратики с предпросмотром в SVG, был написан за один выходной.

Веселье началось дальше…

JSON — открытый формат, говорили они.

Доселе с форматами в Telegram то и дело хитрили. Сделали поддержку GIF-анимаций — на самом деле они конвертируются в MP4-видео. Сделали поддержку стикеров — выгружаются они в PNG, но преобразуются в WebP. В этот раз всё честнее: что на входе, то и на выходе.

Для анимированных стикеров в Telegram используется не GIF, не видео, и даже не какой-нибудь устоявшийся формат векторной графики типа SVG или — упаси Ктулху! — Flash. В нём задействован новомодный формат, вышедший из-под крыла Airbnb — Lottie. Доселе он имел некоторую известность в среде мобильных разработчиков, но благодаря Telegram, возможно, обретёт бо́льшую популярность.

По сути своей, файлы Lottie являются сериализованными в JSON проектами Adobe After Effects, по максимуму реализующими все возможности этой программы. С отображением, увы, всё не так радужно. Хотя готовых «официальных» реализаций библиотеки для рендеринга Lottie и много, как раз под покрываемые Telegram платформы: Android, iOS, Qt и Web — лишь часть из возможностей формата реализована во всех из них. В Telegram пошли ещё дальше и ограничили перечень поддерживаемых возможностей, а также «придумали» свой формат, который отличается от обычного Lottie всего лишь упаковкой в GZip и параметром «tgs»: 1 . Кажется, я знаю, где сейчас работает Денис Попов! 🙂

И если с документацией на библиотеки для разных платформ всё довольно неплохо, то найти хоть какое-то описание устройства формата, увы, не удалось — только JSON-схему в исходниках lottie-web. Пришлось попутно ковыряться в существующих анимациях, дабы понять общие концепции формата. Также обнаружились расхождения реальных файлов со схемой: в частности, в слоях типа 4, согласно схеме, вложенные объекты хранятся в свойстве «it» — однако в реальных файлах ключ называется «shapes» , а «it» не работает.

Выясненные нюансы формата:

  • Файл состоит из слоёв. В отличие от GIF, здесь у каждого слоя может быть произвольное время начала и конца отображения. К слою можно (точнее, нужно) применять различные трансформации: масштабирование, повороты, изменение прозрачности и т.д. Слои могут быть даже трёхмерными (запрещено для Telegram).
  • Слой состоит из «фигур» (shapes). Типов у них много, некоторе нельзя использовать в Telegram. На практике, чтобы слой отобразился, он должен включать три фигуры: контур (в готовых анимациях это обычно тип «sh» — кривые Безье; конвертер пока использует только тип «rc» — прямоугольники), заливка (тип «fl» ) и трансформация (тип «tr» ).
  • Можно даже включать растровые элементы, создавать текстовые слои, устанавливать взаимосвязи параметров слоёв и фигур через выражения. Вся эта вкуснотища также запрещена в Telegram.

Казалось бы, это и не проблема вовсе? Даже простенький GZip неплохо справляется со сжатием вопиюще повторяющихся данных, и 1 МБ сырого JSON магическим образом превращается в пару десятков килобайт, которые спокойно пролезают в заявленное ограничение в 64 кБ. Не тут-то было!

Загружаю я, значит, пухленькую анимацию, которая спокойно отображается lottie-web, в Telegram — и тут вместо условно красивого пиксель-арта на меня смотрит статическое размазанное вот это:

Что такое?! А оказалось, на разжатые данные тоже есть явно не указанное ограничение в 1 МБ. Представитель команды Telegram оперативно подтвердил его и сообщил о грядущем поднятии лимита до 2 МБ.

Даже если эти проблемы решат — стикеры, выходящие за пределы 1 МБ несжатых данных и не содержащие трансформаций, окажутся недоступными для пользователей старых версий Telegram. Так что придётся, видимо, соблюдать ограничения и впредь.

Прозрачность — это важно

Pillow, наряду с OpenCV, можно назвать индустриальным стандартом для обработки изображений в Python. Мало того, он неплохо заточен и под особенности GIF: поддерживает индексированные цвета, даёт доступ к палитре. Поддерживает преобразование пиксельной карты в NumPy-массив, что важно для продуктивной обработки. Даже статистику по цветам собирает! Но обнаружились и минусы:

  1. Не нашлось задокументированного способа получить индекс прозрачного цвета. Пришлось в качестве временного решения подразумевать, что прозрачный цвет — самый распространённый, но в реальных GIF’ках это не всегда так.
  2. То же самое с задержкой между кадрами: Pillow отдаёт только сами кадры как последовательность изображений, без информации о задержках.
  3. Иногда некорректно накладываются частичные кадры.

Прозрачность, как оказалось, gif2numpy не поддерживает вообще: цвета сразу преобразуются в три канала с разрядностью в байт, без учёта разрядности и сохранения индексов цветов. Благо, модуль состоит из одного файла, так что не составило труда включить его в проект и доработать, зарезервировав под прозрачность цвет #FE00FE .

Проблему с частичными кадрами решить оказалось нетривиально. gif2numpy пытается накладывать такие кадры на предыдущий, однако не проверяет параметры наложения, из-за чего также не всегда выходит правильный результат. Дабы не возиться с флагами, добавлена предварительная обработка изображений с помощью gifsicle с ключом —unoptimize — он преобразует частичные кадры в полные. А заодно приводит их к использованию глобальной палитры, что устранило необходимость отдельным образом обрабатывать прозрачный цвет при использовании собственной палитры кадра.

Сожми меня сильнее

Квадратики — это хорошо, но с такими ограничениями нужно проявить больше фантазии, иначе в Telegram не «пролезают» даже миниатюрные GIF’ки.

Далее — черёд эксплуатации особенностей Lottie. Поскольку каждый слой имеет произвольное время начала и конца — можно применить технику, которая давным-давно используется видеокодеками, и отчасти в самом GIF: квадратики, которые остаются на одном месте в течение нескольких кадров, можно слить в один слой, во время отображения которого сменяется несколько других. Что и реализовано, пока только для пар соседних слоёв.

Планы по развитию

Идей, которые здесь можно применить, навалом:

  • Распознавать одноцветные области любого размера. Можно разбивать их на набор прямоугольников, для чего есть неплохой алгоритм. Также целесообразно преобразовывать их в контур, но это омрачается необходимостью указывать все точки кривых Безье в Lottie — прямоугольниками в некоторых случаях может быть выгоднее.
  • Распознавать движение. Техника, опять-таки, издревле применяющаяся в видеокодеках. Если один и тот же контур не меняет форму от кадра к кадру, но лишь координаты — стоит вместо дублирования на нескольких слоях поместить его на один слой с трансформацией.
  • Распознавать «накрытие» одних областей другими. Пример:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *