Fantastic and Simple Web Button
Are you creating a website and you don’t know what buttons to design? Maybe this tutorial will help you. I will show you to create a fantastic and elegant web button. We will use ((Rounded Rectangle Tool)), ((Line Tool)) and filters like ((Drop Shadow)), (Inner Glow)), ((Gradient Overlay)), ((Bevel and Emboss)), and ((Stroke)).
Before beginning, I recommend you to enlarge the size of the images that will appear in the following image, since the button is very small and it’s hard to see it.
Open a new document, 120×50px, and transparent background.
Fill in the document with color #807e7e.
Create a ((New Layer)).
Choose black as the foreground color.
Select ((Rounded Rectangle Tool)), 10px, and draw a rectangle as seen in the following image.
Double click the layer to apply ((Layer Styles)).
((Drop Shadow)).
((Bevel and Emboss)).
((Inner Glow)).
((Gradient Overlay)).
((Stroke)).
Accept the changes and see the partial result.
Create a ((New Layer)).
Choose color eee1cd as the foreground color.
Select ((Line Tool)), 2px, and trace a line in the inferior area. Take a look at the following image.
Double click the line layer in order to apply the following ((Layer Styles)).
((Inner Shadow)).
((Outer Glow)).
Accept the changes.
Create a mask. In order to do so, go to ((Layer))-((Layer Mask))-((Reveal All)).
Choose white as the foreground color.
Stand in the mask, select ((Erase Tool)) with the values that appear in the options bar and erase the points of the line.
Write the button’s text. I used the font Franklin Gothic Medium, 13px.
Finally, apply ((Layer))-((Layer Style))-((Blending Options)) to the text.
((Drop Shadow))- Leave the default values.
((Gradient Overlay)).
Accept the changes and see the final result.
