This is a guest tutorial written by sq3r from http://www.sqthreer.com/,
please VISIT his site for submitting a great tutorial to us

I was looking at some electronic device one day and thought "wow, power buttons are cool". Thus this tutorial was born. I give anyone willing to complete the whole thing permission to use this power button on their layout, in their sigs, anywhere. Credit would be nice too

Ok well here we go:

Create a new document of 200 x 200 and a background of anything.

1.) Select the 'Fill Tool' and fill the first layer with #A9A9A9

2.) Create a new layer and name it "button".

3.) In this new layer, select the 'Ellipse Tool' and create a fixed 75px by 75px circle, with a color of #999999.


4.) Go to 'Filter � Render � Lighting Effects...' and try to make yours look the same as mine:



Then apply the following blending options to your shape:

Outer Glow:
Color - #000000


Inner Glow:
Color - #000000


Here's what you should have:




5.) Now hold ctrl and click the "button" layer to get a selection the same size as your shape. Go to 'Select � Modify � Expand' and set it to 5 pixels. This should make the selection a bit larger than your button

6.) Create a new layer underneath your "button" layer by holding down ctrl and clicking the 'New Layer' button in the layers panel. Name this "inset".

At this point you should still have your circular selection, and you should have the "inset" layer selected.

7.) Set the foreground color to #D4D4D4, and the background to #474747. Select 'Gradient Tool', and drag from bottom of the selection to the top "light to dark" (make sure "reverse" isn't selected).

8.) Go to 'Select � Feather...' and set it to 1 pixel.

9.) Press 'ctrl + shift + I' to inverse the selection, and press 'delete' a few times. In mine I just did it 3 times and it did the trick. What this does is it smoothens the "inset" circle a little so it's not as rough.

10.) Deselect it by pressing 'ctrl + D', then add 'Outer Glow':

Outer Glow: Color - #000000



This is how it should look at this point:




Now we create the little power symbol to put on there. We're going to make it large at first so it's easier to deal with. Of course you can always stop here and add whatever you want to our already made button, but for the purpose of this tutorial I'll go on.

11.) Create new layer above all the rest and name it "ring". Select the 'Ellipse Tool' and create fixed size circle of 100px by 100px. Also make sure 'Paths Only' is selected


12.) Change the brush width to '22', and select the rougher edged brush, press 'D' to reset your colors to black and white.

13.) Select the 'Direct Selection Tool' (the white arrow in the middle of the toolbar), and right click on lines. Select 'Stroke Path' � 'Tool: Brush' � 'OK'. Press enter to remove the path lines.

What we've got so far:


14.) Select the 'Elliptical Marquee Tool'. At the top in the tool options bar, set the 'style' to 'Fixed Size'. Width - 80px, Height - 64px.

15.) Click on the document and position the marquee on the top portion of the circle like so:



16.) Set the style back to normal, and zoom in to about 400%. What we do next is subtract from the oval selection we have made. To do this, with the 'Elliptical Marquee' still selected, hold down alt and drag a circle, after you've done this press 'shift' to keep it as a perfect circle. While doing this you can also press the space bar to move it around.

Use this method to deselect small half circles from your oval. If you're not sure what I mean look at what I have done:



17.)Create a new layer and name it "line". Select 'Rounded Rectangle Tool', set it to a fixed size of 22px by 75px, and a radius of 100px (this doesn't have to this large, anything above 25 or so pixels would work just fine, it really doesn't matter much).

Place the shape in position shown:




18.) Link the "line" and the "ring" together and press ctrl + E to merge them. Then apply the following blending options:

Drop Shadow: Color - #FFFFFF


Inner Shadow: Color - #000000


Outer Glow: Color - #18FF00


Color Overlay: #18FF00


Now resize the symbol to fit your button and change any of the colors you wish, maybe add a little more of a background you're finished

This is mine:



I hope this was useful