Идейный Аниматор

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

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

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

Памятка: 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

Итоги творческого конкурса!

Вы приятно ошеломили меня своей фантазией и активностью. Всего за несколько дней вы собрали больше 130 уникальных идей для скинов 🎁. Каждый из вас отлично постарался, и я надеюсь, что сам процесс принес вам удовольствие независимо от итогов!

Победители своих номинаций:

🎁 Самая оригинальная идея
Баскетбольная корзина – @DarkYander

🍦 Самый смешной концепт
Мото-Мото – @xseem

🧸 Концепт с наибольшим количеством реакций
Краб, который перевернул игру – @ocktokto

🧸 Самого визуально красивого концепта
Рыбка в солонке – @Vllladosha

🧸 Авторы с наибольшим количеством концептов
@MrBeerZone, @Andrush169, @westm1nster

🧸 Победитель народного голосования в чате
Чит-кот – @f0rtun0

Бонус: за создание анимаций
🍦 FishStick @gromk_o
🧸 @waxe07
🧸 @isakisakisak
🧸 @capy_xd
🧸 @lesha_lyu

🧸 За идею для аватарки чата
@Manyl123

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

Чтобы подогреть интерес, я добавил в итоговые работы пару своих скетчей, которые давно уже отправил 😏. Лишь те, кто следил за работами авторов знает какие картинки тут лишние. Только не спойлерите!

❤️ Всем спасибо за участие!

Памятка: Ключи в After Effects

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

1. Базовое управление

• Клик по секундомеру включает анимацию и ставит первый ключ
• Ключи автоматически создаются при изменении параметра на новом кадре
• Клик по заголовку свойства выделяет все его ключи
• Выделяя ключи через левую часть таймлайна, можно выделить все ключи разных свойств
• Ctrl+C / Ctrl+V работает только между совместимыми параметрами (нельзя вставить на несколько слоёв одновременно)
• Двойной клик по ключу открывает точную настройку
• ПКМ по ключу → Label окрашивает ключ, Select Label Group — выбирает группу ключей одного цвета (работает в новых версиях AE)
• Клик по активному секундомеру удаляет все ключи свойства

2. Интерполяция (скорость изменения промежуточных кадров между ключами)

• Linear — равномерное движение
• Hold — скачок между значениями
• Easy Ease (F9) — мягкое начало и конец движения
• Auto-Bezier — автосглаживание движения
• Ctrl + клик — переключение Linear ↔ Auto-Bezier
(подробнее про скорость в отдельной памятке)

3. Тайминг и перемещение

• Alt + перетаскивание крайнего ключа — растяжение/сжатие диапазона
• Перемещение с зажатым Shift — «прилипание» к ключам и границам слоя
• Time-Reverse Keyframes — реверс порядка ключей
• Стрелки влево/вправо с зажатым Alt и выбранными ключами сдвигают их на 1 кадр влево/вправо (если зажать ещё и Shift, то сдвиг будет на 10 кадров)

4. Плагины

Motion Tool:

• Исправляет ключи, попавшие между кадрами

(часто бывает при растяжении или сжатии)

• Клонирует выбранные ключи множества слоёв на текущий кадр
• Настраивает offset и выравнивание ключей

FoxRetimer:

• Time Remap на уровне keyframes

5. Шорткаты

•

U

(открывает/скрывает анимированные свойства слоя)
•

UU

(открывает все свойства слоя)
•

J/K

(перемещение текущего кадра на ближайший предыдущий/следующий ключ)
•

I/O

(перемещение текущего кадра на начало/конец рабочей области)
• Показ ключей по свойствам:

T

(Opacity),

P

(Position),

S

(Scale),

R

(Rotation),

A

(Anchor Point)

#памятка@IdeaAnimator

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

🍀🍀🍀🍀

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пиксельный скрипт для 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.

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

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

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

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

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

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

Это было весело, теперь идем дальше!
Жаль, «Brownie на палочке» так и останется тут