Photoshop  Home Photoshop Web Layout Pixel Button
rss

Pixel Button

Author: RBP More by this author


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.

Pixel Button Tutorial: Final Result

image 7



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Pixel Button"