DesignTips > > How to Create Natural Web Button in Photoshop

How to Create Natural Web Button in Photoshop

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.

Step01 Draw Rectangle

Open Photoshop and draw a rectangle using Rectangle Tool.

Step02 Apply Layer Style

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.

Step03 Apply Gradation on Button

Natural black gradation is applied on the rectangle!

Do not close [Layer Style] yet.

Step04 Borderline Setting

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

Do not close [Layer Style] yet.

Step05 Apply Shadow (Inside) on Button

Check Shadow (inside) and set as shown above.

Do not close [Layer Style] yet.

Step06 Make It Even More Stereoscopic

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.

Step07 Apply Drop Shadow on Button

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.

Step08 Stereoscopic Button Completed!

Now we have the stereoscopic button!

This will be completed by inserting text at the end.

Done!

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

How to Create Halloween Jack O’ Lantern Illustration (Illustrator)
How to Create Halloween Ghost Illustration (Illustrator)
How to convert a photo into black and white (monochrome) 3 (Photoshop CS5)
How to convert a photo into black and white (monochrome) in 30 seconds 2
How to convert a photo into black and white (monochrome) 3 (Photoshop CS5)
How to Create Retro Photo in Photoshop
How to convert a photo into black and white (monochrome) in 30 seconds 2
How to convert a photo into black and white in Photoshop 1
How to Create Retro Picture in Photoshop