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

В начале июля 2019 у пользователей Telegram появилась возможность публиковать свои анимированные стикеры. Вы тоже можете попробовать!

Краткий гайд по анимированным стикерам в Telegram

Для создания анимированного пака нужно:

1. Установить последнюю версию Adobe After Effects.
2. Скачать плагин Bodymovin для Телеграм, инструкция по установке прилагается.
3. Принять ограничения композиции: · Размер стикера – 512х512. · Объекты стикера не должны заходить за край холста. · Длительность анимации до 3 секунд. · Вес анимированного стикера не больше 64 Кб. · При создании анимации не должны быть использованы функции Adobe After Effects: Expressions, Masks, Mattes, Layer Effects, Images, Solids, Texts, 3D Layers, Merge Paths, Star Shapes, Gradient Strokes, Repeaters, Time Stretching, Time Remapping, Auto-Oriented Layers. С ними вы даже не сохраните анимацию в .tgs
4. Изучить, как работать с шейп-анимацией в Adobe After Effects, если первый раз открыли программу. На YouTube можно найти много туториалов. А можно пройти мощное обучение моушн-дизайну на специальных курсах!
5. Творить!
6. Готовые стикеры загрузить в @stickers бот с помощью команды /newanimated, затем сохранить пак.

Если на Windows возникают проблемы с подключением плагина, скопируйте его данные в папку со стандартным адресом: C:Program Files (x86)Common FilesAdobeCEPextensions

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 секунд.

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 анимированные стикеры. Эти забавные двигающиеся картинки отлично передают эмоции и представляют собой неплохую альтернативу гифкам и привычным стикерам. Но если создать обычный стикерпак довольно просто, то с анимированными изображениями придется повозиться. Вам понадобится пара программ от Adobe и немного фантазии. В этом уроке я покажу, как все это реализуется.

Подготавливаем инструменты

Вам будут необходимы редактор векторной графики Adobe Illustrator, редактор анимаций Adobe After Effects и минимальные навыки работы с ними.

Кроме того, к Adobe After Effects нужно подключить плагин Bodymovin-TG. Он экспортирует анимации в формат .TGS, поддерживаемый Telegram. Для этого закройте Adobe After Effects, если он открыт. Загрузите и установите приложение ZXPInstaller. Оно совместимо и с Windows, и с macOS. Скачайте плагин Bodymovin-TG (нужный вам файл называется bodymovin-tg.zxp).

Теперь запустите ZXPInstaller и щёлкните по его окну. Выберите загруженный плагин и подождите, пока приложение установит его.

Откройте Adobe After Effects. Затем сделайте следующее:

• На Windows откройте «Правка» → «Настройки» → «Сценарии и выражения…». Включите опцию «Разрешить сценариям выполнять запись файлов и осуществлять доступ к Сети». Нажмите OK.
• На macOS откройте Adobe After Effects → «Настройки» → «Сценарии и выражения…». Включите опцию «Разрешить сценариям выполнять запись файлов и осуществлять доступ к Сети». Кликните OK.

Нажмите «Окно» → «Расширения». Если вы всё сделали правильно, то в списке расширений вы увидите Bodymovin for Telegram Stickers.

Всё, инструменты настроены. Теперь пора творить.

Рисуем векторную графику

Создайте новый проект в Adobe Illustrator. Размер холста должен быть ровно 512 × 512 пикселей — это важно. У проекта не должно быть фона. Объекты не могут выходить за границы монтажной области.

Для примера мы нарисуем рожицу. Её можно составить из фигур на панели инструментов Illustrator. Каждая значимая для анимации часть (рука, нога, глаз) должна быть вынесена на отдельный слой. Лучше сразу подписать, что где, чтобы не запутаться.

Когда ваша графика будет готова, сохраните её в формате AI.

Импортируем графику в After Effects

Откройте After Effects и создайте композицию. Размеры её должны быть ровно 512 × 512 пикселей. Количество кадров в секунду — 30 или 60 (для несложной анимации вроде нашей подойдёт 30). Длительность композиции не должна превышать 3 секунды.

Затем нажмите «Файл» → «Импорт» → «Файл» и найдите вашу графику в формате AI. В выпадающем списке «Импортировать как:» выберите «Композиция — сохранить размеры слоёв» и нажмите «Импорт».

Ваша графика импортируется вместе со всеми слоями. Выделите их (они будут в формате AI) и перетащите на иконку «Создать новую композицию».

Программа запросит у вас подтверждение. Нажмите OK.

Порядок слоёв может немного нарушиться. Перетаскивайте их на панели слева внизу, размещая в нужной последовательности.

Теперь предстоит создать из векторных слоёв фигуры для анимирования. Для этого выделите слои и нажмите правую кнопку мыши, затем «Создать» → «Создать фигуры из векторного слоя». Получатся так называемые кривые.

После этого слои в формате AI можно удалить, чтобы не мешались. Выделите их с зажатой клавишей Ctrl и нажмите Delete. Останутся только кривые.

Готово, импорт завершён.

Создаем анимацию

В Adobe After Effects можно создавать очень разные по сложности анимации. Но мы не будем погружаться в дебри и для примера попробуем заставить нашу рожицу просто приподнимать бровь.

Выберите бровь, которую хотите анимировать, и щёлкните по ней левой кнопкой мыши. Нажмите на значок > рядом с кривой на панели слева снизу и выберите «Преобразовать».

С помощью появившихся значков на панели можно изменять положение, масштаб, угол поворота и степень прозрачности объектов в анимации. Поскольку нам нужно только поднимать бровь, обойдёмся изменением её положения.

Нажмите «Опорная точка» и «Положение». Затем перетащите временной указатель на шкале на третью секунду анимации (тяните до упора).

Нажмите на ромбики на левой боковой панели, слева от «Опорной точки» и «Положения». Таким образом вы зациклите свою анимацию: её первый кадр будет таким же, как и последний. Это важно, так как иначе Telegram не примет ваш стикер.

Теперь разместите временной указатель примерно посередине шкалы.

Снова нажмите на ромбики, чтобы создать опорную точку и там. И измените положение брови, подняв её. Это можно сделать используя цифры рядом с параметром «Положение» или перетянув бровь вручную мышкой либо клавишами со стрелками.

Нажмите на пробел, чтобы запустить воспроизведение анимации. Всё, бровь двигается.

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

Экспортируем стикер

Нажмите «Окно» → «Расширения» → Bodymovin for Telegram Stickers. Выделите композицию, которую хотите экспортировать (в нашем случае — ту, что с пометкой «Бровь»). В параметре Destination Folder укажите папку, где сохранить ваш стикер. И нажмите Render.

Если всё в порядке, расширение отрапортует о завершение рендеринга. Нажмите Done. Если что-то не так, расширение подскажет вам. Правда, только по-английски.

Стикер будет сохранён в указанной вами папке под именем data.tgs.

Размещаем стикер в Telegram

Запустите в Telegram бота @Stickers и отправьте ему команду /newanimated. Бот предложит выбрать название для нового набора анимированных стикеров — введите его и отправьте сообщение.

Затем отправьте стикер боту, перетянув файл data.tgs в окно Telegram.

Бот попросит прислать смайл, с которым ассоциируется стикер, — сделайте это. Если у вас есть ещё анимированные варианты для этого набора, добавьте их.

Когда закончите, введите команду /publish и выберите ваш стикерпак в выпадающем списке. Ему можно назначить иконку, если она у вас есть (это должно быть изображение в формате TGS размером до 32 килобайт). Впрочем, этот шаг можно без проблем пропустить, перейдя к команде /skip.

Последний шаг — выбор короткого адреса для вашего набора. Бот создаст ссылку, по которой вы и ваши друзья получат доступ к стикеру. Нажмите на неё и сможете добавить новую анимацию в коллекцию, как обычно.

Собственноручно сделанный анимированный стикер готов. На этом у меня все. До скорого!

Используемые источники:

• https://kj.media/kissel/kak-sdelat-animirovannye-stikery-v-telegram/
• https://tlgrm.ru/faq/animated-stickers.html
• https://zen.yandex.com/media/id/5eaedc3079cddb12c52ffe87/kak-sdelat-animirovannyi-stiker-v-telegram-5eba762f3636e35f03c3cdb1