Поэтапно разберемся во всех нюансах при разработке такого стикера. Начиная с программного обеспечения и заканчивая публикацией в Telegram.
135K открытий
Так что же из себя представляет этот анимированный стикер?
Это собственный формат 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
Neon Lights Love Heart Tunnel and Romantic Abstract Glow Particles 4K Moving Wallpaper Background
Открываем ZXPInstaller и переносим плагин в окно программы.
Так же можно кликнуть и выбрать файл из всплывающего окна проводника.
Настройка Bodymovin-TG
Открываем Adobe After Effects и заходим в раздел настроек — «сценарии и выражения».
Ставим галочку напротив «Разрешить сценариям выполнять запись файлов и осуществлять доступ к сети».
Этап 2 — Создание стикера
Создание и настройка документа
Открываем Adobe Illustrator и выбираем в строке меню «файл» -> «новый».
Во всплывающем окне задаем параметр 512 на 512 пикселей, исходя из требований к размеру стикера.
Рисование стикера
Для рисования векторного стикера потребуются определенные навыки и знания основных инструментов, поэтому рекомендуется ознакомится с базовыми принципами рисования на сайте Adobe.
Изображение на стикере не должно выходить за края холста.
Существует альтернативный способ (Трассировка) с помощью которого любая картинка превращается в векторную. Будет очень полезно, для быстрого переноса своих растровых изображений в вектор.
Трассировка изображения
В качестве примера возьмем изображение стикера из интернета.
Импортируем изображение в рабочую среду Adobe Illustrator (перенос в окно программы изображения). И проводим указанные действия из видео:
- Трассировка изображения. («Окно» -> «Трассировка изображения»)
- Разобрать. («Объект» -> «Трассировка изображения» -> «Разобрать»)
- Разгруппировать. («Объект» -> «Разгруппировать»)
Более подробно о «Трассировке изображения» читайте на сайте Adobe.
Трассировка прошла успешно, но алгоритм не всегда точно угадывает форму объекта за элементом. С помощью встроенных инструментов можно устранить эти недостатки.
Сохранение стикера
Выбираем в строке меню «файл» -> «Сохранить как». Сохраняемый тип файла .ai. Во всплывающем окне ставим галочку напротив «Создать PDF-совместимый файл».
Heart Tunnel Pink Heart Background | Neon Heart Background Video Loop [3 Hours]-4K
Этап 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
У всех стикеров в наборе должна быть одинаковая частота кадров. Иначе придется делать два разных пака — для 30 и 60 кадров в секунду.
Отправляем команду /newanimated. После выбираем название и получаем следующую инструкцию:
Спасибо! Теперь отправьте мне, пожалуйста, будущий анимированный стикер — файл в формате TGS, созданный с помощью плагина Bodymovin-TG для Adobe After Effects.
Рекомендуем загружать изображения через десктопное приложение.
Stickers, бот
Следующий шаг отправить смайл, который соответствует анимированному стикеру. Заканчиваем создание набора командой /publish, если больше нет стикеров для добавления. В дальнейшем через бота можно будет дополнительно добавить новых стикеров.
Бот Stickers предложит выбрать иконку для анимированных стикеров. Её нужно создать отдельно, но проще всего написать команду /skip, чтобы первый стикер показывался в качестве иконки.
Источник: vc.ru
Telemoji, авторские наборы эмодзи, возможность подарить Telegram Premium и многое другое
В прошлом месяце количество активных пользователей Telegram превысило 700 миллионов человек. В честь этого события мы запустили подписку Telegram Premium, которая позволяет поддержать дальнейшее развитие Telegram и получить доступ к уникальным дополнительным функциям.
В сегодняшнем обновлении Вас ждут Telemoji — выразительные анимированные эмодзи в тексте сообщений и подписей к медиафайлам, — новые уникальные наборы анимированных эмодзи, возможность подарить Telegram Premium другому пользователю, блокировка голосовых сообщений и многое другое.
Анимированные Telemoji
Выразительные анимированные эмодзи, хорошо знакомые пользователям Telegram, теперь можно добавлять прямо в текст сообщений или подписей к фотографиям и видео, чтобы передать любые эмоции — даже в середине фразы. Подписчикам доступны более 200 Telemoji, заботливо отрисованных и анимированных нашими художниками для максимально ёмкой передачи эмоций в малом формате.
При наборе сообщения иконка панели стикеров меняется на кнопку эмодзи . При нажатии на неё открывается новая панель эмодзи, в которой удобно просматривать свои наборы и добавлять новые.
Все пользователи могут отправлять любые анимированные эмодзи в чат Избранное, чтобы попробовать новые анимации — или просто украсить свои заметки.
Авторские наборы эмодзи
Premium-пользователям доступны 10 новых анимированных наборов с уникальными персонажами — всего более 600 Premium-эмодзи!
В подсказках эмодзи отображаются все наборы: если ввести, например, слово :смех или :хмм , Telegram предложит подходящие эмодзи из всей Вашей коллекции. Подсказка с анимированными изображениями появится и при вводе статичного эмодзи.
Какого бы персонажа Вы ни выбрали, чтобы выразить свои эмоции, его увидят все пользователи, с подпиской или без.
Платформа для создания новых эмодзи открыта для всех желающих — Вы можете загрузить собственные авторские наборы с уникальными персонажами.
Интерактивные анимированные эмодзи
Со многими популярными Telemoji и их «альтер эго» из авторских наборов можно взаимодействовать в личных чатах: если любой из собеседников нажмёт на сообщение с эмодзи, оба участника чата одновременно увидят полноэкранную анимацию.
Дополнительные анимации, как правило, есть у широко используемых эмодзи, например , — но встречаются и у более редких: .
Новая панель стикеров в Telegram для iOS
Мы изучили новую функцию телеграма – создание собственных эмодзи: как это работает и насколько сложно освоить
Разработчики телеграма показали глобальное обновление. Главное в нем – новые анимированные эмодзи и возможность создания их разных типов. Доступ к большинству функций открывает подписка Premium. Мы рассказывали, почему она появилась в телеграме и какие первоначальные возможности получали подписчики. Сейчас в подписке Premium постоянно появляется новое.