How to Create Button (Photoshop)

In this section we will introduce you how to create a natural web button.

The recent trend in web design is to have details you don’t notice at first sight. This is especially true with web buttons. It is a must to have slight gradation and shadows.

We will create a web button in Photoshop in this tutorial. Photoshop [Layer Style] makes it possible the detailed design on buttons.

Open Photoshop and draw a rectangle using Rectangle Tool.

Apply [Layer Style] on the rectangle.

Click [Layer > Layer Style > Gradient Overlay] and open [Layer Style] dialog box. Check [Gradient Overlay] on the left and set the preference using the example above.

Do not click OK yet.

Natural black gradation is applied on the rectangle!

Do not close [Layer Style] yet.

Check [Borderline] on the left and set up as shown above.

Do not close [Layer Style] yet.

Check Shadow (inside) and set as shown above.

Do not close [Layer Style] yet.

Now take a look at the button.

Borderline is applied on the button and you can see the slight white shadow inside.The button now looks more stereoscopic.

Lastly, apply [Drop Shadow] on the button.

Check Drop Shadow on the left and set using the example above.

The [Layer Style] setting is complete. Click OK.

Now we have the stereoscopic button!

This will be completed by inserting text at the end.

We have successfully created a natural button. How was it?

This is a very simple web button but 4 types of layer styles, gradation, borderline, shadow (inside), and drop shadow are applied.

This is a very simple and natural button. It would blend into any web design.

You can set very detailed settings on Photoshop layer style. Try explore the settings until you get your favorite web button.

この投稿文は次の言語で読めます: Chinese (Simplified), Japanese

Related article