After Effects Apprentice 14: Shape Layers
Illustration by John Hersey

After Effects Apprentice 14: Shape Layers

with Chris Meyer and Trish Meyer

Video: Tips for stylized bars

I want to take a couple of minutes to share with you one of my favorite techniques, combining shape layers with Photoshop-type layer styles to create some more interesting looks for your graphical elements, particularly buttons for user interface design or lower third bars. Now this is just a various simple rectangular shapes. I will twirl open a shape group. You will see we do indeed have a gradient fill. If I want this to be the full width of this composition, I just need to drag out its width and drag out the user interface elements for this gradient fill.

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course After Effects Apprentice 14: Shape Layers
2h 13m Intermediate Jan 25, 2012 Updated Dec 18, 2012

Viewers: in countries Watching now:

In this course, author Chris Meyer shows how to create and animate vector-based artwork directly inside Adobe After Effects. The course covers the ins and outs of working with shape layers, including creating shape paths, applying shape effects, and reordering shape operators. The course also contains a series of exercises on creating common motion graphics elements using shape layers.

The After Effects Apprentice videos on lynda.com were created by Trish and Chris Meyer and are designed to be used on their own and as a companion to their book After Effects Apprentice. We are honored to host these tutorials in the lynda.com Online Training Library®.

Topics include:
  • Drawing parametric shapes and pen paths
  • Creating multiple shape groups
  • Exploring Wiggle Paths and the Wiggle Transform effect
  • Defining gradient fills
  • Creating a swarm
  • Blending multiple shapes into a texture
  • Crafting and animating dotted and dashed lines
  • Combining effects, layer styles, expressions, and Brainstorm with shape layers
  • Showing tips for stylizing sidebars
Subject:
Video
Software:
After Effects
Authors:
Chris Meyer Trish Meyer

Tips for stylized bars

I want to take a couple of minutes to share with you one of my favorite techniques, combining shape layers with Photoshop-type layer styles to create some more interesting looks for your graphical elements, particularly buttons for user interface design or lower third bars. Now this is just a various simple rectangular shapes. I will twirl open a shape group. You will see we do indeed have a gradient fill. If I want this to be the full width of this composition, I just need to drag out its width and drag out the user interface elements for this gradient fill.

I am going to hold down Shift to make sure they stay horizontal. There we go. And drag this out to full width. Now one of the first things I tend to do with the gradient fills in other bars is have them dissolve off the ends. This is particularly a good design trick when you have to design something that works in widescreen and 4x3. People justify the text inside of 4x3 but still need to have a bar that looks good across a whole widescreen display. So with my shape layer is selected, I will go into something like Fill and play around with the Opacity Stops just to create some fade-offs.

I will click to add a new stop, select this one, fade it out to 0 so we get transparent at the end, like that, and maybe do the same thing here. Add another stop, take its Opacity down to 0, have a bit of fade going on there. But you can go so much further than this. I am going to turn off this layer for now and look at this second bar. By the way, if you have the exercise files, these are all inside Comps_Finished > 99-Styled Bars. I will turn it on.

This one has much more a rounded plastic look to it. Well, there are some few things going on. I will turn off the Layers Styles now to get back to my flat shape layer. I took advantage of the Pucker & Bloat shape, effect just to give some slight rounding and slight bowing to my shape. Now normally you'd see me doing very extreme things to Pucker & Bloat, but just a moderate application can make things more interesting. Before and after. But what gets really interesting is using the Photoshop style layer styles.

I will turn these all off and build them up one at a time. Bevel and Emboss is perhaps my favorite layer style. Yes, After Effects does have the Perspective bevel alpha effect, but it doesn't have this variety of shapes. Outer Bevel where you get a little bit of shadow. As a matter of fact, I will change my background color to something more interesting, just so you can see the contrast. There is difference between an outer bevel and an inner bevel.

There is Emboss to make it appear like it's pushing through the surface. There is Pillow Emboss, which gives an interesting stroke around the shape. And then there is Stroke Emboss, which is good for compatibility with other Photoshop layers. But we will go back to Inner Bevel for now. You can have chiseled edges with hard and soft variations. I will increase the Depth so you can see it better there-- I tend to prefer smooth--and also a lot of control over how much rounding there is inside that bevel, something really soft and plasticy or something a bit more flattened out like that.

Hard edged, soft edged, and lots of control over lighting, even the highlight and shadow color. To spice up Bevel and Emboss even more, there is this effect called Inner Shadow which can add little bit more shading to your layer. Again, before and after. And again it has lots of nice options, including different blending modes, and in Layer Styles it also has a very nice Drop Shadow effect. Again, there is an effect under the perspective category called Drop Shadow, but Layer Style's Drop Shadow has a lot more power in terms the blending mode applied.

I personally think it's got a nicer softness to it. I'll increase my Size there and does the effect by the same name. I like that for creating much classier-looking buttons and user interface elements. Now inside this composition we also created something really crazy called Styled 2 where again we are taking advantage of shape effects, using Pucker & Bloat again to create a more sharp-edged shape, but also using Photoshop's layer styles, particularly Bevel & Emboss, to create a far more interesting fill.

This is Chisel Hard, as opposed to the Smooth fill or the Chiseled Soft. With Chisel Hard and with Soften really turned down, you get a much harder look. You even get a little bit of like plastic scoring going on inside these areas. Or you can soften that out a little bit or soften the entire effect. So when you think of shape layers, don't think of flat Illustrator or other vector-type artwork. Have a lot of fun with those shape effects to add more interest to the shapes, but also apply effects and more importantly, layer styles to soften them up, give them more dimensions, and make them really pop off your screen.

There are currently no FAQs about After Effects Apprentice 14: Shape Layers.

 
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

* Estimated file size

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 Apprentice 14: Shape Layers.

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 ?

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 preferences from 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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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.