А теперь о подробностях реализации.
Всё началось с дискуссии в чатике Telegram-разработчиков о грядущей фиче:
Мужик сказал — мужик сделал! Первый прототип на Pillow и svgwrite, разбирающий GIF’ку на пиксели и преобразующий их в векторные квадратики с предпросмотром в SVG, был написан за один выходной.
Веселье началось дальше…
JSON — открытый формат, говорили они.
Доселе с форматами в Telegram то и дело хитрили. Сделали поддержку GIF-анимаций — на самом деле они конвертируются в MP4-видео. Сделали поддержку стикеров — выгружаются они в PNG, но преобразуются в WebP. В этот раз всё честнее: что на входе, то и на выходе.
Для анимированных стикеров в Telegram используется не GIF, не видео, и даже не какой-нибудь устоявшийся формат векторной графики типа SVG или — упаси Ктулху! — Flash. В нём задействован новомодный формат, вышедший из-под крыла Airbnb — Lottie. Доселе он имел некоторую известность в среде мобильных разработчиков, но благодаря Telegram, возможно, обретёт бо́льшую популярность.
АНИМИРОВАННЫЕ СТИКЕРЫ ДЛЯ ТЕЛЕГРАМ
По сути своей, файлы Lottie являются сериализованными в JSON проектами Adobe After Effects, по максимуму реализующими все возможности этой программы. С отображением, увы, всё не так радужно. Хотя готовых «официальных» реализаций библиотеки для рендеринга Lottie и много, как раз под покрываемые Telegram платформы: Android, iOS, Qt и Web — лишь часть из возможностей формата реализована во всех из них. В Telegram пошли ещё дальше и ограничили перечень поддерживаемых возможностей, а также «придумали» свой формат, который отличается от обычного Lottie всего лишь упаковкой в GZip и параметром «tgs»: 1 . Кажется, я знаю, где сейчас работает Денис Попов! 🙂
И если с документацией на библиотеки для разных платформ всё довольно неплохо, то найти хоть какое-то описание устройства формата, увы, не удалось — только JSON-схему в исходниках lottie-web. Пришлось попутно ковыряться в существующих анимациях, дабы понять общие концепции формата. Также обнаружились расхождения реальных файлов со схемой: в частности, в слоях типа 4, согласно схеме, вложенные объекты хранятся в свойстве «it» — однако в реальных файлах ключ называется «shapes» , а «it» не работает.
Выясненные нюансы формата:
- Файл состоит из слоёв. В отличие от GIF, здесь у каждого слоя может быть произвольное время начала и конца отображения. К слою можно (точнее, нужно) применять различные трансформации: масштабирование, повороты, изменение прозрачности и т.д. Слои могут быть даже трёхмерными (запрещено для Telegram).
- Слой состоит из «фигур» (shapes). Типов у них много, некоторе нельзя использовать в Telegram. На практике, чтобы слой отобразился, он должен включать три фигуры: контур (в готовых анимациях это обычно тип «sh» — кривые Безье; конвертер пока использует только тип «rc» — прямоугольники), заливка (тип «fl» ) и трансформация (тип «tr» ).
- Можно даже включать растровые элементы, создавать текстовые слои, устанавливать взаимосвязи параметров слоёв и фигур через выражения. Вся эта вкуснотища также запрещена в Telegram.
Казалось бы, это и не проблема вовсе? Даже простенький GZip неплохо справляется со сжатием вопиюще повторяющихся данных, и 1 МБ сырого JSON магическим образом превращается в пару десятков килобайт, которые спокойно пролезают в заявленное ограничение в 64 кБ. Не тут-то было!
Как Сделать анимированые Стикеры ИЗ ВИДЕО для телеграм!? | БИТЛЕКС
Загружаю я, значит, пухленькую анимацию, которая спокойно отображается lottie-web, в Telegram — и тут вместо условно красивого пиксель-арта на меня смотрит статическое размазанное вот это:
Что такое?! А оказалось, на разжатые данные тоже есть явно не указанное ограничение в 1 МБ. Представитель команды Telegram оперативно подтвердил его и сообщил о грядущем поднятии лимита до 2 МБ.
Даже если эти проблемы решат — стикеры, выходящие за пределы 1 МБ несжатых данных и не содержащие трансформаций, окажутся недоступными для пользователей старых версий Telegram. Так что придётся, видимо, соблюдать ограничения и впредь.
Прозрачность — это важно
Pillow, наряду с OpenCV, можно назвать индустриальным стандартом для обработки изображений в Python. Мало того, он неплохо заточен и под особенности GIF: поддерживает индексированные цвета, даёт доступ к палитре. Поддерживает преобразование пиксельной карты в NumPy-массив, что важно для продуктивной обработки. Даже статистику по цветам собирает! Но обнаружились и минусы:
- Не нашлось задокументированного способа получить индекс прозрачного цвета. Пришлось в качестве временного решения подразумевать, что прозрачный цвет — самый распространённый, но в реальных GIF’ках это не всегда так.
- То же самое с задержкой между кадрами: Pillow отдаёт только сами кадры как последовательность изображений, без информации о задержках.
- Иногда некорректно накладываются частичные кадры.
Прозрачность, как оказалось, gif2numpy не поддерживает вообще: цвета сразу преобразуются в три канала с разрядностью в байт, без учёта разрядности и сохранения индексов цветов. Благо, модуль состоит из одного файла, так что не составило труда включить его в проект и доработать, зарезервировав под прозрачность цвет #FE00FE .
Проблему с частичными кадрами решить оказалось нетривиально. gif2numpy пытается накладывать такие кадры на предыдущий, однако не проверяет параметры наложения, из-за чего также не всегда выходит правильный результат. Дабы не возиться с флагами, добавлена предварительная обработка изображений с помощью gifsicle с ключом —unoptimize — он преобразует частичные кадры в полные. А заодно приводит их к использованию глобальной палитры, что устранило необходимость отдельным образом обрабатывать прозрачный цвет при использовании собственной палитры кадра.
Сожми меня сильнее
Квадратики — это хорошо, но с такими ограничениями нужно проявить больше фантазии, иначе в Telegram не «пролезают» даже миниатюрные GIF’ки.
Первым в ход пошло нечто похоже на RLE : соседние по горизонтали квадратики одного цвета объединяются в один прямоугольник.
Далее — черёд эксплуатации особенностей Lottie. Поскольку каждый слой имеет произвольное время начала и конца — можно применить технику, которая давным-давно используется видеокодеками, и отчасти в самом GIF: квадратики, которые остаются на одном месте в течение нескольких кадров, можно слить в один слой, во время отображения которого сменяется несколько других. Что и реализовано, пока только для пар соседних слоёв.
Планы по развитию
Идей, которые здесь можно применить, навалом:
- Распознавать одноцветные области любого размера. Можно разбивать их на набор прямоугольников, для чего есть неплохой алгоритм. Также целесообразно преобразовывать их в контур, но это омрачается необходимостью указывать все точки кривых Безье в Lottie — прямоугольниками в некоторых случаях может быть выгоднее.
- Распознавать движение. Техника, опять-таки, издревле применяющаяся в видеокодеках. Если один и тот же контур не меняет форму от кадра к кадру, но лишь координаты — стоит вместо дублирования на нескольких слоях поместить его на один слой с трансформацией.
- Распознавать «накрытие» одних областей другими. Пример:
. .O..O. . .OOOO. .
Ссылки
- Исходники. Местами страшные.
- Канал, на котором я выкладываю паки успешно сконвертированных GIF’ок.
Источник: habr.com
Как создать анимированные стикеры в Telegram
Начиная с версии 5.9 приложение Telegram поддерживает анимированные стикеры. Все художники могут свободно создавать и загружать новые наборы с анимациями.
Необходимые инструменты
Чтобы создать анимированный стикер для платформы Telegram, вам понадобится следующее:
1. Векторный графический редактор, который позволяет экспортировать векторные объекты в Adobe After Effects для превращения их в анимацию.
2. Программа Adobe After Effects.
3. Плагин Bodymovin-TG для Adobe After Effects, который нужен для экспорта анимации в .TGS — формат анимированных стикеров Telegram.
Технические требования
1. Размер изображения должен быть 512х512 пикселей.
2. Объект стикера не должен выходить за рамки.
3. Продолжительность анимации не должна превышать 3-х секунд.
4. Анимация должна быть зацикленной.
5. Размер стикера не должен превышать 64 КБ.
6. Все стикеры из одного набора должны иметь одинаковый FPS (30 или 60).
7. Нельзя использовать следующие функции 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.
Использование любого из этих инструментов сделает невозможным экспорт вашей анимации с помощью Bodymovin-TG.
Загрузка стикеров
Кроме того вашему набору понадобится иконка. Значки для наборов анимированных стикеров должны быть размером 100×100 пикселей, с зацикленной анимацией, не превышающей 3-х секунд.
Подписывайтесь на канал Вам Телеграм — актуальные новости, полезные статьи и советы по работе с Telegram.
Источник: www.vamtlgrm.com
Как создать стикеры в Телеграм: пошаговая инструкция
Сегодня Телеграм активно развивается. Он не только добавляет обновления безопасности, но и радует пользователей новым функционалом. Одна полюбившаяся всеми функция — это обычные и анимированные стикеры.
В этой статье пойдет речь о том, как создать стикеры в Телеграм.
Что такое стикеры в Телеграм
Стикеры (с англ. наклейки) в мессенджере Телеграм — это альтернатива обычным эмодзи, только больше по размеру и с большими возможностями.
Они помогают точнее показать эмоцию, которую человек испытывает в данный момент времени, а также выражать чувства и общаться с их помощью.
Стикер может содержать что угодно, например, фотографию любимого героя из мультфильма или остросюжетного боевика, реального человека, животное, знаменитость, предмет или обычную надпись. Некоторые из них статичны, а другие имеют анимацию.
А самая главная прелесть стикеров — возможность создавать их самостоятельно.
Требования к стикерам Телеграм
Прежде чем приступать к созданию собственного стикерпака, необходимо ознакомиться с базовыми требованиями. Телеграм не пропустит изображения или фото, если они не будут им соответствовать.
- максимальный размер не должен превышать 512 на 512 пикселей;
- формат изображения — PNG с прозрачным или белым фоном;
- каждый стикер должен быть сохранен в отдельный файл;
- при создании стикерпак, необходимо загружать изображения файлом, иначе Телеграм их не распознает;
- для создания аватарки или значка стикерпак, потребуется создать отдельное изображения размером 100 на 100 пикселей на прозрачном фоне — это не обязательное требование.
Основные работы лучше выполнять при помощи ПК, поскольку на мобильном телефоне это гораздо сложнее. А в десктопной и веб-версии удобно загружать готовые наклейки.
Как сделать стикеры в Телеграм
Сегодня многим пользователям интересно создание своих кастомных стикеров, но для этого приходится работать со сложными графическими редакторами и обрабатывать картинки.
Это частое заблуждение, поскольку можно взять даже обычное изображение, привести его к нужному формату и создать на его основе стикерпак.
Обработка
Для обработки подойдет даже самый примитивный графический редактор, но можно воспользоваться и Фотошопом. Достаточно вырезать квадратную область и сохранить в формате PNG. Не стоит забывать об ограничениях — максимальный размер 512×512 пикселей.
Если создавать полноценные стикеры с рисованными объектами или текстом, лучше выполнить обводку в белом цвете на 2-5 пикселей. Так они будут смотреться более приятно и лаконично.
Создание анимированных стикеров
Создавать анимированные наклейки намного сложнее. Необходимо обладать минимальными знаниями в программе «Adobe After Effects», чтобы создавать анимации. Помимо этого, еще потребуется установить специальный плагин «Bodymovin-TG для Adobe».
Мы не будем рассматривать полноценно вопрос: как создать анимированные стикеры в Телеграм, поскольку здесь требуется наличие специализированных навыков. Можно рассмотреть процесс пошагово:
- сначала необходимо установить саму программу и плагин;
- отрисовать графику в стороннем приложении, например, в «Adobe Illustrator»:
- импортировать ее в «Adobe After Effects»;
- создать желаемую анимацию при помощи возможностей программы;
- экспортировать файл из расширения «Bodymovin-TG».
На выходе получится файл в формате TGS. Именно его необходимо загружать при создании анимированного стикерпака.
Однако, существуют и другие способы, как создать видео стикер в Телеграм и получить файл в TGS формате. Например, можно воспользоваться онлайн конверторами, которые могут бесплатно переконвертировать видео, гиф файл и даже фотку в нужный формат.
Обычно сервисы делают это с вотермаркой, а чтобы от нее избавиться, придется приобрести полную версию. Цена плавает в пределах 10 долларов.
Загрузка своего пакета стикеров
Пошаговая инструкция — как создать пак стикеров в Телеграм:
- перейти в бота;
- снизу нажать на кнопку «START»;
- из появившегося списка команды выбрать «/newpack»;
- ввести любое название будущего стикерпака.
На этом создание пака закончено, можно приступать к загрузке уже готовых наклеек
Телеграм еще раз продублирует информацию об ограничениях и необходимом размере, порекомендует добавить белую обводку и тень, но это не обязательно. Так стикеры будут смотреться лучше, однако многие паки пренебрегают этой рекомендацией.
Пошаговая инструкция — как загрузить готовые стикеры:
- отправить картинку необходимо прямо в чат с ботов — главное делать это без сжатия и в виде файла;
- выбрать смайлик, который по смыслу подходит к стикеру — они будут ассоциироваться друг с другом внутри приложения.
Такие действия необходимо проделать абсолютно с каждой подготовленной картинкой. К сожалению, в Telegram нет возможности загрузить сразу все стикеры, поскольку требуется выбирать смайлик.
Как только все работы будут завершены, останется лишь опубликовать стикерпак общий доступ. Сделать это можно командой «/publish». Бот потребует придумать уникальный юзернейм для пака, который послужит прямой ссылкой на него.
После ввода бот пришлет ссылку на готовый пак, ей можно поделиться, например, с друзьями.
Загрузка анимированного пака
Ранее уже было упомянуто, что анимированные наклейки имеют собственный формат, то есть обычный gif не подойдет. Пошаговая инструкция по загрузке анимированного пака:
Телеграмм, как и в первом случае, уведомит о требованиях — необходимости загружать файл в формате TGS. Максимальный размер анимации не может превышать 32 килобайта, а в соотношении сторон ничего не меняется. Также он отправит ссылку на плагин «Bodymovin-TG для Adobe After Effects».
Загрузка ничем отличается от обычных, за исключением того, что нужно загружать файлы в другом формате. Далее, необходимо выбрать ассоциативный смайлик, а после того, как все наклейки будут загружены, ввести команду «/publish». Осталось придумать уникальный юзернейм, чтобы пользователи могли найти стикерпак по ссылке.
Установка иконки
Чтобы стикерпак привлекательнее смотрелся в общем списке паков, можно установить соответствующую иконку. Она может быть как статично, так и анимированной.
Для этого необходимо ввести команду «/setpackicon», выбрать набор, а после отправить изображение или анимацию 100 на 100 пикселей.
Заключение
Создание стикеров может быть не только развлечением, но и полноценным способом продвижения каналов. Дело в том, что в название можно вставить юзернейм, и он будет кликабельным.
Если такой набор завирусится, то пользователи определенное заинтересуются автором и перейдут по ссылке на канал или личный профиль.
Источник: mrtext.ru