Creating Dark Elegant Web Button
Tutorial in Basics, Designing, Drawing, Web
Today I will show you this beautiful web button with very clean details. You will use ((Layer Styles)), such as: ((Drop Shadow)), ((Bevel and Emboss)), ((Gradient Overlay)), and ((Stroke)). Also masks, adjustment layers, and transform.
Open a new document, 120×45px, and transparent background.
Fill in the background with color #4a4a4a.
Create a ((New Layer)).
Select ((Rounded Rectangle Tool)), radius: 15px, and trace a black rectangle as the one you see below.
Double click the layer to apply ((Layer Styles)).
((Drop Shadow)).
((Bevel and Emboss)).
((Gradient Overlay)).
((Stroke)).
Accept the changes.
Ctrl + Click the button layer to activate the selection.
With ((Rectangular Marquee Tool)), ((Subtract From Selection)), trace a selection from the middle downwards.
Create a ((New Layer)).
Fill it in with white and lower the ((Opacity)) to 15%.
Ctrl + Click the layer button to activate the selection. Move it 1px downwards.
Create a ((New Layer)) and fill it in with white.
To this layer, reduce the ((Opacity)) to 24%.
Move the selection a few pixels downwards and to the right as the image shows.
Stand in the layer with the new fill and press delete.
Duplicate the layer (Ctrl + J).
With the duplicated layer selected, go to ((Edit))-((Transform))-((Flip Horizontal)) and then ((Edit))-((Transform))-((Flip Vertical)). Arrange it in the inferior part of the document. Take a look at the following image.
Go to ((Layer))-((New Adjustment Layer))-((Curves)). Observe in the follwing image how I modified the image.
Press Ctrl + Enter again to activate the selection of the button.
Create a ((New Layer)).
Go to ((Select))-((Modify))-((Contract)) (1px).
Then ((Edit))-((Stroke)). Enter the following values.
Select ((Erase Tool)) with the values that appear below and erase the upper and lower parts of the button.
Repeat the last steps and add the same shine in both sides of the button.
Finally, write the title of the button. I used the font Arial Regular, size 16px.
Right click the text layer and select ((Blending Options)).
((Bevel and Emboss)).
((Stroke)).
Once you accept the changes, you will see this result.
