Photoshop Tutorial: Soft Bevel

The technique you learn from this tutorial will probably prove very useful to you in future designs. It will show you how to make a quick and easy “soft” beveled edge, which you can apply to your interfaces, buttons, etc, to add some instant good-looking depth. For this tutorial, we will make a button using the technique.

Step 1

Start by creating a new document—use the Rounded Rectangle tool to draw a pill-shaped button (for older versions of Photoshop, please refer to the Rounded Edges tutorial, and then return here). Once you have your shape you wish to make silver, follow the steps below.

Step 2

First, make a new layer and name it button (which should have your shape selection on it). Press D on your keyboard in order to set your foreground color to black and your background color to white. Now, go to Filter » Render » Clouds — Press Cmd+F (PC: Ctrl+F) until you have the clouds the way you want them (you might also try using Difference Clouds for a different effect if you want).

Example 1

Step 3

Now, make a new layer. Choose Select » Modify » Border, and set the value to about 6 (this may differ in your situation). Then choose Select » Feather, and set the value to around half of the number you set the border to—in this case it would be 3.

Example 2

Step 4

Next, press Alt+Delete on your keyboard to fill the feathered selection with Black (which should still be your foreground color). Press Cmd+D (PC: Ctrl+D) to deselect.

Example 3

Step 5

Now, hold Command (PC: Control) and click on the button layer to get the selection back—make sure you are still on the layer with the black shading though. Go to Select » Inverse to select the excess black and press Delete to get rid of it.

Example 4

Step 6

Press Cmd+D (PC: Ctrl+D) to deselect and you have your very own silver button! You may then choose to fill the background layer with a seamless texture, add some text, or perhaps place your button on your website’s layout/interface.

Example 5

Back to top