Soft Bevel - Tutorials Directory

(1 ratings)

Soft Bevel

By: Robouk

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

Added: 10 July 2009 Views: 5157

Path : Computers

Web Design

Adobe Photoshop

Keywords: soft bevel button design draw rounded rectangle tool shaped layer render clouds feather border texture photoshop adobe

Do you like this tutorial? Now you can support our team to add more :

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 Round Edges Tip, and then return here). Once you have your shape you wish to make silver, follow the steps below.

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 forground color to black and your background color to white. Now, go to Filter » Render » Clouds — Press 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).

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.

Next, press ALT+Delete on your keyboard to fill the feathered selection with Black (which should still be your forground color). Press CTRL+D to deselect.

Now, CTRL+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.

Just press 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.