Publishing System Settings Logout Login Register
How to make a great looking power button
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on October 10th, 2005
13685 views
Adobe Photoshop
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.
Step 3

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


Then apply the following blending options to your shape:

Outer Glow:
Color - #000000
Outer Glow

Inner Glow:
Color - #000000
Inner Glow /><br>
<br>
Bevel and Emboss: <br>
Highlight: #FFFFFF<br>
Shadow: #000000<br>
<img src=

Here's what you should have:
Result



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
Outer Glow


This is how it should look at this point:
Result



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
Step 11

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:
Step 15


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:
Step 16


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:
Step 17



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
Step 18.1

Inner Shadow: Color - #000000
Step 18.2

Outer Glow: Color - #18FF00
Step 18.3

Color Overlay: #18FF00
Step 18.4

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:
Final


I hope this was useful
Premium Publisher
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
funkysoul

This author is too busy writing tutorials instead of writing a personal profile!
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top