🍇Пост для закрепа. Хештеги канала🍇

🍇#я_картиночки_Джека - иллюстрации, рисунки, картинки, чириканье
🍇 #вёрк_ин_прогресс - work in progress
🍇#анимашки_милашки - небольшие анимашки

🍇#я_мысли_Джека - душнения
🍇 #говорю_с_умным_видом - душнения на видео
🍇#мысли_вслух_Джека - короткие мысли о несерьезном

🍇#я_опыт_Джека - делюсь опытом
🍇 #что_то_по_эмодзи_и_стикерам - инфа по тому, как делать и заливать стикеры и эмодзи для телеги
🍇 #дизайн_персонажей - немного мыслей про дизайн персонажей
в играх и мультах, или маскоты

🍇Находки🍇
🍇#крутаны - крутаны
🍇 #красивошные_кейсы - делюсь кейсами, которые мне нравятся😆
🍇 #это_мы_смотрим - мульты и сериалы, которые я сама хочу посмотреть
🍇 #что_то_по_играм - что-то по играм
🍇 #изба_читальня - книжки, которые я читаю
🍇 #находки_с_маркетплейсов - хвастаюсь покупками и делюсь ссылками

🍇 #вечерний_мем - мои любимые мемы

🍇Проектные хэштеги🍇
🍇 #фигурка_чайничек
🍇 #inktoberLettering
🍇 #inktoberGhosts

🍇Возможно, будет пополняться😆

Настроения пописать инструкции для работы с эмодзи/стикерами в ТГ🤔

Скорее всего мои знания не полные и не уникальные, но собрать инфу и систематизировать хочу, хотя для бы себя✍️
Примерный план:
1. Программа - афтер эффект+плагин
2. Бот в телеге(эта часть у меня готовая даже есть где-то🤔 )
- основные функции
- лайфхаки😎
3. Что стоит учесть при работе
4. Мб расскажу, какие приёмчики использую я

Не буду обещать, что все будет быстро написано и выложено😆
Думаю с сокращённого варианта начну.

хэштеги:
#я_опыт_Джека
#что_то_по_эмодзи_и_стикерам

#я_опыт_Джека
#что_то_по_эмодзи_и_стикерам

Инструкция по анимированным эмодзи и стикерам
Глава 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, так же он подсказывает все шаги.
Но она вроде бы не полная, не указаны какие-то команды.

Конец главы.

Оглавление

#я_опыт_Джека
#что_то_по_эмодзи_и_стикерам

Инструкция по анимированным эмодзи и стикерам
Глава 1. Бот для загрузки эмодзи и стикеров

Начнем немного с конца, потому что этот текст инструкции у меня уже был😆

Устанавливается с помощью стандартного бота в ТГ https://t.me/Stickers

/help - команда чтобы посмотреть доступные команды бота

/cancel - отмена текущей задачи, вдруг пригодится:)

Для установки эмодзи нужен премиум аккаунт

Ограничение по количеству эмодзи в паке: 200 эмодзи.
------------------------------------------

Установка

1️⃣ Создаем пак с эмодзи

➖ команда /newemojipack
➖ В меню выбираем 'Анимированные эмодзи'
➖ следуем подсказкам бота загружаем эмодзи с расширением .tgs

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

Для букв и символов можно использовать эмодзи квадрат с abc/abcd.

Для номеров есть номера в стандартном паке:)

------------------------------------------

Ситуации

1️⃣ Создали, но нужно передвинуть

➖ /orderemoji — изменить порядок эмодзи в наборе

2️⃣ Создали, но два раза залили один и тот же эмодзи

➖ /delemoji — удалить лишний эмодзи

3️⃣ Пришел эмодзи на замену текущему из набора

➖ /replaceemoji - заменить эмодзи

Подсказка: .tgs - специальное расширение для телеграм стикеров и эмодзи.
Можно предварительно смотреть в телеграме, например, перетаскивать из папки в сохраненные сообщения.

Конец главы.
Возможно еще будет дополняться

Оглавление

#я_опыт_Джека
#что_то_по_эмодзи_и_стикерам

Инструкция по анимированным эмодзи и стикерам
Глава 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 их наследует

Да, многовато ограничений😮
Но вполне хватает того, что остается.
Например: 🌞🪒🍬
Тут уже нужно умение анимировать и усидчивость😆

Конец главы.
Возможно еще будет дополняться

Оглавление

#я_опыт_Джека
#что_то_по_эмодзи_и_стикерам

Инструкция по анимированным эмодзи и стикерам
Глава 3. Незанимательная геометрия

Хочу обратить внимание на размеры наших эмодзи и стикеров.
512 х 512 - это нужный размер всего стикера\эмодзи.
В стикере изображение может полностью занимать все предложенное пространство.

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

Так вот, пример плашек, которые я делала для Синергетика, и которые занимают по высоте 512 пикселей:

🌟🌟🌟
💥💥💥 - они налетают одна на другую.
И тексту снизу тесно
Но тут ему не тесно

Буквы мы уже делали с отступами сверху и снизу
🔤
🔤- щекочет верхнюю листочком
🔤- эта буква из другого пака, на который я ориентировалась при работе


Пока помню, еще что нужно обратить внимание,
если вам нужно сделать текстовые эмодзи
1️⃣ Не берите тонкий шрифт, его не будет видно, а на стыках деталей плашки, он может сильнее истончиться. Про плашки отдельно наверно пару слов напишу
2️⃣ В шрифте овалы и полуовалы не должны быть слишком мелкими, например, 🔤♾ я допиливала сама

Эмодзи для себя я делаю тоже чуть с отступом снизу
🥴 Чтобы они более-менее неплохо
смотрелись внутри текста

Точных цифр я вам не дам, я их не знаю, и делаю на глазок. В одном паке отступы должны быть одинаковыми. Опять же все зависит от задачи😃

Почему я не делала отступы у плашек?
Потому что по задумке, они отделяются пустой строкой от остального текста, чтобы из было лучше видно, так что они должны были занимать все доступное им пространство 😮

Конец главы.
Возможно еще будет дополняться

Оглавление

#я_опыт_Джека
#что_то_по_эмодзи_и_стикерам

Инструкция по анимированным эмодзи и стикерам

Оглавление
Глава 0. Обзорная экскурсия
Глава 1. Бот для загрузки эмодзи и стикеров
Глава 2. Плагин bodymovin-tg для After Effects
Глава 3. Незанимательная геометрия

Включение с полей или замена масок

Надеюсь, будет пополняться😆

#я_опыт_Джека
WIN+V или супер Ctrl+V

Возможно, многие уже давно пользуются, но я недавно узнала фишку Виндовса😮
Если вы нажмете сочетание клавиш WIN+V , то вам откроется буффер обмена, в котором хранится несколько последних ваших нажатий Ctrl+C, в том числе и картинки.

Это очень полезно, если вам надо кучу всего скопировать из разных мест и вставить в одно😆
Или сто тыщ раз не копировать одни и те же данные.

Интересно, только я одна, когда что-то копировала раньше, представляла, что у меня заряжена мышка, и надо донести этот заряд, как в какой-нибудь игре, до того места, куда мне надо скопировать🤔

Включение с полей или замена масок

Во вторник долго мучилась с тем, что не работал track matte.
Нужно было, чтобы текст двигался внутри кружка.
Что я только не перепробовала, в итоге сдалась🥲

Вчера увидела в посте у Настя говорит и показывает стикеры с медузой, и что там используется то, что мне надо. Спросила у Насти, как она делала)
Она навела меня на верный путь❤️

В итоге вышло 😫
Как устроены слои на картинке выше

Так же, если вам нужно будет двигать в кружке несколько элементов, то для каждого слоя нужно сверху добавить слой с маской. Либо объединить в прекомпоуз

Упд. Забыла отметить, что работаю на After Effects 2023

хэштеги:
#я_опыт_Джека
#что_то_по_эмодзи_и_стикерам

#я_опыт_Джека
‼️В телеге новая фишка с хэштегами. Если нажать, то теперь поиск не только в данном канале или чате, но и во всех других.

Так что держите в голове, когда их будете вставлять. Хотите вы, чтобы увидели вне вашего канала или нет.

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

🍇Как правильно подходить к моушен-дизайнеру
🍇Небольшой неподробный гайдик, как сэкономить время и деньги на анимации

1️⃣2️⃣🍇
🍇#я_опыт_Джека
🍇#я_мысли_Джека

1️⃣2️⃣🍇
Скажу сразу, что случаи индивидуальны, все моушенеры работают по-разному.

Когда ко мне приходят с заказом на анимацию, то какое-то время я теряю на подготовку файлов к анимации. Часто присылают ссылку на 🐞фигму, реже файлы 🦇 или 🐺. И там со слоями творится черт знает что😥

🍇Совет 0. Уточняйте у моушен-дизайнера, в каком формате прислать файлы. Возможно, он скажет примерно тоже самое, либо у него нет предпочтений, и он сам будет ковыряться в ваших файлах и попросит за это оплату🖥

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

Но в новых для меня проектах требуется время, чтобы все расчихать и проверить, не повредилось ли что-то при расчихивании.

🍇Совет 1. Перед передачей файлов моушен дизайнеру, да даже и клиенту, расчихайте его. Удалите ненужные слои, переименуйте. Это даже вам может пригодиться в будущем, если вы вернетесь к проекту.

🍇больше касается 🦇 или 🐺, но и в 🐞 тоже лучше показывать чистовик. Для 🐞 есть конечно плагины, переводящие в 🐺 , но я обычно выгружаю .pdf и там все равно заново надо переименовывать слои.

🍇Совет 2. Думайте о многослойном файле, как о аппликации. Если в 🐺 все элементы лежат в одном слое, то они считай все склеены между собой. Для анимации желательно, чтобы каждый элемент, который нужно двигать, был в отдельном слое или папке, если элемент состоит из нескольких частей. Если это персонаж, то его лучше разделить на части, как бумажную марионетку.

Конечно, это все может сделать под себя аниматор, но бывает, что части тела слеплены в один векторный слой. И тогда нужно резать, дорисовывать, опять же тратить время💀

😐Вывод. Уважайте чужое время и нервы. Порядок в файлах часто недооценивается.

1️⃣2️⃣🍇
🍇#я_опыт_Джека

1️⃣2️⃣🍇
Адоб и градиенты😠

По работе надо было перевести изображение с кучей мелких деталей в вектор, потом перекинуть в афтер эффект. Оказалось, это не в два клика.

Там был конечно прикол, что вчера я переводила весь день. А сегодня сказали, что в другом цвете надо и без текстур.

Окей, изначально скорее всего мой косяк был делать всё в фигме изначально. У меня есть опыт переноса изображения из 🐞 в 🐺, а потом в 🦄, поэтому предложила сама все почистить и отдать аниматору в формате афтер эффектс.

🍇Затык 1. Из фигмы в иллюстратор, потом в афтер.
В афтер эффектс перевод слоёв в шейпы. И все серое... Ещё и в слоях насрано🫣
Смотрю через Гугл форумы. Такая проблема есть и если сразу из иллюстратора в афтер. В плане, если рисовать прям в иллюстраторе с градиентами.

Я позже сама проверяла, рисовала шейп в 🐺, накидывала градиент, открывала в 🦄 - все серое.

Смотрю, как решают. А решают через...

🍇Затык 2. Adobe XD. Адобовский аналог фигмы. 😕
Помимо того, что он криво загрузил иллюстраторский файл, он плевал на градиенты, и растащил в них сами градиенты по рандому.
В туториалах пишут, что вот если такая проблема с градиентами, то в Adobe XD(эта свойлочь смеется постоянно) откройте иллюстраторский исходник и экспортируйте в афтер эффектс, там такая возможность есть.

Опустим то, что мне пришлось йохохо целый набор адобовских програм на 32 гига, чтобы только его одного установить.

Он выгрузил градиенты не в серый. Но сделал ооооочень своеобразно...

😬ОН ПЕРЕВЕЛ ИХ В РАСТРОВЫЙ СЛОЙ😬
😲А МНЕ НАДО В ВЕКТОРЕ, ЧТОБЫ БЫЛ МЕНЬШЕ РАЗМЕР У ФАЙЛА😲

Но спасибо ему, что остальные слои вывел чисто, без лишних подслоев. Хоть что-то.

Я выдыхаю, переделываю все градиенты прям в афтер эффектс. А время идет...

🍇Затык 3. Градиенты наносят ответный удар💀
Думаю проверить, все ли ок с градиентами теперь.
Выгружаю полученное в json через bodymoving. И

Ну вы понимаете, что все идет не так...

ВСЕ ГРАДИЕНТЫ ОДНОГО ЦВЕТА💀

Иду Гуглить. Да, баг афтер эффектс. Как исправлять? Переименовать все слои с градиентами, чтобы они не повторялись. Ну т.е. элементарно пронумеровать. И заработало.💀

И ну тип, мне бы так файлы готовили к анимации. В последний раз мне кинули с помойкой в слоях, я попросила, чтобы подписали слои. Подписали, через жопу. Там было несколько артбордов, и мне еще надо было искать, как их быстро выгрузить в раздельные файлы. Потом самой чистить еще ручками. Это мое проклятие чистить файлы.😭

1️⃣2️⃣🍇
🍇#я_опыт_Джека

1️⃣2️⃣🍇
Пост - поток мыслей в час ночи, можно спокойно пропускать

Я открыла для себя то, что относительно неплохую шарлотку можно делать в мультиварке. Но второй раз выходит так, что я делаю ее в час ночи👁👁
Еще забавное, что у меня есть нормальная духовка, но я ей ни разу не пользовалась за 5 лет, я не уверена, что она работает, хорошо, что электрическая. На самом деле так себе кулинар)) Поэтому и ищу рецепты для мультиварки, куда покидала все и ушла заниматься своими делами))

Так вот, шарлотка, рецепт можно найти в поисковике. Там пол стакана сахара, два яйца, пол стакана муки, разрыхлитель и начинка. Я люблю кислые ягоды🍇 И потому что я не кулинар, для меня такой рецепт съедобной еды прям как в игре открывается.

Но в моей книге рецептов, которая у меня в голове, есть всякое странное, типа варенья из одуванчиков и сироп из роз💀 В прошлом году еще делала варенье из ранеток.

Думала прислать фото, но она не фотогиничная) Думаю, надо сделать в два раза меньше теста, чашка маловата)