Как импортировать svg в 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.
Этот способ создания анимации для веб-сайтов действительно интересен, поскольку он сохраняет отличное качество и прост в реализации.
У вас есть одна или две иконки, которые вы бы хотели оживить с помощью анимации. С чего бы вы начали? Допустим, у вас есть файлы SVG, программы Illustrator CC и After Effects CC, но, решение ускользает от вас.
В этой статье я собираюсь продемонстрировать, как можно легко анимировать SVG-файл, включая подготовку SVG-файла в Illustrator и импорт в After Effects CC. Также объясню, как можно конвертировать его в Shape Layers и добавлять движения. И, наконец, поговорим об экспортировании и рендеринге.
Конечный результат работы.
Теперь давайте приступим к самой интересной части – научимся оживлять изображения.
Подготовка SVG-файла в Illustrator
Давайте начнем с открытия вашего SVG-файла в Adobe Illustrator CC. Я буду анимировать маленькую автомобильную иконку, которая доступна бесплатно на Week Of Icons.
После открытия файла нам нужно разгруппировать и разделить все объекты на слои. Вы можете сделать это вручную или использовать Release to Layers (Sequence) для ускорения процесса. Прежде чем импортировать файл в After Effects, нам нужно сохранить его в формате файла Illustrator.
Разгруппировать объекты мы можем используя Release to Layers (Sequence), чтобы не тратить драгоценное время.
Импорт и организация файла в After Effects CC
Теперь все готово для импорта в After Effects CC. Давайте используем сочетание клавиш Ctrl+I (Windows) или Command+I (Mac), чтобы загрузить диалоговое окно Import File, или перейдите к File > Import > File… Там же выберите подготовленный нами файл Illustrator CC и нажмите Import. Должно появиться небольшое диалоговое окно с названием выбранного файла. Выберите Composition из выпадающего списка под названием Import Kind.
Более быстрый способ импортирования файла – дважды кликнуть на место столбца на проектной панели.
На панели Timeline Panel мы увидим новую композицию. Дважды кликаем на нее. Теперь мы должны увидеть слои Illustrator CC с оранжевыми значками слева от названий.
Прежде чем приступить к делу, мы должны преобразовать все эти слои в Shape Layers. Нам нужно выделить их все с помощью Ctrl+A/Command+A, или вручную с помощью Shift + Left Mouse. После этого щелкните правой кнопкой мыши на слой и выберите Create > Create Shapes from Vector Layer.
Теперь, когда новые слои выделены, перетащите их на верхнюю часть панели над слоями Illustrator CC, а затем удалите слои Illustrator CC, чтобы они не мешали.
Конвертирование слоев Illustrator CC в Shape Layers в программе After Effects CC
Хотя в этом нет необходимости, важно, чтобы мы дали каждому слою соответствующее имя и/или обозначили его цветом. Это позволит нам работать более эффективно, поскольку мы будем сосредоточены на ключевых кадрах. В приведенном ниже примере цвета надписей более или менее соответствуют заливке соответствующих им слоев.
Маркировать Shape Layers соответствующими названиями, цветами, надписями и расположением очень практично.
Для настройки параметров используйте сочетание клавиш Ctrl+K/Command+K или Composition > Composition Settings… Из Composition Settings нам нужно выбрать ширину, высоту, частоту кадров и длительность (Width, Height, Frame Rate, и Duration). Для этого проекта я выбрал 60 кадров в секунду, чтобы анимация была плавной.
На данный момент кажется, что все готово к работе, но есть еще одна вещь, которую нужно сделать. Нам нужно сгруппировать определенные слои вместе, чтобы их движения были синхронизированы с основным слоем, который мы можем контролировать. Этот метод называется Parenting.
Используйте Pick Whip, чтобы назначить родительский слой нескольким слоям.
В нашем примере я назначил менее значимые слои (дочерние слои), такие как лобовое стекло, детали кузова, дерево и веревки первичному слою кузова (родительскому слою). Это позволило мне контролировать положение и вращение всего автомобиля (за исключением колес) с помощью родительского слоя.
Создание анимации
Я хотел, чтобы машина наехала на камень и немного зависла в воздухе. Также я хотел, чтобы елка двигалась вверх-вниз, и открылся багажник. Я начал с создания камня, машины и колес. Затем пришло время преодолеть самое большое препятствие – наложить действие на елку. Закончив это, я занялся мелкими деталями, такими как багажник и веревки.
Набросок с описанием анимации
Первым делом нужно было сделать элемент или слой в виде камня, но вместо того чтобы вернуться в Illustrator CC для добавления другого слоя, я просто использовал инструмент Pen Tool в After Effects CC. Это позволило мне быстро спроектировать маленький камень.
Багажник был относительно простой задачей. Я установил его сзади машины и сделал опорную точку в нижней левой вершине. Используя Pick Whip, я назначил его родительскому слою кузова. Предпоследним шагом было придание эффекта вращения, который в свою очередь сделал момент подпрыгивания машины более реалистичным.
Посмотрите, как настроены, слои кузова и багажника по отдельности. Обратите внимание на то, как багажник прикреплен к кузову.
Все остальное делалось аналогичным образом: ключевые кадры создавались до тех пор, пока они не выглядели реалистично. На это требовалось некоторое время, я просматривал анимацию на разных скоростях с помощью предварительного просмотра.
Экспорт анимации
К этому моменту вы стремитесь показать свои работы (в данном случае, анимированные иконки) миру. Но как вы экспортируете свою анимацию для всеобщего обозрения? Есть несколько способов сделать это, но предположим, что вы хотите вернуться к формату масштабируемой векторной графики (SVG). Другими словами, вы хотите, чтобы на вашем сайте была анимированная иконка, которая выглядит безупречной и четкой независимо от размера. Решение – расширение After Effects CC под названием Bodymovin в сочетании с мобильной библиотекой Lottie.
P.S. Здесь вы можете найти мои файлы Illustrator CC и After Effects CC.
Набор иконок доступен для скачивания бесплатно на Week Of Icons freebie.
Узнайте, как перенести ресурсы в Adobe XD из Photoshop, Illustrator, Sketch и веб-браузеров, а также экспортировать ресурсы в After Effects.
Вы можете добавлять ресурсы в XD из других приложений Adobe, таких как Photoshop и Illustrator, а также из сторонних приложений, таких как Sketch, и веб-браузеров. В XD можно продолжить работу над этими ресурсами или использовать их для разработки интерактивных прототипов. Вы также можете экспортировать ресурсы из XD в After Effects для их дальнейшего улучшения.
В зависимости от приложения вы можете работать с внешними ресурсами разными способами:
Если вы хотите преобразовать файлы Photoshop и Illustrator в файлы XD, нажмите «Открыть». Если вы хотите добавить содержимое этих файлов в существующий файл XD, нажмите «Импорт».
Для переноса ресурсов Photoshop в XD можно пользоваться любым из приведенных ниже способов.
- Откройте файл .psd прямо в XD, выбрав Файл > Открыть . Затем можно отредактировать файл в XD, как и любой другой файл XD, создать взаимосвязи и опубликовать их в качестве прототипов или спецификаций проекта.
- Импортируйте файл .psd в XD, выбрав Файл > Импорт .
- Скопировать растровое и векторное изображение из Photoshop и вставить его в XD.
- Перетащить ресурсы Photoshop из панели Библиотеки на холст XD. Дополнительные сведения см. в разделе Creative Cloud Libraries в Adobe XD.
Скопировать файл .psd в буфер обмена ОС и с помощью команды Вставить оформление вставить изображение способом, предполагающим непосредственную заливку изображением.
Копирование и вставка SVG из Photoshop
Чтобы скопировать и вставить SVG из Photoshop, щелкните правой кнопкой мыши слой фигуры или векторный слой в Photoshop, щелкните Копировать SVG и вставьте его в XD.
Файлы Illustrator можно открыть в XD или импортировать.
Также можно скопировать векторные и растровые изображения из Adobe Illustrator и вставить их в XD с сохранением качества и возможности редактирования при открытии или импорте файлов Illustrator. Файлы Illustrator помещаются в открытый документ, а не открываются как отдельный документ. Смарт-объекты импортируются как расширенные слои, а не растровые изображения, а корректирующие слои сохраняются. Однако монтажную область Illustrator невозможно скопировать и вставить в XD.
Кроме того, можно скопировать векторный файл в буфер обмена ОС и с помощью команды Вставить оформление вставить изображение непосредственно в качестве заливки изображением.
Также в XD можно добавить ресурсы Adobe Illustrator, хранящиеся в Creative Cloud Libraries, перетаскивая их из панели Библиотеки на холст XD. Дополнительные сведения см. в разделе Creative Cloud Libraries в Adobe XD.
Копирование и вставка SVG в Illustrator из XD
Теперь можно скопировать векторное содержимое XD в буфер обмена, а затем вставить его как полностью редактируемые слои в Adobe Illustrator.
Чтобы скопировать и вставить содержимое из XD в Illustrator:
1. Щелкните правой кнопкой мыши по слою фигуры или векторному слою в XD и выберите Копировать в контекстном меню.
2. В Adobe Illustrator выберите Правка > Вставить , чтобы вставить векторное содержимое.
SVG не является поддерживаемым форматом изображения, поэтому вы ничего не можете сделать, кроме как преобразовать его в поддерживаемый формат. Пока у вас есть доступ к Illustrator, самый простой вариант — просто открыть и повторно сохранить как файл . ай файл. Это, очевидно, сохранит векторные данные, чтобы вы могли анимировать пути и т. д.
Может ли After Effects экспортировать SVG-анимацию?
Итак, без лишних слов, вот простой вводный рабочий процесс для создания SVG в After Effects.
- Скачайте и установите Бодимовин. Загрузите Bodymovin и следуйте инструкциям по установке. …
- Подготовьте ресурсы анимации. …
- Сделайте свою анимацию. …
- Экспорт с Bodymovin. …
- Наслаждайтесь своим SVG.
Могут ли файлы SVG анимироваться?
SVG поддерживает возможность изменения векторной графики во времени для создания анимированных эффектов. Содержимое SVG можно анимировать следующими способами: Используя элементы анимации SVG [svg-animation]. Фрагменты документа SVG могут описывать временные модификации элементов документа.
Можно ли импортировать EPS в After Effects?
Я часто использую много векторных ресурсов из Illustrator, когда делаю тяжелую моушн-графику в After Effects. After Effects может импортировать файлы . ай и . eps, но если эти файлы не настроены должным образом, получение фрагментов в виде отдельных слоев в After Effects требует некоторой подготовительной работы.
Как преобразовать SVG в Illustrator?
Как преобразовать SVG в AI
- Загрузить svg-файл(ы) Выберите файлы с компьютера, Google Диска, Dropbox, URL-адреса или перетащив их на страницу.
- Выберите «в ai». В результате выберите ai или любой другой формат (поддерживается более 200 форматов).
- Загрузите свой ИИ. Позвольте файлу сконвертироваться, и вы сразу сможете скачать ваш ai-файл.
Является ли Лотти SVG?
Как мы уже знаем, файлы Lottie — это анимация, но они также могут быть и статическими… в то время как SVG — это просто старые статические изображения.
Является ли SVG изображением?
Масштабируемая векторная графика (SVG) — это формат векторного изображения на основе XML для двумерной графики с поддержкой интерактивности и анимации. Спецификация SVG — это открытый стандарт, разработанный Консорциумом World Wide Web (W3C) с 1999 года.
Как анимировать SVG в Adobe?
В Animate прокрутите или переместите точку воспроизведения в соответствующий кадр. Выберите «Файл» > «Экспорт» > «Экспортировать изображение». или выберите «Файл» > «Параметры публикации» (выберите параметр «Изображение SVG» в разделе «Другие форматы»). Введите или перейдите в папку, в которой вы хотите сохранить файл SVG. Убедитесь, что вы выбрали SVG в качестве типа «Сохранить как».
Подходит ли SVG для игровой графики?
Так чем хорош SVG? Графические ресурсы. SVG — это хороший способ упаковать изображения для вашей игры. Как только они появятся на клиенте, вы сможете преобразовать их в растровые изображения, а затем использовать для рендеринга своей игры. Прелесть в том, что вы получаете независимую от разрешения масштабируемость SVG и небольшой размер изображений.
Learn how to go from a static icon to a fun animation using Illustrator CC and After Effects CC
Now that you know what this is all about let’s jump into the fun part — learning how to bring icons to life.
Let’s suppose you have an icon or two that you’d like to see enlivened by means of a visual illusion — animation. Where would you begin? Perhaps you have the SVG files sitting around, and Adobe Creative Desktop Apps such as Illustrator CC and After Effects CC at your disposal, but maybe the solution eludes you.
Today, all of that changes. I’m going to demonstrate how you can easily animate an SVG file, which includes preparing an SVG file in Illustrator, explaining how to import it into After Effects CC, converting it to Shape Layers, adding the movement, and lastly commenting on the exporting/rendering process.
You can jump directly into one of these four steps:
By the end of this blog post, you will attain the fundamental knowledge required to transform any SVG into a beautiful work of art. Let’s dive in!
Let’s start by opening your SVG file of choice in Adobe Illustrator CC. I will be animating a little car icon, which is, by the way, one of the Week Of Icons freebies.
After opening the file, we need ungroup and separate all of the objects into layers. You can do this manually, or use Release to Layers (Sequence) to speed up the process. Finally, we’ll need to Save As an Illustrator CC file before importing into After Effects CC.
Now we’re ready to import into After Effects CC. Let’s use the Keyboard Shortcut Ctrl+I (Windows) or Command+I (Mac) to load the Import File dialog box, or navigate to File > Import > File… From there, select the Illustrator CC file that we prepared and click Import . A smaller dialog box should appear with the name of the file you chose. Select Composition from the drop-down list that is labeled Import Kind .
In the Timeline Panel, we should see a new composition. Double click on the new composition. We should now see our Illustrator CC layers with their orange icons to the left of the layer names.
Before we can get down to business, we’ll want to convert all of these layers to Shape Layers. We can do so by selecting all of them with Ctrl+A/Command+A , or manually with Shift + Left Mouse . Once we have the layers selected, Right Click on a layer, and select Create > Create Shapes from Vector Layer .
Now, with the new Shape Layers highlighted, drag them to the top of the panel above the Illustrator CC layers. Delete the Illustrator CC layers to clean up the clutter.
While not necessary, it’s important that we give each Shape Layer an appropriate name and/or label color. Doing so will allow us to work more efficiently when we’re concentrating on the keyframes. In the example below, the labels’ colors more or less match the fill of their respective Shape Layers.
It’s always helpful to organize your Shape Layers with appropriate names, label colors, and layer arrangement.
Use the Keyboard Shortcut Ctrl+K/Command+K or Composition > Composition Settings… to adjust the settings. From Composition Settings, we’ll want to choose our Width, Height, Frame Rate, and Duration. For this project, I’ve chosen 60 frames per second due to its smoothness.
At this point, it seems as if everything is ready to roll, but there’s one last thing to get the prep work out of the way: we need to group certain layers together so that their movements are synchronized to another primary layer that we can control. This method is called Parenting.
For our example, I assigned less significant layers (child layers), such as the windshield, body details, tree, and ropes to the primary car body layer (parent layer). This allowed me to control properties like the position and rotation of the entire car (excluding the wheels) with just the parent layer.
I wanted to make the car icon hit a rock, become slightly airborne, lift the tree, and open the trunk as well. I started with the rock, car, and wheels, getting the bounce just right. Then it was time to take on the biggest obstacle: creating the overlapping action on the tree. Upon finishing that, I tackled the smaller details, like the trunk and ropes.
We will cover more animation tips in a later blog post, but here we will go a bit more in-depth about a couple of things. The first order of business was to make a rock element or layer, but instead of returning to Illustrator CC to add another layer, I simply used the Pen Tool in After Effects CC. It allowed me to rapidly design the small rock shape.
The trunk was a relatively simple task to carry out. It wasn’t an original element, meaning more After Effects CC improvisation using the Pen Tool . I set its position to the rear of the red vehicle and set the anchor point to the bottom left vertex. Using the Pick Whip , I assigned it to the car body parent layer. The penultimate step was to paste an expression to the rotation property that gave the layer a bounce/overshoot effect. Then I added the rotation keyframes.
Everything else was done in a similar manner: keyframing stuff until it looked and felt right, taking time to observe the animation at different speeds using the Preview panel, stepping away for short periods to gain a fresh perspective, and so on. Eventually, I decided the result was satisfactory and ready for human consumption.
By this point, you’re eager to show your artwork (in this case, animated iconography) to the world. But how do you export your animation for everyone to see? There are several ways of going about this, but suppose you’d like to go back to the scalable vector graphics (SVG) format? In other words, what if you wanted an animated icon on your website that looks pristine and sharp regardless of its size? The solution is an After Effects CC extension called Bodymovin combined with the mobile library Lottie. But you’ll have to wait until Iconfinder’s next blog post (How to use animated icons on a website or a mobile app) to learn more! It goes live on December 12.
P.S. Here you can find my Illustrator CC and After Effects CC files.
Week Of Icons is an initiative by Adobe and Iconfinder that celebrates the craftsmanship of icon design. Introduced in 2017, the campaign focuses on inspiring designers and design-enthusiasts to learn more about iconography.
The car icon used in this article is part of a Christmas icon set by Monkik. The set is available for download as today’s Week Of Icons freebie.
Читайте также: