В какой программе делать анимированные стикеры

Материал подготовил Даниил Вем, основатель SMM Cluster — инструменты, чек листы и многое другое для маркетологов.

28 218 просмотров

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

В этой статье мы детально рассмотрим каждый шаг создания, а именно:

• Подготовка (Идея и установка ПО)
• Поиск графики
• Подводные камни создания
• Анимация элементов

Статья рассчитана на людей, которые поверхностно знакомы с дизайном, но никогда сами ничего не рисовали. При этом мы постараемся не потратить ни цента денег.

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

Если вы будете использовать фразы, то определите, кто и в каком контексте их может использовать . Каждый стикер должно хотеться использовать в общении для упрощения или вызова эмоций.

After Effects: делаем анимированные стикеры для Telegram

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

Стикеры для СММщиков
2. Установка всего необходимого

1. Adobe After Effects
2. Adobe Illustrator
3. Плагин Bodymovin-TG

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

3. Поиск графики

Даже если вы дизайнер/иллюстратор и умеете рисовать — ознакомьтесь с ограничениями. Для всех остальных, кто хочет реализовать идею с минимумом усилий — милости просим.

1. Переходим на Freepic
2. Вбиваем в поиск character setили character animationили вообще kawaii
3. В фильтрах категории ставим «вектор». По желанию — сортировку по самым новым, чтобы случайно не повториться (у популярных выше вероятность, что их уже использовали). Ну и премиум, если готовы вкладывать деньги. Как по мне, оно того стоит, но цель статьи: показать, что и без этого можно вполне разгуляться. Сейчас по запросу character set бесплатно более 9000 результатов.

Источник: vc.ru

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

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

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

Как сделать ВИДЕОСТИКЕРЫ Телеграм. САМЫЙ ЛЕГКИЙ СПОСОБ

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

Сохраните загруженный файл в любом удобном месте.
Теперь нам нужно установить средство инсталляции плагинов к Афтер Эффектс. Оно называется ZXPInstaller, официальный ресурс находится по ссылке ниже. Для скачивания требуемой версии воспользуйтесь кнопкой «Download for Windows». Перейти на официальный сайт ZXPInstaller

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

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

После установки средства добавления дополнений перетащите в его главное окно файл bodymovin-tg.zxp. Подождите, пока операция будет произведена, а после соответствующего уведомления от утилиты перезапустите After Effects, если он в это время открыт.

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

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

1. Если вы обладаете достаточными художественными навыками, можете нарисовать нужные изображения с нуля, благо Adobe Illustrator достаточно дружелюбен к новичкам. Подробнее: Учимся рисовать в Adobe Illustrator
2. Мы же воспользуемся более простым решением — функцией под названием «трассировка», которая предназначена для перевода растрового изображения в векторное. Первым делом подготовьте исходники будущих стикеров и сохраните их в какую-нибудь подходящую папку. Далее откройте Иллюстратор и выберите «Открыть». Посредством интерфейса «Проводника» перейдите к целевому каталогу и запустите импорт изображения.
3. После загрузки объекта в приложение выделите его одиночным нажатием по рабочему пространству левой кнопкой мыши, затем найдите на панели инструментов справа блок «Быстрые действия», где нажмите «Трассировка изображения». В меню далее выберите «Фотография высокой точности».
4. В зависимости от сложности используемого исходника процесс трассировки может длиться до минуты. По его окончании в меню быстрых действий выберите «Разобрать». На изображении появится перечень объектов, которые распознала программа. Далее воспользуйтесь кнопкой «Разгруппировать». Преображение будущего стикера готово. Если наблюдаете на объектах искажения либо их больше, чем требуется, используйте инструменты Иллюстратора для решения этих проблем. Так, объединить контуры можно посредством соответствующей панели справа.

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

После того как изображение будет готово, сохраните его, воспользовавшись пунктами «Файл» – «Сохранить как». Выберите папку, куда желаете поместить проект, и убедитесь, что формат задан как «Adobe Illustrator (*.AI)», после чего нажмите «Сохранить». Далее будут запущены параметры настройки сохранения. Здесь нужно убедиться, что активна опция «Создать PDF-совместимый файл», после чего нажать «ОК».

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

Теперь переходим к самой ответственной части – превращении стикера в анимированный.

1. Запустите Adobe After Effects и в его главном меню выберите пункты «Композиция» – «Новая композиция». Настройки будущей анимации задайте следующим образом:
2. «Ширина» и «Высота» – 512 на 512 пикселей;
3. «Частота кадров» – 30 либо 60, последнее предпочтительнее;
4. «Длительность» – 3 секунды;
5. «Цвет фона» – желательно белый.

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

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

Далее перетащите в рабочую область (отмечена на скриншоте) созданное на предыдущем этапе векторное изображение. Параметры импорта – «Композиция», «Выбор слоя», «Размер документа».

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

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

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

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

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

Повторяйте действия шагов 6-7 для создания как минимум восьми точек – это допустимый нижний предел для приятной глазу анимации. Чтобы проверить результат, воспользуйтесь в меню справа разделом «Предпросмотр»: раскройте его, затем нажмите на кнопку начала воспроизведения.

После получения подходящего результата его понадобится экспортировать в нужном формате – откройте пункт «Окно», где выберите «Расширения» – «Bodymovin for Telegram Stickers». Откроется отдельная панель управления экспортом. Первым делом выберите созданную композицию (отметка в левой части соответствующей строки), после чего кликните по трём точкам. Посредством «Проводника» выберите папку, куда желаете сохранить итоговый стикер. Далее щёлкните «Render». Если всё сделано правильно и лимит в 64 Кб не превышен, рендеринг завершится успешно, о чём программа вас и уведомит. Для продолжения нажмите «Done» и закройте окно плагина. В выбранной ранее папке должен появиться файл с расширением TGS.

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

1. Загружать стикеры удобнее всего с десктопного клиента, которым мы и воспользуемся. Запустите приложение, введите в поиске название требуемого бота и выберите результат, отмеченный на скриншоте ниже.
2. Выполните команду /start для начала работы с ботом.
3. Появится список доступных команд и вариаций, кликните в нём по ссылке /newanimated.
4. Введите название будущего набора (можно использовать как русские, так и английские буквы, но последние предпочтительнее).
5. Теперь можно добавить к созданному паку первый стикер, просто перетащив файл из папки в диалог с ботом. Появится окно предпросмотра – проверьте, как ведёт себя анимация, затем нажмите «Отправить».
6. Далее откройте панель смайлов и выберите тот, которому должен отвечать добавленный стикер. Проверьте, подходит ли он вам, затем щёлкните «Отправить».
7. Бот предложит добавить ещё стикеров – процедура идентична описанной в предыдущем шаге. Когда набор будет готов, нажмите на ссылку «/publish». Далее укажите пак, к которому будет добавлен стикер. Можете задать и иконку (основное изображение пака), процедура аналогична добавлению стикера. Если это не требуется, пропустите данный шаг вводом команды /skip.
8. Последний шаг – создание ссылки для того, чтобы стикерпаком можно было поделиться с другими пользователями. Её уже нужно вводить исключительно английскими буквами.
9. Готово – бот уведомит вас о том, что набор опубликован и доступен всем желающим пользователям.

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

Источник: lumpics.ru

TGS формат или как создать анимированные стикеры

Прикольные Анимированные стикеры уже можно найти в других приложениях для обмена сообщениями, таких как WeChat, Whatsapp или Line, но Telegram не утверждает, что они первыми создали анимированные стикеры — вместо этого он предлагает новый формат tgs файла для анимированных стикеров.

Так что же такое файлы TGS?

Вернёмся ненадолго к анонсу релиза:

Разработчики Telegram проводили эксперименты с векторной графикой, методиками сжатия и кое-какой магией, для того чтобы появился новый формат файла на базе анимации Lottie. Формат TGS, который позволил сжать стикер до невероятных 20–30 кб., то-есть почти в семь раз меньше обычной фотографии в формате gif или png.

Знаете ли вы, что ваши Lottie анимацию можно легко превратить в анимированные стикеры для Telegram, которые имеют tgs формат? В этой статье вы узнаете, как это сделать! Удивите своих друзей красочной анимацией и создайте наборы стикеров, чтобы поделиться ими со всем миром в Telegram. Требования: Чтобы создать анимированные стикеры телеграмм, ваша анимация Lottie должна иметь размер 512 x 512 пикселей и не должна быть длиннее 3 секунд. Вам будет предложено изменить эти прараметры в разделе «Экспорт стикеров Telegram (TGS)» в редакторе Lottie, если ваша анимация не соответствует этим требованиям.

Шаг 1: Откройте свою анимацию в редакторе Lottie.

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

Шаг 2: отредактируйте размер и продолжительность анимации Lottie.

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

Шаг 3: Загрузите анимацию выбрав tgs формат

Перейдите на панель справа от редактора и загрузите свою анимацию в формате .TGS.

Шаг 4. Откройте Telegram и начните настраивать стикер-бот.

Найдите «Стикеры» и начните разговор с ботом, набрав /newanimated. Обратите внимание, что для загрузки ваших анимированных стикеров в сеть потребуется несколько команд. Следуйте инструкциям бота Sticker, чтобы продолжить.

Введите название для своего набора стикеров Telegram. Затем перетащите файл в формате TGS, загруженный на предыдущем шаге.

Выберите смайлик, соответствующий вашим анимированным стикерам. Если вы хотите иметь несколько Lottie анимаций в паке, повторите процесс перетаскивания tgs файлов. Кстати, смайлики в виде Lottie анимации получаются очень прикольными.

Когда вы убедитесь, что ваши анимированные стикеры телеграм готовы и все находяться в вашей паке, введите /publish и дайте своему набору стикеров имя и бум всё будет готово Теперь вы можете отправлять свои собственные анимированные стикеры в Telegram! Одна из наших услуг это разработка анимационных стикеров Telegram, мы готовы выполнить ваш заказ и создать для вас уникальные и красивые стикеры которые имеют tgs формат. Делитесь стикерами Telegram, которые вы создали вместе с нами, в наших социальных сетях!

Источник: lottiefiles.ru