Не так давно в Telegram появились анимированные стикеры. Эти забавные двигающиеся картинки отлично передают эмоции и представляют собой неплохую альтернативу гифкам и привычным стикерам. Но если создать обычный стикерпак довольно просто, то с анимированными изображениями придётся повозиться.
Подготавливаем инструменты
Вам будут необходимы редактор векторной графики Adobe Illustrator, редактор анимаций Adobe After Effects и минимальные навыки работы с ними.
Кроме того, к Adobe After Effects нужно подключить плагин Bodymovin-TG. Он экспортирует анимации в формат .TGS, поддерживаемый Telegram. Для этого закройте Adobe After Effects, если он открыт. Загрузите и установите приложение ZXPInstaller. Оно совместимо и с Windows, и с macOS. Скачайте плагин Bodymovin-TG (нужный вам файл называется bodymovin-tg.zxp).
Теперь запустите ZXPInstaller и щёлкните по его окну. Выберите загруженный плагин и подождите, пока приложение установит его.
Откройте Adobe After Effects. Затем сделайте следующее:
- На Windows откройте «Правка» → «Настройки» → «Сценарии и выражения…». Включите опцию «Разрешить сценариям выполнять запись файлов и осуществлять доступ к Сети». Нажмите OK.
- На macOS откройте Adobe After Effects → «Настройки» → «Сценарии и выражения…». Включите опцию «Разрешить сценариям выполнять запись файлов и осуществлять доступ к Сети». Кликните OK.
Нажмите «Окно» → «Расширения». Если вы всё сделали правильно, то в списке расширений вы увидите Bodymovin for Telegram Stickers.
Всё, инструменты настроены. Теперь пора творить.
Рисуем векторную графику
Создайте новый проект в Adobe Illustrator. Размер холста должен быть ровно 512 × 512 пикселей — это важно. У проекта не должно быть фона. Объекты не могут выходить за границы монтажной области.
Для примера мы нарисуем рожицу. Её можно составить из фигур на панели инструментов Illustrator. Каждая значимая для анимации часть (рука, нога, глаз) должна быть вынесена на отдельный слой. Лучше сразу подписать, что где, чтобы не запутаться.
Когда ваша графика будет готова, сохраните её в формате AI.
Импортируем графику в After Effects
Откройте After Effects и создайте композицию. Размеры её должны быть ровно 512 × 512 пикселей. Количество кадров в секунду — 30 или 60 (для несложной анимации вроде нашей подойдёт 30). Длительность композиции не должна превышать 3 секунды.
Затем нажмите «Файл» → «Импорт» → «Файл» и найдите вашу графику в формате AI. В выпадающем списке «Импортировать как:» выберите «Композиция — сохранить размеры слоёв» и нажмите «Импорт».
Ваша графика импортируется вместе со всеми слоями. Выделите их (они будут в формате AI) и перетащите на иконку «Создать новую композицию».
Программа запросит у вас подтверждение. Нажмите OK.
Порядок слоёв может немного нарушиться. Перетаскивайте их на панели слева внизу, размещая в нужной последовательности.
Теперь предстоит создать из векторных слоёв фигуры для анимирования. Для этого выделите слои и нажмите правую кнопку мыши, затем «Создать» → «Создать фигуры из векторного слоя». Получатся так называемые кривые.
После этого слои в формате AI можно удалить, чтобы не мешались. Выделите их с зажатой клавишей Ctrl и нажмите Delete. Останутся только кривые.
Готово, импорт завершён.
Создаём анимацию
В Adobe After Effects можно создавать очень разные по сложности анимации. Но мы не будем погружаться в дебри и для примера попробуем заставить нашу рожицу просто приподнимать бровь.
Выберите бровь, которую хотите анимировать, и щёлкните по ней левой кнопкой мыши. Нажмите на значок > рядом с кривой на панели слева снизу и выберите «Преобразовать».
С помощью появившихся значков на панели можно изменять положение, масштаб, угол поворота и степень прозрачности объектов в анимации. Поскольку нам нужно только поднимать бровь, обойдёмся изменением её положения.
Нажмите «Опорная точка» и «Положение». Затем перетащите временной указатель на шкале на третью секунду анимации (тяните до упора).
Нажмите на ромбики на левой боковой панели, слева от «Опорной точки» и «Положения». Таким образом вы зациклите свою анимацию: её первый кадр будет таким же, как и последний. Это важно, так как иначе Telegram не примет ваш стикер.
Теперь разместите временной указатель примерно посередине шкалы.
Снова нажмите на ромбики, чтобы создать опорную точку и там. И измените положение брови, подняв её. Это можно сделать используя цифры рядом с параметром «Положение» или перетянув бровь вручную мышкой либо клавишами со стрелками.
Нажмите на пробел, чтобы запустить воспроизведение анимации. Всё, бровь двигается.
Аналогично вы можете заставить шевелиться и другие объекты на анимации. Просто создавайте для них опорные точки, нажимая на ромбики, и меняйте их положение.
Экспортируем стикер
Нажмите «Окно» → «Расширения» → Bodymovin for Telegram Stickers. Выделите композицию, которую хотите экспортировать (в нашем случае — ту, что с пометкой «Бровь»). В параметре Destination Folder укажите папку, где сохранить ваш стикер. И нажмите Render.
Если всё в порядке, расширение отрапортует о завершение рендеринга. Нажмите Done. Если что-то не так, расширение подскажет вам. Правда, только по-английски.
Стикер будет сохранён в указанной вами папке под именем data.tgs.
Размещаем стикер в Telegram
Запустите в Telegram бота @Stickers и отправьте ему команду /newanimated. Бот предложит выбрать название для нового набора анимированных стикеров — введите его и отправьте сообщение.
Затем отправьте стикер боту, перетянув файл data.tgs в окно Telegram.
Бот попросит прислать смайл, с которым ассоциируется стикер, — сделайте это. Если у вас есть ещё анимированные варианты для этого набора, добавьте их. Когда закончите, введите команду /publish и выберите ваш стикерпак в выпадающем списке. Ему можно назначить иконку, если она у вас есть (это должно быть изображение в формате TGS размером до 32 килобайт). Впрочем, этот шаг можно без проблем пропустить, перейдя к команде /skip.
Последний шаг — выбор короткого адреса для вашего набора. Бот создаст ссылку, по которой вы и ваши друзья получат доступ к стикеру. Нажмите на неё и сможете добавить новую анимацию в коллекцию, как обычно.
Ваш первый собственноручно сделанный анимированный стикер готов. А получить доступ к нашей анимации можно, нажав на ссылку.
