Slick XP Buttons

Step 1.

Open an existing document or start a new one, I"m using a new 500 x 300 document for the purposes of this tutorial

Step 2.

Fill the background with any color, I choose a pale white (#EFEEE0) light colors seem to work better with this style of buttons.

Step 3.

Create a new layer name this layer "Button Base". Get out the rectangular marquee tool ( ), and make a selection on the canvas similar to this:

Go to Select->Modify->Smooth with a setting of 7 pixels:

Fill this selection with #287DBE, and leave the selection active:

Step 4.

Create a new layer and name it "Button Icon". Get out the elliptical marquee tool ( ).

While holding down the Alt key on your keyboard, deselect a portion of the selection so that you have a selection similar to this:

Fill this selection with #32A500

Step 5.

Now click the "Button Base" layer to activate it, and tap "Delete" on your keyboard to remove delete this area from the base layer.

Double click the "Button Base" layer and apply the following blending options:

Stroke: (Color used is #0E287D)

Step 6.

Now double click the "Button Icon" layer and apply the following blending options:

Stroke: (Color used is: #166723)

Result:

Step 7.

Now create a new layer, and name it "shine".

Hold down the Ctrl + Shift keys on your keyboard and click both the "Button Base" and the "Button Icon" layer, to make a selection of both layer contents:

Fill this selection with black (#000000).

(Click two or three times to ensure you fill the entire area)

Change the 'blending mode' of this layer to 'screen':

(this will make the "black" invisible)

Double click this layer, and apply the following blending options:

Drop Shadow:

Bevel & Emboss

Result:

Step 8.

Next you'll want to apply an icon to the button. You can create your own by using the pencil tool or you could download very high quality icons for an affordable price at www.WebsiteIcons.com. Which is a site I highly recommend.

Step 9.

Finally you want to add the text to your button. The font used here is a basic Verdana Bolded with a size of 10 pt.

I then applied the following blending option (by double clicking the text layer) to give it a little more depth:

Stroke:

Result:

Finishing Touches:

Another nice touch is to get out the Dodge tool with these settings:

Result: