Мы регулярно создаем полезный контент для наших подписчиков в соцсетях. А вот развлекательный не так часто. Немного подумав, как можно побаловать нашу аудиторию, приняли решение сделать стикеры для Telegram. Мы прокачаемся в анимации персонажей, а подписчики получат необычного героя в свои эмодзи-коллекции. Делимся, как это было, для тех, кто решит запилить свой стикерпак (ссылка на скачивание будет в конце).
Этап 1. Составляем список первых эмоций
Погружаясь в тему стикеров, наткнулись на пост про самые популярные эмодзи в разных городах России от ВК. Проанализировав его, увидели, что чаще всего встречаются «сердечко/влюбленный», «смех», «большой палец». Также в списке присутствовали «огонь», «в солнечных очках», «клевер». В итоге, все эти эмодзи решили включить в стартовый набор, кроме «клевера».
Итого с пятью определились, но до уровня пака этого количества маловато.
Как сделать АНИМИРОВАНЫЕ СТИКЕРЫ на ТЕЛЕФОНЕ !? Для Телеграм из ВИДЕО | BITLEX
Наметили себе план выпустить восемь стикеров как стартовый набор, т.е. нужно еще три. Тут мы обратились к коллегам, чтобы узнать, какие эмодзи они используют в общении. Конечно, вариантов появилась масса, но мы отобрали «в огне», «подмигивание» и «усталость».
Желание удивить коллег только добавило фана в процесс, ведь теперь это уже не просто кейс, а полноценный заказ на любимую эмоцию. Так, по стикеру «В огне» пришлось даже немного забрифовать коллегу, что придало созданной эмодзи более персональный окрас.
Этап 2. Выбираем образ
Тут важно учитывать экспертизу в моушн-дизайне, в дизайне персонажей и в персонажной анимации. Первое – уверенно умеем, второе – высокая насмотренность и несколько проектов за плечами, третье – делаем впервые. По большей части мы работаем с более абстрактными понятиями для клиентов, и разработка бренд-героя не очень частый запрос. И это еще один повод сделать анимированный персонажный стикерпак.
Какие подзадачи мы ставили, чтобы найти образ героя:
а) Выбрать характер героя.
При поиске удачного характера мы шли от ценностей, применяемых в агентстве.
- Открытость – персонаж должен быть позитивным, эмоциональным и много всего пробовать.
- Амбициозность – делаем героя смелым, даже дерзким.
- Структурность – решили добавить сосредоточенность, хотя признаемся в конечном варианте, герой проявляет эту ценность меньше всего, т.к. важнее стало сделать более выразительный образ.
б) Выбрать эстетику иллюстрации.
Здесь мы шли от принципа «такого мы не видели». Провели небольшое изучение, текущих стилей в ТГ. Что выделили:
- насыщенные и яркие цвета
- милота доминирует
- мультяшный дутый стиль
- образы редко детализированы
Чтобы быть понятными массовой аудитории, мы остались в рамках мультяшек, но в визуле пошли против системы: выбрали своей эстетикой американские мультфильмы 30-50х годов от Fleischer Studios, Disney и недавнего Cuphead. Где атмосфера странности и даже безумия пропитывала каждый кадр.
в) Определить пластику и детализацию персонажа.
В поиске решения, наиболее оптимального по соотношению времени и результата, мы пришли к. осьминогу. Да, плавные, изгибающиеся объекты делать проще, чем скелетную анимацию. Плюс осьминог прекрасно вписался в концепт: таких героев почти нет в ТГ, он символизирует многозадачность, и появился челлендж, сделать его не так, как мы привыкли видеть в мультфильмах.
г) Определить узнаваемый элемент в образе.
Как рождался ключевой образ, вы можете увидеть на картинке ниже, тут все наглядно. Для запоминаемости сделали ему гигантские брови, выразительный нос и современную прическу.
Этап 3. Разрабатываем сюжеты для эмоций.
Сформировав образ героя, стало легче представить, насколько странными делами он будет заниматься для выражения эмоций.
Начали со сбора референсов, чтобы синхронизироваться по мимике и позам.
После генерации идей начали отбирать их по следующим принципам:
- иногда должна появляться одежда
- внедрить разные позы: сидение, лежание, стояние
- внедрить разные ракурсы: профиль, анфас, 3/4 и пр.
- комбинировать простые сюжеты с неожиданными
- сюжеты, где герой не ключевой объект
- комбинировать малоподвижные ситуации с интенсивными
- вся анимация должна быть зациклена без заметных склеек
- помещается в 3 сек, заложенные техническими требования сервиса
Можно назвать это ритмом стикерпака. Мы даем зрителю разнообразие в визуале, изменяя, то направление фигуры, то меняя силуэт засчет одежды, то убирая героя вовсе. Все это делает набор разрозненных эмодзи цельным паком.
Этап 4. Оживляем нашего героя.
На продакшене сначала отрисовали все позы и состояния в Illustrator, а потом долго и упорно анимировали в After Effects.
Какие тут советы можно дать:
- Все телодвижения героя и одежды мы построили на перемещении точек кривых (Path), а движения объектов вокруг на простейших функциях Position, Scale, Rotate. Отсюда рекомендация: когда создаете объект типа щупальца/лента/веревка, создавайте минимальное количество точек в кривой, иначе вы устанете перемещать их при простейшем изгибании.
- При организации слоев в Иллюстраторе не нужно все элементы до мельчайших разносить на разные слои. Разбивка нужна, но логически верная. Например, глаз состоящий из века, белка и зрачка, можно поместить на один слой «Глаз». В After Effects есть возможность контролировать форму каждого из трех объектов.
- Некоторые переходы могут выглядеть неточными в деталях, но тестируйте анимацию на той скорости, на которой ее будут видеть зрители. И если огрех незаметен, и непонятно, как это быстро исправить, то смысла в такой детализации нет. Когда анимации готовы, переводим их с помощью специального плагина для After Effects в формат для Telegram, настраиваем бота и готово!
Стикерпак в студию
Возможно, кто-то скажет «это же обычный стикерпак в телегу, камон! зачем целая статья?». Но оказывается такого контента нет в вебе, и мы очень хотели бы такой гайд, чтобы понимать, насколько это трудозатратный и технически сложный путь. Оказалось, все реально даже в первый раз.
Плюс тот, кто прочитал первую часть материала, получил еще и небольшой чек-лист по созданию персонажа, который можно применить и для создания бренд-героев. Ну, а мы с радостью выдыхаем и делимся с вами этим забавным и уже родным осьминогом по имени Осси. Делали стикеры, а получился маскот. Качаем тут.
Источник: dzen.ru
Как в Телеграме создавать анимированные стикеры и установка плагина
Не так давно в мессенджере Телеграм появились анимированные стикеры. Они сразу привлекли внимание пользователей, многие из которых захотели попробовать сделать свои. Оказалось, что это не так сложно – для того, чтобы создать индивидуальные стикеры, достаточно установить несколько программ (Adobe After Effects, ZXP Installer) и плагин Bodymovin-TG.
Технические требования
Анимированный стикер, созданный для использования в мессенджере Телеграм, должен представлять собой зацикленную анимацию, длительность которой не превышает три секунды. Его размеры ограничиваются рамкой 512×512 пикселей, в которую вписывается объект. Размер также ограничен и варьируется в пределах 64 килобайтов. Он может быть меньше, но больше – нет.
Создавая анимированный стикерпак (серию объектов, объединенных общей тематикой), стоит обратить внимание на FPS (частоту кадров), которая должна быть одинаковой у каждого объекта, – 30 или 60. Анимированные стикеры создаются в Adobe After Effects, предполагающей использование множества эффектов, которые сделают анимацию яркой и красочной. Однако стоит заметить, что плагин Bodymovin-TG, с помощью которого экспортируется результат, не поддерживает некоторые из них. Среди эффектов, которые нельзя использовать, можно назвать следующие: эффект слоя, маски, градиенты, 3D-слои, изменение времени, изменение длины и темпа анимации. Анимацию, созданную с использованием этих эффектов, не получится экспортировать в формате, необходимом для Телеграма.
Как создать анимированные стикеры в Telegram
- Теперь можно приступать непосредственно к рисованию – создать свой собственный «шедевр», либо воспользоваться любым готовым рисунком, загрузив его в программу.
- Следует наметить, обозначить части изображения, которые будут подвижными. После завершения работы файл сохраняется.
- Далее уже в программе Adobe After Effects создаем новый шаблон стикера с такими показателями: разрешение 512 на 512 пикселей, 30 fps. Ролик должен быть длиной не более 3 секунд.
- Теперь переносим картинку, созданную с помощью иллюстратора. Для этого открывается папка, содержащая слои, выполняется внедрение в ролик.
- Размеры стикера под требуемые. Анимация в программе задается произвольно, при этом используются любые возможные сочетания.
- Параметры слоев изменяются нажатием кнопок (по щелчку ПКМ) «Create», «Create shapes from vector layer».
- В разделе «Window» программы находим вкладку «Extensions», а в ней– «Bodymovin for Telegram Stickers». После выбора требуемого контента его следует сохранить.
Остается нажать «Render», подождать, когда файл стикера загрузится, и завершить операцию (кнопка «Done»).
Существуют также готовые подборки стикеров. В данный момент их более 20 штук:
- Hot Cherry– вишенки с характером.
- Resistance Dog– пес участник неформального «Цифрового сопротивления» (стикер создал лично Павел Дуров).
- Office Turkey– довольно странный индюк. Судя по наряду (пиджаку, рубашке и галстуку), он работает в офисе.
- Earl The Wolf– волк необычного голубого цвета (no homo!).
- Minty Zebra– просто стикер с мятной зеброй.
- Little Catto– какой-то подозрительно странный котик.
- Hamster Bernard– Бернард, хомяк. Возможно, страдает из-за лишнего веса, поэтому показывает только верхнюю часть туловища.
- Banana Fun– стикер с биполярным бананом.
- The Foods– безумные фрукты (анимированные).
- Bunnyta– крольчиха с весьма соблазнительными формами и слегка «накачанными» губками.
- Pandalicious– очень важная панда. Стикер пригодится при ведении переговоров.
- Tidy Tie Tom– просто рыжий котяра по имени Том. Любит менять галстуки.
- Aloe Monkey– примат, которому не всегда удается контролировать свои эмоции.
- Сберкот Animated– судя по названию, кот, который работает рекламным агентом «Сбербанка России».
- Suppy Rabbit– заяц-буддист, достигший просветления.
- Psy Cat– весьма странный кот.
- Sparks– стикер с пони.
- Fluffy Rabbit– симпатичный кролик.
- Fred the Pug–пес Фрэд, поражающий своей активностью.
- Птенчик– милый попугайчик.
- Melie the Cavy– стикер с морской свинкой.
- Джуи– пришелец желтого цвета (к тому же женского пола).
- Animals– безумное стадо диких животных. Лучше держать их подальше от своего Телеграма.
- U-Лайка– легко узнаваемый символ прошлогодней Зимней универсиады.
- Senya– стикер с хомячком Сеней.
А если не нравятся эти стикерпаки, создавайте свои, яркие и самобытные.
Установка плагина Bodymovin-TG
Установка начинается со скачивания ZXPInstaller – программы, предназначенной для установки файлов формата zxp. Она скачивается с официального сайта, установка происходит в несколько кликов: установить программу и завершить установку. После завершения установки появится диалоговое окно следующего содержания:
В данное окно необходимо перетащить заранее скачанный файл Bodymovin-TG. Он скачивается с официального сайта, где представлен несколькими версиями, отличающимися техническими требованиями:
После загрузки данный файл перетаскивается с рабочего стала в ZXPInstaller, и начинается установка. Спустя несколько минут, которые потребуются для установки, появится соответствующий вариант экспорта – экспортировать в Bodymovin-TG. Его можно найти, кликнув Окно -> Расширения. Чтобы Телеграм допустил стикерпак к использованию, стикеры, которые он содержит, должны быть сохранены именно таким образом.
Источник: it-tehnik.ru
Как сделать анимированный стикер в Telegram
Всем привет. Вы наверняка видели в Telegram анимированные стикеры. Эти забавные двигающиеся картинки отлично передают эмоции и представляют собой неплохую альтернативу гифкам и привычным стикерам. Но если создать обычный стикерпак довольно просто, то с анимированными изображениями придется повозиться. Вам понадобится пара программ от Adobe и немного фантазии.
В этом уроке я покажу, как все это реализуется.
Подготавливаем инструменты
Вам будут необходимы редактор векторной графики Adobe Illustrator, редактор анимаций Adobe After Effects и минимальные навыки работы с ними.
Кроме того, к Adobe After Effects нужно подключить плагин Bodymovin-TG. Он экспортирует анимации в формат .TGS, поддерживаемый Telegram. Для этого закройте Adobe After Effects, если он открыт. Загрузите и установите приложение ZXPInstaller. Оно совместимо и с Windows, и с macOS.
Скачайте плагин Bodymovin-TG (нужный вам файл называется bodymovin-tg.zxp).
Теперь запустите ZXPInstaller и щёлкните по его окну. Выберите загруженный плагин и подождите, пока приложение установит его.
Откройте Adobe After Effects. Затем сделайте следующее:
- На Windows откройте «Правка» → «Настройки» → «Сценарии и выражения…». Включите опцию «Разрешить сценариям выполнять запись файлов и осуществлять доступ к Сети». Нажмите OK.
- На macOS откройте Adobe After Effects → «Настройки» → «Сценарии и выражения…». Включите опцию «Разрешить сценариям выполнять запись файлов и осуществлять доступ к Сети». Кликните OK.
Нажмите «Окно» → «Расширения». Если вы всё сделали правильно, то в списке расширений вы увидите Bodymovin for Telegram Stickers.
Всё, инструменты настроены. Теперь пора творить.
Рисуем векторную графику
Создайте новый проект в Adobe Illustrator. Размер холста должен быть ровно 512 × 512 пикселей — это важно. У проекта не должно быть фона. Объекты не могут выходить за границы монтажной области.
Для примера мы нарисуем рожицу. Её можно составить из фигур на панели инструментов Illustrator. Каждая значимая для анимации часть (рука, нога, глаз) должна быть вынесена на отдельный слой. Лучше сразу подписать, что где, чтобы не запутаться.
Когда ваша графика будет готова, сохраните её в формате AI.
Импортируем графику в After Effects
Откройте After Effects и создайте композицию. Размеры её должны быть ровно 512 × 512 пикселей. Количество кадров в секунду — 30 или 60 (для несложной анимации вроде нашей подойдёт 30). Длительность композиции не должна превышать 3 секунды.
Затем нажмите «Файл» → «Импорт» → «Файл» и найдите вашу графику в формате AI. В выпадающем списке «Импортировать как:» выберите «Композиция — сохранить размеры слоёв» и нажмите «Импорт».
Ваша графика импортируется вместе со всеми слоями. Выделите их (они будут в формате AI) и перетащите на иконку «Создать новую композицию».
Программа запросит у вас подтверждение. Нажмите OK.
Порядок слоёв может немного нарушиться. Перетаскивайте их на панели слева внизу, размещая в нужной последовательности.
Теперь предстоит создать из векторных слоёв фигуры для анимирования. Для этого выделите слои и нажмите правую кнопку мыши, затем «Создать» → «Создать фигуры из векторного слоя». Получатся так называемые кривые.
После этого слои в формате AI можно удалить, чтобы не мешались. Выделите их с зажатой клавишей Ctrl и нажмите Delete. Останутся только кривые.
Готово, импорт завершён.
Создаем анимацию
В Adobe After Effects можно создавать очень разные по сложности анимации. Но мы не будем погружаться в дебри и для примера попробуем заставить нашу рожицу просто приподнимать бровь.
Выберите бровь, которую хотите анимировать, и щёлкните по ней левой кнопкой мыши. Нажмите на значок > рядом с кривой на панели слева снизу и выберите «Преобразовать».
С помощью появившихся значков на панели можно изменять положение, масштаб, угол поворота и степень прозрачности объектов в анимации. Поскольку нам нужно только поднимать бровь, обойдёмся изменением её положения.
Нажмите «Опорная точка» и «Положение». Затем перетащите временной указатель на шкале на третью секунду анимации (тяните до упора).
Нажмите на ромбики на левой боковой панели, слева от «Опорной точки» и «Положения». Таким образом вы зациклите свою анимацию: её первый кадр будет таким же, как и последний. Это важно, так как иначе Telegram не примет ваш стикер.
Теперь разместите временной указатель примерно посередине шкалы.
Снова нажмите на ромбики, чтобы создать опорную точку и там. И измените положение брови, подняв её. Это можно сделать используя цифры рядом с параметром «Положение» или перетянув бровь вручную мышкой либо клавишами со стрелками.
Нажмите на пробел, чтобы запустить воспроизведение анимации. Всё, бровь двигается.
Аналогично вы можете заставить шевелиться и другие объекты на анимации. Просто создавайте для них опорные точки, нажимая на ромбики, и меняйте их положение.
Экспортируем стикер
Нажмите «Окно» → «Расширения» → Bodymovin for Telegram Stickers. Выделите композицию, которую хотите экспортировать (в нашем случае — ту, что с пометкой «Бровь»). В параметре Destination Folder укажите папку, где сохранить ваш стикер. И нажмите Render.
Если всё в порядке, расширение отрапортует о завершение рендеринга. Нажмите Done. Если что-то не так, расширение подскажет вам. Правда, только по-английски.
Стикер будет сохранён в указанной вами папке под именем data.tgs.
Размещаем стикер в Telegram
Затем отправьте стикер боту, перетянув файл data.tgs в окно Telegram.
Бот попросит прислать смайл, с которым ассоциируется стикер, — сделайте это. Если у вас есть ещё анимированные варианты для этого набора, добавьте их.
Когда закончите, введите команду /publish и выберите ваш стикерпак в выпадающем списке. Ему можно назначить иконку, если она у вас есть (это должно быть изображение в формате TGS размером до 32 килобайт). Впрочем, этот шаг можно без проблем пропустить, перейдя к команде /skip.
Последний шаг — выбор короткого адреса для вашего набора. Бот создаст ссылку, по которой вы и ваши друзья получат доступ к стикеру. Нажмите на неё и сможете добавить новую анимацию в коллекцию, как обычно.
Собственноручно сделанный анимированный стикер готов. На этом у меня все. До скорого!
Подписывайтесь на канал Видеогуру, чтоб не пропускать новые интересные уроки.
Источник: guru.study