Анимированные стикеры
Мы запустили стикеры ещё в январе 2015 года. С тех пор формат стикеров Telegram был украден принят и другими приложениями, общий охват которых около 2 миллиардов человек. Сегодня мы предоставляем совершенно новый формат — анимированные стикеры.
Мы задали себе вопрос: могут ли анимированные стикеры быть более качественными, чем статичные, и при этом потреблять меньше трафика? Ответ оказался ДА (но только после того, как мы пообещали разработчикам анимированные картинки с котиками).
Плавная анимация и небольшой размер
Благодаря различным оптимизациям, анимированные стикеры потребляют меньше заряда батареи, чем GIF и работают со скоростью 60 кадров в секунду. Если картинка может заменить тысячу слов, то выходит, что один стикер заменит 180 000 слов.
Открытая платформа
Естественно, анимированные стикеры — это бесплатная платформа. Любой художник может создавать свои наборы и делиться ими с пользователями Telegram.
Как и его статический предшественник, формат анимированных стикеров Telegram, вероятно, станет новым стандартом в сфере обмена сообщениями.
Прочитайте это краткое руководство, чтобы начать.
Первые наборы
Чтобы сразу попробовать стикеры в деле, наши художники создали несколько наборов-образцов. Их вы можете найти в разделе «Trending» на панели стикеров.
Самый простой способ найти стикер по вашему настроению — написать смайлик с нужной эмоцией, тогда Telegram сразу предложит вам соответствующий стикер.
Следите за новыми анимированными стикерами и нашим следующим обновлением.
Платные анимированные стикеры ВКонтакте
Анимированных стикеров мало не бывает! Сегодня мы рассмотрим доступные платные анимированные стикеры ВКонтакте.
Бесплатные анимированные стикеры ВКонтакте — можно найти по ссылке.
Анимированный Сеня
Он двигается и танцует! ERROR ERROR ER#@?e(&
Набор доступен по ссылке.
Анимированный Дигги
Набор доступен по ссылке.
Флаффи
Этот кролик не покажет Вам дорогу в Страну Чудес, но с удовольствием составит компанию в диалогах.
Набор доступен по ссылке.
Ветерок
Такса, которая развеселит тебя даже в самую холодную и угрюмую погоду.
Набор доступен по ссылке.
Пришелец Гриша
Пильдазоид космической армии с планеты GJ 1214 b по имени Гриша и его рыбка Иноплэт прибыли завоевать ВКонтакте, похитить коров и загипнотизировать котиков!
Набор доступен по ссылке.
Спаркс
Розовый радужный единорожек. Он сияет как Млечный Путь, приносит свет и готов развеять любые тучи.
Набор доступен по ссылке.
Кролик Супчик
Кому угодно может поднять настроение! Только взгляните, какой он милый и мягкий!
Набор доступен по ссылке.
Пси-Кот
Как и подобает любому обладателю третьего глаза, Пси-Кот в совершенстве владеет телекинезом, гипнозом, левитацией, трансформацией, и ещё кучей других полезных вещей. Вот только использует он это не всегда по назначению…
Набор доступен по ссылке.
Мудакот
Набор доступен по ссылке.
Блинчик и Сметанка
Эта идеальная парочка никому не даст заскучать ни во время, ни после Масленицы!
Набор доступен по ссылке.
Джуи
Зверёк с далёкой солнечной планеты. Частичка тепла в Ваши диалоги!
Набор доступен по ссылке.
Свинцент
Этот год принадлежит ему! Свинцент готов принимать поздравления и подарки! А Вы?
Набор доступен по ссылке.
Птенчик
Очень дружелюбный и общительный попугай. Не оставляйте его одного, ведь тогда он начнёт разговаривать со своим отражением в зеркале!
Набор доступен по ссылке.
Дамбо
Ушки на макушке! Стикеры от Disney.
Набор доступен по ссылке.
Данные стикеры являются платными и доступны для покупки ВКонтакте. Если Вы не желаете тратить деньги, но очень хотите анимированный набор, то есть способ получить голоса бесплатно. Подробнее о том, как заработать голоса для ВК бесплатно можно узнать у нас по ссылке.
Во ВКонтакте появились анимированные стикеры
Социальная сеть «ВКонтакте» выпустила анимированные стикеры. Как ясно из названия, они отличаются от обычных «наклеек» какой–либо анимацией — например, персонаж может подмигивать, махать рукой или посылать воздушные поцелуи. Новинки распространяются так же, как и обычные стикеры: их можно отправлять собеседникам в диалогах или прикреплять в комментариях.
Анимированные стикеры поддерживаются в последних версиях мобильных клиентов для Android и iOS, а также в браузерной версии сайта. Однако принцип их работы отличается в зависимости от платформы. На компьютерах новые стикеры «проигрываются» три раза, после чего анимация останавливается — для ее повторного воспроизведения необходимо навести курсор на стикер. На смартфонах и планшетах анимация постоянная. Анимированные стикеры видны как собеседнику, так и отправителю. В каталоге «наклеек» все стикеры статичны — для предпросмотра анимации необходимо навести курсор (на компьютерах) или произвести долгое нажатие на стикер (в мобильных клиентах).
На данный момент во ВКонтакте доступны два набора анимированных стикеров: «пёс Коржик» от МегаФона и «единорог Спаркс» (ранее стикеры в этом наборе были статичными). Первый распространяется бесплатно, а второй доступен за 19 голосов. Видимо, 19 голосов — стоимость для всех наборов анимированных стикеров (цена набора стандартных стикеров составляет 9 голосов).
Инструкция: как сделать анимированные стикеры в Телеграме
Привет! Меня зовут Дарья Алёхина, я дизайнер в Friflex. Недавно мы запустили наши первые фирменные стикеры в Телеграме. Делюсь опытом – как это сделать.
Стикеры – это визуальный инструмент коммуникации. Картинка понятно и быстро выражает эмоции собеседника. Современные пользователи соцсетей привыкли общаться через эмодзи и стикеры.
Стикеры компании – это и элемент для общения внутри коллектива и за его границами. Это и имиджевый инструмент. Корпоративные стикеры можно использовать не только в Телеграме, но и в айдентике и элементах фирстиля. Итак, что нужно сделать, чтобы создать стикерпак для компании?
Определитесь с тем, что будет изображено на стикерах. Изучите иллюстрации других художников, соберите референсы и пофантазируйте. Персонаж может отражать философию вашей компании, вы можете добавить надписи, связанные с вашей областью деятельности. Только над надписями нужно потрудиться копирайтеру – они должны быть короткими и емкими.
Персонаж 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. У нас есть несколько составляющих.
С помощью цифр или ползунка можно выставить нужное нам значение.Например, я хочу повернуть голову влево, для этого нужно выставить первый ключ в нулевом значении Rotation на столько, сколько необходимо.
Далее выставляем ключи по нашей задумке, чем ближе ключ, тем быстрей будет происходить анимация, чем дальше, тем, соответственно медленнее. Для стикеров нам нужно будет зациклить нашу анимацию, поэтому мы расставляем ключи в нулевом значении в начале и в конце таймлайна.
А что если, я хочу, чтобы голова двигалась сначала быстрее, затем медленно опускалась? Сделать это я могу через Graph Editor, он позволяет изменять скорость нашей анимации. Можно еще выбрать настройки и, кликнув на ключе правой кнопкой мыши, выбрать Keyframe Assistant и перевести его в easy ease/easy ease in/easy ease out, останется отрегулировать скорость с помощью кривых и плавная анимация готова.
Masks, Mattes, Layer Effects, Images, Solids, Texts, 3D Layers, Merge Paths, Star Shapes, Gradient Strokes, Repeaters, Time Stretching, Time Remapping, Auto-Oriented Layers
Открываем Телеграм и находим в поиске бота @Stickers. Для начала работы с ним отправляем команду /start. Отправляем команду /newanimated. После выбираем название и получаем инструкцию:
Следующий шаг – отправить смайл, который соответствует анимированному стикеру. Заканчиваем создание набора командой /publish, если больше нет стикеров для добавления. В дальнейшем через бота можно будет добавлять новые стикеры. Также бот предложит вам установить иконку вашего набора, можете нажать skip и сделать это позже, а пока иконкой будет первый стикер в наборе.
Вашими стикерами обязательно будут пользоваться, если вы сделаете их не только красивым, но и подходящими для переписки. Для этого передайте в них эмоции: радость, восторг, удивление, грусть. Или состояния: работаю, обнимаю, целую, сплю. Классно будет использовать повседневные или локальные фразы, которые поймут коллеги.
Инструкция: как сделать анимированные стикеры в 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, чтобы первый стикер показывался в качестве иконки.
