How to Create Sleek Button Design in Photoshop

On 9 Nov, 2011 By With 9 Comments

Today we are going to create a sleek button design in Photoshop; this is very useful on websites that has call to action. We will use bright colors and dark background to add the effect. Bright button colors attracts attention to the readers, that’s why it is best to use on call to action buttons. This is best for membership sites and E-commerce websites that the user need to sign up or buy a product.

You can download the PSD at the bottom of this tutorial!

Here is the end result of our tutorial.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani [tweegi-button name="sleek-button"]

We will only use basic Photoshop techniques, if you have other alternatives feel free to add them in the comments below.

Let’s start

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

Open you’re good friend Photoshop, and create a canvas 450px by 300px.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

We will add some gradient to our canvas, right click on the canvas layer and select blending options > gradients and follow the settings. I used # f5f4f4 and # b3b3b3 as foreground and background color.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

Select your rounded rectangle tool (U) and set the radius to 50px, draw the shape at the center of the canvas.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

Now, select blending options and follow the settings above, I only used white on drop shadow color #ffffff.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

Now select the inner shadow, follow the settings. I used Black #000000 for the color and set it to multiply.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

Now for Inner Glow, this will add and effect to our design. I used # fcfcfc as base color, and set the size to 1.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

For the Gradient, use # dddddd as foreground and # c4c4c4 as background color. Set it the angle to 90 and click ok.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

This is what you should have, clean and detailed background. We are not done yet, we will create another smaller rounded shape like this one.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

Grab the Rounded Rectangle Tool (U) and 50px for radius.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

Select Blending options, on Drop Shadow follow the settings above. I used Black for the color #000000 and size, distance to 1.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

For Inner Shadow, set the background color to white #ffffff, and distance to 1.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

Inner Shadow set the background color to #fcfcfc and size to 1.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

For the Gradient part, I used # e7a904 as foreground color and # fddb3b as background color. And set the angle to 90.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

We have something like this above, now to finish things up we will add some text.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

We added some text, and set the color to white #fffff. We will add Inner shadow to add an effect.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

Select Blending Options > Inner shadow and set the background color to # ca9707 and set the distance to 1.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

This is the end result, pretty sleek isn’t? Bright colors always attract attention, that’s why they are useful on call to action button like this one. I hope you enjoy my tutorial as much as I did.

If you have other button ideas, why not post the link in the comments below. I would love to see what you’ve got.

9 Responses to “How to Create Sleek Button Design in Photoshop”