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

Tips for stylized bars

From: After Effects Apprentice 14: Shape Layers

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.

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.

Show transcript

This video is part of

Image for After Effects Apprentice 14: Shape Layers
After Effects Apprentice 14: Shape Layers

29 video lessons · 9553 viewers

Chris Meyer and Trish Meyer
Author

 

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 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?

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.