Pixel buttons in Photoshop
Feb 22, 2009 Buttons, Photoshop, Web Graphics
This tutorial has been viewed: 300 times
We are going to be creating pixel buttons like so
First off create a new image document, I made it 100 x 50 pixels, now you need to use the paintbucket 
tool to fill the background with #D5D3BF.
After you create the new image with the background color set the foreground color to #313025 and pull out your pencil tool
set it’s width to 1 pixel, create a new layer and draw a shape like below.
I found it very helpful to zoon im using the zoom tool 
so it was like this
tip:
it is very useful to use the zoom tool, especially in pixel work like this
Now use the wand tool 
to click inside of the black outline and select inside of it. Then create a new layer 
.
Now be sure that the new layer is selected (layer 3) and set your foreground color to #9F9B74, then pull out the paintbucket tool and click inside of your selected area to fill it with that color:
Now comes the fun part we’re going to make a highlight of the button, first set the foreground color to #B7B391, then using the pencil tool draw a 1 pixel line around the top left hand corner of the button like so, be sure you have created a new layer
Tip
Putting a lighter shade at the top gives off the illusion of a highlight and bevel effect and is a really useful technique
Now simiarly we are going to create a shadow, pull out the pencil tool again and set the foreground color to #797353, then in the bottom right hand corner of the button draw the shadow, it should look like this
Tip
Press shift while drawing lines, to draw perfectly straight lines
