в играх и мультах, или маскоты
Please open Telegram to view this post
VIEW IN TELEGRAM
Настроения пописать инструкции для работы с эмодзи/стикерами в ТГ🤔
Скорее всего мои знания не полные и не уникальные, но собрать инфу и систематизировать хочу, хотя для бы себя✍️
Примерный план:
1. Программа - афтер эффект+плагин
2. Бот в телеге(эта часть у меня готовая даже есть где-то🤔 )
- основные функции
- лайфхаки😎
3. Что стоит учесть при работе
4. Мб расскажу, какие приёмчики использую я
Не буду обещать, что все будет быстро написано и выложено😆
Думаю с сокращённого варианта начну.
хэштеги:
#я_опыт_Джека
#что_то_по_эмодзи_и_стикерам
Скорее всего мои знания не полные и не уникальные, но собрать инфу и систематизировать хочу, хотя для бы себя
Примерный план:
1. Программа - афтер эффект+плагин
2. Бот в телеге(эта часть у меня готовая даже есть где-то
- основные функции
- лайфхаки
3. Что стоит учесть при работе
4. Мб расскажу, какие приёмчики использую я
Не буду обещать, что все будет быстро написано и выложено
Думаю с сокращённого варианта начну.
хэштеги:
#я_опыт_Джека
#что_то_по_эмодзи_и_стикерам
Please open Telegram to view this post
VIEW IN TELEGRAM
#я_опыт_Джека
#что_то_по_эмодзи_и_стикерам
Инструкция по анимированным эмодзи и стикерам
Глава 0. Обзорная экскурсия
Прежде всего.
Анимированные эмодзи и стикеры,
с которыми я пока работала, это по сути один и тот же файл,
у них одинаковые требования:
-512х512px,
-3 секунды,
-60 кадров в секунду.
Они просто заливаются через бот чутка по-разному,
и эмодзи можно использовать внутри текста✍️
Вот такие эмодзи😔 😖 - это видео-эмодзи, я пока не делала такие
Вот такие эмодзи❤️ 💖 - это статичные эмодзи, это просто png с прозрачным фоном
Я имею ввиду такие😂 😂
Подробнее тут можно почитать
Сразу скажу, что туториалы есть в сети, можете сразу приступить к их изучению.
Например такой на vc.ru
Начнем с того, что нам вообще нужно иметь под рукой,
и с какими знаниями можно приступать к работе над эмодзи и стикерами.
0️⃣ Премиум аккаунт Телеграма.
Это не обязательно иметь вам,
заказчик может залить сам, так только он будет иметь доступ к их редактированию.
И вы не удалите их случайно😆
1️⃣ Уметь работать с векторной графикой.
У плангина bodymovin-tg, которым мы будем пользоваться, чтобы перевести нашу анимацию в нужный формат .tgs много ограничений.
Главное - только векторные слои. Подробнее в уроке, посвященном плагину, либо смотрите документацию по bodymovin
2️⃣ Уметь базово работать в Adobe Illustrator.
В основном, нам он нужен для того, чтобы разбить нашу картинку на слои и сохранить в нужном формате. Если ваша картинка уже рисуется в иллюстраторе, каждый элемент по желанию должен быть в своем слое. After Effects умеет видеть подслои у ai, но удобнее если каждый анимируемый элемент в своем слое. Например, текст в одном слое, фон в другом, другие элементы в своем слое.
3️⃣ Уметь работать в After Effects.
Нужно знать базовые вещи. Типа ключей, трансформации слоя(rotation, scale, position, opacity) и созданию композиции по требованиям
Эффектами нам нельзя будет пользоваться, как и puppet tool.
И чуть продвинутые вещи, такие как установка плагина bodymoving-tg.
4️⃣ Уметь анимировать 😆
Знать какие-то хотя бы базовые вещи, ну или подглядывать первое время их у других.
Тут наверно все зависит от задачи, которую решают эмодзи. Может, хватит чего-то простого.
5️⃣ Добавить себе бота для загрузки эмодзи и стикеров
Инструкции добавлю в одном из следующих постов. У него есть документация по команде /help, так же он подсказывает все шаги.
Но она вроде бы не полная, не указаны какие-то команды.
Конец главы.
Оглавление
#что_то_по_эмодзи_и_стикерам
Инструкция по анимированным эмодзи и стикерам
Глава 0. Обзорная экскурсия
Прежде всего.
Анимированные эмодзи и стикеры,
с которыми я пока работала, это по сути один и тот же файл,
у них одинаковые требования:
-512х512px,
-3 секунды,
-60 кадров в секунду.
Они просто заливаются через бот чутка по-разному,
и эмодзи можно использовать внутри текста
Вот такие эмодзи
Вот такие эмодзи
Я имею ввиду такие
Подробнее тут можно почитать
Сразу скажу, что туториалы есть в сети, можете сразу приступить к их изучению.
Например такой на vc.ru
Начнем с того, что нам вообще нужно иметь под рукой,
и с какими знаниями можно приступать к работе над эмодзи и стикерами.
Это не обязательно иметь вам,
заказчик может залить сам, так только он будет иметь доступ к их редактированию.
И вы не удалите их случайно
У плангина bodymovin-tg, которым мы будем пользоваться, чтобы перевести нашу анимацию в нужный формат .tgs много ограничений.
Главное - только векторные слои. Подробнее в уроке, посвященном плагину, либо смотрите документацию по bodymovin
В основном, нам он нужен для того, чтобы разбить нашу картинку на слои и сохранить в нужном формате. Если ваша картинка уже рисуется в иллюстраторе, каждый элемент по желанию должен быть в своем слое. After Effects умеет видеть подслои у ai, но удобнее если каждый анимируемый элемент в своем слое. Например, текст в одном слое, фон в другом, другие элементы в своем слое.
Нужно знать базовые вещи. Типа ключей, трансформации слоя(rotation, scale, position, opacity) и созданию композиции по требованиям
Эффектами нам нельзя будет пользоваться, как и puppet tool.
И чуть продвинутые вещи, такие как установка плагина bodymoving-tg.
Знать какие-то хотя бы базовые вещи, ну или подглядывать первое время их у других.
Тут наверно все зависит от задачи, которую решают эмодзи. Может, хватит чего-то простого.
Инструкции добавлю в одном из следующих постов. У него есть документация по команде /help, так же он подсказывает все шаги.
Но она вроде бы не полная, не указаны какие-то команды.
Конец главы.
Оглавление
Please open Telegram to view this post
VIEW IN TELEGRAM
#я_опыт_Джека
#что_то_по_эмодзи_и_стикерам
Инструкция по анимированным эмодзи и стикерам
Глава 1. Бот для загрузки эмодзи и стикеров
Начнем немного с конца, потому что этот текст инструкции у меня уже был😆
Устанавливается с помощью стандартного бота в ТГ https://t.me/Stickers
/help - команда чтобы посмотреть доступные команды бота
/cancel - отмена текущей задачи, вдруг пригодится:)
Для установки эмодзи нужен премиум аккаунт
Ограничение по количеству эмодзи в паке: 200 эмодзи.
------------------------------------------
Установка
1️⃣ Создаем пак с эмодзи
➖ команда /newemojipack
➖ В меню выбираем 'Анимированные эмодзи'
➖ следуем подсказкам бота загружаем эмодзи с расширением .tgs
Подсказка: бот будет просить стандартные эмодзи, чтобы к ним привязать загружаемые.
Можно выбирать из нестандартного пака, если будет удобно. Он привяжет их к стандартным эмодзи в паке.
Для букв и символов можно использовать эмодзи квадрат с abc/abcd.
Для номеров есть номера в стандартном паке:)
------------------------------------------
Ситуации
1️⃣ Создали, но нужно передвинуть
➖ /orderemoji — изменить порядок эмодзи в наборе
2️⃣ Создали, но два раза залили один и тот же эмодзи
➖ /delemoji — удалить лишний эмодзи
3️⃣ Пришел эмодзи на замену текущему из набора
➖ /replaceemoji - заменить эмодзи
Подсказка: .tgs - специальное расширение для телеграм стикеров и эмодзи.
Можно предварительно смотреть в телеграме, например, перетаскивать из папки в сохраненные сообщения.
Конец главы.
Возможно еще будет дополняться
Оглавление
#что_то_по_эмодзи_и_стикерам
Инструкция по анимированным эмодзи и стикерам
Глава 1. Бот для загрузки эмодзи и стикеров
Начнем немного с конца, потому что этот текст инструкции у меня уже был
Устанавливается с помощью стандартного бота в ТГ https://t.me/Stickers
/help - команда чтобы посмотреть доступные команды бота
/cancel - отмена текущей задачи, вдруг пригодится:)
Для установки эмодзи нужен премиум аккаунт
Ограничение по количеству эмодзи в паке: 200 эмодзи.
------------------------------------------
Установка
Подсказка: бот будет просить стандартные эмодзи, чтобы к ним привязать загружаемые.
Можно выбирать из нестандартного пака, если будет удобно. Он привяжет их к стандартным эмодзи в паке.
Для букв и символов можно использовать эмодзи квадрат с abc/abcd.
Для номеров есть номера в стандартном паке:)
------------------------------------------
Ситуации
Подсказка: .tgs - специальное расширение для телеграм стикеров и эмодзи.
Можно предварительно смотреть в телеграме, например, перетаскивать из папки в сохраненные сообщения.
Конец главы.
Оглавление
Please open Telegram to view this post
VIEW IN TELEGRAM
#я_опыт_Джека
#что_то_по_эмодзи_и_стикерам
Инструкция по анимированным эмодзи и стикерам
Глава 2. Плагин bodymovin-tg для After Effects
Продолжаем идти с конца в начало😆
🦆 Качаем плагин отсюда
📝 Как устанавливать через ZXP Installer(ENG)
👾 Как установить без него
Если вы работали с плагином Bodymovin, то этот плагин в разы проще.
Плагин просто выводит нашу анимацию в формат .tgs
Сам плагин открывается в отдельном окне, можно его прикрепить в любом удобном месте.
Как работать с ним:
1️⃣ открываете окно плагина Window - Extensions - Bodymovin for Telegram Stickers
2️⃣ выбираем нужную композицию(прям на кнопку круглую нажать, чтобы загорелась)
3️⃣ Жмем на три точки справа, выбираем, куда сохранить
4️⃣ Жмем на кнопку Render и дожидаемся рендера
Для предпросмотра того, что у нас вышло, можно попробовать в телеграм в сохраненных сообщения загрузить файлик .tgs и посмотреть превью. Часто огрехи можно увидеть, особенно на темной теме телеграм для светлых эмодзи и на светлой теме для темных.
Теперь самое "веселое".
Чем мы не можем пользоваться при анимации,
чтобы плагин не выдал нам ошибки:
1️⃣ растровые слои. Только вектор
2️⃣ все фигуры переводим в шейпы
3️⃣ никакой 3d трансформации слоев
4️⃣ нельзя использовать puppet tool
5️⃣ нельзя использовать эффекты(drop shadow, color overlay or stroke тоже нельзя вроде бы) и выражения(Expressions). А вот Trim path - ваш лучший друг, он вас не бросит😆
6️⃣ нельзя использовать маски
От себя, это можно, но лучше просто избегать
7️⃣ анимация градиентов. Он их очень не любит, и может выводить совсем не то.
Как лечить не знаю, у меня получалось через перезагрузку after effects и edit - purge и там просто все пункты😆
🔗Можно тут почитать ограничения
Они написаны для Bodymovin, но bodymovin-tg их наследует
Да, многовато ограничений😮
Но вполне хватает того, что остается.
Например:🌞 🪒 🍬
Тут уже нужно умение анимировать и усидчивость😆
Конец главы.
Возможно еще будет дополняться
Оглавление
#что_то_по_эмодзи_и_стикерам
Инструкция по анимированным эмодзи и стикерам
Глава 2. Плагин bodymovin-tg для After Effects
Продолжаем идти с конца в начало
📝 Как устанавливать через ZXP Installer(ENG)
Если вы работали с плагином Bodymovin, то этот плагин в разы проще.
Плагин просто выводит нашу анимацию в формат .tgs
Сам плагин открывается в отдельном окне, можно его прикрепить в любом удобном месте.
Как работать с ним:
Для предпросмотра того, что у нас вышло, можно попробовать в телеграм в сохраненных сообщения загрузить файлик .tgs и посмотреть превью. Часто огрехи можно увидеть, особенно на темной теме телеграм для светлых эмодзи и на светлой теме для темных.
Теперь самое "веселое".
Чем мы не можем пользоваться при анимации,
чтобы плагин не выдал нам ошибки:
От себя, это можно, но лучше просто избегать
Как лечить не знаю, у меня получалось через перезагрузку after effects и edit - purge и там просто все пункты
🔗Можно тут почитать ограничения
Они написаны для Bodymovin, но bodymovin-tg их наследует
Да, многовато ограничений
Но вполне хватает того, что остается.
Например:
Тут уже нужно умение анимировать и усидчивость
Конец главы.
Оглавление
Please open Telegram to view this post
VIEW IN TELEGRAM
#я_опыт_Джека
#что_то_по_эмодзи_и_стикерам
Инструкция по анимированным эмодзи и стикерам
Глава 3. Незанимательная геометрия
Хочу обратить внимание на размеры наших эмодзи и стикеров.
512 х 512 - это нужный размер всего стикера\эмодзи.
В стикере изображение может полностью занимать все предложенное пространство.
Но эмодзи у нас, как ни странно, живут с текстом внутри постов и сообщений в ТГ😆
Поэтому стоит учесть отступы между строками, чтобы эмодзи не мешали друг другу в списках или не налезали на заглавные буквы на следующей строке.
Так вот, пример плашек, которые я делала для Синергетика, и которые занимают по высоте 512 пикселей:
🌟 🌟 🌟
💥 💥 💥 - они налетают одна на другую.
И тексту снизу тесно
Но тут ему не тесно
Буквы мы уже делали с отступами сверху и снизу
🔤
🔤 - щекочет верхнюю листочком
🔤 - эта буква из другого пака, на который я ориентировалась при работе
Пока помню, еще что нужно обратить внимание,
если вам нужно сделать текстовые эмодзи
1️⃣ Не берите тонкий шрифт, его не будет видно, а на стыках деталей плашки, он может сильнее истончиться. Про плашки отдельно наверно пару слов напишу
2️⃣ В шрифте овалы и полуовалы не должны быть слишком мелкими, например, 🔤 ♾ я допиливала сама
Эмодзи для себя я делаю тоже чуть с отступом снизу
🥴 Чтобы они более-менее неплохо
смотрелись внутри текста
Точных цифр я вам не дам, я их не знаю, и делаю на глазок. В одном паке отступы должны быть одинаковыми. Опять же все зависит от задачи😃
Почему я не делала отступы у плашек?
Потому что по задумке, они отделяются пустой строкой от остального текста, чтобы из было лучше видно, так что они должны были занимать все доступное им пространство😮
Конец главы.
Возможно еще будет дополняться
Оглавление
#что_то_по_эмодзи_и_стикерам
Инструкция по анимированным эмодзи и стикерам
Глава 3. Незанимательная геометрия
Хочу обратить внимание на размеры наших эмодзи и стикеров.
512 х 512 - это нужный размер всего стикера\эмодзи.
В стикере изображение может полностью занимать все предложенное пространство.
Но эмодзи у нас, как ни странно, живут с текстом внутри постов и сообщений в ТГ
Поэтому стоит учесть отступы между строками, чтобы эмодзи не мешали друг другу в списках или не налезали на заглавные буквы на следующей строке.
Так вот, пример плашек, которые я делала для Синергетика, и которые занимают по высоте 512 пикселей:
И тексту снизу тесно
Но тут ему не тесно
Буквы мы уже делали с отступами сверху и снизу
Пока помню, еще что нужно обратить внимание,
если вам нужно сделать текстовые эмодзи
Эмодзи для себя я делаю тоже чуть с отступом снизу
смотрелись внутри текста
Точных цифр я вам не дам, я их не знаю, и делаю на глазок. В одном паке отступы должны быть одинаковыми. Опять же все зависит от задачи
Почему я не делала отступы у плашек?
Потому что по задумке, они отделяются пустой строкой от остального текста, чтобы из было лучше видно, так что они должны были занимать все доступное им пространство
Конец главы.
Оглавление
Please open Telegram to view this post
VIEW IN TELEGRAM
#я_опыт_Джека
#что_то_по_эмодзи_и_стикерам
Инструкция по анимированным эмодзи и стикерам
Оглавление
Глава 0. Обзорная экскурсия
Глава 1. Бот для загрузки эмодзи и стикеров
Глава 2. Плагин bodymovin-tg для After Effects
Глава 3. Незанимательная геометрия
Включение с полей или замена масок
Надеюсь, будет пополняться😆
#что_то_по_эмодзи_и_стикерам
Инструкция по анимированным эмодзи и стикерам
Оглавление
Глава 0. Обзорная экскурсия
Глава 1. Бот для загрузки эмодзи и стикеров
Глава 2. Плагин bodymovin-tg для After Effects
Глава 3. Незанимательная геометрия
Включение с полей или замена масок
Надеюсь, будет пополняться
Please open Telegram to view this post
VIEW IN TELEGRAM
#я_опыт_Джека
WIN+V или супер Ctrl+V
Возможно, многие уже давно пользуются, но я недавно узнала фишку Виндовса😮
Если вы нажмете сочетание клавиш WIN+V , то вам откроется буффер обмена, в котором хранится несколько последних ваших нажатий Ctrl+C, в том числе и картинки.
Это очень полезно, если вам надо кучу всего скопировать из разных мест и вставить в одно😆
Или сто тыщ раз не копировать одни и те же данные.
Интересно, только я одна, когда что-то копировала раньше, представляла, что у меня заряжена мышка, и надо донести этот заряд, как в какой-нибудь игре, до того места, куда мне надо скопировать🤔
WIN+V или супер Ctrl+V
Возможно, многие уже давно пользуются, но я недавно узнала фишку Виндовса
Если вы нажмете сочетание клавиш WIN+V , то вам откроется буффер обмена, в котором хранится несколько последних ваших нажатий Ctrl+C, в том числе и картинки.
Это очень полезно, если вам надо кучу всего скопировать из разных мест и вставить в одно
Или сто тыщ раз не копировать одни и те же данные.
Интересно, только я одна, когда что-то копировала раньше, представляла, что у меня заряжена мышка, и надо донести этот заряд, как в какой-нибудь игре, до того места, куда мне надо скопировать
Please open Telegram to view this post
VIEW IN TELEGRAM
Включение с полей или замена масок
Во вторник долго мучилась с тем, что не работал track matte.
Нужно было, чтобы текст двигался внутри кружка.
Что я только не перепробовала, в итоге сдалась🥲
Вчера увидела в посте у Настя говорит и показывает стикеры с медузой, и что там используется то, что мне надо. Спросила у Насти, как она делала)
Она навела меня на верный путь❤️
В итоге вышло😫
Как устроены слои на картинке выше
Так же, если вам нужно будет двигать в кружке несколько элементов, то для каждого слоя нужно сверху добавить слой с маской. Либо объединить в прекомпоуз
Упд. Забыла отметить, что работаю на After Effects 2023
хэштеги:
#я_опыт_Джека
#что_то_по_эмодзи_и_стикерам
Во вторник долго мучилась с тем, что не работал track matte.
Нужно было, чтобы текст двигался внутри кружка.
Что я только не перепробовала, в итоге сдалась
Вчера увидела в посте у Настя говорит и показывает стикеры с медузой, и что там используется то, что мне надо. Спросила у Насти, как она делала)
Она навела меня на верный путь
В итоге вышло
Как устроены слои на картинке выше
Так же, если вам нужно будет двигать в кружке несколько элементов, то для каждого слоя нужно сверху добавить слой с маской. Либо объединить в прекомпоуз
Упд. Забыла отметить, что работаю на After Effects 2023
хэштеги:
#я_опыт_Джека
#что_то_по_эмодзи_и_стикерам
Please open Telegram to view this post
VIEW IN TELEGRAM
#я_опыт_Джека
‼️ В телеге новая фишка с хэштегами. Если нажать, то теперь поиск не только в данном канале или чате, но и во всех других.
Так что держите в голове, когда их будете вставлять. Хотите вы, чтобы увидели вне вашего канала или нет.
Можно пользоваться уникальными хэштенами для навигации в канале, или общими, если хотите поделиться фотографиями с событий, например.
Так что держите в голове, когда их будете вставлять. Хотите вы, чтобы увидели вне вашего канала или нет.
Можно пользоваться уникальными хэштенами для навигации в канале, или общими, если хотите поделиться фотографиями с событий, например.
Please open Telegram to view this post
VIEW IN TELEGRAM
Скажу сразу, что случаи индивидуальны, все моушенеры работают по-разному.
Когда ко мне приходят с заказом на анимацию, то какое-то время я теряю на подготовку файлов к анимации. Часто присылают ссылку на
Конечно, во время работы очень стопорит процесс переименование каждого слоя, это я понимаю, и для личных проектов я, признаюсь, не занимаюсь этим неблагодарным делом. Но в своих слоях я сама разбираюсь, потому что я знаю свой процесс работы, если не открыть файл спустя н-ное количество времени
Но в новых для меня проектах требуется время, чтобы все расчихать и проверить, не повредилось ли что-то при расчихивании.
Конечно, это все может сделать под себя аниматор, но бывает, что части тела слеплены в один векторный слой. И тогда нужно резать, дорисовывать, опять же тратить время
Please open Telegram to view this post
VIEW IN TELEGRAM
Адоб и градиенты
По работе надо было перевести изображение с кучей мелких деталей в вектор, потом перекинуть в афтер эффект. Оказалось, это не в два клика.
Там был конечно прикол, что вчера я переводила весь день. А сегодня сказали, что в другом цвете надо и без текстур.
Окей, изначально скорее всего мой косяк был делать всё в фигме изначально. У меня есть опыт переноса изображения из
В афтер эффектс перевод слоёв в шейпы. И все серое... Ещё и в слоях насрано
Смотрю через Гугл форумы. Такая проблема есть и если сразу из иллюстратора в афтер. В плане, если рисовать прям в иллюстраторе с градиентами.
Я позже сама проверяла, рисовала шейп в
Смотрю, как решают. А решают через...
Помимо того, что он криво загрузил иллюстраторский файл, он плевал на градиенты, и растащил в них сами градиенты по рандому.
В туториалах пишут, что вот если такая проблема с градиентами, то в Adobe XD(эта свойлочь смеется постоянно) откройте иллюстраторский исходник и экспортируйте в афтер эффектс, там такая возможность есть.
Опустим то, что мне пришлось йохохо целый набор адобовских програм на 32 гига, чтобы только его одного установить.
Он выгрузил градиенты не в серый. Но сделал ооооочень своеобразно...
Но спасибо ему, что остальные слои вывел чисто, без лишних подслоев. Хоть что-то.
Я выдыхаю, переделываю все градиенты прям в афтер эффектс. А время идет...
Думаю проверить, все ли ок с градиентами теперь.
Выгружаю полученное в json через bodymoving. И
Ну вы понимаете, что все идет не так...
ВСЕ ГРАДИЕНТЫ ОДНОГО ЦВЕТА
Иду Гуглить. Да, баг афтер эффектс. Как исправлять? Переименовать все слои с градиентами, чтобы они не повторялись. Ну т.е. элементарно пронумеровать. И заработало.
И ну тип, мне бы так файлы готовили к анимации. В последний раз мне кинули с помойкой в слоях, я попросила, чтобы подписали слои. Подписали, через жопу. Там было несколько артбордов, и мне еще надо было искать, как их быстро выгрузить в раздельные файлы. Потом самой чистить еще ручками. Это мое проклятие чистить файлы.
Please open Telegram to view this post
VIEW IN TELEGRAM
Пост - поток мыслей в час ночи, можно спокойно пропускать
Я открыла для себя то, что относительно неплохую шарлотку можно делать в мультиварке. Но второй раз выходит так, что я делаю ее в час ночи
Еще забавное, что у меня есть нормальная духовка, но я ей ни разу не пользовалась за 5 лет, я не уверена, что она работает, хорошо, что электрическая. На самом деле так себе кулинар)) Поэтому и ищу рецепты для мультиварки, куда покидала все и ушла заниматься своими делами))
Так вот, шарлотка, рецепт можно найти в поисковике. Там пол стакана сахара, два яйца, пол стакана муки, разрыхлитель и начинка. Я люблю кислые ягоды
Но в моей книге рецептов, которая у меня в голове, есть всякое странное, типа варенья из одуванчиков и сироп из роз
Думала прислать фото, но она не фотогиничная) Думаю, надо сделать в два раза меньше теста, чашка маловата)
Please open Telegram to view this post
VIEW IN TELEGRAM