In this tutorial l will show you how to create some slick xp style buttons that look great on any e-commerce or data relay site. You can also change the colors used in this tutorial to get a completely different looking button, but l think the green and blue compliment each other well, and the idea for this tutorial came to me while l was looking at my XP tool bar.
Page 1 of 1
Step 1.)
Open an existing document or start a new one, l'm using a new 500 x 300 document for the purposes of this tutorial
Step 2.)
Fill the background with any color, l 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 l 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:
Related Tutorials: Glossy Buttons In this tutorial you will learn how to make quick and effective looking round gl ... Interface Vents This tutorial will show you how to add a techno depth to your layouts with the u ... Render Layout Tutorial vol. 5: Content Boxes In this tutorial you will learn how to create an entire layout by using an exsis ...
), and make a selection on the canvas similar to this: 
).
Glossy Buttons
