🍓Не концепт, а реальность!

Не прошло и недели с релиза бота, а мы уже добавляем новый подарок для генераций!

🎁 Berry Box — новый подарок доступен для комбинирования скинов. Более 1 миллиарда уникальных сочетаний!
Такая модель будет только у тебя.
(Автор оригинальных скинов по этой ссылке)

Скорее открывай бота и пополняй свою коллекцию!
Давайте вместе поделимся этой прекрасной новостью с друзьями и покажем, что такое по-настоящему уникальные подарки!

🎁Отклонёнки, которые так и не выйдут.. но есть нюанс

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

🎁Jolly Chimp еще не успел выйти в открытую продажу, а он уже доступен для скрещивая.

Тысячи забавных и необычных комбинаций могут получится всего за пару кликов 🤯

Большое спасибо авторам оригинальных скинов за такой красивый и разнообразный подарок! (Alexander, OLGAGLOW, @snowyjellyfish, Anna)

Эффект лупы для Lottie анимации

Если пробовали делать маску в After Effects и потом выгрузить в Lottie — то знаете: обычные маски там не работают.
Выход — использовать Track Matte. Покажу на примере лупы из этого скина 🎁

Как сделать:

1. Соберите все слои, которые должны быть «под стеклом», и закиньте их в Pre-compose

2. Создайте или отделите слой, который будет играть роль маски (в нашем случае – стекло лупы)

3. В столбце Track Matte свяжите слой-маску с содержимым

Если параметр Track Matte не отображается, включите столбец Modes над таймлайном

4. Так как это лупа, увеличьте слой под маской и анимируйте его Position в тех же ключевых кадрах, что и движение самой лупы

В конце не забудьте скопировать изинги с основного слоя, чтобы совпадала скорость анимации (скрипт EaseCopy)

В результате получится эффект увеличительного стекла — аналог маски, который будет работать в Lottie

❗️Важно: маски в Lottie сильно нагружают итоговый json/tgs. Используйте их только там, где без них ну никак

📁 Скачать проект 🎁 можно в комментариях!

🎁 В качестве примера для изучения – кнопка с логотипом.

В клавишу вы легко можете подставить свою иконку.
Для этого просто откройте композицию Icon и замените внутри нее файл на нужный вам!

📁 Проект можно скачать в комментариях!

Как импортировать стикеры в After Effects

Часто задают такие вопросы, поэтому держите короткий гайд:

1. Скачать стикер
Любой стикер/эмодзи из Telegram скачается в формате .tgs

2. Конвертировать в JSON
Разархивируйте .tgs или просто киньте его боту @IdeaAnimator_bot – вы получите готовый .json

3. Импортировать в After Effects
Откройте плагин Bodymovin (он есть в этом списке) → нажмите Import Lottie Animation → выберите свой .json

❗️ Градиенты
After Effects не умеет импортировать градиенты: они все будут ч/б. Цвета придётся восстанавливать вручную по подсказке в плагине или оригиналу

Новый бот для аниматоров!

@IdeaAnimator_bot

Есть несколько ботов, которые оптимизируют банальные вещи для аниматоров, но недавно они стали отключаться — как однажды случилось с Typogram (кто знает, тот знает). Поэтому, для экономии времени и удобства, я сделал для себя бота, который позволяет проигрывать Lottie-анимации и быстро выдергивать оттуда SVG нужного кадра. Сейчас я докрутил туда пару полезных команд и готов поделиться им с вами.

📌 Что умеет бот:

/noscript — Превью вашей анимации в 2 клика, вытаскивает SVG из стикера или json файла. Удобно, когда нужно быстро разглядеть анимацию или достать noscript нужного кадра.

/json — Конвертирует стикеры и эмодзи прямо в JSON, готовый к импорту в After Effects.

/optimize — Чистит и оптимизирует ваш JSON, убирая лишнее и облегчая вес анимации.

В итоге:
Всё работает прямо в Telegram, в одном боте, в одно нажатие!

Сохраняйте, делитесь, пользуйтесь! ❤️

Создание пиксельной анимации ч.1

Я очень люблю пиксели и у меня есть несколько наборов, которыми уже успели воспользоваться сотни миллионов раз 🦖🔥💻

Есть несколько способов реализовать пиксельную анимацию в Lottie:
– через параметр Color у пиксельной сетки;
– через перемещение каждого отдельного пикселя;
– через полную замену кадра новым слоем;
– и мой способ – через параметр Path.

Подготовка
Для начала нужно правильно настроить Illustrator и After Effects под работу с пиксельной графикой.
Самое удобное – использовать сетку.

В моём примере анимация будет создаваться в разрешении 24×24 пикселя.
В настройках сетки (Preferences → Grids) выставляем:
Gridline every: 80 px
Subdivisions: 4

Отрисовка персонажа
После настройки сетки можно переходить к отрисовке персонажа в Illustrator.
Для быстрых скетчей я использую Pixquare на планшете.
Рисуем обычными прямоугольниками и квадратами по сетке. Не забудьте включить Snap to Grid, чтобы все элементы точно стыковались между собой.

Когда крупные части персонажа готовы, объединяем их с помощью Pathfinder.
Так, например, слой головы на скриншоте — это один цельный объект, а не набор квадратов.
Это решение не только упрощает анимацию, но и уменьшает вес проекта.

Для сравнения: голова состоит из 170 пикселей. Если бы каждый был отдельным квадратом, это дало бы 680 точек, а в объединённом варианте — всего 22.

Импорт в After Effects
Когда персонаж и дополнительные позы готовы, переносим всё в After Effects с помощью плагина Overlord.
Он точно размещает персонажа в композиции размером 512×512 пикселей, после чего можно сразу переходить к анимации.

Об этом совсем скоро ⌛

Создание пиксельной анимации ч.2

Теперь, когда иллюстрация импортирована в After Effects, можно переходить к анимации.

1. Проставляем Hold Keyframes
Первым делом я выставляю на весь Path ключевые кадры в режиме Hold.
Для этого:
- в поиске над таймлайном введите Path;
- выделите все ключевые кадры;
- переключите их в режим Hold, чтобы анимация менялась резко, без плавных переходов.

2. Рисуем следующий кадр
Далее я перемещаюсь на несколько кадров вперёд (в моём случае – каждые 9 кадров) и начинаю рисовать следующий кадр, передвигая Path.

Важный момент
Привязка к сетке в After Effects не очень удобна для пиксельной графики, поэтому я двигаю точки стрелками на клавиатуре.
Два шага в сторону и пиксели ложатся идеально.

Если перемещать пиксели мышкой “на глаз”, вы не получите pixel perfect – линии будут наезжать друг на друга или оставлять зазоры.

Памятка по работе с Path
• Выделить все точки Path – клик по любой точке с зажатым Alt (Option)
• Выделить ребро (две соседние точки) – клик по линии между ними
• Выделить несколько точек – клики по точкам с зажатым Shift
• Выделить область точек – прямоугольное выделение нужной области

Если нужно двигать весь объект целиком, можно использовать параметр Position.
Также выставляем Hold Keyframes и сдвигаем объект стрелками для точного позиционирования.

Результат 🐶
Постепенно, выстраивая кадры один за другим, вы получите полноценную анимацию персонажа.
Если сложно придумывать движения на ходу – заранее подготовьте позы.

А если покадровая анимация Path кажется слишком сложной, можно отрисовать все позы отдельно и импортировать их в After Effects отдельными слоями, просто переключая их видимость.

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

Пиксельный скрипт для After Effects

Я пытался показать способ создания пиксельной сетки и анимации цвета каждого пикселя, но не нашёл удобного решения в интернете — и решил, что так оставлять нельзя.
В итоге я сделал собственный скрипт для After Effects – PixelGrid.

Зачем он нужен
Как известно, в After Effects есть эффект Mosaic, но он не совместим с Lottie.
Можно было бы пикселизировать каждый кадр вручную в Illustrator и переносить его обратно, но это трудоёмко и медленно.

PixelGrid решает эту проблему:
он превращает вашу анимацию в пиксельную сетку с анимированными Color и Opacity, которую можно экспортировать в Lottie буквально в два клика.

Настройки скрипта

• Количество пикселей – задаёт размер сетки.
Не ставьте слишком высокие значения: большое количество точек увеличивает вес финальной анимации и снижает производительность After Effects.
• Частота обновления – определяет, как часто обновляются цвета.
Увеличение этого значения помогает уменьшить размер файла.
• Точные пиксели – при активации пиксели имеют только два состояния прозрачности: 0 или 100%.
Это делает изображение более чётким и контрастным.
• Порог закрашивания (0–1) – определяет, сколько исходного изображения должно быть под пикселем, чтобы он закрасился.
Чем меньше значение, тем больше пикселей будет окрашено.
• Расстояние между пикселями – регулирует визуальные стыки между пикселями.
Уменьшите значение, чтобы убрать зазоры, или увеличьте – чтобы получить эффект “табло”.
(На гифке ниже можно увидеть примеры.)
• Режим выбора цвета – задаёт способ определения цвета пикселя.
На данный момент доступны:
среднее значение, центр пикселя, доминирующий цвет, самый яркий и самый тёмный.

Оптимизация
Скрипт оптимизирован специально для Lottie-анимаций — ведь мы, Lottie аниматоры - помешанные, всегда щепетильно относимся к весу финального файла.

Как пользоваться
1. Поместите вашу анимацию в отдельную композицию.
2. Запустите PixelGrid и выберите нужный слой.
3. Настройте параметры под свой проект.
4. Для теста можно создать пикселизацию одного кадра, чтобы оценить результат.
5. После проверки запустите полный рендер. Через пару минут вы получите пиксельную версию вашей анимации.

После создания сетки вы можете доработать отдельные элементы вручную — все изменения производятся обычными ключевыми кадрами параметров Color и Opacity.

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

📁Файл со скриптом (и его английской версии) — в комментариях.
Спасибо за поддержку и распространение! ❤️

Ну и конечно, я не мог не протестировать этот скрипт на цензуре.

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

Не знаю зачем вам, но если набирайте 100 реакций – кидаю tgs стикера. Update: 🔞

Не совсем пиксельная анимация

Помимо классической пиксельной анимации, мне предлагали разобрать комбинированный подход, как в 🕺Pixel Pigeon

Поэтому рассказываю 👇
В основе – всё тот же пиксельный персонаж и принцип пиксельной анимации (пост об этом), но с небольшими изменениями.

Hold Keyframe используем только при резком изменении ракурса или состояния объекта.
Во всех остальных случаях добавляем динамику за счёт плавных изменений и движений пикселей.

Level 1. Разбиваем персонажа на части – руки, ноги, голова и тд
Анимируем Position у каждой части, как если бы это был обычный персонаж.

Level 2. Теперь подключаем Rotation и Scale.
Не забываем про Offset

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

Level 3. Добавляем анимацию Path по той же технике.
Hold Keyframe ставим только при сильном изменении формы (в этом примере, при моргании и движении хвоста).

Анимацию радуги я сделал обычной обводкой, поcле чего перевел в пиксели с помощью скрипта PixelGrid

🌈 Таким образом получается простая, но живая комбинированная пиксельная анимация.
📁 Проект можно скачать в комментариях!

В другой раз повезет

🎁 Отсылки на PvZ мы с вами не найдём, зато поклонники другой культовой игры точно останутся довольны 🤫

Ваши догадки?

Совместно с Gift Craft запустили большую активность!

Теперь за каждый созданный эмодзи ты получаешь билеты 🎟 – они будут участвовать в розыгрыше призов.
Чем больше билетов — тем выше шанс забрать подарки 🎁

Сколько билетов даёт каждый тип эмодзи:

🍓 Berry Box — +4 билета
🧸 Toy Bear — +3 билета
🙉 Jolly Chimp — +2 билета
🎀 Bow Tie — +1 билет

🏆 Бонус за редкости: в Jolly Chimp и Bow Tie есть части разной редкости.
🔸 Rare часть → +3 билета за каждый редкий элемент
🌟 Legendary часть → +5 билетов

Один эмодзи может принести очень много билетов, если повезёт ✨

В знак благодарности тем, кто давно с нами — первые пять комментаторов, кто правильно укажет порядок выхода всех подарков для скрещивания, получат приятный бонус на баланс бота! Спасибо, что остаётесь с нами и поддерживаете! ❤️

3️⃣года назад я собрал этот хэллоуинский коллаж с @stickers_origash – ещё во времена, когда только появлялись первые emoji.
А сегодня мы занимаемся только подарками – кажется, пора обновлять свои коллажи 🤔

А вот и набор с моей анимацией для сегодняшней ночи 🌚

🔤🔤🔤🔤🔤
🔤🔤🔤🔤🔤🔤🔤🔤🔤