Web Domination Using Photoshop

Rounded, Matte-finish Metallic Button

Creating a rounded matte-finish button is pretty much the same as creating a rectangular one. The main difference is that we're going to use a stroke layer effect to add the borders, since it's going to be difficult for us to draw the borders accurately by hand.

1. Create a rounded gradient button. I used the same shades of gray I used for the rectangular button in the previous solution.

Rounded gradient button

2. Now, instead of drawing a border as we did for the rectangular button, open the Layer Style dialog box for Stroke and give your border the settings shown here:

• Size: 1px
• Position: Inside
• Opacity: 75%

Stroke layer style settings

3. Change the Fill Type to Gradient. Click on the Gradient swatch and set the gradient colors to white (#ffffff) and a darker gray (#384046). As the opacity of the stroke is lowered, you'll want more contrast between the light and dark colors. (If you're wondering why you need to lower the opacity, it's so that the noise and lighting effects will show through.)

4. Adjust the Angle so that most of the gradient stroke is at a slight angle in relation to the button.

5. Click OK to apply the stroke effect. The example below shows the result of our stroke.

Applying the stroke effect to the button

6. Now, add noise and apply a lighting effect (steps 4-8 in the Rectangular, Matte-finish Metallic Button solution), and your rounded button is complete!

Completed rounded matte-finish metallic button

Making a Shiny Metallic Button

Here, I'm going to show you how to create shiny, metallic buttons like the ones shown below. I'll also show you how you can vary their appearance using different settings.

Shiny metallic buttons

Solution

1. Create a raster or vector button. I've created both a rounded and rectangular button in this example. The color of the button is unimportant, as it won't affect the final result.

Basic buttons

2. The fun begins! Open the Layer Style dialog box by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Outer Glow from the menu that appears. In the dialog box, change the Blend Mode to Normal, and click on the color swatch (light yellow by default) and change it to gray, as shown here.

Applying outer glow

3. Now, select Stroke from the styles list in the dialog box to add a
stroke layer effect. I used a dark gray, 1px stroke, as shown here.

4. We're ready to add the gradient overlay (there go those gradients
again!). Select Gradient Overlay from the Styles list in the dialog box, and double-click on the gradient color swatch to open the Gradient Editor dialog box.

Applying a stroke to the button

Set the colors of the gradient as I've done below. Add more color patches to the gradient bar by clicking anywhere along the bottom of it. Edit the color of a patch by double-clicking on it to bring up the Color Picker. You can also click and slide color patches to adjust the appearance of your gradient.

Adding the gradient overlay

5. Click OK to apply all the layer styles. Your shiny, metallic button is complete! Turn off the Stroke style for a more subtle effect (uncheck its checkbox to do so) -- I did this for the left button in the examples shown here.

Completed shiny, metallic buttons

Variations

You can vary the appearance of your shiny button by playing with the gradient editor settings. The examples below show how the look of our shiny button changed when different gradient configurations were applied.

Applying different gradient configurations to buttons (Variation 1)

Applying different gradient configurations to buttons (Variation 2)