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
Подписчик в комментариях спросил как делаются подобные блики (для рендера в 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
Спонтанно родилась идея реализовать вписанные и вневписанные в треугольник окружности в АЕ
Проект в комментариях бесплатно и без смс, он отлично организован и можно посмотреть весь код с комментариями
Лайкнуть Reels | Shorts
Поддержать на boosty
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
This media is not supported in your browser
VIEW IN TELEGRAM
База по градиентам для Lottie 1/2
Несколько раз просили рассказать про градиенты в After Effects в контексте Lottie, собрал всю известную мне информацию
Коллеги, если с чем-то не согласны — пишите в комментариях
• Работают все шейповые градиенты: Gradient Fill, Gradient Stroke в режимах linear, radial;
• Для переноса шейпов без/с градиентами из Ai/Figma существует плагин Overlord, еще есть AEUX для переноса из Sketch/Figma (его не тестировал);
• Работу JSON нужно проверять во вкладке Preview плагина Bodymovin. А так же тут: Web, Web, iOS. Тестировать всегда, в особенности когда были использованы градиенты
Я собрал проект по максимуму использовав все возможности градиентов, будет в комментариях к следующему посту
Возможности:
Поддержать на boosty
Несколько раз просили рассказать про градиенты в After Effects в контексте Lottie, собрал всю известную мне информацию
• Работают все шейповые градиенты: Gradient Fill, Gradient Stroke в режимах linear, radial;
• Для переноса шейпов без/с градиентами из Ai/Figma существует плагин Overlord, еще есть AEUX для переноса из Sketch/Figma (его не тестировал);
• Работу JSON нужно проверять во вкладке Preview плагина Bodymovin. А так же тут: Web, Web, iOS. Тестировать всегда, в особенности когда были использованы градиенты
Я собрал проект по максимуму использовав все возможности градиентов, будет в комментариях к следующему посту
Возможности:
• Можно добавлять несколько градиентов поверх друг друга, тем самым создавать сложный шейдинг, добавлять блики
• Анимировать Start Point и End Point градиента, перемещая его по шейпу
• Анимировать сами цвета градиентов
Поддержать на boosty
7🔥30👨💻5
База по градиентам для Lottie 2/2
Неподдерживаемые фичи:
Баги/проблемы:
Поддержать на boosty
Неподдерживаемые фичи:
• Color Midpoint — контроллер в виде ромбика между цветами градиента. Можно обойтись без него добавив больше контроллеров цвета/непрозрачности
• Aspect Ratio aka овальные градиенты не поддерживаются даже на уровне шейпов в Аe, не то что в Lottie. Как выкрутиться показал в этом посте
Баги/проблемы:
• Вместо цветного градиента рендерится черно-белый. Сохраните проект и зарендерите еще раз
• Градиенты всё равно отображаются с неверными цветами? — проверьте названия градиентов, они должны начинаться со слова Gradient, попробуйте заменить цифру в названии "Gradient Fill 1". Для автоматизации процесса переименовывания градиентов (каждому присваивается индивидуальное название) есть скрипт, скину его в комментарии
• При переносе через Overlord в Аe слетают точки градиента. Решения:
-поправить точки Start Point, End Point в Аe (иногда они находятся далеко за пределами композиции)
-заново провести градиент в Ai, после чего он перенесется корректно
-плагин для Ai Astute Graphics, панель Gradiator, кнопка Reset решит проблему (боже, напишите бесплатный скрипт с этой функцией 🙏) способ обнаружил sokol.dsgn
• "Лесенки" на градиентах с непрозрачностью это особенность рендера, выглядит немного по-разному в зависимости от операционной системы
Поддержать на boosty
6🔥28🙏7
This media is not supported in your browser
VIEW IN TELEGRAM
Анимировал сет из 100 подарков для Telegram
Если пропустили — в телеграм теперь есть возможность дарить подарки и конвертировать их в NFT
Перекрашивать всё это та еще боль т.к. нормальных инструментов для массовой замены цветов в Ае не завезли. Существующие скрипты, например Colors, могут обнаруживать и менять цвета в эффектах, но не в шейповых градиентах 💀
Рисовал Миша
Если пропустили — в телеграм теперь есть возможность дарить подарки и конвертировать их в NFT
Перекрашивать всё это та еще боль т.к. нормальных инструментов для массовой замены цветов в Ае не завезли. Существующие скрипты, например Colors, могут обнаруживать и менять цвета в эффектах, но не в шейповых градиентах 💀
Рисовал Миша
3🔥51👨💻7🙏2💯1
This media is not supported in your browser
VIEW IN TELEGRAM
Сетап карусели в After Effects
Подписчик делал подобную карусель и задал вопрос насчет камеры, всё это вылилось в мой собственный сетап с разными любопытными приемами. Проект📱 можно скачать в комментариях к посту
Про камеру: если в проекте есть 3D слои или эффекты, которые работают в 3D (напр. CC Cylinder, CC Sphere) — начинает работать дефолтная камера, даже если камеру не создавали. По умолчанию она дает искажение перспективы, что неуместно во многих ситуациях, особенно когда нужно анимировать UI/текст. Добавив камеру с высоким фокусным расстоянием, например 20000 (параметр zoom) мы приблизимся к ортографической проекции
Ориентация карточек: карточки вращаются относительно Null Object, есть несколько способов сохранить их ориентацию в пространстве:
1. Код на X Rotation. Карточки игнорируют поворот родительского слоя по X, но поворачиваются с помощью дополнительного нуля
2. Layer - Transform - Auto-Orient - Orient Towards Camera
карточки всегда смотрят в камеру, как бы ни поворачивались родительские слои, позволяет создать интересный спиральный скролл
Исчезновение дальних плашек: работает за счет выражения на opacity (смотреть в проекте), которое увеличивает значение в зависимости от приближения к камере
Поддержать на boosty
Подписчик делал подобную карусель и задал вопрос насчет камеры, всё это вылилось в мой собственный сетап с разными любопытными приемами. Проект
Про камеру: если в проекте есть 3D слои или эффекты, которые работают в 3D (напр. CC Cylinder, CC Sphere) — начинает работать дефолтная камера, даже если камеру не создавали. По умолчанию она дает искажение перспективы, что неуместно во многих ситуациях, особенно когда нужно анимировать UI/текст. Добавив камеру с высоким фокусным расстоянием, например 20000 (параметр zoom) мы приблизимся к ортографической проекции
Ориентация карточек: карточки вращаются относительно Null Object, есть несколько способов сохранить их ориентацию в пространстве:
1. Код на X Rotation. Карточки игнорируют поворот родительского слоя по X, но поворачиваются с помощью дополнительного нуля
-thisComp.layer("Null 1").transform.xRotation
2. Layer - Transform - Auto-Orient - Orient Towards Camera
карточки всегда смотрят в камеру, как бы ни поворачивались родительские слои, позволяет создать интересный спиральный скролл
Исчезновение дальних плашек: работает за счет выражения на opacity (смотреть в проекте), которое увеличивает значение в зависимости от приближения к камере
Поддержать на boosty
Please open Telegram to view this post
VIEW IN TELEGRAM
5🔥57🙏8👨💻4 4
This media is not supported in your browser
VIEW IN TELEGRAM
Автоматизированный Text Box в After Effects
Никогда такого не было, и вот опять: в очередной раз поиск решения самой, казалось бы, примитивной задачи в After Effects📱 превращается в увлекательное приключение в глубины интернета
Запрос в гугле Auto-Resize Text Box After Effects выдает сотни туториалов: вот статья от motion array, видео на 150к просмотров про text box на экспрешнах, еще одно видео про text box, но уже помощью эффектов.
Спасибо, конечно, но есть нюанс: эти решения меняют высоту бокса при анимации букв, да и без анимации боксы будут разных размеров в зависимости от того есть ли в словах буквы с выносными элементами или нет. В некоторых обучалках сознательно используют прописные буквы, чтобы скрыть этот недостаток⚰️
К вашему счастью нашелся энтузиаст, который написал код для бокса, расчеты которого основаны на размере текста без учета выносных элементов, а не просто height и width текстового слоя, да еще и с удобными контроллерами.
Статья с бесплатным проектом и видео (у него почти нет просмотров) или просто ссылка на проект
Чекайте и другие статьи, пишет про автоматизацию, выражения в АЕ (англ. яз)
UPD Подписчик написал, что в АЕ2025 добавили пресет, который работает корректно✨
Поддержать меня на boosty
Никогда такого не было, и вот опять: в очередной раз поиск решения самой, казалось бы, примитивной задачи в After Effects
Запрос в гугле Auto-Resize Text Box After Effects выдает сотни туториалов: вот статья от motion array, видео на 150к просмотров про text box на экспрешнах, еще одно видео про text box, но уже помощью эффектов.
Спасибо, конечно, но есть нюанс: эти решения меняют высоту бокса при анимации букв, да и без анимации боксы будут разных размеров в зависимости от того есть ли в словах буквы с выносными элементами или нет. В некоторых обучалках сознательно используют прописные буквы, чтобы скрыть этот недостаток
К вашему счастью нашелся энтузиаст, который написал код для бокса, расчеты которого основаны на размере текста без учета выносных элементов, а не просто height и width текстового слоя, да еще и с удобными контроллерами.
Статья с бесплатным проектом и видео (у него почти нет просмотров) или просто ссылка на проект
Чекайте и другие статьи, пишет про автоматизацию, выражения в АЕ (англ. яз)
UPD Подписчик написал, что в АЕ2025 добавили пресет, который работает корректно
Поддержать меня на boosty
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥47👨💻14 7
This media is not supported in your browser
VIEW IN TELEGRAM
Автоматизированные Text Animators в After Effects
Выбор отображаемого слова/предложения слайдером:
Менять слова ключами на source text — это непередаваемая боль: расставлять кейфреймы долго, весь текст целиком не просмотреть, при изменении стиля одного слова другие не изменятся
Предлагаю заменять слова добавив слайдер и следующий код:
split(" ") — это разделитель. С ним слова будут отделяться по одному, если нужна группировка нескольких слов, можно использовать разделитель split("|"), для разделения по предложениям — точку split(".") думаю логика ясна
Автоматизация Text Animators при изменении значения слайдера:
Например хочется добавить анимацию при каждой смене слова. Конечно, можно сделать руками, но зачем бы я тогда писал этот пост, да? Выбираю текстовый аниматор opacity, ставлю 2 ключа: от 0 до 100% и добавляю выражение:
теперь каждый раз, когда на таймлайне встречается ключ слайдера — анимация opacity будет воспроизводиться от 0 до 100%
в примере добавил еще несколько аниматоров
UPD Подписчик и автор канала AE2 | Extension After Effects дополнил пост своей версией с заменой текста на основе маркеров (удобно управлять текстом прямо на таймлайне)
Проект📱 в комментариях к посту
Поддержать на boosty
Выбор отображаемого слова/предложения слайдером:
Менять слова ключами на source text — это непередаваемая боль: расставлять кейфреймы долго, весь текст целиком не просмотреть, при изменении стиля одного слова другие не изменятся
Предлагаю заменять слова добавив слайдер и следующий код:
t=thisComp.layer("text").text.sourceText;
word=t.split(" "); n = Math.floor(effect("Slider Control")("Slider"));
word[n]
split(" ") — это разделитель. С ним слова будут отделяться по одному, если нужна группировка нескольких слов, можно использовать разделитель split("|"), для разделения по предложениям — точку split(".") думаю логика ясна
Автоматизация Text Animators при изменении значения слайдера:
Например хочется добавить анимацию при каждой смене слова. Конечно, можно сделать руками, но зачем бы я тогда писал этот пост, да? Выбираю текстовый аниматор opacity, ставлю 2 ключа: от 0 до 100% и добавляю выражение:
txt=effect("Slider Control")("Slider");
nk=txt.nearestKey(time);
nki = nk.time>time ? nk.index-1 : nk.index;
valueAtTime(time - txt.key(nki).time)
теперь каждый раз, когда на таймлайне встречается ключ слайдера — анимация opacity будет воспроизводиться от 0 до 100%
UPD Подписчик и автор канала AE2 | Extension After Effects дополнил пост своей версией с заменой текста на основе маркеров (удобно управлять текстом прямо на таймлайне)
Проект
Поддержать на boosty
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥31 8🙏3
This media is not supported in your browser
VIEW IN TELEGRAM
Новый подарок для Telegram и 3D в Lottie
Павел Дуров рассказал о девяти новых подарках ко дню святого Валентина, а уже спустя несколько часов их раскупили. Я не успел купить ничего, но поучаствовал в создании одного из них — анимировал кулон в форме сердца. А нарисовал его Миша
Один из самых популярных вопросов касаемо Lottie: как делается псевдо-3D? Как и всё остальное — шейпами, а если ответить более детально, есть несколько подходов:
1. Умение рисовать и понимать построение формы
Тут всё понятно, аниматор с подобными скиллами может самостоятельно отрисовать необходимые ключевые кадры. Я поворачиваю простые симметричные элементы просто дорисовывая и перемещая шейпы, хоть и не обладаю хорошими навыками иллюстратора/художника
2. 3D референс
Ключ для кулона сделал в Cinema4D, футаж с анимацией импортировал в АЕ и воссоздал ключ шейпами. Иногда приходится ставить ключи на path в каждом кадре — это нормально (в момент поворота ключа). А вот для наклона ключа в самом начале проставил кейфреймы только для начальной и конечной позы.
В старом посте рассказывал как для анимации emoji пользовался референсом, который сгенерировала нейросеть
3. Генерация 3D модели
Подходит для простых геометричных моделей
• 3D шейпы с помощью Null From Paths
• Плагин Extrudalizer
Главный минус — анимацию придется запекать, а потом чистить от ненужных кейфреймов. Теоретически я мог сделать ключ именно так, но не факт, что влез бы в рамки 64кб.
Поддержать на boosty
Павел Дуров рассказал о девяти новых подарках ко дню святого Валентина, а уже спустя несколько часов их раскупили. Я не успел купить ничего, но поучаствовал в создании одного из них — анимировал кулон в форме сердца. А нарисовал его Миша
Один из самых популярных вопросов касаемо Lottie: как делается псевдо-3D? Как и всё остальное — шейпами, а если ответить более детально, есть несколько подходов:
1. Умение рисовать и понимать построение формы
Тут всё понятно, аниматор с подобными скиллами может самостоятельно отрисовать необходимые ключевые кадры. Я поворачиваю простые симметричные элементы просто дорисовывая и перемещая шейпы, хоть и не обладаю хорошими навыками иллюстратора/художника
2. 3D референс
Ключ для кулона сделал в Cinema4D, футаж с анимацией импортировал в АЕ и воссоздал ключ шейпами. Иногда приходится ставить ключи на path в каждом кадре — это нормально (в момент поворота ключа). А вот для наклона ключа в самом начале проставил кейфреймы только для начальной и конечной позы.
В старом посте рассказывал как для анимации emoji пользовался референсом, который сгенерировала нейросеть
3. Генерация 3D модели
Подходит для простых геометричных моделей
• 3D шейпы с помощью Null From Paths
• Плагин Extrudalizer
Главный минус — анимацию придется запекать, а потом чистить от ненужных кейфреймов. Теоретически я мог сделать ключ именно так, но не факт, что влез бы в рамки 64кб.
Поддержать на boosty
27🔥62 10🙏5👨💻4
This media is not supported in your browser
VIEW IN TELEGRAM
Echo + Transform в After Effects
Идея пришла, когда писал пост про Time Blend FX
Постараюсь описать кратко: эффект echo оставляет за собой копии, но для этого нужно передвинуть объект, а я хотел двигать копии оставляя объект на месте. Решение такое:
Таким образом копии echo улетают наверх за счет передвижения футажа вниз, но он остается на месте т.к. мы компенсируем движение с помощью position
Раскрасил композицию с помощью ключей на Fill+Stroke, накинул Fast Blur в режиме Vertical и сверху Simple Chocker, можно посмотреть в проекте📱 , скину в комментариях там другой футаж, но суть та же
Поддержать на boosty
Идея пришла, когда писал пост про Time Blend FX
Постараюсь описать кратко: эффект echo оставляет за собой копии, но для этого нужно передвинуть объект, а я хотел двигать копии оставляя объект на месте. Решение такое:
1. Перемещаем шейп по Y на 500px вверх, к примеру
2. Добавляем эффект Transform, ключ на position по Y, сдвигаем на 500px вниз. Тайминг и спейсинг ключей должен совпадать
3. Добавляем эффект echo
Таким образом копии echo улетают наверх за счет передвижения футажа вниз, но он остается на месте т.к. мы компенсируем движение с помощью position
Раскрасил композицию с помощью ключей на Fill+Stroke, накинул Fast Blur в режиме Vertical и сверху Simple Chocker, можно посмотреть в проекте
Поддержать на boosty
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥33 8💯6🙏3👨💻3
This media is not supported in your browser
VIEW IN TELEGRAM
Лимитированная анимация в After Effects
Самая резкая анимация между двумя ключами в After Effects, когда outgoing velocity influence 1%, а incoming velocity influence 100% — на самом деле вообще не резкая
Для действительно резкого движения, придется добавить еще один ключ — холд или линейный вплотную к предыдущему
Плавно не всегда равно хорошо. Наверное слышали про важность ритма в моушн-дизайне, обычно "такты" отбиваются переходами между сценами (а в персонажной анимации сменой позы героя). Но в рамках одной сцены ритм достигается за счет чередования быстрых и медленных движений
Вот пример от seven_playstudy — одна сцена, плавнейшие движения сменяются резкими и отрывистыми.
Пример из мира персонажки от deekaymotion —
обратите внимание на руки, плавная анимация чередуется с максимально резкой (в один кадр)
В моем примере нет правильного и неправильного варианта: всё зависит от контекста применения
Проект📱 с примером из поста можно найти в комментариях
Поддержать на boosty
Самая резкая анимация между двумя ключами в After Effects, когда outgoing velocity influence 1%, а incoming velocity influence 100% — на самом деле вообще не резкая
Для действительно резкого движения, придется добавить еще один ключ — холд или линейный вплотную к предыдущему
Плавно не всегда равно хорошо. Наверное слышали про важность ритма в моушн-дизайне, обычно "такты" отбиваются переходами между сценами (а в персонажной анимации сменой позы героя). Но в рамках одной сцены ритм достигается за счет чередования быстрых и медленных движений
Вот пример от seven_playstudy — одна сцена, плавнейшие движения сменяются резкими и отрывистыми.
Пример из мира персонажки от deekaymotion —
обратите внимание на руки, плавная анимация чередуется с максимально резкой (в один кадр)
В моем примере нет правильного и неправильного варианта: всё зависит от контекста применения
Проект
Поддержать на boosty
Please open Telegram to view this post
VIEW IN TELEGRAM
3🔥55 11🙏5💯2👨💻1
This media is not supported in your browser
VIEW IN TELEGRAM
Code Buddy — органайзер для выражений в After Effects
Свою коллекцию экспрешнов внутри📱 можно собрать через панели Kbar3 (40$) и MoBar (0$+), но они у меня так и не прижились вероятно из-за лени кастомизировать под себя
Но есть альтернативный вариант — Code Buddy (0$+)
Добавляем выражения и применяем/убираем легким нажатием ЛКМ. Жить стало проще!
Свою коллекцию экспрешнов внутри
Но есть альтернативный вариант — Code Buddy (0$+)
Добавляем выражения и применяем/убираем легким нажатием ЛКМ. Жить стало проще!
Please open Telegram to view this post
VIEW IN TELEGRAM
3 20🔥14🙏4💯2
This media is not supported in your browser
VIEW IN TELEGRAM
Очередная полезная находка на reddit с исходниками проекта 📱 на github
Это карта Сеульского метро, анимация которой автоматизированна с помощью контроллеров, выражений и таблицы CSV
А это туториал на youtube по созданию графика с помощью шейпа на основе данных из CSV файла
Это карта Сеульского метро, анимация которой автоматизированна с помощью контроллеров, выражений и таблицы CSV
А это туториал на youtube по созданию графика с помощью шейпа на основе данных из CSV файла
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥40🙏6 6💯1👨💻1
This media is not supported in your browser
VIEW IN TELEGRAM
Анимировал подарок и 5 скинов для свежего релиза в Telegram
Наверное это первый раз, когда я анимировал пиксель арт в📱 (я про экраны тамагочи)
В восторге от отсылок на game and watch и portal, нарисовала Лина
Пишите в комментах, если есть какие-то вопросы по реализации подобной анимации в связке After Effects + Lottie
Наверное это первый раз, когда я анимировал пиксель арт в
В восторге от отсылок на game and watch и portal, нарисовала Лина
Пишите в комментах, если есть какие-то вопросы по реализации подобной анимации в связке After Effects + Lottie
Please open Telegram to view this post
VIEW IN TELEGRAM
55🔥63 12👨💻3
Bodymovin-TG с поддержкой Gradient Strokes
Под базой по градиентам в Lottie возник вопрос об ошибке рендера обводки с градиентами в Bodymovin-TG (Bodymovin для Telegram стикеров/emoji)
На github в данный момент можно найти только старую версию, в которой эта фича не поддерживается
В комментариях скину обновленную версию с поддержкой Gradient Strokes, насколько я знаю в публичном доступе её еще не было
Обновление на github тоже будетно я не знаю когда, так что это временный эксклюзив
Поддержать на boosty
Под базой по градиентам в Lottie возник вопрос об ошибке рендера обводки с градиентами в Bodymovin-TG (Bodymovin для Telegram стикеров/emoji)
На github в данный момент можно найти только старую версию, в которой эта фича не поддерживается
В комментариях скину обновленную версию с поддержкой Gradient Strokes, насколько я знаю в публичном доступе её еще не было
Обновление на github тоже будет
Поддержать на boosty
150🔥31🙏7 5
This media is not supported in your browser
VIEW IN TELEGRAM
Поток из линий в After Effects 📱
Делал подобный шот на проекте с prand.tv, использовался как метафора передачи/обработки большого объема данныхв моем примере получилось больше похоже на изображение хорошей проходимости кишечника, но если вы делаете графику для научпопа, то это даже к лучшему
Основные моменты:
1. Для движения линий создал 8 Adjustment'ов шириной с полоску, сверху эффект Offset c выражением:
у слоев разные множители time, чтобы крайние двигались медленнее, чем центральные
2. Искажение потока — эффект Bulge снизу вверх в цикле
3. Наклон линии — эффект Corner Pin
На реальном проекте я использовал плагин RE:Flex, он позволяет искажать изображение по маске, получается в тысячи раз удобнее, чем проприетарные Distort эффекты.
А на youtube есть туториал с созданием искривленной композиции из 3D слоев
Проект в комментариях
Поддержать на boosty
Делал подобный шот на проекте с prand.tv, использовался как метафора передачи/обработки большого объема данных
Основные моменты:
1. Для движения линий создал 8 Adjustment'ов шириной с полоску, сверху эффект Offset c выражением:
yOffset = time * -800;
[value[0], value[1] + yOffset]
у слоев разные множители time, чтобы крайние двигались медленнее, чем центральные
2. Искажение потока — эффект Bulge снизу вверх в цикле
loopOut();
3. Наклон линии — эффект Corner Pin
На реальном проекте я использовал плагин RE:Flex, он позволяет искажать изображение по маске, получается в тысячи раз удобнее, чем проприетарные Distort эффекты.
А на youtube есть туториал с созданием искривленной композиции из 3D слоев
Проект в комментариях
Поддержать на boosty
Please open Telegram to view this post
VIEW IN TELEGRAM
3🔥46 10🙏6💯3
This media is not supported in your browser
VIEW IN TELEGRAM
Наверняка вы встречали профили Mat Voyce, Pixrate, которые полностью посвещены анимации типографики — в них можно встретить работы с буквами, боковые части которых покрашены в несколько цветов (в основном это делается для создания теней)
Я задался вопросом как этого добиться в After Effects📱 , ведь эффектор side-color позволяет только перекрасить боковины 3D объектов полностью и в один цвет
Вариант 1: создать цветные источники света, чекайте туториал
Вариант 2: меня осенило, что можно просто добавить stroke и обрезать trim path, в своем примере я продублировал такую обводку 3 раза и привязал к одному offset
Проект можно скачать в комментариях
Поддержать на boosty | 🖤Reels
Я задался вопросом как этого добиться в After Effects
Вариант 1: создать цветные источники света, чекайте туториал
Вариант 2: меня осенило, что можно просто добавить stroke и обрезать trim path, в своем примере я продублировал такую обводку 3 раза и привязал к одному offset
Проект можно скачать в комментариях
Поддержать на boosty | 🖤Reels
Please open Telegram to view this post
VIEW IN TELEGRAM
6🔥55 10🙏7💯2