| Effective Use of Photoshop: | | | | rectangular button in the previous solution. |
| Making a Metallic Button with a Matte Finish | | | | |
| More buttons that use gradients! We discussed earlier | | | | Rounded gradient button |
| on the gradient button-making skills in "Making a | | | | Now, instead of drawing a border as we did for the |
| Gradient Button". We're going to make matte-finish | | | | rectangular button, open the Layer Style dialog box |
| metallic buttons like the ones shown here. | | | | for Stroke and give your border the settings shown |
| | | | here: |
| Matte-finish metallic buttons | | | | - Size: 1px |
| | | | | - Position: Inside |
| Solution | | | | - Opacity: 75% |
| Rectangular, Matte-finish, Metallic Button | | | | |
| 1. First, create a simple raster gradient button. We | | | | Stroke layer style settings |
| shall use two different shades of gray. | | | | 3. Change the Fill Type to Gradient. Click on the |
| | | | Gradient swatch and set the gradient colors to white |
| Creating a grayscale gradient button | | | | (#ffffff) and a darker gray (#384046). As the |
| 2. Lock the layer by clicking on the Lock Transparent | | | | opacity of the stroke is lowered, you'll want more |
| Pixels icon at the top of the Layers palette. Select a | | | | contrast between the light and dark colors. |
| light gray (I've used #ebeef0) and use the Pencil Tool | | | | 4. Adjust the Angle so that most of the gradient |
| (B) to draw left-hand and top borders on the | | | | stroke is at a slight angle in relation to the button. |
| rectangle button layer. | | | | 5. Click OK to apply the stroke effect. The example |
| 3. Select a dark gray (We’ve used #515a60) and | | | | below shows the result of our stroke. |
| draw bottom and right-hand borders onto the button | | | | |
| layer, as shown in the example below. Remember to | | | | Applying the stroke effect to the button |
| keep your lines straight by holding down Shift as | | | | 6. Now, add noise and apply a lighting effect (steps |
| you're drawing them. | | | | 4-8 in the Rectangular, Matte-finish Metallic Button |
| | | | solution), and your rounded button is complete! |
| Drawing borders | | | | |
| 4. Sure, we could use the button as is, but we'd like | | | | Completed rounded matte-finish metallic button |
| to do a few more things to it. First, we're going to | | | | Making a Shiny Metallic Button |
| apply a noise filter to our button. Before we do this, | | | | Here, we are going to show you how to create |
| make sure that you're satisfied with the size, shape, | | | | shiny, metallic buttons like the ones shown below. |
| and color of the button, as it's hard to make changes | | | | We'll also show you how you can vary their |
| to these properties after the filter has been applied. | | | | appearance using different settings. |
| To add the matte finish select Filter > Noise > Add | | | | |
| Noise. This will give the button a grainy look and | | | | Shiny metallic buttons |
| display the Add Noise dialog box. Be sure to check | | | | Solution |
| the Monochromatic checkbox, and adjust the amount | | | | 1. Create a raster or vector button. We've created |
| of noise that you want to introduce. We've set here | | | | both a rounded and rectangular button in this |
| as 2%. | | | | example. The color of the button is unimportant, as it |
| | | | won't affect the final result. |
| Adding noise | | | | |
| 5. If you feel that the grainy effect is too | | | | Basic buttons |
| pronounced, select Edit > Fade Add Noise to drop it | | | | 2. The fun begins! Open the Layer Style dialog box |
| back a bit. Change the opacity of the fade (in the | | | | by clicking on the Add a layer style button at the |
| example below, we have set as 50%) and click OK. | | | | bottom of the Layers palette and selecting Outer |
| | | | Glow from the menu that appears. In the dialog box, |
| Fading the noise effect | | | | change the Blend Mode to |
| Use Fade Promptly! | | | | |
| To use the Fade command on a filter, you'll need to | | | | Applying outer glow |
| do so immediately after the filter has been applied, | | | | 3. Now, select Stroke from the styles list in the dialog |
| otherwise it won't be available. | | | | box to add astroke layer effect. Here we have used |
| 6. Let's look at our button now. It's certainly | | | | a dark gray, 1px stroke, as shown here. |
| something we could use, but while we're on a roll, | | | | 4. We're ready to add the gradient overlay. Select |
| let's style it up a bit more with some lighting effects. | | | | Gradient Overlay from the Styles list in the dialog |
| | | | box, and double-click on the gradient color swatch to |
| Rectangular matte metallic button | | | | open the Gradient Editor Dialog box. |
| Select Filter > Render > Lighting Effects to bring up | | | | |
| the Lighting Effects dialog box, shown below. Select | | | | Applying a stroke to the button |
| Spotlight from the Light type drop-down menu. | | | | Set the colors of the gradient as we've done below. |
| | | | Add more color patches to the gradient bar by |
| Changing the direction of the spotlight | | | | clicking anywhere along the bottom of it. Edit the |
| 7. In the preview graphic, you'll see an ellipse with a | | | | color of a patch by double-clicking on it to bring up |
| line through it -- this line indicates the direction of the | | | | the Color Picker. You can also click and slide color |
| light. Click on the direction handle at the end of the | | | | patches to adjust the appearance of your gradient. |
| line and drag it to the upper left-hand corner of the | | | | |
| preview window. You can then click and drag the | | | | Adding the gradient overlay |
| handles on the ellipse outwards to increase the | | | | 5. Click OK to apply all the layer styles. Your shiny, |
| "spotlight" area, as shown here. | | | | metallic button is complete! Turn off the Stroke style |
| | | | for a more subtle effect (uncheck its checkbox to |
| Applying the lighting effect | | | | do so) – We did this for the left button in the |
| 8. Finally, drag the Gloss property slider towards its | | | | examples shown here. |
| Matte side (shown at the bottom of the previous | | | | |
| page). When you're satisfied with your button | | | | Completed shiny, metallic buttons |
| preview, click OK. Now we're happy! Our finished | | | | Variations |
| button is shown below. | | | | You can vary the appearance of your shiny button |
| | | | by playing with the gradient editor settings. The |
| Our acheivement! | | | | examples below show how the look of our shiny |
| Rounded, Matte-finish Metallic Button | | | | button changed when different gradient |
| Creating a rounded matte-finish button is pretty | | | | configurations were applied. |
| much the same as creating a rectangular one. The | | | | |
| main difference is that we're going to use a stroke | | | | Applying different gradient configurations to buttons |
| layer effect to add the borders, since it's going to be | | | | (Variation 2) |
| difficult for us to draw the borders accurately by | | | | |
| hand. | | | | In the next article we shall discuss how to create |
| 1. Create a rounded gradient button. We used the | | | | ‘Aqua’ buttons and what nots! We have |
| same shades of gray that were used for the | | | | many more tricks up our sleeve. |