Professional Download Button
Tutorial in Basics, Drawing, Web
This is a simple and professional design that I will show you. It is a professional download button which is commonly used nowadays. The style of this design is well know as Web 2.0… I’m sure many of you know it!
Open a new document, 440×110px, and transparent background).
Choose d8d8d8 as the foreground color and white as the background color.
Create a background to the button, contrasting with it. Select ((gradient tool)) and create a ((Linear Gradient)) from top to bottom.
Then select ((Rounded Rectangle Tool)) y and draw the button shape ((radius)): 12px, then fill it in with black.
Double click the layer to open the ((Blending Options)) window. Apply Inner Shadow and Gradient Overlay.
On Inner Shadow, use color 53e04c.
For the gradient, use 31d854 and 64df78
It should look like this.
Ctrl + Click the text layer so that the selection is active. Then go to ((Select))-((Modify))-((Contract)) and reduce the selection 5px.
Create a ((new layer)).
Select ((Gradient Tool)) and, with the selection active, trace a gradient from white to transparent, from top to bottom, just like the red arrow points out in the following image.
With ((Pen Tool)), we will create a trace as seen in the following image. By doing this, you will create an undulated reflection.
Go to ((Select))-((Load Selection)) to activate the selection. Then accept and press delete.
Reduce the ((opacity)) to 60% and change the layer mode to ((Soft Light)).
Finally, write the title of the text. Choose the ((font)) Arial Bold , Italic, size 24.
Right click the text layer, and choose ((Drop Shadow)) from the drop down menu. Copy the values that appear below.
To give the button a professional touch, we will need to apply a Web 2.0 reflection. So duplicate the button’s layer, place it, below, next to the first one.
Ctrl + Click the layer you recently duplicated, create a ((new layer)) and apply a gradient from white to transparent, and bottom to top.
Check out the final result.
