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

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

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

    Reply

 

Leave a Comment