Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Pixel Button

Pixel Button


1. Start off with a 150x150px white background. Now go edit - fill - choose the background color of your site and press OK!

Now create a small selection similar to the one I created below:

image 1

2. Create a new layer and fill your selection with a color you like.

Deselect. Zoom into the corners of your rectangle, and delete 1 px of each corner like I did it below:

image 2

3. Now all corners are cut off. Hold ctrl and click your layer. Create a new layer and go edit - stroke - 1 px (#000000) center. Now go to your first layer and go layer - layer styles - and use these settings for bevel and emboss:

image 3

4. Now we want to give it a glossy look. Select your first layer (ctrl + click on it at the layers palette). Now that you got a selection around it, create a new layer. Hold alt and use your elliptical marquee tool and draw a nice circle in your other selection like I did below:

image 4

image 5

5. In your new layer, fill this selection with white opacity 25%.

Then add the text (I prefer pixel fonts - dafont.com has some nice ones!) you want in the button. You can then duplicate the button and use different text on it to make it a menu. You can even use mouse covers! That is up to you.

image 6

Pixel Button



Author's URL: RBP
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Pixel Button"

Captcha