Как сделать живой стикер
Инструкция: как сделать анимированные стикеры в Telegram
Поэтапно разберемся во всех нюансах при разработке такого стикера. Начиная с программного обеспечения и заканчивая публикацией в Telegram.
Так что же из себя представляет этот анимированный стикер?
Это собственный формат Telegram — .tgs, который основан на технологии lottie.
Lottie — это движок от Airbnb, который позволяет проигрывать анимации на основе json, созданного с помощью плагина Bodymovin для Adobe After Effects. Такой же плагин существует и для стикеров Telegram и называется аналогично — Bodymovin-TG.
Скачиваем с сайта разработчика плагин bodymovin-tg.zxp необходимый для экспорта анимации в формат .tgs.
Для установки потребуется ZXPInstaller — приложение для установки расширений для Adobe.
Открываем ZXPInstaller и переносим плагин в окно программы.
Открываем Adobe After Effects и заходим в раздел настроек — «сценарии и выражения».
Ставим галочку напротив «Разрешить сценариям выполнять запись файлов и осуществлять доступ к сети».
Во всплывающем окне задаем параметр 512 на 512 пикселей, исходя из требований к размеру стикера.
Для рисования векторного стикера потребуются определенные навыки и знания основных инструментов, поэтому рекомендуется ознакомится с базовыми принципами рисования на сайте Adobe.
Изображение на стикере не должно выходить за края холста.
Существует альтернативный способ (Трассировка) с помощью которого любая картинка превращается в векторную. Будет очень полезно, для быстрого переноса своих растровых изображений в вектор.
В качестве примера возьмем изображение стикера из интернета.
Импортируем изображение в рабочую среду Adobe Illustrator (перенос в окно программы изображения). И проводим указанные действия из видео:
Трассировка прошла успешно, но алгоритм не всегда точно угадывает форму объекта за элементом. С помощью встроенных инструментов можно устранить эти недостатки.
Использование этих функций в Adobe After Effects приведет к критическим ошибкам при экспорте стикера:
Masks, Mattes, Layer Effects, Images, Solids, Texts, 3D Layers, Merge Paths, Star Shapes, Gradient Strokes, Repeaters, Time Stretching, Time Remapping, Auto-Oriented Layers
Во всплывающем окне «Настройки композиции» указываем параметры стикера с учетом официальных требований к анимированным стикерам, такие как:
Переносим файл со стикером в рабочую среду Adobe After Effects.
Кликаем правой кнопкой по стикеру, выбираем «создать фигуры из векторного слоя».
Для примера произведем анимацию 3 элементов в стикере.
Разберем подробнее, как анимировать данные элементы в After Effects:
Раскрываем слой «Кривые Sticker» и находим группу с необходимым объектом, быстрее всего это можно сделать кликнув по элементу в окне предпросмотра.
Выбираем пункт «Положение» и активируем его нажав на значок секундомера. После двигаем временную шкалу чуть вперед и передвигаем объект с помощью мыши или вручную, изменяя численное значение «Положение«.
Выбираем пункт «Контур» и активируем его нажав на значок секундомера.
Для создания такой анимации потребуется тянуть за «синий квадратик», изменяя тем самым форму объекта и постепенно довести её до требуемого состояния.
Выбираем пункт «Расширения» и находим там плагин Bodymovin.
Отмечаем композицию и выбираем место сохранения нажатием на «троеточие».
После нажимаем на кнопку Render.
Если всё пройдет удачно, в выбранном вами месте появится файл .tgs.
Открываем Telegram и находим в поиске бота @Stickers.
Для начала работы с ним отправляем команду /start.
У всех стикеров в наборе должна быть одинаковая частота кадров. Иначе придется делать два разных пака — для 30 и 60 кадров в секунду.
Отправляем команду /newanimated. После выбираем название и получаем следующую инструкцию:
Спасибо! Теперь отправьте мне, пожалуйста, будущий анимированный стикер — файл в формате TGS, созданный с помощью плагина Bodymovin-TG для Adobe After Effects.
Рекомендуем загружать изображения через десктопное приложение.
Следующий шаг отправить смайл, который соответствует анимированному стикеру. Заканчиваем создание набора командой /publish, если больше нет стикеров для добавления. В дальнейшем через бота можно будет дополнительно добавить новых стикеров.
Бот Stickers предложит выбрать иконку для анимированных стикеров. Её нужно создать отдельно, но проще всего написать команду /skip, чтобы первый стикер показывался в качестве иконки.
Как сделать анимированный стикер в Telegram
Вам понадобится пара программ от Adobe и немного фантазии.
Не так давно в Telegram появились анимированные стикеры. Эти забавные двигающиеся картинки отлично передают эмоции и представляют собой неплохую альтернативу гифкам и привычным стикерам. Но если создать обычный стикерпак довольно просто, то с анимированными изображениями придётся повозиться.
Подготавливаем инструменты
Теперь запустите ZXPInstaller и щёлкните по его окну. Выберите загруженный плагин и подождите, пока приложение установит его.
Откройте Adobe After Effects. Затем сделайте следующее:
Нажмите «Окно» → «Расширения». Если вы всё сделали правильно, то в списке расширений вы увидите 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.
Последний шаг — выбор короткого адреса для вашего набора. Бот создаст ссылку, по которой вы и ваши друзья получат доступ к стикеру. Нажмите на неё и сможете добавить новую анимацию в коллекцию, как обычно.
Ваш первый собственноручно сделанный анимированный стикер готов. А получить доступ к нашей анимации можно, нажав на ссылку.
Анимированные стикеры в Телеграм — как добавить или создать самому
Анимированные стикеры в Телеграм — это картинки, которые скачут, танцуют или выполняют любое другое действие в течение нескольких секунд. То есть принцип их работы похож на то, как устроены GIF- ки. Анимированные стикеры помогают ярче выразить эмоцию и точней передать ваши чувства собеседнику. Ниже мы поделимся популярными подборками анимированных стикеров, которые вы сможете скачать и установить себе в Телеграм.
Еще мы подготовили подробную инструкцию по созданию этих движущихся картинок самому. Поэтому, если чувствуете себя наследником Леонардо да Винчи и других творцов, обязательно изучите в этой статье, как создать анимированные стикеры Телеграм. Даже если кровь представителей искусства Высокого Возрождения в вас не течет, все равно лучше обучитесь этому тонкому ремеслу, чтобы удивлять собеседников в мессенджере.
Огромное количество наборов стикеров вы найдете в нашем каталоге. Там можно найти и скачать 6 500 самых смешных и даже пошлых стикерпаков рунета.
Подборки анимированных стикеров для Телеграм
Оставляем вам здесь ссылки на 25 наборов с анимированными стикерпаками:
Hot Cherry — энергичные вишенки.
Office Turkey — индюк, нацепивший на себя пиджак, рубашку и галстук (вполне вероятно, что разработчики сами нацепили на индюка все это без его одобрения).
Earl The Wolf — голубой волк ( no homo!).
Minty Zebra — зебра мятного цвета.
Little Catto — очень странный кот.
Hamster Bernard — хомяк Бернард, который видимо комплексует по поводу своих форм, из-за чего старается показываться в кадре только по пояс.
Banana Fun — банан с замашками на биполярное расстройство.
The Foods — ничего сверхъестественного, просто подборка неадекватных анимированных фруктов.
Bunnyta — сексапильная крольчиха со «сделанными» губами.
Pandalicious — харизматичная панда, которая выручит на важных онлайн-переговорах.
Tidy Tie Tom — рыжий кот по имени Том с элегантной коллекцией галстуков.
Aloe Monkey — эмоциональная обезьяна.
Сберкот Animated — кот, которы й ненавязчиво рекламирует Сбербанк.
Suppy Rabbit — толстый заяц, постигший дзен.
Psy Cat — что на уме у этого кота понять трудно.
Sparks — психоделическое пони.
Fluffy Rabbit — милый кролик.
Птенчик — постигающий мир попугайчик.
Melie the Cavy — морская свинка.
Джуи — желтая инопланетяшка.
Animals — стая диких животных, которые готовы ворваться в ваш Телеграм.
U- Лайка — символ Зимней универсиады 2019 года.
Senya — дерзкий хомяк Сеня.
Воспроизведение анимированных изображений особо не скушает ваши запасы интернета.
Анимация требует лишь 20-30 килобайт трафика, с учетом того, что она плавно показывается со скоростью не более 60 кадров/сек.
Как загрузить анимированные стикеры в Телеграм
Загрузить уже готовые анимации в ваш мессенджер достаточно просто. Для этого нужно сделать 3 шага:
Готово!
Чтобы отправить новые установленные анимашки, зайдите в чат с нужным собеседником, нажмите на значок смайлика, перейдите в «Стикеры» и выберите подходящую картинку.
Как сделать анимированные стикеры в Телеграм самому
Сразу скажем, что процесс создания анимации для мессенджера — процесс не для новичков. Если не боитесь сложностей, тогда следуйте этой инструкции:
Кстати, в нашем каталоге Телеграм-каналов представлены тысячи каналов с сортировкой по странам и категориям. Заходите!
К ак делать анимированные изображения для Т елеграм разобрались? Т еперь давайте перейдем к добавлению созданных картинок в мессенджер.
Как добавить свой анимированный стикер в Телеграм
Н овые анимированные стикеры можно добавить в Т елеграм следующим образом:
Знаете, что означают серые, зеленые и даже синие галочки в Telegram? Прочитайте эту статью.
Как сделать стикеры для WhatsApp самому
Разработчики мессенджера собираются улучшить текущий функционал и оживить общение за счет анимации стикеров. Пока ознакомим вас как создать простые стикеры для мессенджера и даже про добавление стикеров из telegramm.
Содержание
Анимированные стикеры в WhatsApp
Не так давно вышла новости: разработчики мессенджера собираются улучшить текущий функционал и оживить общение за счет анимации стикеров.
После отправки стикеры будут всегда оставаться анимированными (в отличие от GIF-файлов).
Точный срок появления новой фишки в WhatsApp разработчики не указали, но предоставили видео, о том, как это будет выглядеть:
На видео видно, что не хватает сглаживания, думаю это исправят в ближайшее время.
Неизвестно, когда разработчики WhatsApp выпустят анимированные стикеры в финальной версии приложения. Скорее всего, это случится в ближайшем крупном обновлении мессенджера.
Как пользоваться стикерами?
Чтобы загрузить стикеры и использовать их:
Дополнительные возможности:
Как сделать стикеры для WhatsApp самому используя Sticker Studio
В Google Play и Apple App Store есть много бесплатных приложений для создания стикеров, но остановимся на Sticker Studio, т.к. оно появилось раньше остальных 🙂 Sticker Studio позволяет превратить любые картинки или фотографии в стикеры, которые можно добавить в собственный набор WhatsApp. Пользователи могут загрузить до 10 стикер-паков по 30 изображений в каждом.
Для того, чтобы самостоятельно сделать стикер, нужно выделить область картинки/фото, загруженной в Sticker Studio (контур). Ситкеры можно собирать в пакетах, а пакеты можно легко установить в месенджере, нажав значок WhatsApp в списке пакетов. Приложение позволяет вам готовить и хранить до 10 пакетов, каждый из которых может содержать до 30 стикеров. Ситкеры готовы к использованию сразу после установки в месенджер.
Как создавать собственные стикеры для WhatsApp через свое приложение
Вы можете создать собственные стикеры, опубликовав свое приложение в магазинах приложений, например Google Play или в Apple App Store. После того, как ваше приложение будет размещено, пользователи смогут загружать и использовать ваши стикеры в WhatsApp. Стикеры для WhatsApp не должны нарушать закон!
WhatsApp предоставляет шаблоны приложений и код для Android и iOS, чтобы вы могли создавать свои стикеры и приложения, даже если у вас совсем немного опыта в разработке и написании кода. Для более опытных разработчиков предлагается набор API и интерфейсов, поддерживаемых WhatsApp.
Ниже описаны требования к стикерам, но, все таки, обратите внимание на файлы README, сопровождающие шаблоны приложений. В этих файлах вы найдёте все требования и советы, которые пригодятся вам при создании приложений со стикерами для WhatsApp.
Примечание. В соответствии с правилами Apple App Store, при разработке приложения со стикерами для iOS вы должны создать уникальный пользовательский интерфейс, не используя интерфейс нашего шаблона приложений.
Ваши стикеры должны соответствовать следующим требованиям:
Вы также должны предоставить иконку, которая будет представлять ваш набор на панели стикеров Ватсап. Размер этого изображения должен составлять 96×96 пикселей, а объём — не превышать 50 КБ.
В дополнение к этим требованиям мы рекомендуем принять во внимание следующее:
Если у вас есть вопросы или вы столкнулись с проблемой, связанной с созданием стикеров, напишите техподдержкой WhatsApp по адресу developers@support.whatsapp.com. По всем остальным вопросам вы можете связаться с техподдержкой WhatsApp прямо из приложения Ватсап, перейдя в Настройки > Помощь > Напишите нам.
Скачать стикеры для WhatsApp: популярные приложения
Скачать стикеры для WhatsApp бесплатно можно с помощью специальных приложений для Android и iPhone. Пока это единственный способ. Либо используйте встроенные стикеры.
Стикеры для Android
StickerLand
Stickify Store
Sticker.ly
Стикеры Для iPhone
Stickerfy
StickerHub
StickersPacks
Как добавить стикеры для WhatsApp из Telegram
Для начала получим сами стикерыЮ для этого: