Preserving illustrator settings after converting to layers to shapes on AE import

[yodemartino]

Hello,

I've searched both this forum and Google but can't figure out how to fix this problem with a simple AE animation I'm trying to build.

The problem (see attached screenshot for visual) is converting my .ai file to shapes in AE ruins the illustration (by removing opacity and layer styles for certain shadow/highlight layers)...and I can't figure out how to fix this.

I believe I have all of the layers separated properly, so that part of the import works fine, it's just the quality of the conversion based on the settings. I know after effects cannot preserve opacity and layer style settings, but I can't figure out how to get the vector illustration imported without having to manually readjust all of the settings that are getting lost.

I'm doing a simple animation of the jet flying up from the bottom right, so I don't necessarily need to preserve the separate layers of the illustration...but I tried using the merge option in illustrator and got the same results when converting to shapes in AE. Does anyone know how I can import a *vector* (not raster/Photoshop) version of my illustration from Illustrator without losing those settings? Even if I have to somehow flatten or merge the illustration that should work, I just can't figure out how to do that without turning it into a raster image. 

Thanks in advance!

[Martin_Ritter]

There are limits when it comes to converting vectors into shapes. On complex graphics like yours this usual turns out highly confusing and useless. Actually, everything is there (except the gradient), but messed up into masks and visible areas.

I found working with converted shapes is not necassary most of the time, just take the AI-layers. The only reason for using shape layes is, when you want to animate the paths. If this is not the case, skip the conversion.

Generally, you can do yourself a flavor by creation your artwork as easy as possible. AI offers a great amount of tools and workflow to create graphics, but your aim is the animation, therefore it doesn't matter how it's created as long as it works in AE. This means, the more trival the artwork is set up, the better.

You can use transparency, but not blend modes. Always flatten colours (for light blue, don't use blue + multiplied white, but solid light blue), avoid gradients and just use them as guide for AE-made gradients and create shapes as they are, not as result of complex masking. Also, everything that don't need to be animated goes into a background layer (or middle ground, or foreground, depending on the artwork).

You might check out Overloard (https://www.battleaxe.co/overlord), which can copy/paste paths between AI and AE. I never used it, so I don't know about it's limits.

*Martin

[yodemartino]

Thanks for the reply Martin, there's a lot of helpful info there. 🙂

For my use case the convert to shapes function is a necessity unforutnately. I'm using AirBNB's Lottie animation library with Bodymovin to turn my AE composition into a JSON file (code only) for web design and it totally crushes the efficiency of the format. 

I can get it to technically "work" with the non-shape based .ai files, but that forces the software to render raster png's because it doesn't have the vector data it needs from the shape format. I know it sounds trivial but the difference of not having images and having them is massive for page load times on websites, even if they're very small and compressed. Raster images are also a huge headache because the the resolution/dimension is locked in and has to be re-generated for different formats and bigger sizes when/if needed vs. being able to scale in any direction infinitely on the fly. 

I can certainly simplify some of my work, but it's strange to me the blending modes available in both programs aren't mapped as a data point when the conversion is done since the ones I use are available in both and create the same effect. Avoiding the blending modes cuts back a lot of the stylistic possibility, some of it can be recreated with lots and lots of layers...but to me that feels like a huge restriction on what AI/AE can do together without tons of rework (and defeats the benefits of creating blending modes in the first place). 

It's always possible I'm misunderstanding something so if there's a way to get the JSON animation (exported from Bodymovin) without converting to shapes (and without generating dependent PNG/raster images) I'm all ears!

Thanks again Martin, appreciate you taking a look.

T

[Rick Gerard]

Layer styles and raster effects can turn vector layers into pixels so CR will not work anymore.

There are only 2 real reasons to turn vector layers (AI) into shape layers. Reason 1,  you want to animate the actual vector path. Reason 2, you need to use one or more of the Shape Layer animators under the Add button in the timeline. 

It would really help us to know what you were trying to do with the layers. I can't see any reason at all to convert your vector layers to shape layers in your screenshots.

[yodemartino]

Thanks for the reply Rick. I mentioned why I need to convert the .ai files to shapes in my previous post, but to reiterate:

I'm creating a simple animation of the jet in the background moving up from the bottom left of the image (you can see a working example on https://tomdemartino.com).

I'm using an AE plugin called Bodymovin which is built for an animation library called Lottie. The current version on the site linked above was built exactly how you describe, and when I export the composition using Bodymovin it creates the necessary JSON file and an "images" folder of raster PNG files. If I convert the .ai files to shapes then do the same process, there's ONLY a JSON file which is 100% code (and the result I want). Hope that makes sense, but I basically want my illustration to look how it does in Illustrator without generating the raster assets.

Thanks for taking a look!

Edit: just to touch on the point you made in the previous post - I didn't apply ANY type of raster effect or layer style in Illustrator and everything is still SVG/vector based until I do the conversion.

[Martin_Ritter]

In an ideal world, there would a common sense between all Adobe products, but in reality, there aren't even the same shortcuts for the same functions - so it's no wondern, that AI to AE only includes some, but not all properties. The issue is not technically (you can make a dialog to handle color transformation and layer styles and whatever, you can do this on autopilot, because nobody wants CMYK in AE and obviously, everything should look like as it is in AI), but the lag of an actual workflow between those programs.

I understand what you are aiming for, but it seems that there is no magic trick to make AE create useful shapes in an fast and easy way.

You can try to clean up your artwork, so AE has it easy to convert it into shapes.

You can try to sort out that AE gives you right now. Dig into the shape layers, make your way through all the groups created and tidy the mess up and re-create in AE, what was dropped during conversion.

But I think it's faster and less head aching to take the artwork as template and re-create everything in AE with shapes right from the beginning. This should be doable in a couple of hours.

Check out Overloard and Adobe Animate.

*Martin

[Martin_Ritter]

Rick, the what and why is just in the post you replied to.

[Rick Gerard]

Using AE to create animated graphics for web pages is a lot like driving nails with a screwdriver. The tool is not well suited to the job. As Mylenium said, you either have to simplify your design or use different tools. 

[Mylenium]

I can certainly simplify some of my work, but it's strange to me the blending modes available in both programs aren't mapped as a data point when the conversion is done since the ones I use are available in both and create the same effect.

Utterly and totally not. Blending modes and transparency handling work completely differently in AI compared to AE. Unless they completely change AI, a direct conversion will never be possible. You know, process colors, solid colors, CMYK and general use of color profiles, all restrictions which would not apply to AE.

And to add one more point: Using blending modes and transparancies in SVGs isn't that efficient, either, as it causes additional computations and may not render correctly, especially on mobile devices. Kind of defeats your point of avoiding raster data just as well. Design your artwork to actually use only solid colors wherever possible.

Mylenium