• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Imported Illustrator shapes with gradients turning gray after creating shapes from vector layer in After Effects

New Here ,
Dec 06, 2014 Dec 06, 2014

Copy link to clipboard

Copied

Hello,

I imported an Illustrator file with different shapes with gradients into After Effects. When I create shapes from the vector layers the shapes are turning gray and the gradients are lost.

I already found some thing which helped others to solve this problem but I already checked them but it still doesn't work:

  • All used colors are process colors
  • The document color profile is RGB
  • every shape is on its own layer
  • I created the .ai with the Video and Film template
  • I created a PDF compatible file

I would be very happy if anybody could help me. Recreating the gradient in After Effects is not a solution for me. 🙂

Views

35.0K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Beginner , Oct 17, 2018 Oct 17, 2018

Hey all,

I ran into the same problem regarding the gradients from Illustrator to AE and at times it might be necessary to import Illustrator files and convert them to shape layers. For example if you want to render an SVG animation.

I haven't tried this yet, but a friend just referred me to the Overlord After Effect add-on by BattleAxe https://www.battleaxe.co/overlord

(Disclaimer: I'm not affiliated with Battle Axe in any way, nor do I know the creators. I'm just sharing this because it might be

...

Votes

Translate

Translate
Dec 06, 2014 Dec 06, 2014

Copy link to clipboard

Copied

The command to create shapes from vector graphics does not preserve gradients or many other aspects of an Illustrator document.

The bits of advice that you mention are related to importing Illustrator documents; they have nothing to do with this conversion to shape layers.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 06, 2014 Dec 06, 2014

Copy link to clipboard

Copied

Recreating the gradient in AE is the only solution unless you can use the original illustrator asset. There are only a few things that you can do with a shape layer that you can't do with an illustrator layer. If you absolutely must have your gradients AI assets converted to shape layers you'll have to use the Shape Layer gradient tools to do so. You can almost do the same things, the workflow is just slightly different.

A detailed explanation of what you are trying to achieve would help a bunch. I've never found a design problem that I could not resolve in AE but I have no idea what you are trying to accomplish.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 09, 2017 Jul 09, 2017

Copy link to clipboard

Copied

So If I have to animate few characters made in illustrator with gradients, I have to remake all gradient in after effects?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 09, 2017 Jul 09, 2017

Copy link to clipboard

Copied

No... The only reason to turn an Illustrator layer into a shape layer is to use shape layer animators available under the add button in the shape layers or if you have to actually animate the path that make the shape. You don't need to convert to shapes unless you are using these animators or trying to extrude the layer or you are animating the path.

Just converting a vector file to a shape does not gain you anything other than these features. If you are doing it because you think it is the right thing to do or that you will gain something in the way of quality you are just wasting your time. You also loose a lot of features that can be very helpful when designing characters. Fancy gradients and custom strokes are two of the biggest losses.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 21, 2018 Mar 21, 2018

Copy link to clipboard

Copied

Just want to point out that it can be necessary to create shapes from layers when you're working with animations for apps and code.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 02, 2023 Nov 02, 2023

Copy link to clipboard

Copied

How come almost 10 years later this issue has not been resolved? These two adobe products that can't handle the same file type, that you literally invented... how discouraging.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 17, 2018 Oct 17, 2018

Copy link to clipboard

Copied

Hey all,

I ran into the same problem regarding the gradients from Illustrator to AE and at times it might be necessary to import Illustrator files and convert them to shape layers. For example if you want to render an SVG animation.

I haven't tried this yet, but a friend just referred me to the Overlord After Effect add-on by BattleAxe https://www.battleaxe.co/overlord

(Disclaimer: I'm not affiliated with Battle Axe in any way, nor do I know the creators. I'm just sharing this because it might be helpful to someone.)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 11, 2019 Nov 11, 2019

Copy link to clipboard

Copied

logged in just to thank you.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 14, 2020 Nov 14, 2020

Copy link to clipboard

Copied

Logged in to thank you as well. Wonderful. some gradients that were rotated didn't work, but i followed instructions and re-drew the line and it worked.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 02, 2023 Nov 02, 2023

Copy link to clipboard

Copied

I use the overlord plugin all the time it is very helpful. It suports linear and radial gradients as well as text layer editability.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 08, 2019 Feb 08, 2019

Copy link to clipboard

Copied

I'm having this same issue. I swear I've gotten gradient strokes to import into AE before, but I've tried everything, and not getting them to import in 2019. I do have the Overlord extension, and it seems import them fine if you have that, unfortunately I'm making a tutorial so that won't work in this case.

The one other solution I can offer, is if you're just doing something like you want to use Trim Paths in AE, you can import the layer, convert it to shapes, apply trim paths to the greyed out shapes, and use that layer as an alpha matte to your original layer with the gradients. (be sure to continuously rasterize the AE layer.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 28, 2020 Sep 28, 2020

Copy link to clipboard

Copied

Thank you so much!!!!! This helped me so much. You are a true hero!! That's all I really wanted to use was trim paths. Plus it may work with the other features as well. Not sure as I don't need to do anything else. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 30, 2021 Sep 30, 2021

Copy link to clipboard

Copied

Hi. Can you calrify how i do this please?

 

Shoudl the greyed shaped be above the gradient layer? This doesnt seem to be working for me.

 

Any help would be great! Thanks

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 05, 2020 Nov 05, 2020

Copy link to clipboard

Copied

Hey! I was facing the same issue for quite some time and thought I'd need to recreate the gradient again but there is a way! I fixed it by applying a gradient overlay over the vector shape, found under layer styles > Gradient Overlay. If you want to apply the gradient as a fill, apply the gradient overlay on the shape layer itself and if you want it as a stroke, copy and paste the gradient overlay effect onto the shape path. You can carry on copy pasting the effect on any path/shape similarly. I hope it helps! 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 10, 2022 Jan 10, 2022

Copy link to clipboard

Copied

just use overload plugin

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 10, 2022 Jan 10, 2022

Copy link to clipboard

Copied

The name is Overlord, but yes, it's a great solution to this longtime workflow issue.
https://www.battleaxe.co/overlord

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 01, 2020 Dec 01, 2020

Copy link to clipboard

Copied

I had some spot colors, once I switched them to process colors all my gradients came in just fine, maybe that will help!

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 27, 2022 Aug 27, 2022

Copy link to clipboard

Copied

I also run into the same kinda problem.. and I actually solved it surprisingly, I first download a character online and re-created the whole thing again, but I was still maintaining the gradients from the character which was used for the shadow link to the character https://www.instagram.com/p/Chs0-GXszF8/?utm_source=ig_web_copy_link I imported it to After Effect when I was done with the Layering, but the shadows weren't showing as it shows on illustrator, which was the gradients. I did all the necessary changes, changing the color mode to RGB same as the illustrator, and still didn't work. My research brought me here and as l was reading the replies it hit my mind to try something out by changing the blending mode, I did it and it worked. I literally got the shadows showing exactly as it was in illustrator, by changing the blending mode to 

"multiply"

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 02, 2023 Nov 02, 2023

Copy link to clipboard

Copied

If you have a very complex Illustrator layer that needs to be converted to a shape layer, you can bring the file into Adobe XD and immediately export it as an After Effects project. If the AI file has only one or two layers that need to be converted, the most efficient approach is to remove those other layers first.

 

Here's the workflow. 

  1. Clean up your AI file
  2. Launch Adobe XD and choose New File
  3. From the file menu, choose Import and select your cleaned-up AI file
  4. Before doing anything else, choose File/Export/After Effects
  5. After Effects will open if it is not open already, and a new comp will be created with every element of the AI file as a vector layer that you can animate

 

That's it. To make this workflow efficient, you need to make sure that any layers that do not need to be converted to shape layers so you can use shape layer animators or extrude them or animate the paths have been removed. You can easily end up with a couple hundred layers and dozens of nested comps if you import complex files.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 16, 2023 Nov 16, 2023

Copy link to clipboard

Copied

LATEST

A completely free and efficient fix for importing shapes with gradients is:
Open vector file in Figma -> Use free AEUX plugin -> Send to  After Effects.

You might need to readjust some gradients in Figma, but it's way better than managing all of them in AE. 
My trick is to use solid colors in Illustrator and recreate the shades in Figma, with a screenshot reference.
You don't need the battleaxe overlord paid plugin.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines