Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
93 Video lessons · 25339 Viewers
135 Video lessons · 60270 Viewers
79 Video lessons · 19926 Viewers
350 Video lessons · 105217 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.