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 энтузиастов 💅)

Fake 3D с помощью Scale

Эту технику я применял в скинах для кирпичей 🧱🧱, которые делали с Линой, а также в книжке 🎁 про которую рассказывал выше

Сделал для вас пример с кубом, порядок действий такой:

1. Создал анимацию куба с помощью скрипта Nulls from Paths
2. Запёк 🧑🏿‍🍳 скрипт в кейфреймы
3. Подготовил прекомпоз со стороной куба
4. Для каждого прекомпоза добавил 2 нуля: Null 1 и Null 2 повернутый на 45 градусов, затем последовательно привязал их друг к другу. "Сторона > Null 1 > Null 2"
5. Параметр Scale у Null 1 теперь отвечает за размер стороны, а Scale у Null 2 за искажение со скосом
6. Анимировал параметры нулей так, чтобы стороны совпадали с гранями куба. Делаю это на глаз, стараясь использовать как можно меньше кейфреймов

Таким образом можно изобразить псевдо 3д анимацию и зарендерить в BodymovinTG. А для обычного Bodymovin можно использовать параметр scew вместо одного из нулей. Идейный Аниматор показал как похожим способом вращать шейпы под наклоном

В комментариях будет проект, в котором сохранены композиции со всеми этапами работы

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

Поучаствовал в моушн-челлендже от Леши, задачей было как-нибудь задвигать иллюстрацию за авторством David Mascha

↔️ Для начала я попробовал использовать Create Nulls from Paths, но этот скрипт создает крайне неудобные контроллеры для кривых.
Альтернатива есть — это бесплатный shapeRig от Ordinary Folk

🖋 Скрипт создаёт всё тот же path, контролируемый нулями, но теперь кривизна регулируется скейлом нуля! (объяснить сложно, попробуйте сами) И работает всё это очень быстро

🗂 Для того чтобы размножить линию по горизонтали использовал бесплатный плагин Repeater

Сергей собрал эту иллюстрацию в Rive, а Вальд записал видео-туториал по своему варианту

Приложу исходные файлы в комментариях к посту
Поддержать на Boosty (закрытый чат after-effects - bodymovin - lottie энтузиастов 💅)

Новые модели для подарка Mousse Cake

Наш с Линой вклад в недавний релиз — работа над скинами тортиков
Когда смотрел на YouTube обзор обновления от LEAN HUSTLE, порадовался, что он обратил внимание на то, как торт меняет перспективу, наклоняясь вперёд, а также отметил необычную супрематическую модель. Мне, как амбассадору кругов и квадратов без градиентов было очень приятно над ней работать

В этом подарке явно избыточным было делать псевдо-3D модель, но как говорится "У самурая нет цели, у самурая есть только Nulls", так что всё-таки решил эти самые нули расчехлить, чтобы "цилиндр" вел себя физически корректно. Изменение перспективы сделано ключами на параметре Zoom камеры в 📱

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

Фокусное расстояние для шейпов в After Effects

Камера 📱 влияет на то, как отображаются 3D слои, в том числе на нули созданные Nulls from Paths для контролирования точек шейпа. Даже если не добавить — работает камера по умолчанию.

Дефолтная камера дает искажение перспективы, если нужна плоская/изометрическая/ортогональная проекция — обязательно добавляйте камеру с параметром Zoom 10000+ или измените настройки дефолтной камеры композиции

Изменяя параметр Zoom одновременно с Position можно добиться эффекта Dolly Zoom 📹

«Долли-зум» (dolly zoom) — это приём в кинематографе, когда камера одновременно движется (долли) вперёд или назад, а объектив (зум) приближает или отдаляет изображение в противоположном направлении. Этот эффект создаёт сюрреалистическое ощущение, при котором объект остаётся прежнего размера, а фон искажается, будто растягивается или сжимается.

Для того чтобы позиция подстраивалась автоматически под зум использую код

x = value[0];
y = value[1];
z = -thisComp.layer("Camera 1").cameraOption.zoom;
[x, y, z]

В комментарии скину проект 📱 в котором будет: тестовая композиция с примером из поста, сетап для торта Mousse Cake, запеченный финальный шаблон Mousse Cake

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