Как сделать анимированные стикеры, если вы не дизайнер, не вкладывая деньги
Материал подготовил Даниил Вем, основатель SMM Cluster - инструменты, чек листы и многое другое для маркетологов.
Сначала я ненавидел эти стикеры за постоянные ошибки и глупые требования. Затем смирился, понял и полюбил...
В этой статье мы детально рассмотрим каждый шаг создания, а именно:
- Подготовка (Идея и установка ПО)
- Поиск графики
- Подводные камни создания
- Анимация элементов
Статья рассчитана на людей, которые поверхностно знакомы с дизайном, но никогда сами ничего не рисовали. При этом мы постараемся не потратить ни цента денег.
1. Боль
Найдите идею. Звучит банально, но паков для телеграма уже много. Так как мы будем создавать анимированные стикеры, то конкуренции за внимание меньше, но она всё ещё есть.
Если вы будете использовать фразы, то определите, кто и в каком контексте их может использовать. Каждый стикер должно хотеться использовать в общении для упрощения или вызова эмоций.
В этой статье я буду приводить примеры на стикерах для СММ специалистов. Посмотреть примеры вживую можно по прямой ссылке на пак
2. Установка всего необходимого
- Adobe After Effects
- Adobe Illustrator
- Плагин Bodymovin-TG
Напомню, что у Adobe есть бесплатный триал, которого вам должно хватить, если у вас еще не установлены эти программы. А у Bodymovin-TG подробно расписана инструкция по установке со всеми актуальными ссылками.
3. Поиск графики
Даже если вы дизайнер/иллюстратор и умеете рисовать - ознакомьтесь с ограничениями. Для всех остальных, кто хочет реализовать идею с минимумом усилий - милости просим.
- Переходим на Freepic
- Вбиваем в поиск character set или character animation или вообще kawaii
- В фильтрах категории ставим "вектор". По желанию - сортировку по самым новым, чтобы случайно не повториться (у популярных выше вероятность, что их уже использовали). Ну и премиум, если готовы вкладывать деньги. Как по мне, оно того стоит, но цель статьи: показать, что и без этого можно вполне разгуляться. Сейчас по запросу character set бесплатно более 9000 результатов.
Внимание! Ограничения по графике
Какие дизайны нам не подойдут:
- там, где много мелких деталей и элементов
- там, где есть градиенты, свет, прозрачность
- то, что плохо потом впишется в квадрат
Ниже наглядный пример:
Выбираем один или несколько файлов для работы и скачиваем.
4. Подготовка графики
Запускам Adobe Illustrator и открываем в нем наш векторный файл. Если в архиве с файлом есть и *.ai и *.eps, то выбираем первое.
- Отредактируйте монтажную область, изменив её размеры на 512x512 пикс.
- Если объект вышел за края или наоборот, стал слишком маленьким, то расположите его по центру, оставив небольшой запас для дальнейшей анимации.
- Также, если в дизайне есть ненужные элементы, их можно просто скрыть или удалить в слоях
- Для анимации разных элементов необходимо разнести всё по разным слоям. Так, в примере ниже, у нас будет отдельно анимирован котик, и отдельно прямоугольник для надписи. Вам нужно, чтобы элементы были слоями "первого уровня", а не вложенными, поэтому я отметил зеленым, где можно создать новый слой, он появится у вас в списке.
- Сохраните файл в формате *.ai
5. Создание анимации
Вот тут я настрадался. Изначально у меня была идея создать красивую анимацию текста на стикерах. Поэтому я установил себе несколько плагинов, которые бы мне помогли это сделать быстро.
Оказалось что Bodymovin-TG не поддерживает:
- эффекты
- маски
- сложные векторные элементы
- гифки, видео
- текст
- и наверное что-то еще очень вам нужное.
Поэтому мы будем работать только с:
- положение объекта
- поворот
- прозрачность
- масштаб
Для начала создайте любой проект Adobe After Effects с настройками композиции: 512x512 пикс., 60 кадров в секунду, 3 секунды длительность. В созданной композиции отключите видимость фона.
Теперь импортируем наш файл из Adobe Illustrator
Перетаскиваем файлы из папки в нашу композицию и конвертируем вектор в фигуры. Затем удаляем вектор из проекта, он автоматически исчезнет и в композиции.
Добавляем надпись и тоже переводим её в фигуры. Текстовый слой удаляем из композиции. По желанию, можем добавить обводку. Это нужно, чтобы на любом фоне наш текст читался хорошо, если у него нет специальной подложки. В нашем примере подложка в виде прямоугольника есть.
Теперь анимация. Как я писал выше, инструментов мало, но их хватает. Проставляем ключевые кадры, нажимая на те параметры, которые хотим изменять. Для начала попробуйте сделать как на скриншотах - точку сначала, на 1.30 и в конце. Первый и последний одинаковый, а тот что ровно посередине - с изменениями. Это позволит легко сделать цикличное изображение.
Чем больше у вас времени, тем сложнее и интереснее можно придумать движение объектов. Например, в этом стикере, из нашего пака я в итоге сделал вот такую расстановку ключевых кадров:
6. Рендер
Открываете ранее установленный плагин Bodymovin-TG
Обновляете его, и, выбрав нужную композицию и её местоположение - рендерите.
Если вы все делали по инструкции выше, то у вас будет успех. Если вы где-то решили отклонится от рекомендаций - ошибка. Если вы думаете, что всё сделали правильно, но всё равно ошибка - добро пожаловать в комментарии.
Мой стикер с котом по итогу весит 13.1 кб. Это очень мало, и за счёт этого - круто. То есть анимация будет даже при слабом интернете.
7. Загрузка в Телеграм
Запускаем официального бота @Stickers и в меню команд выбираем /newanimated
Далее следуем инструкции. У вас на превью загрузки стикера должно уже все правильно отображаться. Если нет, значит, возвращаемся и проверяем, что работает не так.
Для загрузки обложки пака, точно так же - создаем анимацию, с размерами 512 на 512.
В дальнейшем в этом боте вы сможете видеть статистику использования ваших стикеров и их установки.
Если эта тема будет востребована, в следующий раз могу написать о том, как продвигать ваши стикеры, и с какими неприятностями столкнулись мы.
P.S. Если вас интересуют стикеры для маркетологов, то мы собрали полную подборку тут.
Может здесь кто поможет: меня типа укачивает от анимированных стикеров в телеге, даже не знаю что делать.
PS: Говорят скоро и эмодзи анимированные добавят, чатики в телеграме будут как чаты из нулевых. Ещё бы и цвет текста каждый выбирал свой, мууа просто.
Скажите спасибо что без музыки у каждого стикера))
Я просто блюю от анимации, стараюсь скорее перемотать. Плохой вестибюлярный аппарат.
Да, как будто в аське снова
мне бы хотя бы обычные научиться рисовать, а тут анимация.... эх... мечты))
Ну обычные в фотошопе куда легче делаются. На анимированные у меня ушла неделя, в то время как сделать их же картинками ушел бы один вечер. Так что попробуйте, начните, это не очень сложно.