Tempting button

In this Photoshop tutorial, you will learn how to create a stylish button for a website. This style of buttons, by the way, is very popular on the Western Internet.

Step 1:

Create a new document.
Take tool – rectangular selection (Rectangular Marquee Tool) and make a rectangular selection as shown in the screenshot:

Step 2:

Refer to the menu Select, Further Modify> Smooth and set the following parameters:

Result:

Step 3:

Set as primary color: # 1A7CA1,
And the background color is: # 09A5D7:

Take tool – gradient and fill your selection with a gradient from light to dark:

Click CTRL + D to deselect.

Step 4:

Click CTRL + T to cause the tool free transformation. Hold the keys SHIFT + CTRL + ALT, Place the mouse cursor near the bottom right node.

Drag it slightly inward towards the center of the rectangle. This action will change the proportions in equal proportion and will make for us a beautiful blank for the future button.

Click ENTER to complete the transformation.

Result:

Step 5:

Double-click on the window with this layer to apply the following styles:

Drop shadow – drop shadow:

Inner shadow – inner shadow:

Result:

Step 6:

Pinch CTRL and click on the shape layer to make a selection appear.

Then create a new layer – click on the keyboard CTRL + SHIFT + ALT + N.

Drag this newly created layer UNDER the existing one:

Fill this layer black color (# 000000).

Refer to the menu Filter, then Blur> Gaussian Blur and set the following values:

Press a letter ‘V’ on the keyboard to trigger the move tool and click the upper arrow 3 times to move this selection up to 3 px:

Set the layer opacity (opacity) on 60%:

Result:

Step 7:

Now create a new layer (SHIFT + CTRL + ALT + N) on top of the layer with our rectangular button (the new layer should be located above all the others)

Pinch CTRL and click on the layer with the rectangular button to make a selection around it.

Refer to the menu Select, then Modify> Contract and set the value there to one or 2 px:

Set the base color to white (#FFFFFF), take the gradient tool () and fill this selection with a gradient from white to transparent (white to transparent):

Step 8:

Click CTRL + D, to remove the selection.

Click CTRL + T, to cause the tool free transformation.

Pinch SHIFT + CTRL + ALT and, as was done before, drag the upper middle node a little bit inwards:

Click ENTER.

Step 9:

Change this layer blending mode to “Overlay”, and reduce the layer opacity (opacity) before 68%:

Result:

Step 10:

Create a new layer on top of all the others.
Then take the tool – selection by ellipse () and make the same selection as in the screenshot:

Set the base color to white (#FFFFFF), take the gradient tool and fill the selection with a gradient from white to transparent (white to transparent):

Deselect CTRL + D.

Call Transformation Tool CTRL + T.

Place the mouse on the middle bottom node, click and drag a little upwards to reduce the flare:

Click ENTER.

Result:

Step 11 is the last one:

It remains to add text to the button.
Set the primary color: # 07577A and select the appropriate font, for example “BM Sly”. The size – 10 pt.

Did you succeed?

We hope you enjoyed this tutorial and learned how to draw attractive and enticing web buttons for your sites.

See you at www.http://photobecket.com!

Like this post? Please share to your friends: