Анимировать фон в after effects
Обновлено: 06.07.2024
Всем привет, меня зовут Артем Сафаров, я — дизайнер из веб-студии Pyrobyte. Мы используем Lottie-анимации на проектах студии, эта технология нам очень нравится, поэтому сегодня и вас с ней познакомим :)
Lottie — это библиотека для веб-разработки, iOS, Android и React Native, которая отображает анимацию After Effects в режиме реального времени, позволяя сайтам и приложениям использовать анимацию так же легко, как и статическое изображение. Создателями этой библиотеки являются инженеры из компании Airbnb.
В прошлом создание сложных анимаций для приложений на Android, iOS и React Native было трудным и длительным процессом. Приходилось либо добавлять объемные файлы изображений для каждого размера экрана, либо писать тысячу строк хрупкого и сложного в поддержке кода. Из-за этого в большинстве сайтов и приложений не использовалась анимация, несмотря на то, что это — мощный инструмент для улучшения пользовательского опыта.
Эта библиотека использует анимации, экспортированные в виде файлов JSON из After Effects путем кодирования в данный формат плагином Bodymovin. Расширение подключается на сайт с проигрывателем JavaScript, который позволяет отображать анимацию в вебе.
Как обычно реализовываются анимации в приложениях и сайтах- GIF. Распространенный формат, но имеет довольно много ограничений, связанных с потерей качества и большим весом.
- AVI, mp4. Большой вес финальных файлов, нет возможности экспортировать видео с прозрачным фоном.
- Анимированные вручную разработчиком html-элементы. Трудоемкий процесс в разработке, который влечет за собой большое количество правок от дизайнера. К тому же разработчик ограничен в реализации анимации из-за трудностей с контролированием скорости движения анимированного элемента, они выглядят неестественно, так как перемещаются в пространстве с линейной скоростью.
Из-за таких ограничений приходится жертвовать либо качеством анимации, либо временем для её оптимизации. В подобной ситуации на помощь и приходит Lottie.
Благодаря возможностям, которые предоставляет Lottie-анимация, неудивительно, что данную технологию используют такие известные компании как: Google, Elevate, eero, The New York Times, Instacart, Uber, Walgreens, iHeartRadio, Сбербанк, Telegram.
Область применения Lottie-анимации на сайтах и приложениях имеет большой охват — от анимированных иллюстраций, как у Google и Elevate
до анимированных UI-эффектов и статичных логотипов как у The New York Times.
Последние в своем приложении используют Lottie для статичного логотипа темной и светлой темы, раньше им приходилось создавать 2 отдельных логотипа — белый и черный. Благодаря Lottie приложение автоматически меняет цвет логотипа в зависимости от выбранной темы на противоположный.
Используя Lottie, дизайнер может не только спроектировать и отрисовать навигацию для мобильного приложения, но и реализовать приятную визуальную обратную связь при переходе в другой раздел меню.
Анимированная кнопка «гамбургер» усиливает ощущение прямой манипуляции и делает переход к новому состоянию более очевидным для пользователей.
Очень важно держать пользователя в курсе состояния системы — чтобы было понятно, что происходит. Когда пользователь выполняет какое-либо действие и не получает никакой обратной связи, есть вероятность, что он будет раздражен таким безразличием к себе и покинет этот сайт или приложение. Продуманная анимация поможет удержать внимание пользователя в моменты загрузки открывающейся страницы.
Хорошо продуманные анимированные UI-эффекты для кнопки «лайк». Подобные анимации служат для того, чтобы взаимодействие с продуктом стало более увлекательным и приятным.
Telegram используют данную технологию для анимированных стикерпаков, так как Lottie позволяет получить высококачественную анимацию без потери качества весом в несколько килобайт. А еще мы создали свой стикерпак, который ждет, чтобы вы его добавили к себе в коллекцию :)
Чтобы вам не запутаться при установке плагина Bodymovin, мы разбили процесс на несколько шагов:
Прежде всего потребуется скачать плагин для Lottie, для этого есть несколько способов, которые перечислены на странице BodyMovin на Github. Вот самый простой из них:
Шаг 1. Запустите Adobe After Effects и создайте новый проект .
Шаг 2: Новый проект открывается с интерфейсом After Effect .
Шаг 3: Создайте новую композицию, нажав на Композиция, присутствующая в строке меню вверху.
Шаг 4: Вы получите всплывающее окно после нажатия на новую композицию. Во всплывающем окне оставьте ширину 1920 пикселей и высоту 1080 пикселей, что является стандартным. Сохраняйте длительность 5 секунд, а цвет фона - черный. Вы можете сохранить предустановки как пользовательские. Частота кадров может быть 29, 97 или 30 и сохранить разрешение как полное.
Шаг 5: Интерфейс композиции .
Шаг 6: Чтобы получить сетку прозрачности, вам просто нужно нажать на Toggle Transparency Grid, которая присутствует рядом с выпадающим списком активной камеры, как показано ниже.
Шаг 7: Нажмите один раз, и вы получите сетку прозрачности. Если вы нажмете еще раз, вы снова получите сплошной черный цвет. Таким образом, вы можете получить сетку прозрачности для вашей композиции.
Шаг 8: Теперь создайте T ext и поместите его в центр, используя инструмент «Выделение». Это видео с текстом будет использоваться в другом видео, чтобы показать, как работает прозрачный фон в After Effects.
Шаг 9: Далее мы оживим текст . После анимации текста, вам нужно расположить его, как показано на рисунке ниже.
Шаг 10 : Перетащите текст вверх и вниз с помощью индикатора текущего времени, чтобы анимировать его, чтобы перемещаться вверх и вниз.
Шаг 11: анимация завершена для текста в этом видео.
Шаг 12: Следующий шаг - добавить композицию в окно Render Queue. Следите за тем, чтобы композиция была открыта или выбрана в окне проекта. Нажмите «Композиция» и « Добавить в очередь визуализации».
Шаг 13: Откроется вкладка Render Queue .
Шаг 14: Установите очередь рендеринга в лучших настройках .
Шаг 15: Выберите параметры рендеринга в качестве лучших параметров с полным разрешением и дисковым кэшем только для чтения. На выходе модуль гарантирует, что он без потерь. Откройте настройки, нажав на без потерь. Вы получите всплывающее окно. Вы можете выбрать любой формат, который вы пожелаете. Выберите каналы как RGB + Alpha в разделе видео выхода.
Шаг 16: Теперь скачайте ваше видео, сохраните его на рабочем столе и нажмите кнопку рендеринга.
Ваше видео с прозрачным фоном и текстом готово.
Шаг 17: Теперь перетащите любое видео на панель инструментов проекта, как показано ниже.
Шаг 18. После перетаскивания видео импортируйте видеофайл с сохраненным ранее текстом, а затем перетащите его в это видео.
Шаг 19: Как только вы сделаете это, вы увидите текст с прозрачным фоном в этом видео, а когда вы переместите индикатор текущего времени, вы увидите анимацию, которую мы сделали с текстом.
Вывод
С помощью шагов, упомянутых выше, можно отобразить видео с прозрачным фоном в Adobe After Effects. Что касается анимации и видео, файлы, которые можно импортировать и экспортировать, представляют собой Animated GIF (GIF), 3GPP (3GP, 3G2, AMC), Open Media Framework (OMF), DV, видео для Windows (AVI) и QuickTime (MOV). ).
К видеофайлам, которые можно импортировать, относятся только Adobe Flash Video (FLV, F4V), Adobe Flash Player (SWF), формат обмена мультимедиа (MXF), AVCHD (M2TS), MPEG-1 (MPG, MPE, MPA, MPV, MOD). ), MPEG-4 (MP4, M4V), MPEG-2 (MPG, M2P, M2V, M2A, M2T), XDCAM HD / XDCAM EX (MXF, MP4) и Windows Media (WMV, WMA). Хотя After Effects может работать с 16 и 32 битами на канал, многие кодеки и форматы анимационных и видеофайлов поддерживают только 8 бит на канал.
Рекомендуемые статьи
Это руководство по прозрачному фону в After Effects. Здесь мы обсудили обзор и шаги по созданию прозрачного фона. Вы также можете просмотреть другие наши статьи, чтобы узнать больше -
Adobe After Affect изначально разрабатывался сотрудниками компании Science and Art Effect, а затем был нанят системами Adobe. After Effect, как показывает его название, используется в различных типах редактирования фоторабот, кинематографических работ и т. Д. Он имеет широкий спектр рабочих областей, таких как редактирование видео, редактирование фотографий, анимация и т. Д. Фон является основной частью программное обеспечение Adobe After Effect и управляя фоном в After Effects, мы можем создавать очень эффективные проекты. Мы можем редактировать, маскировать и анимировать наш фон в соответствии с нашим использованием. Здесь я покажу вам, как редактировать и анимировать свой Adobe After Effect фон.
Редактирование и анимация фона в After Effects
Здесь я расскажу вам о фоновых технологиях в Adobe After Effects очень простым и интересным способом. Давайте начнем наш урок для поэтапного редактирования фона:
- Это пользовательский интерфейс программного обеспечения Adobe After Effect. В нашем пользовательском интерфейсе есть другой раздел: область композиции, область слоя, область ключевого кадра, панель инструментов и т. Д.
Шаг 1: Мы возьмем новую композицию в качестве фона. Для этого нажмите на Новую композицию, которая присутствует в рабочей области.
Шаг 2: Или нажмите на эту вкладку, чтобы создать новую композицию.
Шаг 3: Откроется диалоговое окно для настройки композиции.
Шаг 4: Здесь вы можете установить некоторый параметр композиции, который представляет собой название композиции, размер композиции, цвет композиции, продолжительность анимации, а затем нажмите на вкладку «ОК», чтобы применить настройки. Я возьму параметр по умолчанию здесь для моей композиции.
Шаг 5: Теперь мы отредактируем наш фон с градиентной заливкой. Для градиентной заливки щелкните правой кнопкой мыши на этой области, затем перейдите к новой и нажмите на сплошной, чтобы создать новый сплошной слой.
Шаг 6: Сплошной слой будет найден поверх нашего слоя композиции.
Шаг 7: Перейдите к опции «Эффект» в верхней части рабочей области, перейдите к «Создать» в раскрывающемся списке и нажмите «Градиентная рампа», чтобы применить градиент к фону.
Шаг 8: Выберите здесь Radial Ramp, чтобы дать радиальному барану фон, вы также можете выбрать Linear в соответствии с вашим выбором.
Шаг 9: Удерживая и перетаскивая этот значок с плюсом, вы можете изменить радиус радиального градиента или вручную изменить параметр «Конец изменения» для изменения радиуса.
Шаг 10: Вы также можете изменить цвет градиента. Дважды щелкните параметр «Начать цвет» параметра градиента, чтобы изменить цвет в центре.
Шаг 11: Снова дважды щелкните параметр «Конец цвета» параметра градиента, чтобы изменить цвет внешнего цвета градиента.
Шаг 12: Это последний градиент цвета на нашем фоне.
Шаг 13: Теперь вы можете применить многоцветный цвет в качестве градиента на заднем плане, перейдите к параметру «Эффект» в верхней части рабочей области, затем перейдите к «Генерация» и нажмите «4-цветный градиент».
Шаг 14: Здесь вы можете установить все 4 цвета в зависимости от вас.
Шаг 15: Для изменения определенного цвета дважды щелкните по значку этого цвета и выберите цвет.
Шаг 16. Теперь увеличьте параметр параметра «Смешать», чтобы придать плавность градиентным цветам фона.
Шаг 17: Вы также можете установить цвет с помощью параметра «Коррекция цвета». Перейдите к опции «Эффект» в верхней части рабочей области, затем перейдите к опции «Коррекция цвета» и нажмите «Кривая».
- Теперь в этом разделе будет сгенерирована кривая.
Шаг 18: изменяя форму кривой, вы можете изменить цвета градиента.
Шаг 19: Или вы можете изменить любой конкретный цвет и выбрать цвет здесь.
Шаг 20. И измените форму этой цветовой кривой, чтобы изменить пропорцию этого цвета в градиенте.
Шаг 21: Вы можете установить Непрозрачность градиента в соответствии с вами, изменив данные параметра Непрозрачность.
Шаг 22: Если вы хотите сбросить параметры цвета градиента, нажмите на вкладку «Сброс» параметра цвета градиента.
Шаг 23: Теперь мы будем анимировать наш фон. Щелкните правой кнопкой мыши по этому разделу, затем перейдите к новой опции и нажмите на сплошной.
Шаг 24: Выберите цвет сплошного слоя, как мы делали в предыдущих шагах.
Шаг 25: Теперь возьмите инструмент прямоугольник с панели инструментов в верхней части рабочей области, нарисуйте прямоугольник, как я рисую.
Шаг 26: Вы можете изменить цвет прямоугольника из опции Fill в разделе панели инструментов.
Шаг 27: Я выберу здесь светло-розовый цвет в качестве цвета моего прямоугольника.
Шаг 28: Теперь я поверну прямоугольник из свойства поворота прямоугольника на некоторый угол.
Шаг 29: Теперь нажмите на вкладку «Добавить» в разделе слоев формы слоя 1 и нажмите «Повторитель» отсюда.
Шаг 30: Теперь увеличьте количество копий и нажмите на маленькую иконку со стрелкой на прямоугольном слое, затем выберите опцию Копии и увеличьте количество копий отсюда.
Шаг 31: И увеличьте значение X-положения повторителя.
Шаг 32: Измените значение положения Y для установки повторителя в правильное положение.
Шаг 33: Теперь измените значение позиции X параметра Transform, чтобы охватить весь фон повторителей.
Шаг 34: Теперь мы будем анимировать положение повторителя. Нажмите на значок часов позиции, чтобы сгенерировать ключевой кадр для анимации.
Шаг 35: Теперь установите головку воспроизведения ключевого кадра анимации на 2 секунды и измените значение позиции, чтобы мы могли генерировать движущийся внешний вид для анимации нашего фона.
Шаг 36. Перетащите игровую головку в начальную точку левой кнопкой мыши и нажмите клавишу пробела на клавиатуре, чтобы воспроизвести анимацию.
- Таким образом, вы можете по-разному анимировать свой фон и сделать его все более и более эффективным для вашего проекта. Вы также можете изменить фон видео и предоставить его в соответствии с вашими предпочтениями. Мы увидим это в следующем уроке.
Вывод
Здесь со мной вы узнали, как редактировать и анимировать фон в программном обеспечении After Effect. Имея хорошие знания о фоновом редактировании, вы можете легко создать фон для своего проекта в After Effect со своими собственными эффектами и сделать его очень эффективным, чтобы сделать его привлекательным для зрителя.
Рекомендуемые статьи
Это руководство к фону в After Effects. Здесь мы обсуждаем шаги по редактированию и анимации фона в эффектах. Вы также можете просмотреть другие наши статьи, чтобы узнать больше-
Узнайте, как создавать бесшовные фоновые петли в Adobe After Effects. Учебник включает бесплатные файлы проекта!
В этом руководстве по After Effects мы собираемся изучить, как создать пользовательскую циклическую фоновую анимацию. На самом деле это проще, чем думает большинство людей, а использование нескольких ключевых эффектов делает процесс еще проще. Этот урок отлично подходит для новичков или всех, кто хочет получить больше знаний о After Effects.
Готовы создать петли? Что ж, приступим!
СКАЧАТЬ ФАЙЛЫ ПРОЕКТА
Создание фоновой плитки
Сначала нам нужно создать фон, а затем мы сможем анимировать другие объекты и формы в цикле позже. Я рекомендую начать с фон плитка композиция, которая 200 × 200 пикселей. Затем добавьте к нему текстуру с формами, брызгами или даже сеткой.
Начнем с создания фона.
Когда вы закончите с этим, создайте новую композицию, которая 1920 × 1080 пикселей. Это послужит нашим основной состав к которому мы все добавим. В этом примере наш цикл будет четыре секунды долго в 24 кадра в секунду.
CC RepeTile
Продолжайте и добавьте фон плитка состав к главный состав. Теперь примените эффект CC RepeTile к фоновому слою плитки. В настройках эффекта CC RepeTile установите Верно, Левый, Вверх, а также Вниз ценности для 2 000.
Добавьте фоновую плитку к основной композиции, затем примените CC RepeTile к фоновому слою.
Теперь вы должны увидеть узор фоновой плитки, повторяющийся по всей вашей основной композиции.
Компенсировать
Мы можем привести фон в движение, применив Компенсировать эффект также на фоновый слой плитки. После применения создайте ключевой кадр Сдвинуть центр к параметр. Вы можете настроить значение на Икс а также Ось Y.
Приведите фон в движение, применив эффект смещения.
Я рекомендую иметь стартовый Сдвинуть центр к значение ключевого кадра быть 0,0. Затем установите другой Сдвинуть центр к ключевой кадр в конце вашего цикла. Когда вы настраиваете значение Shift Center To, убедитесь, что выбранное вами число делится без остатка на 200 (потому что наша исходная фоновая плитка 200 × 200 пикселей по размеру). Например, установите окончательное значение ключевого кадра на 0, 600.
Создание групповых плиток
Добавление и наложение других анимированных форм аналогично тому, что мы делали для фоновой плитки. Создайте новую композицию с именем Группа 1, и установите размер композиции на 400 × 400 пикселей. Затем добавьте две фигуры на левая сторона этого состава. (Рекомендую создать 200 × 200 слои направляющих пикселей для каждой формы.) Вы также можете тонко анимировать их, если хотите, просто убедитесь, что они заканчиваются в том же положении, в котором они начали, на протяжении четырехсекундного цикла.
Начните добавлять и накладывать анимированные фигуры на фоновую плитку.
Затем продублируйте композицию Группы 1 и назовите ее 2 группа. Удалить существующие фигуры в новой композиции Группы 2 и добавьте две новые фигуры на правая сторона.
Теперь добавьте две новые формы на противоположную сторону, скопировав композицию Группы 1.
Завершение цикла
Чтобы завершить цикл, вернитесь к своему основной состав а также Добавить в двух новых Групповые композиции. Подать заявление CC RepeTile к обоим и развернуть их во всех направлениях, чтобы 2 000 пикселей. Затем примените Компенсировать к обоим, и ключевой кадр Сдвинуть центр к настройка для создания вашего цикла. (Опять же, убедитесь, что конечное значение, на которое вы их создаете в ключевом кадре, делится поровну на 400, потому что составы Группы были 400 × 400 пикселей.)
Эффект «Тень» добавляет завершенному образу атмосферу 90-х.
Я добавил Падающая тень эффект для обеих групповых композиций для более образа 90-х годов. Вы также можете вращать групповые композиции, 45 градусов, если хочешь.
Дополнительные эффекты
Вы можете создавать самые разные образы, добавляя другие эффекты к завершенному фоновому циклу. Добавить корректирующий слой над всем в вашей основной композиции и примените эффект Чч калейда. Теперь у вас будет более абстрактная петля калейдоскопа. Вы также можете подать заявку светиться эффекты к вашим групповым композициям для уникального вида.
Чтобы создать уникальный стилизованный вид, добавьте эффекты свечения.
Наконец, вы можете сделать свою основную композицию 3D слой, и используйте 3D камера для создания «макро-выглядящего» фонового цикла. Просто установите Расстояние фокусировки к центру многослойной трехмерной петли включите Глубина резкости для камеры и отрегулируйте Диафрагма а также Уровень размытия ценности.
Сделайте свою основную композицию 3D-слоем, используя 3D-камеру для создания цикла фона.
Заинтересованы в бесплатных треках, которые мы использовали для создания этого видео? Послушайте их еще раз:
Читайте также: