Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Importing type from illustrator

From: After Effects: Principles of Motion Graphics

Video: Importing type from illustrator

I'm sure many of you understand the advantage of creating graphics inside of Illustrator for the most part, but if you're new to Illustrator or just a little unfamiliar, Illustrator is a vector-based graphic application. That means no matter what size you create an element, you can scale that graphic as large as it needs to be without losing any quality in the graphic. Of course there are exceptions, as Illustrator can import and create some rasterized graphics. But really about 90% of the time you'll be working with 100% fully vector-based files.

Importing type from illustrator

I'm sure many of you understand the advantage of creating graphics inside of Illustrator for the most part, but if you're new to Illustrator or just a little unfamiliar, Illustrator is a vector-based graphic application. That means no matter what size you create an element, you can scale that graphic as large as it needs to be without losing any quality in the graphic. Of course there are exceptions, as Illustrator can import and create some rasterized graphics. But really about 90% of the time you'll be working with 100% fully vector-based files.

So what does this mean for you? Well, quite possibly a few things. Now, we're going to import these graphic elements into our project using a few different methods, and I think once you see just how many options there are, you'll have a better idea as to the flexibility that Illustrator can provide your projects. So to get started, the first thing to understand with Illustrator is the fact that you can have multiple elements all residing on one individual layer. Now, if your interface doesn't look like this, in Illustrator, go up to Window > Workspace, and make sure Typography is selected.

Now, the Layers panel is in the lower right-hand corner and notice we only have layer 1. And if I click on this disclosure triangle, you can see I have all these other text layers underneath. Now, what we need to do before we import this into After Effects is make sure each one of these elements lives on its own individual layer. Now, when we created these type layers, they automatically became sublayers of layer 1. If I just click on that layer and try and drag it up above layer 1, it's not really going to work, and that's because type is actually set up as a default layer.

What we really need to do is actually create the new layers for these type layers to live inside. So what we'll do is select layer 1, and down here at the bottom of the Layers panel, go ahead and click the Create New Layer button two more times. Now I can select this top Wave layer and hold down Shift and select King underneath of it, and with both of those layers selected, just drag them up to layer 2. And I know it's going to appear on layer 2 because I can see that triangle there in the left-hand side of the layer. When I let go, now if I turn the visibility off on layer 2, you can see I have this version of the King Wave graphic on layer 2.

Now, let's do the same thing with the other layers on layer 1. Select the first layer, Shift+Click, select the second layer, and now drag that up to layer 3. Now, if we turn the visibility on and off, we can see these other versions. So let's rename our layers. layer 3 we'll call King-Slab. I'm calling it slab because that's a slab serif font. Go ahead and click OK. And then layer 2, I'll call it King- Trad, for traditional and click OK, just because that's a very traditional kind of chiseled-looking serif font.

And then this layer 1 we can go ahead and rename as King-Mod for modern. Okay. I'm just calling it modern because it's a clean sans serif font. Now, before we go into After Effects, go up under File and don't choose Save, but choose Save As. I like to choose Save As because when I work with elements that are optimized for After Effects I like to notate that. So I still have the original Illustrator file and then I will have another copy that's notated for import into After Effects.

So since all the type is already selected, all you have to do is press your right arrow, and now my cursor is ready to start typing. So go ahead and type dash and then put AE. I always use capital AE just so I know that that's going to be what I import into After Effects. Notice I'm saving it into my Illustrator Sources folder, Ill-Sources, and I'll leave it as an Illustrator-formatted file and click Save. Now, of the nice things about Illustrator is the fact that you can save it in multiple versions.

So if you had older versions on a different computer, you could flatten things out that way. We'll just leave it at CS5 and click OK. So now let's import this into After Effects. I'll just Command+Tab over to After Effects, and to import the Illustrator document all we have to do is double- click in the Project pane and navigate to our Ill-Sources folder, and in here we want to choose the one that ends in -AE, because I know I've optimized those files. Under Import As, make sure you have Composition - Retain Layer Sizes selected.

That way each one of these groupings will end up on its own layer, and the transformation handles will be tied just to the graphic, not to the overall composition. So go ahead and click Open. Now if we double-click this KingWave-AE file, we can see absolutely nothing. Well, that's not really true, because actually the text is here; it's just black, and this is quite common. So a lot of times what I'll do instead of changing the color of the type, I'll just go right here and actually enable the alpha channel.

So when you choose Alpha, now I can see all the different elements that are in this composition. I could have just as easily gone up under Composition and changed the background color under my Comp Settings right here, but honestly, I just like to turn on my alpha channel. That will make things really, really easy. But if you notice, now when I go ahead and turn off and on King-Slab, it's on its own layer. I can do the same thing for King-Trad and King-Mod. But all in all, we've optimized the Illustrator document and imported it into After Effects.

Now, this is well and good, but we need to see exactly what happens with Illustrator files. So with King-Mod selected, let's go ahead and press S on our keyboard to open up Scale, and just click and drag on the Scale parameter, and just drag it all the way up. And if you're seeing these jagged lines, what you need to do is click this button right here in the Timeline, underneath the thing that sort of looks like a sun. This is called Collapse Transformation. So notice when I click on that, now I'll have some sharp edges.

Now, I'm getting this slight jagged edge and that's just because I'm not at 100% magnification. So if I go ahead and change my magnification to 100%, now when I press the Spacebar and pan around, you can see, even though this type is huge, it's perfectly sharp, and that's because it's continuously redrawing this vector-based graphic as it's being scaled up. Now, let's go ahead and just scale this back down to about 100%. Now, even though I had to go ahead and change my magnification to 100% so I could make sure that it was sharp, the moral of the story is, really, once you have Collapse Transformation selected for any Illustrator layer, as long as it's vector-based, when you go ahead and scale that layer up, it's going to have nice and sharp edges when I go ahead and render my project.

So you've seen how to import the file, you've seen how to actually scale it up, but one other thing that you can do with this file is take the outlines from the type and actually bring those in as paths on their own layer. And the way to do that is not through the import command, but to actually copy and paste. So what I'm going to do is just turn off the visibility of all these layers, and go up under Layer, choose New > Solid, or just press Command+Y or Ctrl+Y. We can leave it a dark gray Solid. That's fine.

I am going to click OK. Now, you notice it's not dark gray and that's because I have the alpha channel selected here. So let's go ahead and jump back to RGB, and now we can jump to Illustrator-- again, just Command+Tab. So in Illustrator make sure that King Wave up here on the top is selected; with your direct Selection tool just go ahead and draw a box around the top King Wave here. And what we want to do is go up under Type and Create Outlines. What that does is draw a path around the outside of all the letters.

So now with that selected, we can just go up under Edit and choose Copy. So when we Command+Tab, jump back into After Effects, with the Dark Solid layer selected, we can go up under Edit, and when we choose Paste, look what happens: the dark gray is actually cut out using masks. So when we press M, you can see there are multiple masks that make up this King Wave text. So now that the text is only paths, we can use the stroke effect to actually draw on an outline or animate an outline of this type.

So if we go up under Effect, we can go to Generate. And if you choose Stroke, let's look at the Effects Control options right here. Notice first off I can stroke just an individual mask. So by default, Mask 1 is selected. Or, we can choose All Masks, and by default Stroke Sequentially is selected. Now, if I go ahead and click and drag on that End here, you'll see that the outline of the type is appearing or disappearing as I drag back and forth.

Now, we could keyframe this parameter, and we could also paint this directly on the original image or on transparent. So when I go ahead and deselect this layer, you can see I have outlines of type created from paths that I pasted from Illustrator. So as you can see, working with Illustrator sources can give your graphic elements a number of added benefits-- the least of which is just that much more added flexibility.

Show transcript

This video is part of

Image for After Effects: Principles of Motion Graphics
After Effects: Principles of Motion Graphics

60 video lessons · 22752 viewers

Ian Robinson
Author

 
Expand all | Collapse all
  1. 3m 37s
    1. Welcome
      1m 1s
    2. Using the exercise files
      1m 4s
    3. Defining motion graphics
      1m 32s
  2. 11m 11s
    1. Workflow for creating motion graphics
      5m 7s
    2. Organizing projects for motion graphics
      4m 25s
    3. Defining a motion graphics "package"
      1m 39s
  3. 12m 58s
    1. Collecting visual inspiration
      2m 14s
    2. Listening to imagine
      3m 20s
    3. Creating elements for inspiration
      7m 24s
  4. 33m 4s
    1. Essential theories of typography
      6m 34s
    2. Understanding shortcuts for setting type in AE
      7m 27s
    3. Converting type from Photoshop
      5m 51s
    4. Importing type from illustrator
      9m 44s
    5. Creating shapes from text
      3m 28s
  5. 36m 30s
    1. Understanding the role of timing in motion graphics
      8m 1s
    2. Creating and using markers
      7m 58s
    3. Creating animation with markers
      5m 16s
    4. Using audio to create animated graphics
      5m 47s
    5. Editing techniques for graphics and video
      9m 28s
  6. 49m 27s
    1. Understanding different kinds of type in After Effects
      15m 53s
    2. Using animators with type
      7m 59s
    3. Using type presets
      7m 35s
    4. Creating custom type presets
      4m 35s
    5. Animating paragraph type
      13m 25s
  7. 45m 51s
    1. Exploring the use of color in motion graphics
      10m 40s
    2. Creating and using color palettes
      13m 45s
    3. Exploring color correction tools in AE
      6m 46s
    4. Advanced correction with Color Finesse
      8m 30s
    5. Creating custom color presets
      6m 10s
  8. 59m 6s
    1. Exploring textures in motion graphics
      8m 30s
    2. Building an animated background texture
      16m 48s
    3. Creating textures for type
      10m 19s
    4. Animating seamless textures
      15m 1s
    5. Creating custom vignettes
      8m 28s
  9. 38m 25s
    1. Understanding lighting in After Effects
      12m 57s
    2. Intro to lighting techniques
      5m 17s
    3. Using material settings to enhance lighting
      7m 36s
    4. Adding polish to a light setup
      12m 35s
  10. 50m 32s
    1. Animating swoops and swooshes
      12m 37s
    2. Creating repeating light trails with the Vegas effect
      6m 28s
    3. Repeating patterns with shape layers
      8m 11s
    4. Exploring graphic transitions
      10m 37s
    5. Exploring video transitions
      5m 16s
    6. Adding dynamic elements to a video transition
      7m 23s
  11. 22m 23s
    1. Working in 3D
      8m 36s
    2. Rigging cameras for animation
      8m 45s
    3. Working with depth of field
      5m 2s
  12. 50m 54s
    1. Creating storyboards in After Effects
      10m 20s
    2. Creating an animatic
      18m 14s
    3. Polishing the animation and timing
      8m 45s
    4. Applying the final effects
      13m 35s
  13. 47m 53s
    1. Preparing a map for animation
      7m 59s
    2. Animating and styling a map
      8m 24s
    3. Designing a lower-third graphic
      8m 22s
    4. Adding animation to the lower-third graphic
      9m 10s
    5. Creating bumper animations
      13m 58s
  14. 14m 17s
    1. Defining the toolkit
      2m 2s
    2. Preparing templates
      7m 12s
    3. Creating a style guide
      5m 3s
  15. 1m 3s
    1. Next Steps
      1m 3s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed After Effects: Principles of Motion Graphics.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.