Анимация смаликов в Телеграме

Стикеры в Telegram – не только забавное дополнение к сообщениям и способ в графической форме продемонстрировать свои эмоции. С их помощью можно рекламировать свой аккаунт или страницу, добавляя к картинкам фирменный логотип. А еще стикеры можно продавать и таким образом наладить источник дополнительного дохода.

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

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

Перед тем, как создавать графику для стикерпака, необходимо ознакомиться с требованиями. На официальном сайте Telegram указаны следующие параметры:

• размер картинки – 512х512 пикселей;
• объект не должен выходить за пределы холста;
• длительность анимации – 3 секунды;
• анимация должна быть поставлена на бесконечный повтор;
• финальный размер после рендеринга не должен превышать 64 КБ;
• анимация должны выполняться со скоростью 60 кадров в секунду.

Telegram принимает файлы, сохраненные в формате TGS – специальное расширение, которое основывается на базе метода анимации Lottie. Выбор данного метода объясняется тем, что анимация, обработанная таким способом, сохраняет высокое качество и хорошую детализацию при высокой степени сжатия.

АНИМАЦИЯ ЧАСОВ ИЗ СМАЙЛИКОВ ТЕЛЕГРАММА

Минус состоит в том, что анимацию на основе Lottie поддерживают только продукты компании Adobe. Поэтому официально рекомендованный способ создания стикеров – в программах Photoshop, Illustrator и After Effects. Однако есть альтернативные методы – из видеороликов на телефоне и через онлайн-сервис. Мы рассмотрим все возможные варианты.

Если нужны проверенные аккаунты для разных соцсетей, переходите в наш раздел Аккаунты.

Как создать анимированные стикеры для ТГ на телефоне

Но что делать, если в наличие есть только смартфон? В этом случае на помощь придет Телеграм-бот Favorite Stickers Bot. Он позволяет создавать стикерпаки из видеофайлов и GIF-анимации, автоматически конвертирует их регистрирует их в официальном телеграм-боте.

В этом способе есть один недостаток: создать стикеры на прозрачном фоне из GIF не получится – фигурка будет расположена на черной подложке. Также следует учитывать, что бот распознает видео только в формате AVI и MP4. Хотя он также разрешает загружать анимированные стикерпаки из векторных файлов, но в этом случае требуется перевести файл в формат TGS.

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

Многие пользователи предпочитают классические векторные картинки на прозрачном фоне. Самостоятельно создавать такие анимированные стикеры для ТГ достаточно сложно, ведь для этого нужно уметь рисовать в программах для создания иллюстраций. Для работы потребуется следующий софт:

• Adobe Illustrator, Adobe Photoshop или другой векторный редактор, позволяющий отрисовывать вектор и экспортировать проекты в After Effects;
• After Effects – в нем стикеры анимируются и подготавливаются к загрузке в Telegram;
• плагин Bodymovin-TG – с его помощью проводится конвертация анимации в формат TGS.

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

Для начала скачаем плагин BodyMovin – его можно найти на официальной странице в GitHub. Также потребуется установить на ПК ZXP Installer. Чтобы загрузить установочные файлы, прокрутите до блока Installing и запустите закачку, нажав на названия нужных пакетов.

После этого установите ZXP Installer стандартным образом – дважды кликнув по инсталлятору. Когда процесс завершится, откроется окно программы. В нее нужно перетащить предварительно скачанный архив с плагином BodyMovin. Убедитесь, что After Effect закрыт, перед тем как запускать установку расширения.

После этого можно приступать к созданию стикеров.

1. В программе Illustrator отрисуйте векторные файлы, которые будете анимировать. Если вы не можете рисовать самостоятельно, сохраните из Интернета подходящие картинки и обработайте их при помощи инструмента «Трассировка».
2. Сохраните проект со всеми слоями, нажав сочетание клавиш Shift + Ctrl + S. Укажите выходным форматом внутреннее расширение .ai. Во время экспорта убедитесь, что напротив пункта «Создать PDF-совместимый файл» стоит галочка.
3. Откройте After Effects и создайте новый проект, указав необходимые условия для ТГ: размер 512х512, частота кадров 60, длительность 3 секунды.
4. Импортируйте проект стикеров и проведите анимацию. Когда работа будет завершена, кликните по пункту меню Windows. Выберите Extensions – BodyMovin.
5. В окне плагина отметьте экспортируемый объект и кликните по пункту с указанием папки, в которой будут сохраняться файлы. Укажите название стикера на английском языке, щелкните «Сохранить» и запустите рендер соответствующей клавишей.

Обратите внимание, что по официальному гайдлайну Telegram при создании анимации в After Effects запрещено использовать следующие инструменты и эффекты:

• автоматические ключевые кадры Безье (Auto-bezier keys);
• выражения (Expressions);
• маски (Masks);
• эффекты слоев (Layer Effects);
• изображения (Images);
• пустые слои – солиды (Solids);
• текстовые слои (texts);
• 3D-слои (3D Layers);
• слияние путей (Merge Paths);
• фигуры в форме звезд (Star Shapes);
• градиентные линии (Gradient Strokes);
• шейповый модификатор Repeater;
• растяжение времени (Time Stretching);
• ремаппинг времени (Time Remapping);
• автоматическое ориентирование слоев (Auto-Oriented Layers).

Умеете создавать анимированные стикеры? Тогда разместите свои услуги в наших разделах с резюме и для фрилансеров.

Альтернативный вариант: редактирование и конвертация онлайн

Если у вас нет желания устанавливать After Effect, создать стикеры можно в любом редакторе, позволяющем отрисовывать вектор и проводить анимацию. Просто создайте проект с необходимыми параметрами и сохраните в формате GIF.

Также можно скачать анимацию из Интернета и подогнать размер и вес до требуемых на сайте Ezgif. Подходящие стикеры можно найти на сайте Giphy в разделе Stickers. Чтобы изменить вес файла, перейдите на сайте Ezgif и обработайте анимацию в разделе Optimize.

Укажите степень сжатия картинки, передвигая слайдер под превью, и нажмите Optimize GIF. Сохраните результат на компьютер кнопкой Save. Если нужно изменить размер кадра, воспользуйтесь разделом Resize на этом же сайте.

После этого требуется перевести анимацию в нужный формат. Для этого воспользуемся онлайн-конвертером Gif to TGS.

Сайт работает с файлами, которые отвечают следующим параметрам:

• размер гифки не превышает 10 КБ;
• файл содержит от 2 до 10 ключевых кадров;
• цветовая модель – от 1 до 16 цветов.

Для преобразования щелкните Choose file и загрузите анимацию. Если все требования соблюдены, в итоге вы получите файл с расширением .tgs, который можно загрузить в Telegram.

Загружаем стикеры в Telegram

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

1. Когда бот стартует, появится меню с опциями. Чтобы создать пак анимированных стикеров, щелкните по пункту /newanimated. Вы также можете самостоятельно ввести эту команду в поле сообщения.

1. После этого нужно присвоить стикеру смайл/эмодзи, при вызове которого будет показываться ваша картинка. Разрешается привязывать к анимации несколько смайлов, но рекомендуется использовать не более 2-х.

1. Повторите шаги, чтобы добавить остальные стикеры. Когда набор будет укомплектован, запустите команду /publish.
2. Когда стикерпак будет опубликован, бот порекомендует добавить обложку. Файл не должен превышать вес в 32 КБ и должен быть размером 100х100 пикселей. Этот шаг можно пропустить – тогда в качестве обложки будет показываться первый стикер из набора.

​​​​​​​

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

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

Эксперты отвечают
​​​​​​​

Е Елена Войс,
product owner ADTEAM

Чем стикерпаки могут быть полезны бизнесу и крупным брендам?

Дело в том, что у sticker pack Telegram есть особая магия. Если концепт сделан душевно и близок пользователям, то брендированные стикеры разлетаются и в обычной беседе у пользователей, привлекая к себе и к бренду дополнительное внимание. Это легкий способ продвинуть свой канал, но, наверное не самый бюджетный на первый взгляд. Создание одного анимированного стикера стоит от 30$ и занимает достаточно много времени. Но с другой стороны, если в sticker pack заложить необходимые для успешного брендинга посылы и использовать позитивную концепцию (вид), то это прекрасный инструмент продвижения.

Вывод

Итак, мы рассмотрели возможные варианты создания анимированных стикеров. Хотя Telegram накладывает строгие требования к публикуемым файлам, создавать наборы могут даже те, кто не имеет навыков работы с Illustrator и After Effects. Но если вы используете в качестве стикеров чужие работы, скачанные из Интернета, не забывайте об авторских правах и не используйте иллюстрации, уже размещенные на Телеграм.

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

Интересен заработок в Интернете? Смотрите конференции. Найти список актуальных конференций можно в нашем разделе Конфы.

Источник: partnerkin.com

TelegramBot. Базовый функционал. Стикеры и смайлы. (Часть 3)

Один из вопросов, который часто приходит в личку — как работать со смайлами(эмодзи) и стикерами.

Как с ними работать, какими инструментами пользуюсь я и т.д.

В данной части будут рассмотрены такие вещи: как создать сообщение со стикером, как обработать полученное сообщение со стикером, как найти в тексте сообщения все смайлы(эмодзи), как создать сообщение с использованием смайлов (эмодзи).

Кому интересно, прошу под кат.

По-традиции, начинаем статью со ссылки на исходники по ней 🙂

Весь обсуждаемый в статье код собран в ветке Part3-Stick_and_Emoji.

Стикеры

Одна из вещей, что мне так понравилась в телеграмме, как только он появился — были стикеры. Они классные, удобные, бесплатные. И все это огромное разнообразие стикеров нам, естественно, хочется использовать и в боте. На деле эта процедура очень простая. Чтобы отправить стикер пользователю, нам нужно знать только лишь id стикера и больше ничего.
Обычно для стикеров я создаю себе вот такой класс-помощник, где храню данные о используемых в боте стикерах:

import org.telegram.telegrambots.api.methods.send.SendSticker; public enum Stickers < FUNNY_JIM_CARREY(«CAADBQADiQMAAukKyAPZH7wCI2BwFxYE»), ; String stickerId; Stickers(String stickerId) < this.stickerId = stickerId; >public SendSticker getSendSticker(String chatId) < if («».equals(chatId)) throw new IllegalArgumentException(«ChatId cant be null»); SendSticker sendSticker = getSendSticker(); sendSticker.setChatId(chatId); return sendSticker; >public SendSticker getSendSticker() < SendSticker sendSticker = new SendSticker(); sendSticker.setSticker(stickerId); return sendSticker; >>

Тут все просто. Мы даем стикеру имя, понятное для нас. И с помощью пары методов получаем готовые объект для отправки пользователю.

Для того, чтобы ответить на вопрос: «Где взять ID стикера?», — давайте напишем себе помощника, который эти данные нам и будет сообщать в нашем же боте.

У нас есть базовый функционал, который мы создавали тут:
TelegramBot. Базовый функционал. (Часть 2)
Чтобы наш бот начал как-то обрабатывать принятые стикеры, нам нужно:

• Определить, что нам прислали стикер
• Указать, какой именно хендлер ответственнен за обработку сообщений со стикерами
• Запустить хендлер, который сформирует сообщение пользователю в ответ

В список команд мы добавили команду STICKER

В анализаторе присланного апдейта мы попробуем определить, текстовое ли у нас сообщение или в нем содержится стикер:

if (message.hasText()) < parsedCommand = parser.getParsedCommand(message.getText()); >else < Sticker sticker = message.getSticker(); if (sticker != null) < parsedCommand = new ParsedCommand(Command.STICKER, sticker.getFileId()); >>

Т.к. сложной обработки присланного сообщения нам делать не нужно, то обработку сообщений, содержащих стикер, мы поручим уже существующему хендлеру, ответственному за обаботку так называемых «системных сообщений»:
MessageReciever.java строка 86

case START: case HELP: case ID: case STICKER: SystemHandler systemHandler = new SystemHandler(bot); log.info(«Handler for command[» + command.toString() + «] is: » + systemHandler); return systemHandler;

Соответственно в SystemHandler нам нужно указать, как обрабатывать поступившую команду STICKER:
SystemHandler.java строка 31

case STICKER: return «StickerID: » + parsedCommand.getText();

В результате, при отправке нашему боту любой стикер — мы получим в ответ его ID:

Смайлы или эмодзи

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

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

Чтобы отобразить эмодзи в сообщении или на кнопке вам нужно знать его Unicode. В интернете полно источников, где можно найти все перечисленные смайлики, где указаны их теги, коды.
Для себя я выбрал такой способ работы с эмодзи: удобнее смайлы смотреть и выбирать в самом телеграмме.

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

В первую очередь добавим в pom.xml вот такую зависимость:

com.vdurmont emoji-java 3.3.0

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

В библиотеке собрано много разных инструментов:

Любознательным и пытливым будет где развернуться 🙂

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

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

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

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

Тэги должны быть обрамлены в двоеточние и содержать какой-то уникальный текст, обозначающий нужный смайл.

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

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

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

А мы, зная тэг, можем получить Unicode смайлика вот таким образом:

String emoji_kissing = EmojiParser.parseToUnicode(«:kissing:»);

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

import com.vdurmont.emoji.EmojiParser; public enum Icon < PLUS(«:heavy_plus_sign:»), MINUS(«:heavy_minus_sign:»), CHECK(«:white_check_mark:»), NOT(«:x:»), DOUBT(«:zzz:»), FLAG(«:checkered_flag:») private String value; public String get() < return EmojiParser.parseToUnicode(value); >Icon(String value) < this.value = value; >>

И вот так в коде будет выглядеть использование этого класса и конкретного смайлика:

row.add(new InlineKeyboardButton() .setText(Icon.CHECK.get() + » I’m going»)

Это код вот этой кнопки:

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

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

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

Добавим в список команд команду TEXT_CONTAIN_EMOJI
Command.java строка 8

public enum Command

В парсере, который определяет, что за команда содержится в нашем сообщении добавим вот такой текст:

if (result.getCommand() == Command.NONE) < ListemojiContainsInText = EmojiParser.extractEmojis(result.getText()); if (emojiContainsInText.size() > 0) result.setCommand(Command.TEXT_CONTAIN_EMOJI); >

Если мы определили, что сообщение не содержит никакой конкретной команды, но в нем есть смайлы — мы возвращаем, что мы отпарсили команду TEXT_CONTAIN_EMOJI.

Создадим отдельный хендлер, который будет обрабатывать только эту команду:
EmojiHandler.java

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

Скачивать стикеры других пользователей уже неинтересно? Мечтаешь использовать смайлики, которые бы полностью тебе подходили? Тогда лови гайд о том, как создать эксклюзивные эмодзи собственного авторства!

3 ноября 2022

Счастливые обладатели Telegram Premium , у меня для вас хорошие новости: твоя «особенность» может стать источником настоящего креатива! Новое обновление мессенджера позволяет пользователям не только пользоваться платными эмодзи, но и загружать свои собственные! Ну что, звучит интересно? Тогда сейчас расскажу, как это работает

Источник Telegram

Раньше эмодзи были «статичными» — за исключением моментов, когда ты отправляешь их по одному в чатике с друзьями-подружками. Но теперь все стало гораздо круче: теперь эмодзи анимируются прямо в тексте твоего сообщения! И да, именно их ты можешь создавать самостоятельно.

Для начала расскажем тебе, как добавить набор с эмодзи к себе в копилочку

Добавление эмодзи к себе

Источник Telegram

Существует два главных способа добавить к себе эмодзи — в зависимости от ситуации.

• По ссылке. Каждый набор эмодзи в Telegram имеет у себя личную ссылку: https://t.me/addemoji/название набора. Поделиться таким набором можно, нажав на три точки в верхнем правом углу набора и нажав соответствующую кнопку «поделиться». С компьютера это можно сделать, если нажать правой кнопки мышки на пак.

Читай также:

• Скопировать из сообщения. Зажми пальцем сообщение с понравившимися эмодзи. Внизу ты увидишь надпись с названием того самого пака. Нажав на название, ты получишь доступ к паку. А вот с компьютера ты должна нажать правой кнопкой мышки на сообщение, и тебе тут же выскочит строка «посмотреть набор эмодзи».

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

Как сделать эмодзи для Telegram

Источник Telegram

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

Требования к изображениям для эмодзи в Telegram

• формат PNG или WEBP, прозрачный фон, квадратная ориентация, разрешение 100×100 пикселей — для статичных эмодзи.
• формат WEBP или TGS, не более 3 секунд продолжительности, никакого звука, разрешение 100×100 пикселей, частота кадров 30 FPS, не более 256 кб размером — для анимированных и видеоэмодзи.

Как только ты загружаешь эмодзи, ты должна «привязать» его к стандартному эмодзи. То же самое делали и со стикерами. Уже после того, как ты загрузила все смайлики, ты должна ввести команду «publish», а потом задать название пака и задать имя, которое будет использоваться в ссылке.

Но и это еще не все. Существует еще один вид статичных эмодзи — векторные . И они тоже могут стать необычным способом поколдовать с паками в Telegram.

Источник: thegirl.ru