Поэтапно разберемся во всех нюансах при разработке такого стикера. Начиная с программного обеспечения и заканчивая публикацией в Telegram.
Так что же из себя представляет этот анимированный стикер?
Это собственный формат Telegram — .tgs, который основан на технологии lottie.
Lottie — это движок от Airbnb, который позволяет проигрывать анимации на основе json, созданного с помощью плагина Bodymovin для Adobe After Effects. Такой же плагин существует и для стикеров Telegram и называется аналогично — Bodymovin-TG.
Оглавление
Этап 1 — Подготовка инструментов
Этап 2 — Создание стикера
Этап 3 — Анимация и экспорт в After Effects
Этап 4 — Публикация в Telegram
Этап 1 — Подготовка инструментов
Что необходимо
- Adobe Illustrator или другой векторный графический редактор.
- Adobe After Effects + плагин Bodymovin-TG.
Как установить Bodymovin-TG
Скачиваем с сайта разработчика плагин bodymovin-tg.zxp необходимый для экспорта анимации в формат .tgs.
Для установки потребуется ZXPInstaller — приложение для установки расширений для Adobe.
Открываем ZXPInstaller и переносим плагин в окно программы.
Настройка Bodymovin-TG
Открываем Adobe After Effects и заходим в раздел настроек — «сценарии и выражения».
Ставим галочку напротив «Разрешить сценариям выполнять запись файлов и осуществлять доступ к сети».
Этап 2 — Создание стикера
Создание и настройка документа
Открываем Adobe Illustrator и выбираем в строке меню «файл» -> «новый».
Во всплывающем окне задаем параметр 512 на 512 пикселей, исходя из требований к размеру стикера.
Рисование стикера
Для рисования векторного стикера потребуются определенные навыки и знания основных инструментов, поэтому рекомендуется ознакомится с базовыми принципами рисования на сайте Adobe.
Изображение на стикере не должно выходить за края холста.
Существует альтернативный способ (Трассировка) с помощью которого любая картинка превращается в векторную. Будет очень полезно, для быстрого переноса своих растровых изображений в вектор.
Трассировка изображения
В качестве примера возьмем изображение стикера из интернета.
Импортируем изображение в рабочую среду Adobe Illustrator (перенос в окно программы изображения). И проводим указанные действия из видео:
- Трассировка изображения. («Окно» -> «Трассировка изображения»)
- Разобрать. («Объект» -> «Трассировка изображения» -> «Разобрать»)
- Разгруппировать. («Объект» -> «Разгруппировать»)
Трассировка прошла успешно, но алгоритм не всегда точно угадывает форму объекта за элементом. С помощью встроенных инструментов можно устранить эти недостатки.
Сохранение стикера
Выбираем в строке меню «файл» -> «Сохранить как». Сохраняемый тип файла .ai. Во всплывающем окне ставим галочку напротив «Создать PDF-совместимый файл».
Этап 3 — Анимация и экспорт в After Effects
Технические требования к анимации
Размер анимированного стикера не должен превышать 64 КБ, если стикер перейдет эту отметку, экспорт (Bodymovin-TG) завершится ошибкой. Исправить ошибку возможно лишь урезанием качества стикера — удаление векторных элементов. Следите за тем, чтобы в анимации не было слишком много векторных объектов.
Анимация должна быть цикличной, то есть первый кадр анимации должен совпадать с последним кадром.
Использование этих функций в Adobe After Effects приведет к критическим ошибкам при экспорте стикера:
Masks, Mattes, Layer Effects, Images, Solids, Texts, 3D Layers, Merge Paths, Star Shapes, Gradient Strokes, Repeaters, Time Stretching, Time Remapping, Auto-Oriented Layers
Создание и настройка композиции
Открываем Adobe After Effects и выбираем в строке меню «композиция» -> «Новая композиция».
Во всплывающем окне «Настройки композиции» указываем параметры стикера с учетом официальных требований к анимированным стикерам, такие как:
- Размер — 512 на 512 пикселей.
- Частота кадров — 30 или 60 кадров в секунду. Выбор частоты будет влиять на количество кадров в проекте. Лучше всего выбрать 60 — это обеспечивает большее пространство для анимации.
- Длительность — 3 секунды.
Импорт стикера в After Effects
Переносим файл со стикером в рабочую среду Adobe After Effects.
Кликаем правой кнопкой по стикеру, выбираем «создать фигуры из векторного слоя».
Анимация в After Effects
Для примера произведем анимацию 3 элементов в стикере.
Разберем подробнее, как анимировать данные элементы в After Effects:
1. Изменение положения
Раскрываем слой "Кривые Sticker" и находим группу с необходимым объектом, быстрее всего это можно сделать кликнув по элементу в окне предпросмотра.
Выбираем пункт "Положение" и активируем его нажав на значок секундомера. После двигаем временную шкалу чуть вперед и передвигаем объект с помощью мыши или вручную, изменяя численное значение "Положение".
2. Изменение масштаба
Аналогично (1) пункту, за исключением того, что теперь изменять нужно масштаб, а не положение.
3. Изменение контура
Выбираем пункт "Контур" и активируем его нажав на значок секундомера.
Для создания такой анимации потребуется тянуть за «синий квадратик», изменяя тем самым форму объекта и постепенно довести её до требуемого состояния.
Экспорт стикера Bodymovin-TG
Выбираем пункт «Расширения» и находим там плагин Bodymovin.
Отмечаем композицию и выбираем место сохранения нажатием на "троеточие".
После нажимаем на кнопку Render.
Если всё пройдет удачно, в выбранном вами месте появится файл .tgs.
Этап 4 — Публикация в Telegram
Открываем Telegram и находим в поиске бота @Stickers.
Для начала работы с ним отправляем команду /start.
У всех стикеров в наборе должна быть одинаковая частота кадров. Иначе придется делать два разных пака — для 30 и 60 кадров в секунду.
Отправляем команду /newanimated. После выбираем название и получаем следующую инструкцию:
Спасибо! Теперь отправьте мне, пожалуйста, будущий анимированный стикер — файл в формате TGS, созданный с помощью плагина Bodymovin-TG для Adobe After Effects.
Рекомендуем загружать изображения через десктопное приложение.
Следующий шаг отправить смайл, который соответствует анимированному стикеру. Заканчиваем создание набора командой /publish, если больше нет стикеров для добавления. В дальнейшем через бота можно будет дополнительно добавить новых стикеров.
Бот Stickers предложит выбрать иконку для анимированных стикеров. Её нужно создать отдельно, но проще всего написать команду /skip, чтобы первый стикер показывался в качестве иконки.
Когда переношу плагин bodymovin-tg в ZXPInstaller, то выдается ошибка "Installation failed because the extension is not compatible with the installed applications." Помогите, пожалуйста, установить.
Тоже очень долго парилась с этой проблемой, нашла полезный Гайд по установке. Везде говорят о том что надо использовать один установщик или вручную, а оказывается еще есть другие установщики. У меня установился через установщик ZXP Installer от Aescripts. Ссылки на установщики есть в гайде
Спасибо большое! Помогли установить)
Или вручную распаковать плагин через архиватор и саму папку bodymovin-tg поместить в каталог: C:\Program Files\Adobe\Adobe After Effects 2021\Support Files\
И это, блин, только начало всех плясок с бубном((
Комментарий недоступен
жаль что экспрешенны плагин не воспринимает, если нужна плавная анимация или баунсэффект, то нужно делать вручную ключи.
можно сделать анимацию экспрешном, а потом конвертировать выражение в ключи
как вы делаете файл 64 кб? у меня файл с иллюстратора даже просто с одним элементом 340 кб! есть какой то плагин для сжатия ? можно решить эту проблему? Хелп!
Комментарий удален модератором
На самом деле это лучшая статья по теме. Ибо я убила день на то чтобы учесть все требования плагина о том , что маски ему не нравятся, текст не нравится, имейджес и солидс тоже... Капец... Как можно простую гифку извратить до этого
И это я еще видео стикер не начинала, теперь думаю надо ли мне оно
У меня возникла такая проблема - в этом формате стикеры/эмоджи 2д создаются, рендерятся плагином без проблем и файл на выходе загружается. Но когда я создаю 3d - чтобы просто разворот по вертикали был, то плагин не может обработать и выдаёт, что "слои в 3d формате не поддерживаются". Такой проект только в webm получается сохранить и загрузить как видео-эмоджи, но его качество ниже. Вы не сталкивались с этим? Как-то решили?