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

Exploring the use of color in motion graphics

From: After Effects: Principles of Motion Graphics

Video: Exploring the use of color in motion graphics

Color is just about as important to a motion graphics project as anything else. Just because our elements end up flying around the screen, doesn't mean we get to ignore the general principles of good design. So you need to be able to pick a decent color palette as well as understand some basic color theory. In this video, I'm not going to get crazy with details; I am just going to give you some thoughts as to how I like to work and when I like to interject color into my designs. If we look at our project here, you can see we have a logo for King Wave kayaks, and if you've been following along in some of the other videos, you'll recognize that name.

Exploring the use of color in motion graphics

Color is just about as important to a motion graphics project as anything else. Just because our elements end up flying around the screen, doesn't mean we get to ignore the general principles of good design. So you need to be able to pick a decent color palette as well as understand some basic color theory. In this video, I'm not going to get crazy with details; I am just going to give you some thoughts as to how I like to work and when I like to interject color into my designs. If we look at our project here, you can see we have a logo for King Wave kayaks, and if you've been following along in some of the other videos, you'll recognize that name.

This is the logo the client decided to go with. Now, it's time to animate. You might be looking at and going, well, why isn't there any color? And that's because most of the time when I am designing a logo for a client, I don't interject color until after they've chosen the specific look of their logo. It's really important when you're designing a logo that it can stand on its own in black and white just in case the client wants to create some print materials and they can't afford having four color prints. So I like to design in black and white and then at the last moment interject some color.

Now with logos specifically, when I choose colors, it's really important that those colors are the approved colors that go towards branding the look of the company or the products, but that's another video. So for now I just want to show how I interject color into these black-and-white elements. So, to get started what we need to do is divide up each of these elements onto their own layer. If we open the KW-Logo layer here in Illustrator, you notice I have a bunch of separate layers and sublayers and all kinds of things going on here.

So the easiest way to actually knock things out and put them all on their own layer is to deselect the layer, now that I clicked off, click back on, and then in the Layers tab go ahead and go to the flyout and choose Release to Layers (Sequence). When I choose that, notice the layer will expand and now you'll notice every single sublayer underneath of my KW- Logo layer has an object underneath of it.

So what this means is I can select layer 4, scroll down, hold down Shift and select 11--basically select all the layers--and drag them up out of the layer hierarchy above the top layer. So when I let go, now all of these layers are at the top of the hierarchy. This is really important because when I want to go to import this Illustrator document into After Effects I want to be able to animate each individual element. So we don't need this empty KW-Logo layer anymore.

Let's go ahead and delete it. Now, I could sit here and rename each one of these layers, but I'll save you the headache right now, and we'll just save this for import into After Effects. And if we have to, we can rename the layers within After Effects. So now that all the layers have been broken out, it's time to save a copy of this file. So go up under File and choose Save As. I like to choose Save As so I can actually go in and save a version, letting me know that it's ready for After Effects.

So put -AE at the end of the file name, and in your Ill-Sources folder, go ahead and click Save. When the Illustrator Options pop up, you can change the Version up here if you have to go to an older version of Illustrator at any point in time, but you want to make sure Create PDF Compatible File is selected. That way when you import it into After Effects, all the layers will import properly as well. So let's click OK, and I'll just jump over to After Effects. To import our Illustrator document into After Effects, double-click in the Project pane and choose our KingWave-AE file, and under Import As, change it from Footage to Composition-Retain Layer Sizes.

Now, when we click Open, our comp is imported, it's the proper size, and if we double- click to open the comp, you'll notice each individual layer was also imported. So now we have our layers in After Effects. Let's look at adding some color into the scene. First things first, though. This logo is on a black background, and I seem to remember there is a black stroke around the outside edge, so one of the things I want to do is change the background color.

So go to Composition--making sure you have either your Timeline or your canvas selected--go to Composition > Composition Settings and change the Background Color to some kind of gray and click OK, and now here we can see that edge on our logo. So first thing I want to treat the color of this background gray area. So let's see if we can select that layer. I think that's it, layer 11. Perfect! I'll rename that just by pressing Return, and we'll call it Diamond.

With the Diamond layer selected, we're ready to add color. Go up under Effect and under Color Correction, go down and choose Tint. This is one of my favorite effects I like to apply to objects because I have control specifically over the color of both the black or the white areas in the image. So since this is gray what I'm actually going to have to do is change both of these options if I want this to take on a pure color source.

So, for example, let's say I want it to be blue. Well, I'll go to my Map White and click on the little color chip to open up my Map options here. And if I had a specific set of RGB values for like a branded logo or something, I could type those in here. But really, I'm just going to move to the blue area and choose a nice kind of light blue color. And as you can see, I've already tinted this background color.

If I really want to kind of tweak things, I could change the black area by clicking the eyedropper and just clicking that same blue color. The problem with that is it flattens absolutely everything out. So I'll just Command+Z to undo and leave the black channel alone because my border is actually black. So we'll be good to go for the background layer for now. Next thing, it's time to actually look at this King Wave kayaks type itself. I'll click up around layer 6. That's not it.

This layer is King, so let's rename it, and then this one is Wave. We could use Tint if we want to choose a solid color. So let's go ahead and just try that. We'll select King, go back up under Effect, and since that was the last effect applied, we could just choose Tint. So in here, since the Type was already Black, I can just adjust my Black parameter and change this to whatever color I see fit, especially since the brand hasn't really been built yet. This is fine if the client wants a flat color, but what if they want a gradient? Well, I am just going to cancel this for now and select the King layer, and if you right-click, you can go to Layer Styles and under Layer Styles we could choose Gradient Overlay.

Now, I have a different set of options under my Layer Styles. So with the Gradient Overlay options, I can adjust the gradient. Under the Color section, click Edit Gradient, and now I can go ahead and just give this a specific look. So, first off, I want it to be a little brighter on top than on the bottom. There we go. And let's go ahead and just tint this up a little bit. I'll make the bottom this kind of dark yellow color.

There we go. And then the top, let's make this kind of hot, and we'll make it not really dark yellow but almost this kind of orange color. And if we zoom in here, we can see things a little bit better. That's looking okay. I notice that I still have my Tint effect on here, so I can just go ahead and disable that. And to apply the same layer Styles to Wave, with the King layer selected, go down to the Layer Style section and select the Gradient Overlay.

Now we can go up under Edit and Copy, or just Command+C, and then select the Wave layer and Command+V and that will automatically paste the layer style between the layers. Now, we've got our type changed and now we can deal with the crown. So same kind of thing with the crown. Let's go ahead and select the layer and rename it. And this time I do want to create kind of a gradient look, but I want it to look sort of like metal.

So again, I'll revert back to Layer Styles. With Later Styles selected, let's go ahead and choose Gradient Overlay and then if we come down here, we can go ahead and adjust the colors under Edit Gradient. Now to add some more delineations in here just click anywhere below this gradient area and add some variations. So I'm just going to add some slight different hue shifts to this.

Now, I could sit here pretty much all day and continue to tweak this, but I think you've got the general idea as to how you can stylize this to your own individual taste. I am going to just go ahead and move that over. There we go and click OK. Now it looks like there is a stray layer in here, so I am just going to go up, yep, layer 6, and with that layer selected, let's go ahead and just press Delete. There we go. So now we have our Crown and our King Wave selected. You get the general idea. Between the layer styles and tint, you can pretty much change the color to anything you like.

Personally, I don't like the colors of this King Wave, so I may go back and tweak it, but for now I think we have a pretty clear picture as to how you can colorize your graphics within After Effects.

Show transcript

This video is part of

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

60 video lessons · 22789 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.