Metalised Elegant Buttons
Tutorial in Basics, Designing, Drawing, Web
These are interesting and elegant buttons. We will create two different styles: two in active status and two in simple status. An active button in the one that changes color, shape, or style when you place the mouse over it. A simple one is the one that remains the same.
Open a new document (600×300px and transparent background).
Fill it in with ((Gradient Tool)), ((Lineal Gradient)), applying the colors: #dfdfdf y #f6f6f6.
Create a ((New Layer))
With ((Elliptical Marquee Tool)), create a selection as seen below and fill it in with black.
Double click the layer to apply ((Layer Styles)).
((Drop Shadow)).
((Gradient Overlay)). Use the following colors: #ffffff, #d2d1d6 y #9d9da5.
((Stroke)). Use the following colors: #e0e0e0, #ffffff, #999999, #e7e5e5, #999999 y #e7e5e5.
After applying the Layer Styles, you will get the following result.
Create a ((New Layer)).
Create another circular selection but, this time, smaller than the previous one. Fill it in with black.
Apply ((Layer Styles)) to this layer.
((Inner Shadow)).
((Bevel and Emboss)).
((Color Overlay)).
Save the changes in order to get the following result.
Before going on, download this ICONOS PNG.
Let’s create the simple status I mentioned in the beginning of the tutorial.
Open one of the icons. Paste it in the document, adapt it to the button, change the layer style to ((Luminosity)).
Now create the active zone.
In order to duplicate the button, simply select all the layers and press Ctrl + J to duplicate them.
Repeat the same step with a different icon and the layer style ((Lighten)).
This is my final result. I hope you liked it. Greets!
