Создание анимированных стикеров в Telegram

|

Шаг 1: Подготовка

Анимированные стикеры используют собственный формат изображения, известный как TGS, который на момент написания статьи поддерживается только настольными приложениями от Adobe, а именно After Effects и Illustrator, поэтому их необходимо скачать и установить.

Во-первых, нам нужен специальный плагин, а также способ его установки.

1. Необходимое дополнение для After Effects называется Bodymovin-TG, и вы можете получить его в официальном репозитории разработчика на GitHub по ссылке выше.
2. После загрузки страницы найдите блок с последним релизом плагина (обычно он стоит первым в списке), затем найдите в нем ссылку с названием bodymovin-tg.zxp и нажмите на нее.

   

   Сохраните загруженный файл в подходящем месте.



3. Теперь нам нужно установить установщик плагина для After Effects. Называется ZXPInstaller, официальный ресурс по ссылке ниже. Для загрузки нужной версии используйте кнопку «Скачать для Windows».

   

   Как и в случае с самим плагином, сохраните установщик на свой компьютер.



4. Теперь воспользуемся установщиком: откройте папку, в которой вы его сохранили, и запустите исполняемый файл.

   

   Установка происходит без участия пользователя. Если вы заметили какую-то ошибку в процессе, причина, скорее всего, в некорректной установке Adobe After Effects, так как менеджер плагинов проверяет, присутствует ли он в системе.



5. После установки надстройки перетащите файл bodymovin-tg.zxp в главное окно.

   

   Дождитесь завершения операции и после соответствующего уведомления от инструмента перезапустите After Effects, если он в данный момент открыт.



На этом подготовительный этап окончен, и можно приступать непосредственно к изготовлению наклейки.

Шаг 2: Создание стикеров

Для анимации в формате TGS векторная графика почти обязательное условие, поэтому нам понадобится Adobe Illustrator.

1. Если у вас достаточно художественных навыков, вы можете рисовать нужные изображения с нуля, так как Adobe Illustrator вполне дружелюбен для новичков.

   

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

   Важно! Техническое требование к анимированным стикерам не должно превышать 64 килобайта, поэтому обязательно удаляйте ненужные объекты или объединяйте их!



2. После того, как изображение будет готово, сохраните его с помощью пунктов «Файл» — «Сохранить как».

   

   Выберите папку, в которую вы хотите поместить проект, и убедитесь, что установлен формат «Adobe Illustrator (*.AI)», затем нажмите «Сохранить».

   

   Затем запустите настройки хранилища. Здесь убедитесь, что опция «Создать PDF-совместимый файл» активна, затем нажмите «ОК».



На этом подготовка отдельной наклейки завершена. Если вы создаете набор, шаги, описанные в этом шаге, необходимо повторить для каждого из источников.

Шаг 3: Анимирование стикера

Теперь приступим к самой важной части — превращению стикера в анимированный.

1. Запустите Adobe After Effects и в главном меню выберите «Композиция» — «Новая композиция».

   

   Установите будущие настройки анимации следующим образом:

   • «Ширина» и «Высота» — 512 х 512 пикселей;
   • «Частота кадров» — 30 или 60, последнее предпочтительнее;
   • «Продолжительность» — 3 секунды;
   • «Цвет фона» — желательно белый.

   Остальные параметры можно оставить стандартными. Проверьте, все ли введено правильно, и нажмите «ОК».

   Важно! Частота кадров всех стикеров должна быть одинаковой: анимации 30 и 60 кадров в секунду нельзя размещать в одном наборе!



2. Далее перетащите векторное изображение, созданное на предыдущем шаге, в рабочую область (отмечено на скриншоте.

   

   Параметры импорта — «Композиция», «Выбрать слой», «Размер документа».



3. После импорта убедитесь, что изображение занимает всю рабочую область, затем щелкните по нему правой кнопкой мыши (ПКМ) и выберите «Создать — Создать фигуры из векторного слоя».



4. На исходной панели появится новый слой под названием «Кривые *filename*». Слой ниже, из которого был создан предыдущий, можно удалить: выделите его одинарным щелчком левой кнопки мыши (ЛКМ) и нажмите Del на клавиатуре.



5. Собственно анимация в Adobe After Effects заслуживает отдельной статьи, поэтому мы ограничимся базовым примером в виде перемещения изображения по холсту. Нажмите на стрелку рядом со слоем кривой и нажмите на появившееся меню «Преобразование».

   

   открываем и это меню, ставим галочку «Позиция» и тем самым устанавливаем первый кадр для будущей анимации.



6. Теперь перейдем к временной шкале — это правая часть нижней рабочей области. Синяя стрелка на нем — ваше текущее местоположение. Наведите на него курсор, зажмите ЛКМ и перетащите стрелку немного вправо.



7. Теперь нужно установить опорные точки для будущей анимации: перейти в область композиции (там, где находится изображение), навести курсор на изображение, зажать ЛКМ и перетащить в нужном направлении — это будет начальная позиция анимация.

   

   Затем переместитесь вправо по временной шкале, чтобы создать следующую опорную точку, и снова перетащите изображение.



8. Повторите шаги 6-7, чтобы создать как минимум восемь точек — это приемлемый нижний предел для хорошей анимации.

   

   Чтобы проверить результат, воспользуйтесь разделом «Предварительный просмотр» в меню справа: разверните его, затем нажмите кнопку запуска воспроизведения.



9. После получения подходящего результата его нужно экспортировать в нужный формат — открыть пункт «Окно», где выбрать «Расширения» — «Бодимовин для стикеров Telegram».

   

   Откроется отдельная панель управления экспортом. Прежде всего, выберите созданную композицию (отметьте слева соответствующую строку), затем нажмите на три точки.

   

   Используйте «Проводник» и выберите папку, в которую вы хотите сохранить финальную наклейку.

   

   Затем нажмите «Рендеринг».

   

   Если все сделано правильно и лимит в 64 КБ не превышен, рендеринг завершится, и программа уведомит вас об этом. Чтобы продолжить, нажмите «Готово» и закройте окно плагина.

   

   В ранее выбранной папке должен появиться файл с расширением TGS.



Если вы хотите сделать больше наклеек, просто повторите все шаги, описанные выше.

Шаг 4: Импорт стикеров в Telegram

Для создания собственного набора стикеров Telegram предлагает отдельного бота — @Stickers, который позволяет добавлять анимацию.

Читайте также: Как добавить свои стикеры в Telegram

1. Скачать стикеры удобнее всего из десктопного клиента, которым мы и воспользуемся. Запустите приложение, введите в поиск имя нужного бота и выберите результат, отмеченный на скриншоте ниже.



2. Запустите команду /start, чтобы начать работу с ботом.



3. Появится список доступных команд и вариантов, нажмите в нем ссылку /newanimated.



4. Введите название будущего набора (можно использовать как русские, так и английские буквы, но последнее предпочтительнее).



5. Теперь вы можете добавить первый стикер в созданный пакет, просто перетащив файл из папки в диалог с ботом.

   

   Появится окно предварительного просмотра — проверьте, как ведет себя анимация, затем нажмите «Отправить».



6. Затем откройте панель смайликов и выберите соответствующую наклейку.

   

   Проверьте, подходит ли он вам, и нажмите «Отправить».



7. Бот предложит добавить еще стикеров — процедура идентична описанной в предыдущем шаге. Когда набор будет готов, нажмите на ссылку «/опубликовать».

   

   Затем укажите пакет, в который нужно добавить наклейку.

   

   Также можно установить иконку (основное изображение упаковки), процедура аналогична добавлению стикера. Если в этом нет необходимости, пропустите этот шаг, введя команду /skip.



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



9. Готово — бот уведомит вас о том, что набор опубликован и доступен всем заинтересованным пользователям.

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