Адаптивные emoji для телеграм + бесплатные исходники

Так выглядит обычный emoji в Telegram 😁
А так — адаптивный 😁

Адаптивные emoji подстраиваются под цвет интерфейса, к примеру белые линии в темной теме и черные в светлой.
Опцию с адаптивным отображением бот @Stickers предлагает сам на этапе создания нового пака emoji

В дизайне можно использовать не только линии, но и градиенты с уходом opacity в 0 — как видно на примере верхняя и нижняя части ГОВНА персонажа затемнены

В первом комментарии к этом посту я прикреплю исходники ai 📱 со скетчами и вектором, исходники aep 📱 под обычный и адаптивный форматы, tgs, json с html превью (просто до кучи, для пака нужен только tgs)

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

#lottie
#aftereffects

Оля Бузова была в ШОКЕ, когда узнала про 3D-моделирование НУЛЯМИ в After Effects

Выше уже рассказывал про работу псевдо-3D шейпа на нулях. В примере была одна кривая линия, но можно пойти дальше и попробовать собрать что-нибудь поинтересней:
∙ создаю 6 нулей — 2 находятся по центру, 4 составляют форму квадрата (оранжевый шейп на видео)
∙ последовательно соединяю нули с помощью Create Nulls From Paths Extended
∙ 2 центральных нуля разношу по оси z
∙ добавляю еще один null для анимации вращения остальных нулей

По сути это обычные шейпы с обводкой, а их формой управляет экспрешн сгенерированный скриптом Nulls from Paths в параметр path, который заставляет точки передвигаться за нулями. Следовательно после создания анимации экспрешн можно ЗАПЕЧЬ, то есть преобразовать выражение на path в ключевые кадры командой Animation - Keyframe Assistant - Convert Expression to Keyframes. После запекания всё работает даже при рендере Bodymovin-TG в формат стикера

А еще есть плагин для создания простых моделей под Lottie — Extrudalizer

В первом комментарии приложу проект After Effects 📱 и покажу другие примеры использования, найденные в сети интернет
#AfterEffects
#Lottie

Классический скринсейвер DVD-плееров в After Effects на одном экспрешне

Постоянно нахожу на reddit какие-нибудь интересные выражения, на этот раз попался код на position, который автоматически создает движение+отскок от краев композиции.
Думал быстро накидаю пример как это можно использовать, но получился целый дейлик (справа на видео)

Чекаксделано: экспрешн с разными значениями скорости и стартовой позиции на круги, круги соединяются линиями с помощью эффекта beam на солидах, анимация на кругах — colorama, продублировал и разнес в пространстве, постэффекты — signal слева, deep glow справа

Проект 📱 с этими двумя примерами в первом комментарии к этому посту

// customize speed, position and offset here
var v = 100; //velocity
var o = 0; //time offset
var i = [0,0]; //initial position

var f = (time+o) * v //function
var t = [i[0]+f, i[1]+f]; //time x/y
var d = thisLayer.sourceRectAtTime(); //dimensions
var s = transform.scale; //scale
var lw = d.width *(s[1]/100); //layer width
var lh = d.height*(s[0]/100); //layer height
var w = thisComp.width - lw; //screen width
var h = thisComp.height - lh; //screen height

// cycle count in x and y
var c = [Math.floor(t[0]/w), Math.floor(t[1]/h)];

// position in cycle for x and y
var p = [t[0] % w, t[1] % h]

// cycle isOdd ? inversed : original
var x = c[0] %2==1 ? w - p[0] : p[0];
var y = c[1] %2==1 ? h - p[1] : p[1];

[x + lw/2, y + lh/2]

#aftereffects
#expressions

Моушеры, что по выгоранию? Довольны своим текущим положением? Работаете в штате или на фрилансе? Художниками по заветам брикспейсера будем становиться или и на дядю работать норм? С NFT на пентхаус заработали? Будто бы крайне болезненная тема в последнее время: я сегодня написал человеку в поисках помощи с ригом, но диалог быстро свелся к обсуждению развития в профессии и выгорания 🐱

У меня все неплохо за исключением того, что работаю слишком много — work-life balance проебан. Еще все что связанно с lottie идет со скрипом (5 лет двигать шейпы по PSR — скажите спасибо, что еще не в дурке)

А так хочется в дополнение ко всему остальному вернуться на стоки, записывать обучалки и делать больше личных проектов

Векторные эффекты для рендера в Lottie

Возьмем для сравнения два эффекта в 📱 и 📱, накинем на любой шейп:
After Effects: Effects - Warp - Fisheye
Adobe Illustrator: Object - Envelope Distort - Make with Warp - Fisheye

Схожий результат, опции +- одинаковые, но между ними есть принципиальная разница: эффект в 📱 искажает сам path, а в 📱 он искажает пиксели. Это относиться почти к любым эффектам т.к. простыми словами Ai — это векторный редактор, а Ae — растровый.

Было бы круто использовать векторные эффекты из Ai в Ae для того, чтобы они работали при рендере в Lottie, да? — это реализуемо, но не самым очевидным путем:

1. В Ai копируем исходную иллюстрацию и добавляем на неё Envelope Distort - Warp эффект;
2. Warp преобразуем в path (Object — Expand);
3. Переносим обе иллюстрации в Ae и проставляем ключи на все параметры path;
4. Копируем все ключи path с искаженного объекта и вставляем на исходный.

Этот прием узнал из поста Pavel K
Исходники с лягушкой в первом комментарии
#aftereffects
#adobeillustrator
#lottie

Анимировал новогодний сплеш скрин для Яндекс Еды ✨
Маленький проект — моей задачей было просто немного подвигать абстрактные шейпы
After Effects + Lottie, сделано за 1 день

Поворот игрушек — анимация path
Падение гирлянды — position + экспрешн с запеканием. На самом деле некоторые экспрешны работают в Lottie, но я привык рендерить в Bodymovin-TG где они запрещены, так что на всякий случай всегда преобразую в кейферймы

За предоставленную возможность спасибо prand.tv

Овальные градиенты в After Effects

У градиентов в Adobe Illustrator 📱 есть параметр aspect ratio, который позволяет растянуть их, чем очень активно пользуются художники. К сожалению, при переносе такого градиента в After Effects 📱 параметр потеряется, его просто нет на уровне шейпов.

Исправить ситуацию можно так:
1. Растягиваем path
2. Сжимаем по одному из параметров scale

Понравилась гифка на pinterest, решил повторить в After Effects и поделиться:

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

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

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

Проект 📱 в комментариях

C Наступающим! Это был год ✨саморазвития✨ я учил новый софт, прокачивал насмотренность, пробовал себя на новых ролях в ущерб стабильной проверенной работе, о чем в целом не жалею. Надеюсь, в 2025 доберусь до ютуба (самое время сейчас, да?), тачдизайнера и сделаю что-нибудь интересное для массовой аудитории, а не как обычно для локального кружка моушн-дизайнеров

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

Использовано сегодня: 109577
Установлено сегодня: 8891
Всего использований: 19971824
Всего установок: 4239653

Смиры в анимации

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

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

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

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

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

Пост написан в контексте Lottie, так что про echo, motion blur и т.д. в другой раз
Проект 📱 в комментариях
#Lottie
#AfterEffects

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 в превью

В комментарии скину еще больше примеров + дополнительный бесплатный проект

Навалил кучу в проекте? — Не беда!

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

MoGraph в After Effects одной маской на любой параметр

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

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

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

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

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

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

Один простойнет код заменит вам React, MographAE и кучу других экспрешнов для подавляющего числа задач
Проект в комментариях

2/3 Да, те самые крестики из 3D camera tracker в 📱 можно оставить в рендере поставив галочку "Render Track Points"

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

Так вот, маркеры можно не просто оставить в кадре, а еще и модифицировать различными эффектами. Для этого после трекинга внутри прекомпоза отключаем все слои с футажами и дублируем их без маркеров. Получается, что 3D camera tracker c маркерами на альфа канале и футаж будут на разных слоях.