Создание пиксельной анимации ч.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 пикселей, после чего можно сразу переходить к анимации.

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