Matte-finish metallic buttons



Rectangular, Matte-finish, Metallic Button

1 First, create a simple raster gradient button. I'm going to use two different shades of gray for mine. Lock the layer by clicking on the Lock Transparent Pixels icon at the top of the Layers palette. Select a light gray (I've used #ebeef0) and use the Pencil

Tool (b) to draw left-hand and top borders on the rectangle button layer. Select a dark gray (I've used #515a60) and draw bottom and right-hand borders onto the button layer, as shown in the example below. Remember to keep your lines straight by holding down Shift as you're drawing them.

Creating a grayscale gradient button

Drawing borders


Layers ' Channels 1 Paths


rrrrak^ jv|Opaaty:


Lock: (fflUV a at

100«/( >



~f"| #515360.


T | febeefo

§ 4J


j button


o. oi e. o

a a

4 Sure, we could use the button as is, but I'd like to do a few more things to it. First, we're going to apply a noise filter to our button. Before we do this, make sure that you're happy with the size, shape, and color of the button, as it's hard to make changes to these properties after the filter has been applied. To add the matte finish, select Filter > Noise > Add Noise. This will give the button a grainy look and display the Add Noise dialog box. Be sure to check the Monochromatic checkbox, and adjust the amount of noise that you want to introduce. I've set mine to 2%.

Adding noise

5 If you feel that the grainy effect is too pronounced, select Edit > Fade Add Noise to drop it back a bit. Change the opacity of the fade (in the example below, I set mine to 50%) and click OK.

NOTE Use Fade Promptly!

To use the Fade command on a filter, you'll need to do so immediately after the filter has been applied— otherwise it won't be available.

Fading the noise effect

Fading the noise effect

6 Let's look at our button now. It's certainly something we could use, but while we're on a roll, let's jazz it up a bit more with some lighting effects. Select Filter > Render > Lighting Effects to bring up the Lighting Effects dialog box, shown to the right. Select Spotlight from the Light type drop-down menu.

Rectangular matte metallic button

In the preview graphic, you'll see an ellipse with a line through it—this line indicates the direction of the light. Click on the direction handle at the end of the line and drag it to the upper left-hand corner of the preview window. You can then click and drag the handles on the ellipse outwards to increase the "spotlight" area, as shown to the right.

Changing the direction of the spotlight
Applying the lighting effect

Rectangular matte metallic button

8 Finally, drag the Gloss property slider towards its Matte side (shown at the bottom of the previous page). When you're satisfied with your button preview, click OK.

Now we're happy! Our finished button is shown below.

Our pride and joy

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.

Stroke layer style settings



Rounded gradient button

Stroke layer style settings

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%

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

Adjust the Angle so that most of the gradient stroke is at a slight angle in relation to the button. Click OK to apply the stroke effect. The example at right 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

Completed rounded matte-finish metallic button

0 0

Post a comment