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
Media is too big
VIEW IN TELEGRAM
Sigma-Boy? Ну а может лучше FM-синтез?
В своих страданиях насчет создания звука для персональных проектов я пришел к fm-синтезатору/грувбоксу Elektron Model:Cycles, вчерашнее видео озвучил с помощью него.
Решил не заморачиваться и просто накидал рандомных звуков на разных дорожках, чтобы они совпадали с анимацией. BPM для проекта в зависимости от длины видео можно посчитать тут
Процесс занял минут 5, а это намного быстрее, чем бесконечные поиски в сети интернет, но спектр звуков конечно сильно ограничен одной железкойеще нужна минимальная база муз. теории
Вообще вот известные мне опции по озвучке видео:
1. Делигировать профессионалу. Ролик с крабом для меня озвучивал Саша Маслюк. Еще есть Daruma, например. Если речь про коммерческую работу, то только так, все остальные варианты для своих фановых проектов
2. Делать изначально подБульку-бульку-барабульку музыку. Нормальный вариант, но муки выбора могут длиться бесконечно, а SFX в песне не материализуется
3. Сделать самому. В помощь нейросети (elevenlabs отлично создает звуковые эффекты) и стоки звуков вроде Artlist. Музыку + эффекты можно собрать прямо в After Effects (за эти слова саунд дизайнеры меня убьют, ведь в звуке тысячи всяких нюансов) Для полноценной работы над звуком уже нужно осваивать Ableton или другую DAW. Ну или использовать железки со встроенных секвенсором (семплер или синтезатор) как сделал я
upd в прошлый раз делал звуковую подложку на ipad в garageband, но ради нескольких звуков убил пару часов — на железке удобней и приятней
Поддержать на boosty
В своих страданиях насчет создания звука для персональных проектов я пришел к fm-синтезатору/грувбоксу Elektron Model:Cycles, вчерашнее видео озвучил с помощью него.
Решил не заморачиваться и просто накидал рандомных звуков на разных дорожках, чтобы они совпадали с анимацией. BPM для проекта в зависимости от длины видео можно посчитать тут
Процесс занял минут 5, а это намного быстрее, чем бесконечные поиски в сети интернет, но спектр звуков конечно сильно ограничен одной железкой
Вообще вот известные мне опции по озвучке видео:
1. Делигировать профессионалу. Ролик с крабом для меня озвучивал Саша Маслюк. Еще есть Daruma, например. Если речь про коммерческую работу, то только так, все остальные варианты для своих фановых проектов
2. Делать изначально под
3. Сделать самому. В помощь нейросети (elevenlabs отлично создает звуковые эффекты) и стоки звуков вроде Artlist. Музыку + эффекты можно собрать прямо в After Effects (за эти слова саунд дизайнеры меня убьют, ведь в звуке тысячи всяких нюансов) Для полноценной работы над звуком уже нужно осваивать Ableton или другую DAW. Ну или использовать железки со встроенных секвенсором (семплер или синтезатор) как сделал я
upd в прошлый раз делал звуковую подложку на ipad в garageband, но ради нескольких звуков убил пару часов — на железке удобней и приятней
Поддержать на boosty
🔥35 11🙏4💯2