В современном мире социальные сети стали неотъемлемой частью нашей жизни, предоставляя возможность общаться с друзьями и близкими на больших расстояниях. Однако, со временем, обычные статические стикеры в сообщениях могут надоесть, и тогда на помощь приходят анимированные стикеры. Анимированные стикеры – это интерактивные изображения, которые могут двигаться, изменять форму, цвет или отображать различные действия. Они представляют собой новый уровень коммуникации, делая общение более ярким, интересным и привлекательным для пользователей. В контексте социальных сетей, анимированные стикеры могут стать уникальным и функциональным инструментом для выражения своих эмоций, мыслей и настроений. Они могут быть использованы как для личного общения, так и для продвижения брендов, товаров и услуг.
Проанализировав источники интернета и официальные сайты Telegram, я пришел к выводу, что для создания анимированных стикеров можно использовать множество программ, но все эти программы будут не корректно создавать ваш стикер, это могут быть проблемы как с отрисовкой, так и с форматами и размерами. Еще одной проблемой является то, что формат TGS, о котором мы говорили ранее, поддерживается только в приложениях «adobe», но эту проблему можно решить использую сторонние программы, но, чтобы не усложнять ситуацию, мы будем использовать профессиональные программы семейства «adobe».
Платформа для которой мы будем учиться создавать стикер – Telegram.
I. Создание анимированного стикера:
В прошлом пункте мы определились с темой стикера, теперь предстоит придумать и представить какие действия будет совершать сам стикер, например: качание головой; приветствие лапой, рукой; подпрыгивание; движения мимикой и так далее.
1. Adobe illustrator:
Adobe illustrator – это редактор для векторной графики.
Для нас это программа представляет собой редактор, который с листа бумаги или картинки в интернете превратит её в цельный векторный рисунок, который в дальнейшем можно будет редактировать, анимировать. Т.е. это редактор, с помощью которого мы рисуем наш стикер, его детали (руки, ноги, глаза, усы и так далее).
* Adobe illustrator используется на английской версии 2023 года*
· Открываем приложение.
· Создаем новую иллюстрацию.
В настройках иллюстрации ОБЯЗАТЕЛЬНО выставляем параметры, коорые указаны на сайте социальной сети.
И нажимаем «создать».
· Перед нами открывается рабочий стол редактора, в приложении очень много разных инструментов и окон, но все нам не понадобятся, а только лишь некоторые из них:
В основном это все инструменты, которыми мы будем пользоваться при отрисовке стикера.
· Открываем картинку (skech), чтобы её открыть, выбираем на верхней панель кнопку «file», затем «open» и выбираем нашу картинку.
· В панеле для работы со слоями (layers) создаем еще 2 слоя (цвет и стикер), путем нажатия на плюс в низу этой панели.
· Последовательность слоев: цвет – скетч – стикер.
· Выбрав слой «цвет», создаем несколько небольших фигур (эллипс) и поочередно используя «eyedropper» берем цвета со скетча.
· Выбрав слой с нашей картинкой, переходим в раздел «transparency: normal» меняем на «multiply»; «opacity» на 40-60%.
· Выбираем слой стикер и при помощи «pen» начинаем отрисовывать стикер по шаблону. (детали, которые предположительно будут двигаться, отрисовываем отдельно, все отрисованные детали находятся в слое «стикер», который можно открыть стрелочкой рядом.)
· При отрисовке удобно использовать следующие комбинации клавиш:
1) «Ctr+z» – действие назад.
2) «Ctr +v» – выбрать selection tool.
3) «Ctr+a» – выбрать direct selection tool.
4) «Z+ЛКМ» – увеличение/уменьшение.
5) «Space+ЛКМ» – перемещение.
· Наложение цвета: чтобы разукрасить картинку следует при помощи клавиш «ctr+c» и «ctr+v», скопировать слой, который разукрашиваем и скопированный слой наложить поверх главного слоя (уменьшив накладываемый слой в панеле «stroke»), затем при помощи «selection tool» выделяем эту часть и «eyedropper» выбираем нужный цвет с эллипсов, которые мы делали ранее, и меняем стрелочку около панели для работы с цветом.
· Отрисовав стикер, при помощи комбинации «ctr+g», группируем части, которые должны быть вместе. (например: цвет и обводку, части тела.)
· Для удобства, следует назвать каждый подслой.
· При помощи зажатия ЛКМ можно перетаскивать подслои для правильного расположения слоев в стикере.
· После полной отрисовки, создания цвета и правильного расположения подслоев, нажимаем три полоски сверху панели «layers», выбираем пункт «release to layers (sequence)».
· Выделяем все подслои слоя «стикер» и ЛКМ перетаскиваем их наверх слоя «стикер». (самый последний слой – удаляем)
· Удаляем слои «цвет» и «скетч».
· Сохранение: выбираем на верху «file» - «save as» и выбираем место куда будем сохранять.
·
2. Adobe after effects:
Adobe after effects – это программа для обработки, редактирования видео и создания различных эффектов, анимаций. Для нас это программа представляет собой редактор, с помощью которого мы можем анимировать свой стикер, нарисованный в Adobe illustrator. Т.е. это редактор, с помощью которого мы «оживляем» наш стикер, придаем ему движения.
* Adobe after effects используется на английской версии 2023 года *
· Открываем приложение.
· Нажимаем «new project».
· Задаем нужные параметры: 60 или 30 кадров в минуту, длительность не более 3 секунд, остальное оставляем как было.
· Нажимаем «file» - «import» - «file» и выбираем сохраненный файл с Adobe illustrator.
Выбираем «composition – retain layer sizes» - «import»
· Перед нами открывается рабочий стол редактора с нашим файлом, в программе много инструментов для работы, но мы будем пользоваться некоторыми из них:
· Появляются копии слоев в другом формате, слои, которые были до этого – удаляем.
· Рядом с каждым слоем есть стрелочка, которую можно раскрыть еще на две стрелки, но нам нужна только «transform».
· Открываем стрелку и видим 5 параметров:
1 – изменение положения якорной точки.
2 – изменения положения композиции.
3 – изменение масштаба композиции.
4 – изменение угла композиции.
5 – изменение прозрачности композиции.
*все параметры относятся к одной части композиции*
Основная часть анимации, на которой мы будем ставить «ключи», по которым будет осуществляться анимация:
Результат нашей анимации, окно в котором мы видим анимацию на данном процессе:
· Анимацию стоит осуществлять по правилу: «от большего к меньшему».
· Чтобы начать анимировать, нужно выбрать часть композиции (в слоях) и рядом с параметром, который вы хотите изменить, поставить «ключ». Для того чтобы поставить ключ, нужно перетащить ползунок на строке на время 0 и нажать на значок часов рядом с изменяемым параметром:
Далее нужно перетащить ползунок на желаемое время (например: середина, конец анимации), изменить параметр части композиции, и программа автоматически выставит «ключ» по вашим изменениям. Теперь нужно нажать на «пробел» и посмотреть результат. Далее вы можете выставлять «ключи» как вам надо и переходить к другим частям композиции.
· Если у вас есть части, которые должны быть взаимосвязано анимированы, то можно использовать «привязку» к анимированной части, для этого, от части, которую нужно привязать, при помощи «лассо» соединяем уже с анимированной частью, нажимаем на «пробел», чтобы проверить привязку:
· Чтобы анимация выглядела лучше, ключи в начале и конце должны быть одинаковыми.
· Если вас не устраивает автоматическое анимирование между ключами, то:
- можно выделить все ключи желаемого параметра и нажать «f9», анимация станет плавнее.
- можно нажать на значок изменения скорости анимирования и вручную выставить желаемые показатели (этот вариант сложнее).
3. Сохранение стикера:
· Мы создаем и сохраняем стикер впервые, поэтому для начала просто сохраним стикер себе на компьютер:
- нажимаем «file» - «save as» и выбираем место на компьютере.
· Как говорилось ранее, каждая социальная сеть использует разные форматы и размеры стикера, но так как мы создаем стикер для телеграмма, то на официальном сайте написано:
«Плагин Bodymovin-TG, ответвление Bodymovin для Adobe After Effects, которое можно использовать для экспорта анимации в Telegram. Формат TGS.»
· Далее вы можете воспользоваться руководством по сохранению на официальных сайтах социальных сетей, где все подробно расписано.
· Мы создаем стикер для телеграмма, поэтому на официальном сайте, где написаны параметры сохранения, переходим по ссылке и скачиваем плагин «Bodymovin-TG», далее разархивируем его.
· Для работы плагина, следует перезагрузить программу «Adobe after effects»
· После перезагрузки заходим в программу.
· Открываем сохраненный стикер:
- «file» - «open project» и выбираем стикер.
· В окне «window» нажимаем «extensions» и выбираем наш плагин.
· в появившемся окне выбираем название открытого стикера и нажимаем «render»
· Если все условия были выполнены правильно, то стикер сохранится.
4. Загрузка стикера:
· Как загрузить стикер в приложение, вы можете ознакомиться на официальных сайтах этих приложений.
· В нашем случае на сайте написано:
«Когда ваши файлы будут готовы, отправьте /newanimated команду боту @Stickers - затем отправьте ему файлы TGS.
Чтобы загрузить эмодзи, отправьте /newemojipack на @Stickers. Требования к стикерам TGS и эмодзи точно такие же.
Для вашего набора понадобится иконка. Иконки для ваших наборов должны быть 100x100 пикселей, с циклической анимацией, не превышающей 3 секунд.»
· Иконку для анимации делать НЕОБЯЗАТЕЛЬНО.
Вот и подошло к концу руководство по созданию анимированных стикеров для социальных сетей! Я надеюсь, что вам удалось узнать много нового и интересного, и теперь вы готовы приступить к созданию своих собственных стикеров. Помните, что главное в этом деле - терпение и творческий подход. Не бойтесь экспериментировать и находить новые решения.
Желаю вам удачи в создании своих стикеров!
Для обратной связи)