Web 2.0 Button

Anthony — Sat, 04 Aug 2007 03:30:02 +0000

Create a unique web 2.0 inspired button. These buttons can be used for navbars as well as buttons throughout a website. In this tutorial I will show you how to create a unique web 2.0 button. Remember that the colors that are provided in this tutorial are just for this example, you can try a lot of diiferent colors/gradients etc and get some very unique styles.

First of you want to create a new document (any size will do, in this example I used 164 x 50)

Create a rounded rectangle of the color of your choice this will be the main button color. In this example I am using black which is #000000 - Set the radius to 5px on the top toolbar

Apply the following styles

Create another rounded rectangle, with the same radius (5px). This one will be the reflection, so it is going to be smaller and positioned at the top. I used #DEDEDE for the color of this shape.

Next click the “Add to vector mask” button on the bottom of the layers palette.

Press the letter D and then X this will set the forground to white and the background to black. With the Gradient Tool drag a line from the top of the small rectangle to the bottom of it, you should see something that looks like this.

We are going to now add some text between the layer you just created and the base layer (the one we added some styling to) In this example I am using Helvetica – Medium Condensed – 14pt – Sharp We are going to be using two colors in this tutorial White (#FFFFFF) and a nice Green (#DCF414). Put the text on the right side of the button so that we can put a small image on the left side.

Next we are going to add a small image to the left side. For this I am going to use the check mark shape that comes standard with Photoshop.

BlogWatts » button

Web 2.0 Button