Как сделать сниппет в after effects
Lottie — отличный способ экспортировать анимации из After Effects в JSON, сохраняя хорошее качество. В этой статье мы разберёмся, как приступить к работе с этим инструментом и на чём стоит заострить особое внимание.
В 2017 году инженеры Airbnb увидели потенциал анимации на основе JSON и вместе с лидером анимации создали библиотеки iOS и Android, которые смогли бы отображать файлы JSON, которые назвали «Lottie». Вы можете прочитать больше об истории здесь. Разработчики в Airbnb оставили исходный код открытым и создали сообщество GitHub для общения с дизайнерами и инженерами.
LottieFiles — это независимая платформа от Airbnb, на которой дизайнеры могут загружать, тестировать, покупать и выгружать анимации.
Airbnb также являются создателями плагина LottieFiles для After Effects, который работает аналогично Bodymoving и позволяет нам просматривать анимацию, загружать её на платформу LottieFiles, сохранять на компьютере.
Для начала необходимо установить плагин, вы можете использовать Bodymovin или LottieFile.
Я создал для своего логотипа простую анимацию, которая будет отображаться в верхнем меню веб-сайта. Это дрон с вращающимися лопастями, поэтому я импортировал в слои файлы Illustrator, сделал спиральные 3D-слои и повернул их.
Будьте внимательны, не все эффекты поддерживаются этими форматами файлов. На сегодняшний день 3D-слои не поддерживаются. Поэтому, прежде чем делать анимацию, стоит проверить поддержку.
Создание анимации для интернета — это не то же самое, что и создание традиционного видео. Мы должны принять во внимание несколько параметров настройки и форматирования, о которых нам никогда раньше не приходилось думать.
Вот список предложений, которыми делятся создатели Lottie:
- Файлы JSON должны быть как можно более компактными для мобильных продуктов.
- Используйте свои навыки After Effect, чтобы избежать лишних ключевых кадров, например путем родительских функций вместо добавления ключевого кадра на каждом слое.
- Избегайте использования ключевых кадров пути, поскольку они создают очень большой документ из преобразования всей вершины из пути.
- Лучше всего избегать покачивания, автоматической трассировки и аналогичных методов, которые создают большое количество ключевых кадров. Создание такого большого файла может сделать файл JSON очень большим и негативно повлиять на производительность.
- Преобразуйте любой слой Illustrator, EPS, SVG или PDF для формирования слоёв в After Effects, в противном случае это приведёт к ошибке.
- Экспорт в 1X при экспорте файла каждый пиксель на иллюстрации будет переведён в точки для iOS и DPS для Android; вот набор метрик устройств в DPS, которые Google собрала вместе.
- Lottie пока не поддерживает выражения или эффекты.
- Режимы наложения, а конкретно «Умножение», «Экран» или «Добавить» пока не поддерживаются, а также не отображаются с помощью Luma.
- Стили слоёв (тень, наложение, обводка…) пока не поддерживаются; нули могут быть использованы, но для их работы необходимо включить видимость и изменить непрозрачность до 0%.
Импортируйте слои, откройте композицию, выберите все слои, щелкните правой кнопкой мыши и выберите: «Создать» → «Создать фигуру из векторных слоёв».
Это создаст векторные слои, которые не доставят нам хлопот при экспорте в Lottie.
Нам нужно удалить AI-файлы и работать только с векторными слоями.
Я хотел анимировать лопасти в 3D, но поскольку они не поддерживаются, мне пришлось делать это «традиционным способом» и поэтому я симулировал вращение, анимируя размер в X (ширина).
После того, как воссоздать нужную скорость, я создал нулевой объект, чтобы переместить весь логотип и заставить его «взлетать» и «приземляться». При этом используя векторы в положении, чтобы сделать движение более плавным.
Как мы читали ранее, нулевые объекты должны быть превращены в видимые и иметь 0% прозрачности, чтобы работать.
После того, как у меня появилась анимация, я захотел открыть расширение Lottie.
Откроется окно, где вы можете просмотреть анимацию, загрузить её в Lottie-файлы и сохранить на своем компьютере. Для этого вам уже нужно иметь аккаунт в LottieFiles.
Этот способ создания анимации для веб-сайтов действительно интересен, поскольку он сохраняет отличное качество и прост в реализации.
Шаблоны для Adobe After Effects - это отличный способ автоматизировать рабочий процесс и добавить креативности в свой набор навыков. Проверьте более 100 лучших веб-шаблонов After Effects ниже.
Поскольку популярность After Effects возросла, то же касается использования шаблонов для улучшения проектов видео. Поскольку After Affects - неразрушающий редактор видео и анимации, вы можете легко опробовать все типы шаблонов, не повреждая исходные файлы проекта. Это как никогда облегчает эксперименты с применением эффектов и чередованием анимации в ваших видео.
Шаблоны After Effects премиум-класса
Если вы ищете продукцию коммерческого качества и спешите получить профессиональное решение, то выберите один из affordable Adobe After Effects Templates, доступных для покупки на VideoHive. Вот несколько лучших:
1. Minimal Titles
30 анимированных титров и более низких терций, которые дадут вашему проекту обтекаемую эстетику.
2. Flat Graphics Event Opener
Крутой, современный инструмент для конференций и совещаний, этот утончённый шаблон с on-trend плоской графикой добавит блеска вашему событию.
3. Classic Frame Opener
Простая анимация кадра, блики и слайд-графика придадут вашему проекту чистое, успокаивающее изображение.
4. Glitch Distortion Titles
Эффекты глюков. Современный подход к глюкам с тонким эффектом искажения добавит цифровой драмы в ваш проект.
5. Geometric Distortion Opener
Добавьте эффект с этим красивым геометрически-вдохновенным opener ; искажения глюков, жирная анимированная графика и чёрно-белая эстетика.
6. Urban Grit Showreel
Яркий, но резкий, этот универсальный пакет для вас. Используйте энергию городской среды с эффектами glitch, загрязнением объектива и современной эстетикой.
7. Two-In-One Logo Reveal
Два открывателя в одном! Создайте напряжение в стиле комиксов или захватите весёлого, приподнятого возбуждения с открывателем «любви».
8. Golden Burnish Intro
Эта обработка с эффектом частиц добавит мерцание и текстуру вашему логотипу, анимацию и последовательность заголовков.
9. Kaleidoscope Effects
Эффекты калейдоскопа и регулируемые настройки стекла, такие как размытие, хроматические аберрации и загрязнение, создают забавные, модные визуальные эффекты.
10. Upbeat Transitions Pack
Чистая графика со смелыми геометрическими заставками создает свежий визуальный эффект в этом пакете переходов. Звуки перехода включены для дополнительного эффекта.
11. Parallax Opener
Создайте драму с эффектами параллакса. Загрязнение объектива, лёгкие блики и царапины на пленке добавляют естественную глубину в ваш проект.
12. Bright and Beautiful Logo Reveal
Этот красивый логотип показывает танцующую графику и стилизованные световые блики - идеальный инструмент для создания вашего бренда.
13. Modern Opener With a Softer Touch
С матовым стеклом, лёгкими эффектами бликов и спокойным ощущением, этот opener идеально подходит для любого проекта, требующего лёгкости.
Свободные шаблоны для Adobe After Affects
Это список свободных ресурсов от Logan Kenesis (AEBuster), Hamo Studio, dehannb, Motion Stacks, Sven Van Lathem (Motion & Design), Ruanak Chhabra (Editing Corp), и RocketStock. Обратите внимание, что файлы, на которые ссылаются здесь, размещаются их авторами и по этой причине могут не быть доступны всё время. Кроме того, некоторые из этих бесплатных шаблонов требуют Trapcode Particular (от Red Giant) или других подключаемых модулей.
Type-O-Matic: "TYPE-O-MATIC - инструмент анимации After Effects CS5 для дизайнеров и кинографов, разработанный Hamo Studio. Controller, Masked и Unfold. Три различных способа создания простой, быстрой и настраиваемой ленты анимации. "
Читайте также: