Yet Another (Easy) Way To Make a Web 2.0 Button

Monday, February 18th, 2008

Categories: Web Design

Trackback

Here’s yet another easy, detailed tutorial on making a web 2.0 styled button in Adobe Photoshop. Enjoy.

1 - In Photoshop, go to File -> New. In my example, I set my canvas to 150 pixels by 150 pixels. Replace the background color (if needed) with the desired color. In my case, it’s off white.

New Photoshop Canvas

2 - Click and hold the Rectangle Tool button in the main toolbar. Select the Rounded Rectangle Tool. At the top of the Photoshop window, set the radius to 10 pixels, this sets the radius of the rounded corners. Create a new layer and name it appropriately.

Layers

3 - Draw a rectangle on your new layer. Make sure the rectangle is smaller then your canvas. Note: Don’t pick your background color as your rectangle’s color.

Web 2.0 Button Shape

4 - Bring up the Layer Style window and select Drop Shadow (located at the bottom of your layers palette. Set a light drop shadow. I used the values in the picture below.

Button Drop Shadow

5 - In that same Layer Style window, select Stroke, and add a white stroke using the settings pictured below. Note: If you choose to place your stroke on the outside of your button, you will need to apply a heavier drop shadow. In my example, I placed it on the inside.

Web 2.0 Stroke

6 - Again, in that same Layer Style window, select Gradient Overlay. Apply a gradient using the desired colors keeping in mind that we want to keep it subtle. Close the Layer Style window. Note: Using layer styles makes it easy for us to the change the color of our button later on. It’s a form of non-destructive editing.

Gradient

You should have something that looks like this:

Web 2.0 Button without Text

7 - Use the Type Tool to add white text to your button. Add a drop shadow (using the Layer Style window) with identical values used in step 4. I suggest using a bold sans-serif typeface. Arial works well here.

Final Step in Adobe