RSS link icon

.

Sleek button thingy


In this adobe photoshop tutorial we will be making a custom sleek gray button, you would use this as a web element or anything you want.

 

sleek button with photoshop

First with the shape to draw a rounded rectangle as shown below.

sleek button with photoshop

In the layers panel double click the shape layer to get to the styles panel and give it settings as shown below.

sleek button with photoshop

 

sleek button with photoshop

 

sleek button with photoshop

Hold down ctrl key and click the shape layer in the layer panel to load the selection.

With the rectangle selection tool choose intersect with selection and drag a selection from the previous selection so we get one that looks like this.

 

sleek button with photoshop

Now make a new empty layer and fill it with a random color, (we will change it later).

Then double click the new layer to get to the layers styles panel and give it settings as shown below.

sleek button with photoshop

 

sleek button with photoshop

 

sleek button with photoshop

 

sleek button with photoshop

Now that was the outer "shell" of the button, now type in some text and place it within the button go to the styles panel and give it the following settings.

sleek button with photoshop

 

sleek button with photoshop

The last thing we need to to make the glossy reflection at the top, so hold down ctrl and click the first rounded rectangle shape layer we made at the beginning to load its selection.

Then choose the elliptical selection tool and with intersect with selection drag as selection as shown below.

sleek button with photoshop

Finally make a gradient going from white to transparent and drag it into the selection