Как анимировать стикеры в after effects

Обновлено: 07.07.2024

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

Telegram использует Lottie — свободный формат для создания анимаций. Ознакомиться с документацией и описанием формата можно тут.

Чтобы создать свой набор, вам понадобится:

Приложение Adobe After Effects
Любой графический редактор, который позволяет экспортировать векторные объекты в Adobe After Effects
Плагин Bodymovin-TG — форк Bodymovin для Adobe After Effects, который позволит экспортировать анимацию в .TGS — специальный формат для Telegram.

Технические требования

Стикер/холст должен быть размером 512х512 пикселей
Изображение на стикере не должно выходить за края холста
Анимация должна длиться не дольше 3 секунд
Анимация должна быть зацикленной
Стикер должен весить не более 64 кб
У всех стикеров в наборе должен быть одинаковый FPS (30 или 60)
В анимации нельзя использовать выражения (Expressions) и эффекты (Effects). В частности: Masks, Mattes, Layer Effects, Images, Solids, Texts, 3D Layers, Merge Paths, Star Shapes, Gradient Strokes, Repeaters, Time Stretching, Time Remapping, Auto-Oriented Layers. Использование этих инструментов не позволит вам сохранить стикер в нужном формате .TGS.

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

Загрузка стикеров

Как только ваши стикеры будут готовы, отправьте боту @stickers команду /newanimated , затем отправляйте ему файлы в формате .TGS.

Ещё вашему набору можно добавить иконку. Она должна быть 100х100 пикселей, с зацикленной анимацией длиной не более 3 секунд.

Установка плагина Bodymovin-TG

Закройте After Effects, если он открыт
Установите программу ZXP Installer
Скачайте последнюю версию bodymovin-TG (bodymovin-tg.zxp)
Откройте ZXP Installer и перетащите туда расширение bodymovin-tg
В After Effects перейдите в меню Правка (Edit) > Настройки (Preferences) > Сценарии и выражения (Scripting & Expressions) и установите флажок «Разрешить сценариям выполнять запись файлов и осуществлять доступ к сети» (Allow Scripts to Write Files and Access Network).

В меню Window > Extensions вы увидите Bodymovin for Telegram Stickers. Готово!

Сайт про Telegram на русском (неофициальный).

Здесь собраны приложения на базе MTProto, переведена некоторая документация с официального сайта, а также работает Webogram.

Стикеры – это визуальный инструмент коммуникации. Картинка понятно и быстро выражает эмоции собеседника. Современные пользователи соцсетей привыкли общаться через эмодзи и стикеры.

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

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

Персонаж Friflex – панда – дружелюбная, добрая и умная. Милая панда отражает нашу философию – гибкая и дружелюбная разработка цифровых решений. Мы говорим об ИТ на простом языке, не прикрываемся кипой бумажек, от ТЗ до релиза и дальнейшей поддержки идем с клиентом в очень доверительных отношениях.

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

После того, как персонажи есть на бумаге, нужно перевести их в вектор. Сфотографируйте набросок и поместите его в векторный редактор. Я работаю в Adobe Illustrator. Далее обведите все основные линии. Советую соблюдать нейминг в слоях, объединять в группы отдельные части тела со всеми составляющими. Так работа пойдет гораздо быстрее. К тому же, это понадобится нам в будущей анимации. Определитесь с цветовой палитрой. Добавьте деталей в виде бликов и теней, но не перегружайте своего персонажа. Помните о том, что стикеры в наборе будут в миниатюре. Чем больше элементов, тем сложнее будет их анимировать, к тому же, стикер будет большой по весу и Телеграм не опубликует его.

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

Только после этого можно закидывать наш файл в AE. Открываем AE, выбираем New Composition и дальше выставляем настройки, как у меня.

Обязательно выставляем размер 512х512 и время не выше трёх секунд, иначе Телеграм не пропустит нашу анимацию. Частоту кадров лучше выставить 60. Все эти настройки должны быть одинаковыми для всех стикеров.

Загружаем наш AI файл, просто перетянув его в After Effects. В открывшемся окошке выбираем Composition/Document size.

Изначально слои сохранены в формате AI. Для того, чтобы мы могли работать с точками наших форм, нужно преобразовать их в кривые. Нажимаем правой кнопкой мыши и выбираем Create/Create Shapes from Vector Layer, слои AI удаляем.

Для того, чтобы нам было удобней работать, нужно сначала выстроить слои в правильном порядке и связать их между собой. Для каждого слоя ставим Motion Blur. Я объединила все составляющие головы в прекомпозицию, это почти то же самое, что и группа. Делается это для того, чтобы мы могли вращать голову со всеми ее элементами. Также мы можем анимировать элементы внутри этой группы.

Также не забудьте выставить Anchor Point. Он нужен нам для того, чтобы изменять точку, вокруг которой будет происходить вращение. Я выставила anchor point у основания головы, также у руки в районе плеча.

После того, как мы разобрались со всеми привязками и расставили anchor point, можем идти в таймлайн нашей композиции. Нажимаем на нужный слой и открываем его настройки transform. У нас есть несколько составляющих.

Anchor Point,
Position,
Scale,
Rotation,
Opacity.

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

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

А что если, я хочу, чтобы голова двигалась сначала быстрее, затем медленно опускалась? Сделать это я могу через Graph Editor, он позволяет изменять скорость нашей анимации. Можно еще выбрать настройки и, кликнув на ключе правой кнопкой мыши, выбрать Keyframe Assistant и перевести его в easy ease/easy ease in/easy ease out, останется отрегулировать скорость с помощью кривых и плавная анимация готова.

Для того, чтобы наш стикер попал в Телеграм, нам нужно экспортировать его в необходимый формат .tgs. через специальный плагин Bodymovin-TG. Размер анимированного стикера не должен превышать 64 КБ. Иначе экспорт (Bodymovin-TG) завершится ошибкой.Также использование этих функций в AE приведет к ошибкам при экспорте стикера:

Masks, Mattes, Layer Effects, Images, Solids, Texts, 3D Layers, Merge Paths, Star Shapes, Gradient Strokes, Repeaters, Time Stretching, Time Remapping, Auto-Oriented Layers

Дальше идем по такому пути Window - Extensions - Bodymovin for Telegram stickers. Отмечаем композицию и выбираем место сохранения нажатием на троеточие. После нажимаем на кнопку Render. Если всё пройдет удачно, в выбранном вами месте появится файл .tgs.

Открываем Телеграм и находим в поиске бота @Stickers. Для начала работы с ним отправляем команду /start. Отправляем команду /newanimated. После выбираем название и получаем инструкцию:

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

Напомню, что у Adobe есть бесплатный триал, которого вам должно хватить, если у вас еще не установлены эти программы. А у Bodymovin-TG подробно расписана инструкция по установке со всеми актуальными ссылками.

Видео

Как создать стикеры для Telegram на устройствах Android

В данном случае все еще проще. Потребуется скачать два приложения — «Мой стикер Maker» и «Photo & Picture Resizer» из Play Market на ваш Android. 1. Закидываем фото в «Мой стикер Maker». 2. Коряво обводим. 3. Красиво подгоняем обводку. 4. Нажимаем на галочку => «Save as Sticker».

«Photo & Picture Resizer» подгоняет размер. 1. Выбираем изображение. 2. «Изменить размер» => «Ширина x Высота» => «Произвольный» => 512х512.

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

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

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

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

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

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

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

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

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

ов к собственной гифке

Справа вверху вы видите 2 кнопки: «Upload» и «Create». Нажимайте на «Create».
Далее вам предложат на выбор загрузить свои фото, видео или вставить ссылку на сайт. При загрузки видео надо учитывать, чтобы его размер должен быть не более 100B MB и по продолжительности не длиннее 15 секунд.
Двигая ползунки, выберите продолжительность вашей гифки. Максимальное время — 7.5 секунд.
Следующим вашим шагом может быть процесс «декорирования» гифки. Вы можете написать текст или выбрать анимированный «Заголовок». Шрифт и цвет корректируется. Это не является обязательным. Если вы «полистаете» вкладки справа в меню, то найдете как минимум еще 3 функции для декорирования вашей гифки. Это добавление стикеров, фильтров и рисунков. Есть из чего выбрать.

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

Самую простые анимированные стикерпаки можно сделать самому и с помощью приложений для телефона. Например, Stickers Creator – Maker Ad, о котором мы уже рассказывали. Но для более «серьезной» анимации понадобится:

Adobe Illustrator или другой векторный редактор;
Adobe After Effects – это редактор анимации;
Bodymovin-TG – плагин, который нужен для экспорта анимации в формат *.tgs;
ZXPInstaller – приложение для установки плагинов.

Установка плагина

Для начала нужно скачать Bodymovin-TG отсюда. Затем:

Открываем ZXPInstaller и перетаскиваем файл Bodymovin-TG в окошко программы;
В Adobe After Effects открываем «Правка/Настройки/Сценарии и выражения»;
Выставляем галочку возле ««Разрешить сценариям выполнять запись файлов и осуществлять доступ к сети».

Подготовка картинки

Теперь можно переходить к созданию первого стикера. В Adobe Illustrator открываем «Файл/Новый». Сразу задаем размер 512 на 512 пикселей – это требуемый в Телеграм размер стикера.

Если вы уже умеете рисовать в Adobe Illustrator, можно сразу рисовать векторную картинку. Но если используется картинка из Сети, скорее всего, понадобится перевести её в векторное изображение. Для этого:

Загрузите нужную картинку;
В меню выберите «Окно/Трассировка изображения»;
Укажите один из предложенных стилей трассировки;
Перейдите к «Объект/Трассировка изображения/Разобрать»;
Выберите «Объект/Разгруппировать».

Затем сохраняем получившуюся картинку. Для этого в параметрах сохранения выберите «Создать PDF-совместимый файл». А подробнее о трассировке можно прочитать в официальной инструкции.

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

Этот этап выполняется в Adobe After Effects. Сразу же откройте «Настройки композиции» и настройте параметры:

Теперь перетащите подготовленную картинку в рабочую среду и кликните по ней правой кнопкой мыши. В открывшемся меню выберите «Создать/Создать фигуры из векторного слоя».

Настраиваем создание фигур

Теперь картинка будет «разобрана» на слои-фигуры, из которых предстоит сделать анимацию. Слои с расширением *.ai можно удалить сразу – при работе они не понадобятся. При разделении картинки слои могут поменяться местами, поэтому будьте внимательны.

Обратите внимание! Анимация для стикера должна быть закольцована – первая и последняя картинки будут одинаковыми. Для этого нужно в меню «Преобразовать» выбрать «Положение» и «Опорная точка», а затем передвинуть ползунок на временной шкале на 3 секунду (до упора). Потом на боковой левой панели выделите (нажав на значки ромбика) «Положение» и «Опорную точку».

Создаем опорную точку

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

Меняем положение брови

А чтобы создание анимированного стикерпака было еще понятнее, мы нашли небольшую видеоинструкцию.

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

Экспорт стикера

Откройте «Окно/Расширения» и найдите там установленный Bodymovin-TG. Выберите и отметьте только что созданную анимацию, затем укажите место её сохранения.

Находим плагин в окне расширений

Теперь нажмите «Render» (или «Преобразовать» в русскоязычной версии). Если файл соответствует всем требованиям, он будет сохранен с расширением *.tgs.

Готово! Теперь можно делать остальные стикеры для стикерпака и загружать их в Телеграм с помощью бота @Stickers.

А так происходит диалог с ботом

Важно: У всех анимаций в стикер паке должна быть одна и та же частота кадров. Иначе бот их не примет.

Программы для создания гиф-анимации

Как вы уже поняли у гифок есть все шансы «завоевать мир Инстаграма». Это простой, но полезный инструмент, на котором изображен процесс и результат, помещенный в 10-15 слайдов. Это позволяет не перегружать пользователя ненужной информацией. А овладев программами для создания гифок,вы вы сможете создавать эксклюзивную рекламу своей продукции или анонсировать предоставляемые услуги, выделяя свой бизнес на фоне конкурентов.

Программы GIF-анимации для Android

Footej Camera. Простой и понятный интерфейс со множеством настроек. Приложение появилось в 2016 году и уже два года стабильно выпускает актуальные обновления. Софт имеет формат камеры с возможностью установки экспозиции и, конечно же, функцию формирования GIF-картинки.

Программы для GIF-анимации на IOS

Boomerang. Вы просто снимаете видео, а софт преобразовывает его в забавный гиф-формат. «Бумеранг» функционирует на базе Инстаграм и очень популярен среди пользователей социальной сети.

Программы для создания GIF на компьютере

GIMP. Приложение является лучшей альтернативой «Фотошопа» и позволяет создавать сложные GIF-изображения любой сложности. Его нужно будет скачать и установить на компьютер. И тогда в ваших руках окажутся разнообразные инструменты для обработки фото и создания анимации.

Программы для создания анимации онлайн

GIFPAL. Это бесплатный сервис с большим набором полезных инструментов. Главный плюс — отсутствие водяного знака на готовой гифке. Многие бесплатные сервисы для создания анимации онлайн оставляют на изображении водяной знак или отметку со своим логотипом, которые невозможно удалить. Имейте это в виду.

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

Как создать стикеры для Telegram с помощью iPhone

Загрузите приложение Stickers for Telegram из онлайн-магазина App Store на iPhone. Оно автоматически сохраняет результат в PNG, 512х512, на прозрачном фоне.

1. Выбираем изображение через “Choose a picture!”.

2. Выделяем необходимую область “маркером”.

3. Убираем неровности с помощью инструмента “ластик”.

4. Нажимаем на “глазик” для оценки результата.

5. Кликаем на “PNG”, а далее - “Add it to a pack”.

Откроется приложение Telegram и бот @Stickers, который добавляет новые стикеры в мессенджер.

Как создать стикеры для Telegram на устройствах Android

В данном случае все еще проще. Потребуется скачать два приложения — «Мой стикер Maker» и «Photo & Picture Resizer» из Play Market на ваш Android.
1. Закидываем фото в «Мой стикер Maker».
2. Коряво обводим.
3. Красиво подгоняем обводку.
4. Нажимаем на галочку => «Save as Sticker».

«Photo & Picture Resizer» подгоняет размер.
1. Выбираем изображение.
2. «Изменить размер» => «Ширина x Высота» => «Произвольный» => 512х512.

Как создать стикеры для Telegram на ПК

Разберём создание в фотошопе.
1. Волшебной палочкой тыкаем по фону, затем на замочек в разделе «Слои» => «Delete».

Получаем прозрачный фон.

2. Подкорректировать вырезанного персонажа можно выполнив обводку. На верхней панели выбираем «Слои» => «Стиль» => «Обводка».

Определяемся с параметрами обводки, кликаем «ОК».

3. Если ваша фотография не квадратная — выберите «Рамка», пропорцию «квадрат» и кликните дважды.

4. «Изображение» => «Размер» => «512х512»

5. «Файл» => «Сохранить как» => PNG.

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

Создать анимированный стикер в telegram достаточно сложно, для этого нужно знать две программы — Adobe After Effects и Adobe Illustrator.
Анимированные стикеры это новый формат — TGS. Для сохранения в этом формате понадобится плагин для After Effects — Bodymoving-TG.
Пошаговая инструкция:
1. Скачиваем ZXPInstaller для установки Bodymoving-TG. У меня установщик не работал и устанавливать пришлось вручную.

2. Загружаем плагин с сайта разработчика.

3. Заходим в After Effects => «Правка»=> «Настройки»=> «Сценарии и выражения»
4. Ставим галочку напротив «Разрешить сценариям выполнять запись файлов и осуществлять доступ к Сети»
5. Переходим в «Окно» => «Расширения». Должен отобразиться Bodymoving for Telegram Stickers. Если его нет скачайте раннюю версию After Effects.

8. Через «Файл» => «Импорт» выберите вашу графику и импортируйте как композицию не меняя размеры слоев.
Выделите слои и перетащите на иконку «Создать новую композицию».
Чтобы из векторных слоев получить фигуру для анимации, щелкните правую кнопку мыши, Создать => Фигуры из векторного слоя. После удаляем слои AI.
Создаем анимацию.
9. Импорт в TGS. Заходим в Окно => Расширения => Bodymoving for Telegram Stickers, нажимаем на нужный файл => Render. Стикер будет сохранен в выбранной папке.

Как добавить собственные стикеры в Telegram

Для добавления используйте бот @Stickers.

Нажмите “Запустить”, бот представит все свои команды.

1. Выбираем /newpack для обычных и /newanimated для анимированных. Вводим название стикерпака.

2. Прикрепляем подготовленную картинку или анимацию.

3. Далее отправляем смайл, который будет соответствовать стикеру.

4. Публикуем командой /publish.

6. Пишем короткое уникальное название для создания ссылки.

7. Нажимаем на ссылку и добавляем себе стикеры. Делимся ссылкой с друзьями.

Благодаря боту мы импортировали свой стикерпак. Переходите по ссылке и отвечайте остроумными цитатами со знаменитым одесским колоритом посредством стикеров. Делитесь своими в комментариях.

Skay.ua в Telegram

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

Читайте также: