Пиксельный скрипт для 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.
А сегодня мы занимаемся только подарками – кажется, пора обновлять свои коллажи 🤔

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

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

Обычно я делаю не так много иллюстраций к скинам – всё же больше анимирую, но в этот раз я доволен результатом 😍

🍀Апрув пиксельного скина — одно удовольствие! Так и хочется ещё поэкспериментировать с пикселями.

Хотели бы увидеть больше пиксельных скинов?

✈️Изменение сетки объекта

Регулярно появляются вопросы об изменении перспективы или сложной деформации, и многие пытаются сделать это «на глаз». Но зачем, если в Illustrator уже есть встроенный инструмент – Envelope Distort → Mesh

Он позволяет «упаковать» любой объект в сетку и аккуратно его исказить: добавить выпуклость, повернуть или имитировать перспективу. За пару кликов и без дополнительных точек почти

Я регулярно им пользуюсь – например, в этом скине 🍀 нужно было повернуть иконку радиации. Настоятельно советую попробовать хотя бы раз – вы убедитесь, что это действительно просто и удобно.
В текстовом формате Pototsky! уже делал пост об этом инструменте (посмотреть его можно тут).

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

Видео выложу в группу Класс Идей, куда планирую перенести все профильные беседы по анимации.
Группа открыта всем – вступайте, задавайте вопросы и учитесь новому! 🙌

Творческий конкурс!

Я не люблю классические розыгрыши с подписками или репостами – сам в них никогда не участвую. Зато я всегда стараюсь участвовать в творческих конкурсах: проявлять креативность и проактивность. Отчасти благодаря этому я и попал в телеграм, но об этом как-нибудь в другой раз.

Сейчас работаю над довольно сложным скином на 🎁, и в процессе придумывания идей заметил, что не так уж много людей делали на него концепты. Видимо, это не самый простой и популярный подарок. Однако нам выбирать не приходится – каждый раз нужно пытаться удивить вас чем-то оригинальным и интересным.

Поэтому предлагаю бросить себе вызов и попробовать себя в роли концепт-художника.

Задача: Придумать и визуализировать скин на 🎁
(Можно рисовать в любом удобном стиле — хоть карандашом или ИИ. Главное — соответствовать простым условиям и придумать классную идею)

Условия:
– Координатно менять форму нельзя.
– Никакой запрещенки.
– Это должен быть новый скин (нельзя брать уже опубликованные).
– Можно предлагать сколько угодно концептов.

Готовые идеи присылайте в комментарии под этим постом. Следите за работами других участников, чтобы не повторяться, и лайкайте понравившиеся!

Призовых мест будет несколько, по разным категориям:
🎁 Самая оригинальная идея*
🍦 Самый смешной концепт*

Мишки с автографом получат авторы:
🧸 Концепта с наибольшим количеством реакций
🧸 Самого визуально красивого концепта*
🧸 Тот, кто предложит больше всех концептов
🧸 И победитель народного голосования в чате @ChatofIdea

Бонус: 🎁Одна из анимаций, если кто-то успеет

*В выборе победителя учитывается субъективное мнение админа.

Победителей определим в понедельник. Соберу всех в отдельный пост с указанием авторства. Вдруг какая-то из идей успеет попасть в набор.

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

Всем побольше вдохновения!

Пару слов в виде дисклеймера:
– Отправляя материалы, вы соглашаетесь, что делаете это добровольно. Их возможное использование Telegram и другими пользователями не предполагает выплат, авторских прав или упоминания авторов.
– У меня (как и у других авторов) не закончились идеи для скинов — конкурс проводится не из-за их нехватки. Это исключительно моя личная инициатива: хочется сделать что-то приятное для творческого комьюнити, дать вам возможность проявить себя и просто добавить немного вдохновения.

Первый совместный коллаж команды!

Пока я заряжен вашим откликом, начал делать следующую работу, но прежде стоит закончить ностальгическую ветку и опубликовать здесь коллаж, который сделан ещё в 2022 году.
247 персонажей от всей команды Telegram (и это были далеко не все на тот момент).
Собирался вручную и с любовью ❤️

Ходят слухи, что он висит в офисе Telegram

Так же напоминаю, что вы можете подписаться на всех авторов, которые ведут свои каналы – всего одним нажатием👇
✈️ Добавить папку

А если вы анимируете – можете вступить в профильную беседу и учиться вместе с нами
✈️ Вступить в беседу

Полная версия для сохранения! ❤️

Памятка: Shape Layer в After Effects

Добавил ключевые иконки для наглядности.

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

1. Основные свойства слоя

• Зажать и переместить – менять порядок слоёв
• ⚫️ Выбрать цвет слоя через нажатие на Label
• Select Label Group – выбирает все слои одинакого цвета
• ⚫️ Shy – скрывать слои только с таймлайна
• ⚫️ Скрыть слои полностью
• ⚫️ Solo – показать только выбранные слои
• ⚫️ Блокировка слоя
• ⚫️ Активировать слой для 3д манипуляций
• ⚫️ Parent & Link – привязка слоёв друг к другу
• ⚫️ Изменить качество прорисовки слоя
• ⚫️ Layer Markers на таймлане позволяет оставить маркеры на любом кадре

2. Базовое управление слоями

• Enter — переименовать слой
• Ctrl+D — дублировать слой
• I / O — перейти к началу/концу слоя
• [ / ] — переместить начало/конец слоя на текущий кадр
• Alt + [ / ] — обрезать начало/конец слоя до текущего кадра
• Ctrl + Shift + C — собрать выбранные слои в отдельную композицию
• Ctrl + [ / ] — переместить слой выше / ниже
• Ctrl + Shift + [ / ] — переместить слой в самый верх/низ списка
• Ctrl + ↑ / ↓ — выделить слой выше/ниже (+Shift — добавить к выделению)
• ⚫️ ПКМ → Transform → Center Anchor Point in Layer Content – выравнивает Anchor Point по центру слоя

3. Внутри ⚫️ Shape Layers

• Shape Layer состоит из Contents и Transform
• Каждая группа внутри Contents имеет свой Transform
• ⚫️Add → добавляет на выбранный слой/группу фигуру, заливку, обводку, градиенты и др.
• Ctrl + G — объединение нескольких групп
• Свободное переупорядочивание групп
• Возможность менять порядок Fill / Stroke

4. Плагины

Motion Tool:

• ⚫️ – Разгруппировать внутренние группы на отдельные слои
• ⚫️ – Объеденить слои в один слой
(могут полететь градиенты)

5. Что не работает в Lottie

• Модификаторы (Pucker & Bloat, ZigZag, Wiggle Paths и др.)
• Маски → используем Track Matte
• Эффекты (Effects) почти всегда игнорируются
Полный список доступных эффектов тут

#памятка@IdeaAnimator

Сегодня свой день рождения отмечает креативный директор Telegram @ohuenko

По такому случаю – сделал небольшой коллаж с работами нашей команды за последний год.
Спасибо за ваш труд!

С днём рождения! 🎂