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

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

Поэтапно разберемся во всех нюансах при разработке такого стикера. Начиная с программного обеспечения и заканчивая публикацией в Telegram.

Так что же из себя представляет этот анимированный стикер?
Это собственный формат Telegram — .tgs, который основан на технологии lottie.
Lottie — это движок от Airbnb, который позволяет проигрывать анимации на основе json, созданного с помощью плагина Bodymovin для Adobe After Effects. Такой же плагин существует и для стикеров Telegram и называется аналогично — Bodymovin-TG.

или другой векторный графический редактор. + плагин Bodymovin-TG.

Скачиваем с сайта разработчика плагин bodymovin-tg.zxp необходимый для экспорта анимации в формат .tgs.

Для установки потребуется ZXPInstaller — приложение для установки расширений для Adobe.

Открываем ZXPInstaller и переносим плагин в окно программы.

Открываем Adobe After Effects и заходим в раздел настроек — «сценарии и выражения».

Ставим галочку напротив «Разрешить сценариям выполнять запись файлов и осуществлять доступ к сети».

Открываем Adobe Illustrator и выбираем в строке меню «файл» -> «новый».

Во всплывающем окне задаем параметр 512 на 512 пикселей, исходя из требований к размеру стикера.

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

Изображение на стикере не должно выходить за края холста.

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

В качестве примера возьмем изображение стикера из интернета.
Импортируем изображение в рабочую среду Adobe Illustrator (перенос в окно программы изображения). И проводим указанные действия из видео:

Трассировка изображения. («Окно» -> «Трассировка изображения»)
Разобрать. («Объект» -> «Трассировка изображения» -> «Разобрать»)
Разгруппировать. («Объект» -> «Разгруппировать»)

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

Выбираем в строке меню «файл» -> «Сохранить как». Сохраняемый тип файла .ai. Во всплывающем окне ставим галочку напротив «Создать PDF-совместимый файл».

Размер анимированного стикера не должен превышать 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 секунды.

Переносим файл со стикером в рабочую среду Adobe After Effects.

Кликаем правой кнопкой по стикеру, выбираем «создать фигуры из векторного слоя».

Для примера произведем анимацию 3 элементов в стикере.

Разберем подробнее, как анимировать данные элементы в After Effects:

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

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

Аналогично (1) пункту, за исключением того, что теперь изменять нужно масштаб , а не положение.

Выбираем пункт «Контур» и активируем его нажав на значок секундомера.
Для создания такой анимации потребуется тянуть за «синий квадратик», изменяя тем самым форму объекта и постепенно довести её до требуемого состояния.

Выбираем пункт «Расширения» и находим там плагин Bodymovin.

Отмечаем композицию и выбираем место сохранения нажатием на «троеточие».
После нажимаем на кнопку Render.
Если всё пройдет удачно, в выбранном вами месте появится файл .tgs.

Открываем Telegram и находим в поиске бота @Stickers.
Для начала работы с ним отправляем команду /start.

У всех стикеров в наборе должна быть одинаковая частота кадров. Иначе придется делать два разных пака — для 30 и 60 кадров в секунду.

Отправляем команду /newanimated. После выбираем название и получаем следующую инструкцию:

Спасибо! Теперь отправьте мне, пожалуйста, будущий анимированный стикер — файл в формате TGS, созданный с помощью плагина Bodymovin-TG для Adobe After Effects.

Рекомендуем загружать изображения через десктопное приложение.

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

Бот Stickers предложит выбрать иконку для анимированных стикеров. Её нужно создать отдельно, но проще всего написать команду /skip, чтобы первый стикер показывался в качестве иконки.

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

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

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

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

Создайте видео с помощью Canva

Первый шаг, который вам нужно сделать, чтобы создать видеонаклейку, — это вырезать клип, который вы хотите использовать. Для этого мы рекомендуем очень мощный видеоредактор Canva. Вы можете скачать его с сайта Malavida бесплатно и безопасно.

Скачать Canva Android

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

Создайте новый дизайн в Canva

На экране появится список размеров по умолчанию. Telegram требует, чтобы видеостикеры имели размер 512 x 512 пикселей. Поэтому выберите вариант нестандартного размера.

Выберите нестандартный размер

Введите размеры холста, как показано на следующем снимке экрана. Чтобы продолжить, нажмите «Создать новый дизайн».

Добавьте элемент на холст

Ваш холст размером 512 x 512 пикселей уже создан. Пришло время добавить новое видео. Вы можете сделать это с помощью нижней левой кнопки, которая показывает символ +.

Введите правильные размеры

Откройте галерею Canva и выберите клип, который вы собираетесь использовать в видеостикере. В нашем случае это видеофайл длительностью 9 секунд.

Выберите видео из галереи

Найдите значок ножниц, чтобы обрезать видео. Еще одно из требований, которое предъявляет Telegram — длительность клипа не более 3 секунд.

Обрежьте видео

Обрежьте видео и выберите фрагмент, который хотите использовать. Мы рекомендуем вам выбрать фрагмент продолжительностью около 2,6 или 2,7 секунды. Canva при экспорте обычно добавляет несколько дополнительных десятых, и Telegram не будет поддерживать видео, если оно чуть длиннее 3 секунд.

Выберите фрагмент

В правом верхнем углу находится кнопка экспорта. Нажмите на него и в селекторе параметров нажмите «Загрузить».

Загрузите видео во внутреннюю память

Убедитесь, что выбран формат MP4, и начните загрузку контента с помощью кнопки ниже.

Начните загрузку

После экспорта отобразится меню общего доступа Android. Закройте его, не беспокоясь. Видео уже будет сохранено во внутренней памяти.

Конвертируйте видео в удобный формат

У вас уже есть видео размером 512 x 512 пикселей и продолжительностью менее 3 секунд. Но еще одно правило, которое наложил Telegram, заключается в том, что формат должен быть WEBM. Если вы помните, мы экспортировали клип в формате MP4. Поэтому нам придется обратиться к онлайн-сервису, такому как Convertio, чтобы изменить расширение видео. Откройте браузер и перейдите по следующему URL-адресу:

https://convertio.co/mp4-webm

Используйте среднюю кнопку, чтобы выбрать файл.

Выберите файл для конверсии

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

Откройте файл из внутренней памяти

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

Откройте настройки беседы

На вкладке видео примените следующие изменения:

Кодек: VP9.
Качество: 35 (низкое качество). Telegram не принимает файлы размером более 256 Кб.
Частота кадров: 30 кадров в секунду. Telegram не поддерживает более высокую скорость.

Затем на вкладке «Аудио» откройте раскрывающийся список, который вы увидите в разделе «Кодек», и выберите параметр «Нет» (удалить звуковую дорожку). Опять же, Telegram не разрешает видеостикеры со звуком.

Настройки преобразования для аудио

Все готово для конвертации! Нажмите на кнопку ниже, чтобы изменить расширение файла с MP4 на WEBM.

Начните преобразование

По завершении вы получите ссылку для скачивания вашего нового видеоклипа в формате WEBM.

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

Последний шаг — зайти в Telegram и найти бота @stickers. Это тот, у которого значок подтверждения рядом с именем.

Откройте стикер-бот

Запустите бота кнопкой внизу диалога.

Запустите бот в Telegram

Введите команду /newvideo, чтобы создать новый пакет видеостикеров. Прежде чем продолжить, имейте в виду, что отправленные вами видео будут опубликованы в сети и будут доступны всем пользователям.

Команда для создания нового пакета видеостикеров

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

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

Следующим шагом будет отправка видео WEBM боту. Важно, чтобы вы отправляли его как файл, а не как видео. Таким образом, дополнительное преобразование не будет применено.

Отправить видео файл

Напишите смайлик, чтобы связать его с сидящим. Таким образом, Telegram будет рекомендовать его при написании, как показано на изображении после этого абзаца.

Свяжите видео со смайликом

Мы почти закончили. Щелкните ссылку /publish или введите команду в текстовое поле ниже. Не забывайте, что если вы хотите отправить больше видеостикеров и добавить их в пакет, вы можете это сделать. Просто отправьте дополнительные файлы WEBM перед запуском команды публикации.

Опубликовать стикерпак

Вы хотите добавить идентифицирующий значок для вашего пакета? Сделайте это, отправив изображение размером менее 32 КБ и размером 100 x 100 пикселей. Также можно пропустить этот шаг с помощью команды /skip.

Пропустить создание значка

Наконец, укажите общедоступный URL-адрес вашего пакета видеостикеров. Если он уже существует, появится сообщение об ошибке, и вам нужно будет указать другой альтернативный номинал.

Дать название пакету URL

Хорошо! У вас уже есть публичная ссылка на ваш пакет. Нажмите на нее, чтобы добавить в свою учетную запись.

Открыть стикерпак

Во всплывающем сообщении нажмите «Добавить 1 наклейку», чтобы видеонаклейка была добавлена в ваш профиль. Благодаря облачной синхронизации он будет доступен на всех ваших устройствах.

Добавьте наклейку в свой аккаунт

Когда вы переходите к разговору, вы можете выбрать его в селекторе наклеек. Он также будет предлагаться при вводе соответствующего смайлика в текстовое поле.

Используйте видеостикер в разговорах

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

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

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

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

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

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

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

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

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

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

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

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

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

«Композиция»

«Новая композиция»

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

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

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

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

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

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

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

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

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

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

Загружать стикеры удобнее всего с десктопного клиента, которым мы и воспользуемся. Запустите приложение, введите в поиске название требуемого бота и выберите результат, отмеченный на скриншоте ниже.
Выполните команду /start для начала работы с ботом.
Появится список доступных команд и вариаций, кликните в нём по ссылке /newanimated.
Введите название будущего набора (можно использовать как русские, так и английские буквы, но последние предпочтительнее).
Теперь можно добавить к созданному паку первый стикер, просто перетащив файл из папки в диалог с ботом.

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

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

Purple cougar или как мы делали анимированные стикеры в Telegram.

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

Для каждой анимации нужно было нарисовать 2 и более логических точки, чтобы клиент, хотя бы примерно смог представить, как оживет его стикер. После согласования скетчей перешли к цвету. Красила в AI, с расчетом на анимацию, открыла для себя несколько моментов при подготовке иллюстраций к сдаче:

Собирать все элементы в логические группы: eye_left, eye_right, nose и пр.

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

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