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.

sleek button How to Create Sleek Button Design in Photoshop [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

1 canvas 450x300 How to Create Sleek Button Design in Photoshop

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

3 gradient on canvas How to Create Sleek Button Design in Photoshop

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.

4 select rounded rectangle tool How to Create Sleek Button Design in Photoshop

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

5 gradient for button background How to Create Sleek Button Design in Photoshop

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

6 inner shadow for button How to Create Sleek Button Design in Photoshop

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

7 inner glow for button background How to Create Sleek Button Design in Photoshop

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

8 gradient for button background How to Create Sleek Button Design in Photoshop

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

9 finished background for button How to Create Sleek Button Design in Photoshop

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.

10 second button background How to Create Sleek Button Design in Photoshop

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

11 gradient for second button How to Create Sleek Button Design in Photoshop

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

12 inner shadow for second background button How to Create Sleek Button Design in Photoshop

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

13 inner glow for second background button How to Create Sleek Button Design in Photoshop

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

14 gradient for second background buttons How to Create Sleek Button Design in Photoshop

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

15 sleek gradient button below How to Create Sleek Button Design in Photoshop

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

16 add some text How to Create Sleek Button Design in Photoshop

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

17 inner shadow for text How to Create Sleek Button Design in Photoshop

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

sleek button1 How to Create Sleek Button Design in Photoshop

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”