Анимированные стикеры используют свой собственный формат изображения, известный как TGS, работать с которым на момент написания статьи могут только десктопные приложения от Adobe, а именно After Effects и Illustrator, поэтому понадобится их загрузить и установить.
Скачать Adobe After Effects
Скачать Adobe Illustrator
Для первого нам потребуется специальный плагин, а также средство его установки.
Перейти на GitHub разработчика
- Нужное дополнение для After Effects называется Bodymovin-TG и получить его можно в официальном GitHub-репозитории разработчика по вышеуказанной ссылке.
- После загрузки страницы найдите блок с последним релизом плагина (обычно он идёт первым в списке), затем отыщите в нём ссылку с именем и кликните по ней.
Сохраните загруженный файл в любом удобном месте.
- Теперь нам нужно установить средство инсталляции плагинов к Афтер Эффектс. Оно называется ZXPInstaller, официальный ресурс находится по ссылке ниже. Для скачивания требуемой версии воспользуйтесь кнопкой .
Перейти на официальный сайт ZXPInstaller
Как и в случае с самим плагином, сохраните инсталлятор на компьютер.
- Теперь задействуем установщик: откройте папку, куда его сохранили, и запустите исполняемый файл.
Инсталляция происходит без участия пользователя. Если вы в процессе заметили какую-то ошибку, причина, скорее всего, в неправильной установке Adobe After Effects, поскольку менеджер плагинов проверяет его наличие в системе.
- После установки средства добавления дополнений перетащите в его главное окно файл bodymovin-tg.zxp.
Подождите, пока операция будет произведена, а после соответствующего уведомления от утилиты перезапустите After Effects, если он в это время открыт.
На этом подготовительный этап окончен и можно переходить непосредственно к созданию стикеров.
Шаг 2: Создание стикеров
Для анимации в формате TGS почти обязательным условием является векторная графика, поэтому нам и нужен Адоби Иллюстратор.
- Если вы обладаете достаточными художественными навыками, можете нарисовать нужные изображения с нуля, благо Adobe Illustrator достаточно дружелюбен к новичкам.
Подробнее: Учимся рисовать в Adobe Illustrator
- Мы же воспользуемся более простым решением — функцией под названием «трассировка», которая предназначена для перевода растрового изображения в векторное. Первым делом подготовьте исходники будущих стикеров и сохраните их в какую-нибудь подходящую папку. Далее откройте Иллюстратор и выберите .
Посредством интерфейса перейдите к целевому каталогу и запустите импорт изображения.
- После загрузки объекта в приложение выделите его одиночным нажатием по рабочему пространству левой кнопкой мыши, затем найдите на панели инструментов справа блок , где нажмите .
В меню далее выберите .
- В зависимости от сложности используемого исходника процесс трассировки может длиться до минуты. По его окончании в меню быстрых действий выберите .
На изображении появится перечень объектов, которые распознала программа. Далее воспользуйтесь кнопкой .
Преображение будущего стикера готово. Если наблюдаете на объектах искажения либо их больше, чем требуется, используйте инструменты Иллюстратора для решения этих проблем. Так, объединить контуры можно посредством соответствующей панели справа.
Техническое требование к анимированным стикерам – не превышать объём в 64 килобайта, поэтому обязательно удалите лишние объекты или проведите их слияние!
- После того как изображение будет готово, сохраните его, воспользовавшись пунктами – .
Выберите папку, куда желаете поместить проект, и убедитесь, что формат задан как , после чего нажмите .
Далее будут запущены параметры настройки сохранения. Здесь нужно убедиться, что активна опция , после чего нажать .
На этом подготовка отдельного стикера завершена. Если вы делаете набор, рассмотренные на этом этапе действия понадобится повторить для каждого из исходников.
Шаг 3: Анимирование стикера
Теперь переходим к самой ответственной части – превращении стикера в анимированный.
- Запустите Adobe After Effects и в его главном меню выберите пункты – .
Настройки будущей анимации задайте следующим образом:
- и – 512 на 512 пикселей;
- – 30 либо 60, последнее предпочтительнее;
- – 3 секунды;
- – желательно белый.
Остальные параметры можно оставить по умолчанию. Проверьте, правильно ли всё введено, затем нажмите .
Частота кадров для всех стикеров должна быть одинаковой: в один набор нельзя поместить анимации 30 и 60 кадр/сек!
- Далее перетащите в рабочую область (отмечена на скриншоте) созданное на предыдущем этапе векторное изображение.
Параметры импорта – , , .
- После импорта убедитесь, что изображение занимает всю рабочую область, затем кликните по нему правой кнопкой мыши () и выберите пункты – .
- На панели источников появится новый слой с именем . Слой ниже, из которого и создавался предыдущий, можно удалить: выделите его единичным нажатием левой кнопки мыши () и нажмите на клавиатуре .
- Собственно анимирование в Адоби Афтер Эффектс заслуживает отдельной статьи, поэтому далее мы ограничимся базовым примером в виде движения картинки по полотну. Нажмите на стрелочку возле слоя с кривыми и кликните в появившемся меню .
Откройте и это меню, затем поставьте галочку в пункте , задав таким образом первый кадр будущей анимации.
- Теперь переходим к таймлайну – это правая часть нижней рабочей области. Синяя стрелка на ней – текущее местоположение. Наведите на неё курсор, зажмите и перетяните стрелку немного вправо.
- Сейчас нужно задать опорные точки будущей анимации: перейдите к области композиции (там, где находится картинка), наведите курсор на изображение, зажмите и перетащите его в требуемом направлении – это будет стартовой позицией анимации.
Далее переместитесь по таймлайну вправо для создания следующей опорной точки и снова перетяните картинку.
- Повторяйте действия шагов 6-7 для создания как минимум восьми точек – это допустимый нижний предел для приятной глазу анимации.
Чтобы проверить результат, воспользуйтесь в меню справа разделом : раскройте его, затем нажмите на кнопку начала воспроизведения.
- После получения подходящего результата его понадобится экспортировать в нужном формате – откройте пункт , где выберите – .
Откроется отдельная панель управления экспортом. Первым делом выберите созданную композицию (отметка в левой части соответствующей строки), после чего кликните по трём точкам.
Посредством выберите папку, куда желаете сохранить итоговый стикер.
Далее щёлкните .
Если всё сделано правильно и лимит в 64 Кб не превышен, рендеринг завершится успешно, о чём программа вас и уведомит. Для продолжения нажмите и закройте окно плагина.
В выбранной ранее папке должен появиться файл с расширением TGS.
Если вы хотите создать ещё стикер(ы), просто повторите все вышеперечисленные действия.
Шаг 4: Импорт стикеров в Telegram
Для создания своего набора стикеров в Телеграме предусмотрен отдельный бот – , который позволяет добавить и анимацию.
- Загружать стикеры удобнее всего с десктопного клиента, которым мы и воспользуемся. Запустите приложение, введите в поиске название требуемого бота и выберите результат, отмеченный на скриншоте ниже.
- Выполните команду для начала работы с ботом.
- Появится список доступных команд и вариаций, кликните в нём по ссылке .
- Введите название будущего набора (можно использовать как русские, так и английские буквы, но последние предпочтительнее).
- Теперь можно добавить к созданному паку первый стикер, просто перетащив файл из папки в диалог с ботом.
Появится окно предпросмотра – проверьте, как ведёт себя анимация, затем нажмите .
- Далее откройте панель смайлов и выберите тот, которому должен отвечать добавленный стикер.
Проверьте, подходит ли он вам, затем щёлкните .
- Бот предложит добавить ещё стикеров – процедура идентична описанной в предыдущем шаге. Когда набор будет готов, нажмите на ссылку .
Далее укажите пак, к которому будет добавлен стикер.
Можете задать и иконку (основное изображение пака), процедура аналогична добавлению стикера. Если это не требуется, пропустите данный шаг вводом команды .
- Последний шаг – создание ссылки для того, чтобы стикерпаком можно было поделиться с другими пользователями. Её уже нужно вводить исключительно английскими буквами.
- Готово – бот уведомит вас о том, что набор опубликован и доступен всем желающим пользователям.
Публикация является самым простым этапом создания анимированных стикеров, поскольку почти все требуемые процедуры выполняются автоматически.
Мы рады, что смогли помочь Вам в решении проблемы.
Помимо этой статьи, на сайте еще 13047 полезных инструкций.
Добавьте сайт Lumpics.ru в закладки (CTRL+D) и мы точно еще пригодимся вам. Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.