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

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

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

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

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

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

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

Подписывайтесь на Telegram-канал

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

Быстрый переход к разделу:

• Что такое стикерпак и какие требования у стикера
• Создаем стикер при помощи бота
• Вариант с обрезкой в квадрат
• Вариант с прозрачным фоном в Photoshop
• Как сделать стикер в iPhone
• Как создать анимированные стикеры в Telegram

Что такое стикерпак и какие требования у стикера

Стикерпак — это набор изображений, которые заменяют стандартные эмодзи.

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

Конечно, не стоит смешивать личные и публичные стикеры в Telegram, ведь пользователи, добавившие набор стикеров, будут видеть все изображения, добавленные к стикерпаку.

Намного лучше создать отдельный стикерпак со своим названием и тематикой. Достаточно подготовить изображения со стороной 512 пикселей в формате png или webp и загрузить их удобным способом.

Создаем стикер при помощи бота

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

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

После подготовки всех изображений можно перейти в @Stickers в Telegram и с помощью команды /newpack создать свой первый стикерпак в Telegram.

1. выберите название,
2. отправляйте сначала файлы с изображениями, а после соответствующие эмодзи,
3. наполняйте стикерпак.

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

Стикеры в Telegram должны соответствовать разрешению 512 пикселей по одной из сторон. Вторая сторона может быть меньше, но наиболее популярный формат — квадратный стикер 512х512.

Если стикер в Telegram кажется прямоугольным, скорее всего, дело в том, что часть фона прозрачная, поэтому пропорция квадрата теряется.

Сделать изображение квадратным и задать размеры позволяет редактор фото в телефоне. Для этого:

• укажите размеры,
• выберите область изображения,
• сохраните фото в необходимом разрешении.

Если ваш телефон не может выполнить эти операции, воспользуйтесь сторонними сервисами (например, I love img) или приложениями:

Вариант с прозрачным фоном в Photoshop

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

Наиболее простой способ создать прозрачный фон для стикеров в Telegram — Photoshop:

• С помощью нажатия в меню «Выделение — Предмет» в два клика убрать все лишнее с фото и получить готовое изображение.
• После выделения предмета инвертируйте область (Ctrl+Shift+I) и вырежите все ненужное.

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

Как сделать стикер в iPhone

Приложение Stickers позволяет не только ровно обрезать изображение, но и создавать стикеры с прозрачным фоном. Достаточно открыть фото и выделить область, которая должна остаться в качестве стикера.

Инструменты приложения позволяют менять толщину выделения, чтобы:

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

У других приложений, например, «Редактора стикеров для Telegram» меньший функционал, однако они тоже могут оказаться полезными, если нет задачи сделать идеальные стикеры для iPhone.

А еще у владельцев iPhone с iOS 16 есть функция автоматического создания стикера из фото. Достаточно долго удерживать палец на объекте, который хотите использовать в качестве стикера в Telegram, и iPhone сам удалит фон и предложит отправить результат в качестве стикера.

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

Анимированные стикеры в Telegram загружаются так же, как и обычные, с одним только отличием: вместо команды /newpack в боте @Stickers необходимо ввести /newanimated.

Для анимированных стикеров Telegram использует собственный формат tgs, который можно получить, установив расширение Bodymovin-TG в Adobe After Effects. Создав обычную циключиную анимацию размером не более 64 КБ, можно открыть расширение Bodymovin for Telegram Stickers и сохранить композицию в нужном формате.

Важно: использование этих инструментов в After Effects может привести к ошибкам при сохранении файлов, поэтому от них лучше отказаться:

1. Repeaters,
2. Masks,
3. Solids,
4. Texts,
5. Auto-Oriented Layers,
6. Layer Effects,
7. 3D Layers,
8. Images,
9. Gradient Strokes.

Анимированные стикеры в Telegram могут отличаться частотой кадров: если один стикер сохранен в 30 к/сек, а другой в 60 к/сек, платформа не даст использовать их в одном стикерпаке.

Использование средств Adobe требует дополнительных навыков и знаний и усложняет работу над стикерами в Telegram, зато позволяет создавать настоящие шедевры стикеростроения.

Если вы не занимаетесь графикой и дизайном профессионально, будет достаточно квадратных стикеров, сделанных на телефоне: в стикерпаке важнее идея, нежели изящность исполнения. Наиболее популярные стикеры сегодня — картинки с котиками и смешными комментариями, а не сложные работы аниматоров, исполненные в дорогостоящих программах.

Фото на обложке: Shutterstock / AngieYeoh

Подписывайтесь на наш 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

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

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

Этап 1 — Подготовка инструментов
Что необходимо

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

Как установить Bodymovin-TG

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

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

Приложение доступно и на Mac OS

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

Так же можно кликнуть и выбрать файл из всплывающего окна проводника.
Настройка Bodymovin-TG

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

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

Этап 2 — Создание стикера
Создание и настройка документа

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

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

Рисование стикера

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

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

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

Трассировка изображения

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

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

Более подробно о «Трассировке изображения» читайте на сайте Adobe.

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

Сохранение стикера

Выбираем в строке меню «файл» -> «Сохранить как». Сохраняемый тип файла .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 секунды.

Для удобства можно сохранить шаблоны настроек для 60 и 30 кадров соответственно
Импорт стикера в After Effects

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

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

После создания векторного слоя, можно удалить слой Sticker.ai, который в дальнейшем не потребуется
Анимация в 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.

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

Stickers, бот

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

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