A Basic Guide To Create Buttons In Photoshop [Tutorial]

In this beginner’s tutorial, we will look at the method of creating clean and stylish button for your website using Photoshop. It is extremely simple and once you are familiar with the technique, you can create different designs with infinite enhancements. Apart from all, buttons can be used for a number of assignments for example websites, banners and flyers.

First create a new document and put the size 300 X 250.

1 thumb1 A Basic Guide To Create Buttons In Photoshop [Tutorial]View in gallery

Now create a rectangle using the rectangle tool and put the color as gray. The color choice doesn’t matter at the moment. You can always change it later.

2View in gallery

Secondly open the blending options and add drop shadow with the opacity of 50%. leave the rest as it is.

3View in gallery

Now for Inner Shadow, opacity should be 65%, distance and choke would be 0 and size should be set at 0.

4View in gallery

Add gradient overlay with opacity of 58% and scale to 95%.

5View in gallery

After applying all the settings , Rectangular layer or the button should look like this.

7View in gallery

Now insert a text layer using the Horizontal Text Tool, type text in it and place it in the center of the button. The color of the text is set as black. A neat button has been created. Text can be changed on the top of the button to create a number of different buttons.

8View in gallery

Lastly you can change the color of the buttons at any time to get the required feel.

11View in gallery

Wasn’t it simple?

  • Great Tutorial, we really basic tutorials of photoshop like this one, why not create a rollover and more fancy buttons in photoshop.

  • stephen

    thanks this is very helpful. how do you change the colour once the button is created?