в ,

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

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

Подготавливаем инструменты

Вам будут необходимы редактор векторной графики Adobe Illustrator, редактор анимаций Adobe After Effects и минимальные навыки работы с ними.

Кроме того, к Adobe After Effects нужно подключить плагин Bodymovin-TG. Он экспортирует анимации в формат .TGS, поддерживаемый Telegram. Для этого закройте Adobe After Effects, если он открыт. Загрузите и установите приложение ZXPInstaller. Оно совместимо и с Windows, и с macOS. Скачайте плагин Bodymovin-TG (нужный вам файл называется bodymovin-tg.zxp).

2019 07 23 18 30 44 Window cr 1564476797
Как сделать анимированный стикер в Telegram: подготавливаем инструменты

Теперь запустите ZXPInstaller и щёлкните по его окну. Выберите загруженный плагин и подождите, пока приложение установит его.

Откройте Adobe After Effects. Затем сделайте следующее:

  • На Windows откройте «Правка» → «Настройки» → «Сценарии и выражения…». Включите опцию «Разрешить сценариям выполнять запись файлов и осуществлять доступ к Сети». Нажмите OK.
  • На macOS откройте Adobe After Effects → «Настройки» → «Сценарии и выражения…». Включите опцию «Разрешить сценариям выполнять запись файлов и осуществлять доступ к Сети». Кликните OK.
2019 07 23 16 22 29 Window 1564478283
Как сделать анимированный стикер в Telegram: настройки композиции

Нажмите «Окно» → «Расширения». Если вы всё сделали правильно, то в списке расширений вы увидите Bodymovin for Telegram Stickers.

2019 07 23 19 00 02 Window cr 1564478359
Как сделать анимированный стикер в Telegram: нажмите «Окно» → «Расширения»

Всё, инструменты настроены. Теперь пора творить.

Рисуем векторную графику

Создайте новый проект в Adobe Illustrator. Размер холста должен быть ровно 512 × 512 пикселей — это важно. У проекта не должно быть фона. Объекты не могут выходить за границы монтажной области.

Для примера мы нарисуем рожицу. Её можно составить из фигур на панели инструментов Illustrator. Каждая значимая для анимации часть (рука, нога, глаз) должна быть вынесена на отдельный слой. Лучше сразу подписать, что где, чтобы не запутаться.

2019 07 30 15 38 06 NVIDIA GeForce Overlay 1564479504 e1564479523266
Как сделать анимированный стикер в Telegram: для примера мы нарисуем рожицу.

Когда ваша графика будет готова, сохраните её в формате AI.

Импортируем графику в After Effects

Откройте After Effects и создайте композицию. Размеры её должны быть ровно 512 × 512 пикселей. Количество кадров в секунду — 30 или 60 (для несложной анимации вроде нашей подойдёт 30). Длительность композиции не должна превышать 3 секунды.

2019 07 23 19 05 43 Window cr 1564478417
Как сделать анимированный стикер в Telegram: импортируем графику в After Effects

Затем нажмите «Файл» → «Импорт» → «Файл» и найдите вашу графику в формате AI. В выпадающем списке «Импортировать как:» выберите «Композиция — сохранить размеры слоёв» и нажмите «Импорт».

2019 07 31 16 55 42 Adobe After Effects Bezymyannyj proekt.aep 1564570591 e1564570608181
Как сделать анимированный стикер в Telegram: выберите «Композиция — сохранить размеры слоёв» и нажмите «Импорт»

Ваша графика импортируется вместе со всеми слоями. Выделите их (они будут в формате AI) и перетащите на иконку «Создать новую композицию».

2019 07 23 19 10 11 Window cr 1564478628
Как сделать анимированный стикер в Telegram: графика импортируется вместе со всеми слоями

Программа запросит у вас подтверждение. Нажмите OK.

2019 07 23 19 11 36 Window cr 1564478674
Как сделать анимированный стикер в Telegram: программа запросит у вас подтверждение — нажмите OK

Порядок слоёв может немного нарушиться. Перетаскивайте их на панели слева внизу, размещая в нужной последовательности.

2019 07 23 19 13 22 Window cr 1564478708
Как сделать анимированный стикер в Telegram: перетаскивайте их на панели слева внизу, размещая в нужной последовательности

Теперь предстоит создать из векторных слоёв фигуры для анимирования. Для этого выделите слои и нажмите правую кнопку мыши, затем «Создать» → «Создать фигуры из векторного слоя». Получатся так называемые кривые.

2019 07 23 19 14 10 Window cr 1564478750
Как сделать анимированный стикер Telegram: выделите слои и нажмите правую кнопку мыши, затем «Создать» → «Создать фигуры из векторного слоя»

После этого слои в формате AI можно удалить, чтобы не мешались. Выделите их с зажатой клавишей Ctrl и нажмите Delete. Останутся только кривые.

2019 07 23 19 15 09 Window cr 1564478803
Как сделать анимированный стикер в Telegram: после этого слои в формате AI можно удалить, чтобы не мешались

Готово, импорт завершён.

Создаем анимацию

В Adobe After Effects можно создавать очень разные по сложности анимации. Но мы не будем погружаться в дебри и для примера попробуем заставить нашу рожицу просто приподнимать бровь.

Выберите бровь, которую хотите анимировать, и щёлкните по ней левой кнопкой мыши. Нажмите на значок > рядом с кривой на панели слева снизу и выберите «Преобразовать».

2019 07 23 19 16 28 Window cr 1564478930
Как сделать анимированный стикер в Telegram: выберите бровь, которую хотите анимировать, и щёлкните по ней левой кнопкой мыши

С помощью появившихся значков на панели можно изменять положение, масштаб, угол поворота и степень прозрачности объектов в анимации. Поскольку нам нужно только поднимать бровь, обойдёмся изменением её положения.

Нажмите «Опорная точка» и «Положение». Затем перетащите временной указатель на шкале на третью секунду анимации (тяните до упора).

2019 07 23 19 17 32 Window cr 1564479083
Как сделать анимированный стикер Telegram: перетащите временной указатель на шкале на третью секунду анимации

Нажмите на ромбики на левой боковой панели, слева от «Опорной точки» и «Положения». Таким образом вы зациклите свою анимацию: её первый кадр будет таким же, как и последний. Это важно, так как иначе Telegram не примет ваш стикер.

2019 07 23 19 17 32 Window cr 1564558110
Как сделать анимированный стикер в Telegram: нажмите на ромбики на левой боковой панели, слева от «Опорной точки» и «Положения»

Теперь разместите временной указатель примерно посередине шкалы.

2019 07 23 19 18 34 Window cr 1564479172
Как сделать анимированный стикер Telegram: разместите временной указатель примерно посередине шкалы

Снова нажмите на ромбики, чтобы создать опорную точку и там. И измените положение брови, подняв её. Это можно сделать используя цифры рядом с параметром «Положение» или перетянув бровь вручную мышкой либо клавишами со стрелками.

2019 07 23 19 18 34 Window cr 1564558183
Как сделать анимированный стикер в Telegram: измените положение брови, подняв её

Нажмите на пробел, чтобы запустить воспроизведение анимации. Всё, бровь двигается.

2019 07 23 19 20 07 Window cr 1564479216
Как сделать анимированный стикер Telegram: нажмите на пробел, чтобы запустить воспроизведение анимации

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

Экспортируем стикер

Нажмите «Окно» → «Расширения» → Bodymovin for Telegram Stickers. Выделите композицию, которую хотите экспортировать (в нашем случае — ту, что с пометкой «Бровь»). В параметре Destination Folder укажите папку, где сохранить ваш стикер. И нажмите Render.

2019 07 23 19 22 11 Window cr 1564479289
Как сделать анимированный стикер в Telegram: в параметре Destination Folder укажите папку, где сохранить ваш стикер

Если всё в порядке, расширение отрапортует о завершение рендеринга. Нажмите Done. Если что-то не так, расширение подскажет вам. Правда, только по-английски.

Стикер будет сохранён в указанной вами папке под именем data.tgs.

Размещаем стикер в Telegram

Запустите в Telegram бота @Stickers и отправьте ему команду /newanimated. Бот предложит выбрать название для нового набора анимированных стикеров — введите его и отправьте сообщение.

2019 07 31 15 45 38 Telegram 1564566438
Как сделать анимированный стикер Telegram: размещаем стикер в Telegram

Затем отправьте стикер боту, перетянув файл data.tgs в окно Telegram.

Бот попросит прислать смайл, с которым ассоциируется стикер, — сделайте это. Если у вас есть ещё анимированные варианты для этого набора, добавьте их.

Когда закончите, введите команду /publish и выберите ваш стикерпак в выпадающем списке. Ему можно назначить иконку, если она у вас есть (это должно быть изображение в формате TGS размером до 32 килобайт). Впрочем, этот шаг можно без проблем пропустить, перейдя к команде /skip.

Последний шаг — выбор короткого адреса для вашего набора. Бот создаст ссылку, по которой вы и ваши друзья получат доступ к стикеру. Нажмите на неё и сможете добавить новую анимацию в коллекцию, как обычно.

Собственноручно сделанный анимированный стикер готов. На этом у меня все. До скорого!

Подписывайтесь на канал Видеогуру, чтоб не пропускать новые интересные уроки.

Проголосуйте:

Аватар
Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
photo 2020 07 10 13 55 23

Плагин – Motion V3

bariol icons 01

Фигуры – Bariol