Pototsky!
3.41K subscribers
39 photos
112 videos
6 files
139 links
Я работаю над оживлением официальных подарков, emoji и стикеров в Telegram. Пишу про After Effects, Lottie, моушн-дизайн и анимацию https://linktr.ee/pototsky
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Скругление углов между несколькими шейпами в After Effects

Прием мне часто попадается в иллюстрациях на коммерческих проектах, есть несколько путей его воссоздания в АЕ:

1. Merge Path + Round Corners
Помещаем все шейпы внутрь одного слоя, объединяем с помощью модификатора Merge Path, добавляем модификатор Round Corners

Работает на уровне векторного path


2. Gaussian Blur + Levels
Кидаем вообще на любой слой с альфа каналом и играем с параметрами, нужно выбрать альфа канал на эффекте Levels

Работает на всем подряд как растровый эффект


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

Пишите, если знаете еще более удобные способы решения задачи
Справа на видео 4 примера использования Gaussian Blur + Levels поверх шейпов, проект скину в комментарии к этому посту

upd: в комментах проверили работу модификаторов в lottie, merge paths не работает, round corners работает
542145
This media is not supported in your browser
VIEW IN TELEGRAM
Понравилась гифка на pinterest, решил повторить в After Effects и поделиться:

-Кидаем Particle Playground на солид, убираем все Random опции и гравитацию в 0
-Добавляем шейп в качестве частицы
-Анимируем параметр Direction или кидаем выражение wiggle(1,200)
-Прекомпоз и 2 копии: одна под углом 120°, вторая 240°

Чтобы получилось как в оригинале — для каждой копии добавляем отзеркаленную по scale версию (можно в моем проекте включить эти слои и посмотреть)

Для стилизации поверх всей композиции накинул Venetian Blinds

Проект 📱 в комментариях
Please open Telegram to view this post
VIEW IN TELEGRAM
47104
C Наступающим! Это был год саморазвития я учил новый софт, прокачивал насмотренность, пробовал себя на новых ролях в ущерб стабильной проверенной работе, о чем в целом не жалею. Надеюсь, в 2025 доберусь до ютуба (самое время сейчас, да?), тачдизайнера и сделаю что-нибудь интересное для массовой аудитории, а не как обычно для локального кружка моушн-дизайнеров

В 2021 году анимировал стикер-пак с Сантой, традиционно перед новым годом он выходит в топ 1 по использованию относительно остальных наших паков, рисовал Миша. Поделюсь статистикой:

Использовано сегодня: 109577
Установлено сегодня: 8891
Всего использований: 19971824
Всего установок: 4239653
Please open Telegram to view this post
VIEW IN TELEGRAM
2295
This media is not supported in your browser
VIEW IN TELEGRAM
1162
This media is not supported in your browser
VIEW IN TELEGRAM
Смиры в анимации

Без смиров быстрое перемещение объектов выглядит очень дешево, в стикерпаке с Сантой я много раз использовал этот прием. Вот основные способы:

1. Speed lines + анимация scale
Делается очень быстро, но выглядит не совсем правильно, и нужно обязательно поворачивать шейп по направлению движения

2. Копии
Скопированные объекты смещаю на таймлайне, чтобы они отставали от оригинала. Выглядит как эффект echo, но при желании копии можно дополнительно модифицировать: уводить в стороны словно частицы, увеличивать/уменьшать

3. Анимация path
Path можно изогнуть по линии движения, так что этой мой любимый способ

4. Дополнительный шейп
Когда я вижу много сложных шейпов, на которые нужно применить смир — просто выключаю слои по opacity и заменяю на толстые линии

Пост написан в контексте Lottie, так что про echo, motion blur и т.д. в другой раз
Проект 📱 в комментариях
#Lottie
#AfterEffects
Please open Telegram to view this post
VIEW IN TELEGRAM
36621
This media is not supported in your browser
VIEW IN TELEGRAM
Time Blend FX — модификация копий echo в After Effects

Этот туториал взорвал мой мозг, оказывается в 📱 до СС2015 был эффект Time Blend FX, который действовал как echo, но в добавок позволял воздействовать на копии различными эффектами.
В целом можно просто посмотреть видео и бесплатно скачать файл от автора, а я добавлю несколько простых примеров (2 и 3 на видео из поста) и соберу все в архив.
Эффект до сих пор есть в АЕ, но скрыт из панели — вернуть его можно добавив пресеты.

Над контентом собираем такой стак эффектов в adjustment layer:
-CC Time Blend FX в режиме Copy
-эффекты, воздействующие на копии, например transform, turbulent displace
-CC Time Blend FX в режиме Paste


Time Blend возьмет первый кадр, применит к нему эффект и отобразит во втором кадре. Затем возьмет второй кадр с примененным эффектом и применит его еще раз и так далее.
К примеру, если добавить эффект Transform и увеличить значение position на 10px, то копия сдвинется на 10px во втором кадре, в следующем еще на 10px

⚠️ Работает очень нестабильно: рекомендуют отключить в настройках Multi-Frame Rendering, очищать кеш перед каждым превью и рендером, отключить GPU рендер, убрать галочку Cache Frames When Idle в превью

В комментарии скину еще больше примеров + дополнительный бесплатный проект
Please open Telegram to view this post
VIEW IN TELEGRAM
175
Скиньте плиз в комменты свои каналы сколько-нибудь релевантные CG, а также те, на которые вы подписаны. С кратким описанием, если не сложно 🙏
95
This media is not supported in your browser
VIEW IN TELEGRAM
Навалил кучу в проекте? — Не беда!

Бесплатный скрипт Ae organizer 📱 создаст папки и раскидает по ним все футажи и композиции. Приятным бонусом будет сочный логотип и юзернейм автора (неизвестно в какой соц. сети) занимающий 2/3 и интерфейса!
Файл скину в комментарии

Другие варианты:
mgfx free суть та же, но можно выбрать только перемещение файлов, не трогая композиции
Organize Project Assets Pro 20$ куча опций для автоматической организации, кнопки в KBar
Declutter 25$ еще больше опций

Также напоминаю, что новый проект по умолчанию может создаваться из вашего шаблона, с любой структурой, выбрать шаблон нужно в настройках 📱: Settings — New Project — New project loads template

В шаблоне можно создать не только структуру папок: у меня After Effects запускается с уже созданными пустыми композициями, которые использую чаще всего: 512x512 60fps для lottie, 1080x1920 30fps inst, 1920x1080 и т.д.
Please open Telegram to view this post
VIEW IN TELEGRAM
33
This media is not supported in your browser
VIEW IN TELEGRAM
MoGraph в After Effects одной маской на любой параметр

На сайте aescripts скромно лежит самый недооцененный экспрешн в истории After Effects 📱
Реализовать подобную автоматизированную анимацию можно было всегда, но данное выражение позволяет сделать это максимально просто и быстро, без всяких слайдеров, на любой параметр, с интуитивно понятным и гибким контроллером в виде маски.

1. Добавляем на любой числовой параметр любого слоя два ключа: значение первого из них будет активно без воздействия маски, второго при 100% воздействии маски;

2. Кидаем выражение на этот параметр;

3. Создаем solid layer с названием MASK, добавляем любую маску, и она начинает воздействовать на параметры слоев;

4. Анимируем слой с маской (PSR) или саму маску (path)


Теперь, когда path маски будет перекрывать слой — значение будет меняться на то, которое мы указали во втором кейфрейме. И самое главное: выкручиваем параметр Mask Feather для того чтобы вокруг path нашей маски появилось поле Falloff, которое будет плавно менять первое значение на второе

Один простойнет код заменит вам React, MographAE и кучу других экспрешнов для подавляющего числа задач
Проект в комментариях
Please open Telegram to view this post
VIEW IN TELEGRAM
29🔥1761
This media is not supported in your browser
VIEW IN TELEGRAM
Закрытая маска при использовании выражения Make Layers React to a Mask из поста выше будет оставлять значения второго кейфрейма внутри себя

Открыв её (я добавил дополнительную точку маске в примере справа, потом ПКМ — Mask and Shape Path — убрать галочку Closed) значения начинают меняться относительно линии path, как на видео

Проект в комментариях
🔥188
This media is not supported in your browser
VIEW IN TELEGRAM
1/3 Учить TouchDesigner — путь слабака

Под этим видео в инсте от @mustard_yeah комментаторы гадают как автор создал глитч эффект. Из предположений:
3D camera tracker и куча нулей/солидов
Blob Tracking в Touchdesigner

Пытливые умы с реддита догадались, что мустард просто накинул разных эффектов на трекерные точки... погодите, что?
🔥17
This media is not supported in your browser
VIEW IN TELEGRAM
2/3 Да, те самые крестики из 3D camera tracker в 📱 можно оставить в рендере поставив галочку "Render Track Points"

Например, так сделали в клипе на песню "Я ЕБ*Л В РОТ" великого артиста, композитора и аристократа Павла Техника

Так вот, маркеры можно не просто оставить в кадре, а еще и модифицировать различными эффектами. Для этого после трекинга внутри прекомпоза отключаем все слои с футажами и дублируем их без маркеров. Получается, что 3D camera tracker c маркерами на альфа канале и футаж будут на разных слоях.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥186
This media is not supported in your browser
VIEW IN TELEGRAM
3/3 Я, конечно же, не удержался и попробовал сам. Файл с проектом будет в комментариях

1. Снял свою собаку на телефон
2. Сгенерил маркеры эффектом 3D camera tracker
3. Скопировал футаж и отключил его в слое с трекером, чтобы оставить только маркеры на альфе
4. Применил на маркеры эффекты Minimax, Simple Choker, Fill и т.д. тут уже всё ограничивается только вашей фантазией
5. Скопировал маркеры и поменял эффекты на другие для разнообразия


Получилось сделать максимально быстро. Чтобы приблизиться к визуалу из оригинала — нужно сделать трекинг несколько раз (при этом играя с Level/Curves, чтобы маркеры слегка меняли свое поведение), менять значение Track Point Size и бесконечно экспериментировать.

Туторил с похожим эффектом на ютубе от Workbench. Ребята сделали вместо глитчей просто квадратики, но суть та же

Я завел boosty, эксклюзивов пока не планируется — только для желающих поддержать. Но попробовал привязать закрытый чат ко всем уровням подписки
#AfterEffects
2🔥658🙏3
This media is not supported in your browser
VIEW IN TELEGRAM
Чекбокс Play / Pause для After Effects

На форуме Adobe нашел экспрешн:
chk = effect("Checkbox Control")("Checkbox");
prevAnimations = 0 - thisComp.frameDuration;

for (i = 0; i <= timeToFrames(time); i++) {
if (chk.valueAtTime(framesToTime(i)) == 1) {
prevAnimations += thisComp.frameDuration;
} else {
continue;
}
}

prevAnimations;


Он позволяет контролировать чекбоксом Time Remap слоя — ставить его на паузу при выключении и продолжать проигрывать при включении.

Как сделан мой пример:
1. Анимировал счетчик и цвет у одной цифры, поместил в прекомпоз
2. Прекомпозу активировал Time Remap, добавил Checkbox Control из меню с эффектами
3. Кинул экспрешн из поста на Time Remap
4. Кинул на чекбокс экспрешн из поста выше для активации по маске
5. Продублировал слои по сетке

Мы с вами потихоньку превращаем After Effects в инструмент для генеративного искусства

Проект в комментариях
Поддержать на Boosty
🔥40💯3
This media is not supported in your browser
VIEW IN TELEGRAM
Wave warp на уровне path в After Effects

Знали бы вы сколько раз я накидывал Wave Warp в АЕ, а потом обводил это всё руками по кадрам, чтобы заработало в Lottie 🫠

Недавно нашел скрипт Tilda (0$+, Name Your Own Price), который упрощяет эту задачу: добавляет экспрешн с контроллерами на path, после чего код можно преобразовать в ключи командой Animation - Keyframe Assistant - Convert Expression to Keyframes и зарендерить в Bodymovin/BodymovinTG

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

Обязательно посмотрите страницу скрипта, там много примеров использования!

Как вы уже догадались: любой скрипт/плагин/софт работающий с векторными путями — хороший компаньон для работы с Lottie анимациями. Но не могу сказать, что есть какой-то must have скрипт, каждый из них используется ситуативно время от времени

Поддержать на Boosty
2🔥41🙏13
Notcoin объявили о конкурсе на стикеры, общие призовые ~12000$

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

-минимум 10 стикеров до 5 февраля
(нереальный дедлайн для качественной работы)
-12000$ на всех (т.е. будет всего 12 победителей по $1k или же призовых мест будет больше, но с меньшими призовыми, что просто смешно для ДЕСЯТИ стикеров)

Для сравнения в конкурсе телеграма 2021 года бюджет был $50000, сроки больше, 3 стикера от участника. В общем решайте сами, наверное есть смысл сделать что-то мемное с минимальной анимацией или вообще без анимации (разрешено правилами)

UPD В условиях: Featured on @sticker_bot (with revenue share) т.е. при выигрыше будет еще и процент с продаж. Но сроки всё еще нереальные

UPD2 Контест продлили до 12 февраля, добавили возможность загружать не только tgs, но и webp
🙏7👨‍💻3
This media is not supported in your browser
VIEW IN TELEGRAM
Сделал еще один пример с помощью Tilda — ну просто сказка, огонь и дым в пару кликов хоть для видео, хоть для Lottie 🔥

Для анимации огня под Lottie я всегда использовал auto-trace + покадровую по референсу или же какие-то простые шейпы с минимальным движением (если позволяет стилистика). На покадровую аккуратную обрисовку уходит невероятно много времени, а из-за моей криворукости еще и выглядит хуже, чем тильдой

Никому не рассказывайте! Оставьте для себя 🤫

Проект в комментариях
Поддержать на boosty
6🔥49💯4
This media is not supported in your browser
VIEW IN TELEGRAM
Продолжаю экспериментировать с выражениями в Аfter Еffects
Всё тоже самое, что в этом проекте, но цифры заменил на кружочки и анимировал Null с помощью Motion Sketch

Постоянно забываю про существование вкладки Motion Sketch, а ведь в связке с айпадом (он подключается к маку как второй экран или как дублирующий экран) можно быстро анимировать всякие разлетающиеся штуки
🔥38👨‍💻3
This media is not supported in your browser
VIEW IN TELEGRAM
Блики градиентами в After Effects

Подписчик в комментариях спросил как делаются подобные блики (для рендера в lottie, так что опустим тему эффектов АЕ вроде CC Light Sweep)

Я копирую шейп на котором нужно анимировать блик, добавляю градиент и ставлю на нем вплотную точки Opacity 0% и 100%, чтобы переход непрозрачности практически не был заметен, затем анимирую Start Point и End Point градиента.

Но почему бы просто не использовать несколько квадратов под маской? Дело в том, что lottie добавляет аниматору еще одну зону ответственности — максимальная оптимизация файла, а маски сильно бьют по производительности.
Вот статья о том как неоптимизированная lottie анимация повлияла на метрики сайта и как её исправили, я постараюсь раскрыть эту тему в будущих постах.

Мой пойнт заключается не в том, чтобы вообще не использовать маски, а чтобы минимизировать их использование

Если прямой блик не подходит — анимируем path блика руками и прячем за обводкой/другим шейпом

Поддержать на boosty
🔥59🙏8👨‍💻6
This media is not supported in your browser
VIEW IN TELEGRAM
Тригонометрия в After Effects
sponsored by ChatGPT

Спонтанно родилась идея реализовать вписанные и вневписанные в треугольник окружности в АЕ

1. Создаю окружность и 3 Null Layer, описываю задачу жпт
2. Получаю от жпт выражения на size и position круга
3. Соединяю 3 нуля линиями с помощью Create Nulls From Paths EXTENDED
4. Добавляю звезду в центре окружности, прошу у жпт выражения для size и position звезды
5. Текст не умеет работать с шейпами, поэтому для него создаю маску и привязываю path маски к path треугольника
6. Делаю трекинг видео с тремя лего колесами в Mocha и экспортирую значения position для каждого из нулей


Проект в комментариях бесплатно и без смс, он отлично организован и можно посмотреть весь код с комментариями

Лайкнуть Reels | Shorts
Поддержать на boosty
🔥56💯8👨‍💻6🙏2