Динамические чарты в 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)

Time Remap на уровне кейфреймов в After Effects

FoxRetimer — платный плагин (40$), который не нужен в повседневной работе, но однажды спасет проект
Эффект Time Remap в 📱 позволяет изменять скорость и порядок воспроизведения кадров у прекомпоза. Можно ускорять или замедлять видео, менять длительность, создавать эффекты реверса, стоп-кадра или слоу-мо, управляя движением через ключевые кадры
FoxRetimer в свою очередь преобразует полученный эффект в реальные кейфреймы и удаляет time remap

Простыми словами вместо того чтобы двигать ключи руками — могу управлять ими через time remap.
В легкой анимации, где кейфреймы стоят в один ряд, я изменяю тайминг без скриптов, растягивая ключи с зажатым Alt'ом или просто их перемещая. FoxRetimer же спасал несколько раз, когда в уже готовой комплексной анимации нужно было быстро поменять тайминги и экспортировать в TGS

Поддержать на Boosty (доступ в закрытый чат)

New Gifts Released 🎁 1000⭐— 100k gifts

Сколько раз я тут рассказывал про Create Nulls from Paths в 📱? — Много.
-список альтернатив Create Nulls from Paths, которые работают без багов
-пример с проектом

А сколько было примеров реального использования? — ноль, но теперь удалось исправить ситуацию: для нового подарка в Telegram я не только сделал черновую анимацию этим методом, но и использовал полученный "каркас" в финальной анимации, преобразовав скрипт Create Nulls from Paths в ключи с помощью запекания

Анимация заняла 3 полных рабочих дня, на каркас я потратил несколько часов, всё остальное время я перетаскивал шейпы вдоль этого каркаса 💀
Как бы я не любил свою работу, двигать такое количество деталей в псевдо 3D — это каждый раз больно и очень долго.

Рисовали кукурлик и Berry on the cake, анимировал Pototsky!
С Днем знаний! 🧠

Поддержать на Boosty (доступ в закрытый чат, отвечаю на вопросы, показываю чуть больше, чем тут)

Трассировка изображения обводкой в Adobe Illustrator

Сделал 3 скина для кнопки из свежего релиза от Telegram и еще один для пака ohuenko ✨
Реализовать отпечаток мне помог ChatGPT, и даже отдал svg. Но какой смысл в этом svg, если все строуки он выдает в виде шейпа с заливкой?

Ладно, уже было смирился с мыслью, что придется это всё обводить, но вспомнил, что иллюстратор в отличии от Auto-Orient в 📱 умеет делать траcсировку строуками!
Самые важные параметры в Image Trace для подобного результата:

Mode: Black and White
Create: Strokes
Stroke: значение должно быть выше, чем ширина обводки на картинке, измерить её можно любым шейпом/линейкой
Options: Ignore white

После трассировки обязательно применить Object - Path - Simplify, чтобы очистить путь от мусорных точек

В итоге с отпечатком сработало идеально, пришлось поправить только несколько точек. На другом изображении с закрытыми путями добиться стабильного результата не удалось. Может какая-нибудь нейронка или другой инструмент умеет делать это лучше? — сообщите в комментариях

Скин N - Ninja нарисовал Миша

Поддержать на Boosty (доступ в закрытый чат, отвечаю на вопросы, показываю чуть больше, чем тут)

Боль многих аниматоров в Telegram?

Сегодня хочу поговорить о важной теме для всех, кто работает с TGS анимацией в Telegram: оптимизации. Не частая, но давящая проблема уместить анимацию в 64 кб встречается у многих в последнее время. Собственно я не стал исключением.

Эту же тему затрагивали ребята из студии "Оно и видно" в своем недавнем посте. К нему я и обратился когда встал вопрос оптимизации и немного усовершенствовал 🧑‍💻

Глобально когда вы экспортируете Lottie-анимацию из After Effects, на выходе получаете JSON-файл. Этот JSON-файл содержит всю информацию об анимации:

- Координаты
- Цвета
- Тайминги
и многое другое

Затем этот JSON-файл сжимается GZIP и получает расширение .tgs

Теперь перейдем к самому интересному — как уменьшить размер JSON-файла?

▪️Удаление лишних слоев и свойств: Каждый лишний элемент — это байты. Убирайте все, что не влияет на конечную анимацию.

▪️Минимизация ключевых кадров: Используйте как можно меньше ключевых кадров.

▪️Онлайн-компрессоры JSON: Например, lottiemizer или другие аналогичные сервисы.

▪️Ограничение точности: Уменьшение количества знаков после запятой для координат и других числовых значений.

Если вы выполнили первые три шага, и ваш файл все еще великоват, то для ограничения точности после запятой вы можете использовать скрипт форматирования JSON.
Файлик будет ниже в комментариях.

Применяя описанные методы, вы сможете значительно уменьшить размер ваших файлов, улучшить производительность. Надеюсь, этот пост был полезен!

Как я начал сотрудничать с Telegram

Спросила Виктория — отвечу всем. Тут никакого секрета нет. Со мной начали сотрудничество 14 июня 2019 года, тогда я занял призовое место в конкурсе на анимированные стикеры. Про контест узнал из канала Telegram Designers

Стикерпак, который занял призовое место: The Foods
Нарисовал и анимировал его сам. Позже я перестал рисовать и сконцентрировался на анимации, но всё же раз в год моя палка стреляет и я берусь за отрисовку какого-нибудь скина/гифта 💪
Старые стикерпаки теперь вызывают лишь испанский стыд — с тех пор уровень заметно вырос

Поддержать на Boosty (доступ в закрытый чат. отвечаю на вопросы про анимацию и after effects)

Lottie в интерфейсах: как мы оживляем 2ГИС с помощью анимаций
https://habr.com/ru/companies/2gis/articles/935296/

Саша Гончаров, моушн-дизайнер из 2ГИС, совместно с разработчиками написали статью на хабре про внедрение lottie в приложение, фреймворки, анимацию элементов интерфейса, чекайте.

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

Поддержать на Boosty (закрытый чат lottie энтузиастов 💅)