The best Adobe Illustrator to After Effects workflow — Tutorial

[Music] hi everyone it's ihor from motion design school and in this video i will tell you everything you should know about working with adobe illustrator layers in after effects we're gonna start from import and file preparation then i'm gonna cover two different approaches of working with vector layers in after effects problems that you may deal with and i will also suggest you a couple of tools that will significantly improve your workflow and of course i will show you how to use them actually this video turned out a bit longer than i thought it would be so time codes are included and let's get started alright let's start from import everything is pretty easy here just double click in the project panel select the file that you would like to import and click import in this pop-up window i would recommend you to select the import kind as composition because we want after effects to create a separate composition with all the layers inside of it if you change it to footage all the layers will be merged into one or there is also an option to import just one separate layer from the adobe illustrator document but actually i don't use this feature at all so i'm gonna change it to composition and in footage dimensions i'm gonna select the layer size because we want all the objects to have the bounding boxes of their original size not the whole canvas size okay and right now we have a separate composition with all the layers inside of it and also a folder with all these layers i'm going to open the composition and as you can see here i have all the separate elements on separate layers and that means that i can already start animating it but before talking about what we can do in after effects let's talk about what we need to do in adobe illustrator first to make everything look like this in after effects alright so here we are and i think it's pretty obvious that all the elements that you would like to animate separately in after effects should be placed on a separate layers inside adobe illustrator just pay attention that you need layers not just groups that you can create with the help of ctrl g hotkey actually there are two ways to split the illustration into layers and i'm gonna show it to you on the example of another source file where we have nothing prepared yet and the first way is to create a new layer by using this button rename it to something more clear to you for example i'm going to rename it to bone then select the object you would like to be separate in after effects and place it on this layer and that's it just repeat the same operation for other objects or it can be done in much easier way just draw everything in one layer then group all the objects you would like to be separate in after effects like i did here and then select the main layer go to layers panel menu and select release to layers sequence that way each element right now is on each separate sub layer and all you have to do is just select all the sub layers and drag them out of the main layer so that they all have the same highest hierarchy level and that's it i'm going to remove the empty layer and save the file and one more important thing is when you save the file using the save as function please don't forget to select the create pdf compatible file option otherwise after effects will have problems with reading this file okay let's get back to after effects and talk about the ways to work with illustrator layers inside of it and the first approach is to leave everything as it is maybe just turn on continuously rasterize option for all the layers to be able to scale them without quality loss like this here if i turn off this option there will be some pixels but with it it's perfect and the cool thing about this approach is if i change something in adobe illustrator for example i'm gonna change colors of some of these objects after saving the file everything will be automatically updated in after effects too but be careful with making edits because if you significantly change object's shape or layer structure especially if you already have animation in the scene this will ruin everything in after effects so what i can say about this approach in some cases it works well but i would say for very basic and not complex animations which are created with transform properties or it can work well for digital cut out animation but in complex projects with custom animations like this we usually use this approach mostly for background elements and textures where we don't need that much control over layers shape and properties and here comes the second approach which we actually use in almost all our projects and this approach is that we convert everything to shape layers it's very easy to do just select all the layers you would like to convert right click select create create shapes from vector layer and that's it everything is recreated with shape layers this approach has a bunch of advantages and first of all it's flexibility because we have access to all drone groups of the object so we can control their path property stroke settings change their color and have a full access to transform properties of each group moreover if you see that the splitting illustration into layers that you did in adobe illustrator doesn't work you can still rearrange layers inside after effects and believe me there will be so many of such cases and the second advantage of this approach is that it can significantly reduce the project folder size because after converting everything to shapes all the graphics are recreated inside after effects and we don't need source files anymore of course sometimes it can be risky to remove the source files so you can just pre-compose them [Music] and turn off its visibility [Music] but there are few nuances you should know about when working according to shea player's approach the first is artboard bound in boxes let me explain what is this and why does this appear so for example i decided to add a shadow to this element in adobe illustrator i'm gonna do that in the following way i will duplicate this pink ellipse remove stroke from it then i'm gonna change its blending mode to multiply adjust its shape to something like this it will also adjust its opacity and sorry tyler for violating your designs it's all just for educational purposes save the file switch to after effects and if i decide to convert this object to shape layer there will be no transparency no blending modes and moreover there will be additional rectangular paths around this object and because of that this tiny object will have a bounding box of the composition size and that doesn't allow me to select objects that are below this layer that happened because after effects automatically creates additional groups with paths and additional merge path modifiers that create artboards around my object of course you can find and remove them manually that may take you some time or you just can use the remove artboard button of our free motion tool script the link to it is in the description and for that you just need to select the object and click remove artboards button that will automatically remove all the merge paths and additional groups so if you deal with an artboard issue know that this is caused by change the opacity and blend mode in adobe illustrator so after removing artboards you will have to fix these properties in after effects manually and the next problem that you can deal with is gradient fills if your illustration have gradient fills like this one there will be a problem because after effects cannot convert gradient fills correctly so after converting this illustration into shape layers all the objects will be painted with gray color and most of them may have this artboard issue so you can try to recreate all the gradients manually or leave gradient parts as illustrator layers and this problem also can be solved by one of the tools that we are going to talk about next and the first tool that we are going to talk about is a great game changer in import process it's overlords developed by battle x it's not free but it totally worth its money and it became an essential tool of my working process the link for it is also in the description to this video this extension will be automatically installed for after effects and adobe illustrator after installation you'll find its panel in window menu extensions overlords and once it is opened in two programs you can already start working with it it's very easy to use you just need to select object or group or whatever you would like to import to after effects and click this button it will import everything to after effects as shape layers and as you can see we have all the gradients inside of after effects and all the blending modes imported correctly that was impossible with create shapes from vector layers and the coolest thing that this import works in both directions so for example i have this guy with eyes closed from pleasure but i also need him with eyes wide open according to the client's script and i don't have this state in adobe illustrator file so i'm gonna draw him tiny eyes in after effects d phase studio just please forgive me for violating your illustrations this layer will be called eyes open and by pressing this button in after effects i will push it back to adobe illustrator okay now i can pass this source file to my teammates who may also need this face expression in their scenes well there are some more import options that i would like to pay your attention to the first one is called split shapes two layers that means that you don't have to split everything into layers in adobe illustrator once again it's enough to draw everything in one layer group the objects name them properly and then just select the general layer and click this button it will automatically import all the groups as separate layers and yes everything looks amazing even names are the same that's really insane and we also have here a text layer that would have been ignored if we used create shapes from vector layer option the next import option is detect parametric rectangle or ellipse i usually leave this option turned on after effects by default or with this option turned off converts all the ellipses and rectangles to bezier paths but with this option rectangles and ellipses will be imported as parametric shapes for example if i push this rectangle with this option turned on i will be able to adjust its position size roundness of its corners and this is very useful especially in ui animations morphings and a lot of other cases the next import option is center anchor points basically it places anchor points in the center of your object not a composition center and this is the second option that i always leave turned on the last option of these four just places the imported objects to the center of composition i don't use this really often the next one is for switching between illustrator and after effects and vice versa and this one is really useful it creates a new illustrator document of the same size as your opened after effects composition sometimes this can be helpful if you eventually created a wrong size document or started to draw something in a wrong file and this button is for pushing swatches to after effects for that you just need to open a swatch panel select a swatch click this button and after effects will automatically create a swatch on a shape layer [Music] and the last button here allows you to push guides to after effects that was all the main functionality of overlord extension and now let's switch to the tool that will help us in working with imported illustrator files and shape layers on the timeline so this is our motion toll script it was developed by our founder yaroslav kononov and our great developer mikhail uklev it's absolutely free you can download it by following the link in the description comprehensive tutorial is included actually we use this script on an everyday basis it's a very versatile helper it has a bunch of functions for working with animation layers and keyframes etc but today we're going to focus mostly on these buttons that serve for work with shape layers so the first button is convert to shape and actually it converts selected vector layers to shape layers pay attention that each button the script has an additional function if it's clicked with a modifier key for example if i click convert to shapes with alt key pressed this will automatically remove illustrator layers from the timeline and even annoying artboard groups from the shape layer contents that means we don't need to click this button afterwards and now let's talk about these two guys here they save my time and life every day remember i told you that there are often cases when you realize that splitting into layers you did in illustrator doesn't work so you can change it in after effects but if you are doing this with simple cut and paste you will get position problems for example i have these two layers of the rope and i want them to be in one layer i'm gonna cut the group one from the row player and gonna paste it to row back and as you can see there will be some position and anchor point problems so these two buttons actually serve for comfortable rearranging of layers extract button extracts selected shapes to a separate shape layer and merge button merge selected shape layers into one like almost all buttons of the script these two also have additional functions when they are clicked with modifier key pressed actually there are more functions in this script that can be really useful while working with vector layers as well but this is a topic for another lesson which is waiting for you together with a download link in the description and that's basically it these were two approaches of working with illustrator layers in after effects and the tools that we are using in our workflow so let me know was it helpful maybe you have some questions leave them in the comments and tell us more about your workflow and of course don't hesitate to share some tips too if you enjoyed this video give it a like share it with your friends subscribe to our channel and follow us on social media and see you in the next one [Music] you

Channel: Motion Design School

Views: 317,307

Keywords: illustrator after effects workflow, after effects tutorial, illustrator tutorials, after effects import illustrator layers, illustrator layers, ai to ae, illustrator to after effects, illustrator to after effects layers, after effects workflow, overlord ae plugin, motion tools 2.0 after effects, motion tools, after effects, adobe illustrator tutorials, after effects to illustrator, after effects to illustrator motion graphics tutorialio n, ae import illustrator layers

Id: JVKspknn1hQ

Length: 16min 43sec (1003 seconds)

Published: Thu Dec 24 2020