Join Justin Seeley for an in-depth discussion in this video Creating better bevels, part of Photoshop CS6 for Web Design (2012).
When it comes to designing things like icons and buttons, you have to be on your game, and your designs have to be "pixel perfect." Therefore it's imperative to get things like bevels and 3D extrusions and things like that to look as good as possible. And there are some layer styles that are built into Photoshop that are meant to do that right off the bat, like the Bevel and Emboss. But those don't really give me the finite level of control that I'm looking for. So therefore, I have to utilize other layer styles to achieve this. Let me show you what I mean. I am going to create a new document. And it really doesn't matter how big this is.
I am just going to show you a demonstration. So I am going to do 400 pixel 100 pixels tall. That should be big enough. And I'll grab my Shape tool and select the rectangle, and I am just going to draw out a rectangle, something like this. So let's pretend that we're drawing a button. I am going to come over to the Layers panel and double-click, and I'll give this an orange color, something like that. There we go. And now I am going to zoom in. Anytime you're working on something small, it's always best to work on it on a large scale.
Since this is vector, it will be easy to see everything. I am going to come over here to the right- hand side of the rectangle that I've drawn and I am going to double-click to the right-hand side. When I do that, I am going to turn on the traditional Bevel and Emboss. Watch what happens. When I do that, I get the sort of halo-looking thing here and a dark edge around the bottom, and it looks very generic. It looks almost like something you see on an old GeoCities homepage or something like that. So I could come in and make changes to this, like shrinking up the depth and decreasing the size and softening it up or sharpening it down, but I really don't like these controls because I'm in here having to drag sliders around while simultaneously looking over to the left, controlling the angle of the shading with this little orb-looking thing here.
It just doesn't suit me. So, as opposed to using Bevel and Emboss, I've learned to use things like Inner Shadow and Inner Glow to achieve to achieve the same type of effect. So the first thing I am going to do here is I am going to create a stroke around the outside, and I will set this to an inside stroke, just so it snaps to the corners all the way around the outside. I am then going to change the color of this, and I will sample this orange to get a base, and then I will just kind of click to make it darker. Something kind of like that. There we go! Hit OK. All right! So now it still just looks like a rectangle with a border on the outside of it, but watch what happens.
I'm going to choose Inner Shadow. When I choose Inner Shadow, there's a couple of things I can do to make this look like it's beveled. I'll go up to the Blend mode and change it to Normal, then I'll click on the color, and I'll sample the orange color here, and then I will pick a lighter version of that, something like this. Hit OK. Now, let's change the Choke to 100. When I do that, see that nice crisp line that comes in right there? I am also going to increase the Opacity to 100% so I can see it all the way.
And now, since this is a shadow, I can come in here and I can just click and move it around. First, I will turn off the Global Light. Notice that snaps back to this little L shape. And now I can just position this wherever I need it to go. So if I need that to be something like that. Now, I can decrease the size as well. I'll decrease the size to 1 and then I can bring that out just like that. See how that creates that little beveled edge right along there? I can also throw on an Inner Glow if I wanted to, to add a little bit more depth right there.
So if I throw in the Inner Glow, change its Blend mode to Multiply, change its color to something like the orange, change its Choke to 100, see how it's coming out right there? Then I can change the Size a little bit, something like that tucks it back underneath, and I might even make that darker. There we go, something like that.
So now, I've got this beveled edge around the outside and also this background, so it looks like it's almost set outside of that background a little bit. If it's too dark, you can adjust the Opacity. You can kind of dial it back, then you hit OK, and there we have our nice three-dimensional-looking button. If you needed to increase or decrease the bevel, you can do that simply by adjusting the shadow and the glow. Now, let's add some text. Grab the Type tool. And if I try to type inside of here, it's just going to type inside the shape. So what I need to do is click outside of that to start the text. And I will just type in "CLICK HERE." And I'll move it to the center, something like that, and Command+T or Ctrl+T and I will blow it up.
Okay, it doesn't matter what font you're using or anything like that. Now I'm going to double-click out to side of that. I am going to add a drop shadow. This time switch the Blend mode to Normal, change the color to the same dark color that I have on the outside, uncheck Global Light, change the Angle to something like -90, change the Size to 0, and then just dial back the Distance, something like that. 1 pixel might be enough.
There we go, and hit OK. So now it almost looks like that is carved into the button. If I change the font to something a little bit more bold--I will change it to Helvetica Bold-- you'll be able to see it a little bit easier. There we go! See the dark edges around the outside? Now, if I zoom out, I have a nice clean three- dimensional looking button with text that's inset inside of it, and I did that all with layer styles. They can all be changed, they can all be altered, and they can all be thrown away at a moment's notice because as we know, layer styles are nondestructive edits that we perform to our images.
So, the next time you need to create something that looks a little bit more three-dimensional, try utilizing Inner Shadows and Glows as opposed to the actual Bevel and Emboss. You will be amazed at the amount of precision and accuracy you get.
- Customizing a web workspace
- Decoding the mysteries behind screen size and resolution
- Coloring web graphics
- Using layers and layer comps effectively
- Working with transparency
- Creating wireframes on a grid
- Styling text
- Creating image sprites
- Optimizing images as JPEG, GIF, or PNG files
- Integrating with the rest of the Adobe Creative Suite