Векторный Mesh Warp
да, это спойлер на еще не вышедшие скины для подарка в Telegram

Восполняем дефицит отсутствие векторных эффектов в 📱
Выше я уже рассказывал как использовать 📱 для анимации на примере Fisheye, в этот раз рассмотрим Mesh — способ деформировать объект с помощью сетки по аналогии с растровым Mesh Warp в Ae.
Зачем? — чтобы рендерить векторные Lottie анимации. Этот инструмент сэкономит сотни часов рабочего времени.

1. Дублирую исходный объект. Искажаю с помощью
Object - Envelope Distort - Make with Mesh с сеткой 1x1

2. Преобразую эффект в векторные пути
Object - Expand

3. Переношу всё в After Effects. Ставлю ключи на все path, копирую их с первого на второй, после чего удаляю искаженный объект т.к. больше он нам не пригодится

4. Финальная анимация, в которой я использовал этот прием

Поддержать на boosty

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

В первую очередь касается MacOS — по-другому просто не работает
На винде благодаря этому приему не уходит фокус с Ae, но в целом и без зажатия получится

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

Заметки про эффекты для рендера в Lottie. Часть 1

Общий stroke для дыма делаю так: копирую исходные слои и добавляю обводку, располагаю их в самом низу.

Можно добавить общий stroke для группы шейпов, если вынести его выше групп по иерархии, но у такого способа есть 2 больших минуса:
1. это очень плохо сказывается на производительности json файла
2. все шейпы дыма придется создавать в одном слое, что не совсем удобно (но в моем примере сделано именно так т.к. когда-то я пытался решить задачу общей обводкой)

Файл 📱 с дымком в комментах
Поддержать на Boosty

Заметки про эффекты для рендера в Lottie. Часть 2

Подход к эффектам может быть абсолютно разным: сделать сразу шейпами, нарисовать покадровый скетч, взять референс и обводить по нему сверху
В этом примере я применил auto-trace по этому футажу

1. Превращаю видео в шейпы с помощью Layer - Auto-trace. С настройками трассировки нужно поиграть так, чтобы не было лишних мусорных точек. Auto-trace создает не шейп, а маску на солиде — её нужно просто скопировать в path шейпа. Чищу от лишних ключей и точек для оптимизации json файла

2. Свечение вокруг шейпа сделано с помощью 3х обводок разной толщины с непрозрачностью 22%

3. Для придания дополнительного Glow-эффекта создал окружность с радиальным градиентом, которую в анимации сжал до формы овала (чтобы максимально повторить форму вытянутой линии)

4. Поместил в прекомп, продублировал 2 раза, сместил по времени, поменял scale/rotation

Файл 📱 с энергетической хуйней в комментариях!
Поддержать на Boosty

Заметки про эффекты для рендера в Lottie. Часть 3

Auto-trace в любом случае создаст лишние точки — нужно убирать их руками.

Плагин Penpal сделает это автоматически по аналогии с Simplify в иллюстраторе, но его я не тестировал (45 баксов на дороге не валяются)
Trace можно сделать кадр за кадром в 📱 — в некоторых случаях это может быть более удобным способом.

Меньше точек — меньше данных нужно хранить в json файле
Меньше точек — меньше ресурсов процессора устройства задействуется для рендера json файла.
УДАЛИЛ ТОЧКИ — НЕ ОСТАВИЛ ЭКОЛОГИЧЕСКИЙ СЛЕД

Поддержать на Boosty

Сделал новые скины для подарка 🎁, рисовала Elena Pomaskina. Апгрейд уже доступен в Telegram
Мы делали только эти, остальные скины рисовали другие ребята

Из любопытных технических деталей:
-в 2077 я использовал Knife в 📱 для нарезки цифр на фрагменты

-в 1853 линии вокруг букв сделаны trim path + offset, но сами шейпы я предварительно сделал с помощью Object - Path - Offset Path в 📱 (Offset на шейпах в Ае не поддерживается BodymovinTG)

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

Залетел помочь на проект к ребятам из студии W h Ā t ?, это была графика для форума от ozon. Cтопмоушн, шейпы, текст — всё как я люблю.

Мне больше всего нравится шот с коробкой, ниже расскажу как я сделал её риг в 📱

Итак, коробка собрана с помощью композиций повернутых в 3D пространстве, я думаю с этим ни у кого никаких вопросов нет а если есть, ловите туториал по сборке подобного на youtube

Я расскажу только про Advanced ✨ techniques:

1. Фейковый шейдинг на экспрешнах
Каждая боковая часть превращается в темную внутреннюю часть, когда отворачивается от нас с помощью эффекта Fill и кода на effect opacity:

rot = thisComp.layer("Null 2").transform.yRotation % 360;
if (rot < 0) rot += 360;
(rot >= 180 || rot <= 0) ? 0 : 100;

//этот экспрешн резко меняет значение opacity с 0 до 100 при достижении обозначенных значений null по Y Rotation

Каждая боковая часть уходит в тень при переходе из левой части композиции в правую, с помощью эффекта Tritone и кода на effect opacity:

rot = thisComp.layer("Null 2").transform.yRotation % 360;
if (rot < 180) rot += 360;
linear(rot, 225, 270, 100, 0)

//этот экспрешн плавно меняет значение opacity с 0 до 100 при достижении обозначенных значений null по Y Rotation

2. 3D Bend на крышке коробки
До недавнего времени я не знал об этом, но оказывается в 📱 можно сгибать 3D слои, прямо как бендом в Cinema 4D

Опция Curvature в Geometry Options появляется только у пре-композиций, на других слоях не работает.
К сожалению гибких настроек нет, но в моем случае большего и не нужно

Скачать проект можно в комментариях к посту
Поддержать на Boosty

Динамические чарты в After Effects

Нашел этот проект на reddit, рассказываю как с ним работать:
📱 берет данные из .tsv/.csv файла, чтобы его подготовить в архиве есть шаблон data template.ods
если нужно большое строк — добавляете колонку в .tsv, а в .aep просто копируете 3 верхних слоя (можете посмотреть на отличия между оригинальными файлами от автора и моими)

На слое Control Layer есть тонкая настройка таблицы, все цвета и шрифты кастомизируются. Для того чтобы проверить работоспособность всего этого попробовал добавить седьмую строку в шаблон — всё работает отлично

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

Скачать проект можно в комментариях к посту
Поддержать на Boosty

Перенос векторных градиентов в After Effects

Импорт ai/svg в 📱 зачастую сопровождается пожаром задней точки из-за криво перенесенных градиентов, я расскажу как потушить его наиболее эффективным способом. Известные мне методы переноса иллюстрации в After Effects:

1. Нативный импорт файла > Create Shapes from Vector Layer
Просто забудьте, работает криво не только в отношении градиентов: еще и не соблюдает структуру группировки, создает лишние слои и т.д. Возможно в АЕ 2025 пофиксили, я не знаю, в любом случае самый времязатратный вариант

2. Overlord
Плагин для переноса шейпов в 📱 из 📱
Очень часто криво переносит градиенты (start point и end point улетают за пределы композиции при импорте), в остальном очень удобный инструмент
Как я понял уже не продается, но народная версия с легкостью найдется

3. Overlord 2
Переносит градиенты из 📱 лучше, но в моем примере всё равно допустил косяк. Незаменим при работе с фигмой.
Официальная страница $75, ломаной версии нет

4. Overlord + Gradiator
Мой выбор — ничего не работает лучше, чем эта связка. Gradiator входит в набор SubScribe от Astute Graphics. В нем есть магическая кнопка Reset, которая сбрасывает координаты градиентов под капотом иллюстратора. После Reset'а как обычно переношу оверлордом.
Официальная страница €149.00 в год, можно регистрировать недельную триалку на временную почту бесконечно или найти ломаную (учитывайте, что Gradiator появился недавно — в старых версиях его нет)

На картинке я не менял ничего, лишь выбирал иной способ импорта
В общем выбирайте вариант 3, если есть деньги на плагин и 4, если их нет. Замороченно, но оно того стоит: без этих плагинов иногда приходиться убивать часы на воссоздание иллюстрации в нашей любимой программе для анимации

Поддержать на Boosty

Я слил подарки для Telegram 🥲

Вчера вышли скины для Cupid Charm, но еще 15 июня по пабликам разлетелась ссылка на неопубликованный пак, и моя личка утонула в вопросах и обвинениях.

Да, я действительно слил пак до релиза, но это случилось непреднамеренно.
Всё из-за банальной невнимательности: 15 июня работал над анимацией огня, зашел в свой паблик, чтобы взглянуть на пост про скрипт Tilda. Разглядывая скин с огнем ❤️ из Cupid Charm, случайно отправил его в комментарии к тому посту забыв, что нахожусь не в "Избранном". Кто-то из вас подхватил ссылку спасибо 🔫, и пак улетел в сеть.

Теперь я выстроил работу так, чтобы снизить до нуля возможность повторения такого инцидента.
Обидно, но уже отпустил ситуацию — зла на меня, вроде, не держат, ведь это было не нарочно.
Для тех кто не понимает о чем вообще речь: простыми словами я жестко нарушил условия NDA

А еще на момент слива не спал 36 часов, так что делаем вывод: кранчи — зло 💀

📱 Пак рисовали: Миша, Света, Лена, Настя
📱 Анимировали: я, Саша, Паша, Рустам. В посте только мои анимации
Если есть вопросы — задавайте в комментах

Снупдог выпустил клип про подарки в Telegram 🫢

Сделали с Линой некоторые из рук для вчерашнего релиза Снупдога. Нам не удалось взять ни одного подарка, потому что их раскупили за 32 секунды 😭

Лина у себя напишет про отсылки в паке, я же расскажу про некоторые любопытные приемы в 📱, использованные тут:

🧑🏿‍🍳 кольца при сгибании пальцев не просто уменьшаются, а сдвигаются в пространстве. В BodymovinTG недоступен параметр skew, но можно воссоздать похожее искажение сделав дополнительный null под углом относительно дочернего слоя

🧑🏿‍🍳 карта на второй руке оказывается то над средним, то над безымянным пальцем, для этого делаю копию слоев и включаю/выключаю hold ключом по opacity

🧑🏿‍🍳 блики на очках и часах — это комбинация шейповых звезд, trim path и приема с градиентом, о котором писал тут

🧑🏿‍🍳 винтажный эффект сделан при помощи hold ключей на position и opacity шейпов

🧑🏿‍🍳 на скине с отсылкой к Олимпийским играм на самом деле 3 руки: красная, синяя и белая. Красная и синяя находятся под маской, которая привязана к белой руке

Я могу сделать отдельный проект с примером по какому-либо из пунктов, если это будет интересно
Поддержать на Boosty

Pavlek поделился бекстейджем работы над лоурайдером для Снупа.
Для референса использовалась собранная им 3D модель велосипеда и сгенерированная с помощью PartParker от Nvidia на основе скетча 3D-модель тачки

Т.е. пайплайн создания анимации примерно такой:
1. Нарисовать скетч будущего подарка 📱
2. Сделать 3D модель и черновую анимацию к ней 📱📱
3. Нарисовать векторную иллюстрацию 📱 на основе этой 3D модели
4. Анимировать иллюстрацию, взяв за референс 3D анимацию из 2 пункта 📱
5. Готово 🎁🎁, вы прекрасны

Это один из вариантов, никто не запрещает нарисовать модель от руки прямо в Ae и анимировать там же, но добиться должного качества будет куда сложнее

Я знаю, что вы цените в подарках маленький саплай, редкую модель, черный фон и как следствие высокую стоимость, но посмотрите на это и с другой стороны: картинка ценна сама по себе, в неё вложен огромный труд — художники путем проб и ошибок учились работать с Lottie на протяжении 5+ лет, параллельно прокачиваясь в отрисовке, анимации, моделинге, я уже молчу про бэкграунд: за плечами у многих много лет работы в моушне/дизайне/покадровой анимации. Лина запершись в темной кладовке и обложившись пластинками Снупа, досконально изучала его биографию 24 часа в сутки на протяжении месяца — осознаете что стоит за этими картинками? 😶
Команда художников подарков — словно 3-нанометровые процессоры от TSMC: к ним можно подобраться близко, но обогнать пока никому в мире векторной анимации не удалось 🎁

На следующей неделе я опубликую список всех причастных к официальным подаркам/emoji/стикерам авторов, которые ведут свои каналы
Поддержать меня на Boosty (у нас закрытый чат, где обсуждаем нюансы lottie)
Подписаться на Pavlek'а

Кто рисует подарки, emoji и стикеры для Telegram? Список каналов

Дисклеймер: не нужно писать авторам с вопросами в духе "когда подарки?" — вам не ответят. Никаких инсайдов не знают, может и вовсе не прочитают сообщение из-за отсутствия времени, относитесь ко всем с уважением. Авторы не работают в Telegram, а сотрудничают как фрилансеры
Мы никак не участвуем в разработке NFT, кроме визуальной составляющей

Подписаться сразу на всех можно добавив эту папку 👈

Каналы, на которых есть обучающие материалы для художников / аниматоров:
1. оно и видно https://tg-me.sbs/onoividno | Иллюстрация + Анимация | Emoji: 👀🌷😎 😀
На канале очень много статей как для художников, так и для аниматоров (читайте с первых постов)
———
2. Pototsky! https://tg-me.sbs/pototsky | Анимация | Gifts: 🎁🎁 Emoji: 🤡
Канал про анимацию и моушн-дизайн, в том числе про разработку гифтов
———
3. PK Animated Stickers https://tg-me.sbs/pkhart | Иллюстрация + Анимация| Gifts: 🤡🤡🤡 Emoji: 😎
Есть мини гайды и статьи (листать до старых постов — там много интересного)
———
4. Идейный Аниматор | https://tg-me.sbs/IdeaAnimator | Иллюстрация + Анимация| Gifts:🎁🎁🎁 Emoji: ⭐
Начал делиться своей базой Lottie-Friendly эффектов и приемов для анимации. Любит пиксели

Каналы-портфолио, невошедшее в релиз, рассказы про отсылки, черновики, скетчи, лайфстайл:
5. zhgun nft https://tg-me.sbs/zhgunft | Иллюстрация + Анимация | Gifts: 🐸🧑‍🚀❤🎀
Создал легендарного Plush Pepe , нарисовал Утю — маскота Telegram. У Чеснока есть с ним интервью
———
6. кукурлик https://tg-me.sbs/qqrlck23 | Иллюстрация | Gifts: 🥚 ❤🎁
Тоже недавно дала интервью
———
7. stegworks https://tg-me.sbs/stegworksme | Иллюстрация + Анимация | Gifts: 🎁 Emoji: 🥲😼😡
Анимирует NFT стикеры. Анимировал MOG и KEKEC. Любит делать пиксельарт
———
8. Shibi https://tg-me.sbs/stickers_origash | Иллюстрация + Анимация | Gifts: 🎁 Emoji: 🥺😊
———
9. Xstickers https://tg-me.sbs/Xstickers | Иллюстрация | Gifts: 🎁 Emoji: 🔥💗💋
———
10. Berry on the cake https://tg-me.sbs/berryonthecake | Иллюстрация | Gifts: 🎁🎁🎁🎁
Серый кардинал этого списка. Куча работ от первых анимированных стикеров с вишней 😉 до самых крутых подарков. Нарисовала больше 45 подарков
———
11. HK https://tg-me.sbs/HK_nikita_konyukhov | Иллюстрация + Анимация | Gifts: 🎵❤ 🤡🥚
———
12. Pavlek https://tg-me.sbs/pavleksanimations | Иллюстрация + Анимация | Gifts:🎁🎁🎁 Emoji:🔥
КОГДА НОСКИ???
———
13. frame by tween https://tg-me.sbs/frame_by_tween | Иллюстрация + Анимация | Emoji: 🤩😋🤡😉
Мастер покадровой анимации. Сделал эффект нажатия на ту самую звезду для донатов⭐ (жмите почаще)
———
14. Домик Ткача https://tg-me.sbs/tkach2d | Иллюстрация | Gifts: 🎁💀🔮 Emoji: 🥳
———
15. serafuzzya https://tg-me.sbs/serafuzzya_art | Иллюстрация + Анимация | Gifts:🌹💎❤🎁
———
16. Alena ^._.^ Sofina https://tg-me.sbs/alenkasofina | Иллюстрация + Анимация | Emoji: 👀🫠😂🥰
Дизайнер в Студии Артемия Лебедева
———
17. Made by Garacia https://tg-me.sbs/madebygaracia | Иллюстрация + Анимация | Gifts:🎁🎁 🎁🎁
———
18. Mojlo.chok https://tg-me.sbs/mjlchk | Иллюстрация + Анимация | Gifts: 🎁🍲 Emoji: 🚀🐍
———
19. From RM https://tg-me.sbs/fromRM | Иллюстрация + Анимация | Emoji: 👌🦶👂👃
———
20. TUSA team https://tg-me.sbs/tusateam | Иллюстрация + Анимация | Gifts: 🤡🕯 Emoji: 😁📼
Создатели набора стикеров с популярным персонажем Donut
———
21. VOLGAGLOW https://tg-me.sbs/volgaglow | Иллюстрация + Анимация | Gifts: 🎁 🎇🍄Emoji: ☺
———
22. rona.ivanova https://tg-me.sbs/ivanovarona | Иллюстрация + Анимация | Gifts: 🥚🎅💐🥚
———
23. KOGOS.tgs https://tg-me.sbs/kogos_ae | Иллюстрация + Анимация | Gifts: 💀 Emoji: 😇🫦🦁
———
24. Krasi stickers https://tg-me.sbs/Elinaillstrtr | Иллюстрация + Анимация | Gifts: 🙂 Emoji: 😆🧘😘
———
25. Paul Creates https://tg-me.sbs/PaulCreates | Иллюстрация + Анимация | Gifts: 🩵🥚 Emoji: 🤨

И бонусом: канал креативного директора Telegram, про которого вы и так наверняка знаете
ohuenko https://tg-me.sbs/ohuenko

Гифтов и emoji слишком много, около каждого автора указал только несколько;
Над одним подарком могли работать десятки людей, так что не удивляйтесь повторам в списке;
Это далеко не все создатели стикеров и подарков

Добавить папку со всеми каналами 👈

Перенос сплайнов Cinema4D в шейпы After Effects

Навайбкодил Python скрипт для Cinema4D, который переносит сплайны (с учетом анимации и камеры) в формат svg для последующего переноса в 📱
Тема вообще никак не освещена в интернете, т.к. нужды в таком виде экспорта ни у кого нет. Кроме lottie/bodymovin извращенцев

Я еще не придумал где это применить, по идее можно поменять свой пайплайн и изначально собирать всё в 3D. Mad Rabbit делал нечто подобное в MOI 3D еще в 2020, но там был экспорт статики

Протестировал пока на примитивах с анимацией вращения, буду пробовать еще, если что отпишусь с апдейтом, а пока процесс такой:

1. Создал в 📱 параметрический сплайн, перевел в редактируемый, добавил анимацию вращения и камеру

2. Запустил скрипт (extensions - script manager) — получил SVG с кадрами

3. Дальше есть 2 пути: добавить каждый кадр отдельным слоем в 📱 или использовать полученный кадры для анимации path. Используя каждый кадр мы получим крайне неоптимизированный и тяжелый json, думаю можно применить для простых иконок или в стоп-моушн стилизации. В остальных случаях стоит оставить один слой и копировать path кейфреймы из svg файла (в прикрепленный aep файл положил оба варианта)

До сегодняшнего дня я думал, что это нереализуемо в C4D. У меня получалось экспортировать линии с помощью toon shader, но они создаются с помощью трассировки граней, мой же скрипт переносит честный сплайн: такой, каким он и задумывался в Cinema4D

Скрипт, c4d, ai, ae файлы в комментариях к посту
Поддержать на Boosty (доступ в закрытый чат, где даем друг другу советы по моушну/анимации/ae/lottie)