Pixel buttons in Photoshop

Pixel buttons in Photoshop

This tutorial has been viewed: 1215 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


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


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


Press shift while drawing lines, to draw perfectly straight lines

Tags: , ,

Added By:
  1. Shirpa Teole Said: Comment by Shirpa Teole on May 13, 2009 at 3:42 am | Permalink

    Nice, I like the minimilaist effect



Leave a Comment