Личный опыт Даниил Вем
509

Как сделать анимированные стикеры, если вы не дизайнер, не вкладывая деньги

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

В закладки

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

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

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

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

1. Боль

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

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

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

Стикеры для СММщиков

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 результатов.
пример заготовок персонажей

Внимание! Ограничения по графике

Какие дизайны нам не подойдут:

  • там, где много мелких деталей и элементов
  • там, где есть градиенты, свет, прозрачность
  • то, что плохо потом впишется в квадрат

Ниже наглядный пример:

Плохой и хороший пример для анимированных стикеров

Выбираем один или несколько файлов для работы и скачиваем.

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. Если вас интересуют стикеры для маркетологов, то мы собрали полную подборку тут.

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Даниил Вем", "author_type": "self", "tags": [], "comments": 10, "likes": 2, "favorites": 40, "is_advertisement": false, "subsite_label": "life", "id": 77593, "is_wide": false, "is_ugc": true, "date": "Wed, 31 Jul 2019 17:33:32 +0300" }
{"average":26034,"one":95,"ten":75}
Сколько денег вы откладываете в месяц?
Ответьте и узнаете, сколько копят другие.
0 ₽
70 000+ ₽
0 ₽
{ "id": 77593, "author_id": 103983, "diff_limit": 1000, "urls": {"diff":"\/comments\/77593\/get","add":"\/comments\/77593\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/77593"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199123, "last_count_and_date": null }
10 комментариев

Популярные

По порядку

Написать комментарий...
1

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

PS: Говорят скоро и эмодзи анимированные добавят, чатики в телеграме будут как чаты из нулевых. Ещё бы и цвет текста каждый выбирал свой, мууа просто.

Ответить
1

Я просто блюю от анимации, стараюсь скорее перемотать. Плохой вестибюлярный аппарат.

Ответить
0

Скажите спасибо что без музыки у каждого стикера))

Ответить
0

Да, как будто в аське снова

Ответить
0

мне бы хотя бы обычные научиться рисовать, а тут анимация.... эх... мечты))

Ответить
1

Ну обычные в фотошопе куда легче делаются. На анимированные у меня ушла неделя, в то время как сделать их же картинками ушел бы один вечер. Так что попробуйте, начните, это не очень сложно.

Ответить
0

да рисовать хотя бы научиться)) идеи стикеров есть в голове, а вот на бумагу перенести проблематично. дальше проще было бы, туториалов много просмотрено, но практики оч мало :)

Ответить
0

Что Вам нарисовать, Татьяна?

Ответить
0

спасибо, попробую)

Ответить
0

Как раз в этом примере я постарался показать что можно не уметь рисовать, а найти готовую графику под идею. Будет не так гениально, как в голове, но все же))

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления
{ "page_type": "default" }