13 MAY

Tutorial: How to create a pixel perfect button in Adobe Photoshop

You can create a button in Adobe Photoshop as follows:

  • Create a new document in Photoshop. Match the properties with the screen grab and set up a grid in line with the designated specifications.
  • Choose a foreground colour, select the rounded rectangle tool and draw out your shape. The grid lines should match up to the button shape. The grid can now be turned off.
  • The pixel perfect button can now be styled using style layers. Three layers need to be added -gradient overlay, inner shadow and inner glow.
  • Text now needs to be added to the button using the horizontal type tool. The button shape and button text should be aligned centrally.
  • You can quickly edit the button using layer style effects, the vector mask and the direct selection tool.

Welcome to my first Think Tank tutorial. Here you will learn how to create a simple pixel perfect button in Photoshop. Below you can see the difference between a pixel perfect button and one that isn’t pixel perfect.

The difference between a pixel perfect button and one that isn't pixel perfect.

Step 1

First open up Photoshop and create a new document (File > New). Then make the properties match those shown in my screen grab.

Step 1a

Next we will enable and set up a grid. Personally, I only really use grids when I want to quickly draw out shapes, at precise sizes, so I regularly turn them on/off as and when I need them. First enable the grid from the top menu (View > Show > Grid), then enable snap to grid (View > Snap To > Grid), this will help restrict your shape to precise pixel sizes when you draw out your button.

You can see my grid preferences below, I usually like to have a grid line every 10 pixels. Make sure that your grid line is set up to pixels, rather than cm or mm etc. Don’t worry about the grid obscuring your view, once the shape is drawn we can turn it off.

Step 1b

Step 2

Now we have our document and grid set up, we can draw our button shape. First choose a foreground colour (I’m using #00ABED).

Step 2a

Then select the rounded rectangle tool (with a corner radius of 3px selected from the menu at the top) and draw out your shape in the middle of the document. I have drawn mine to be 180 pixels by 40 pixels.

Step 2b

If you zoom in to take a closer look (I’ve zoomed into 1200%),  you will see that the button shape matches right up to the grid lines and is pixel perfect. We can now turn off the grid view (View > Show > Grid).

Step 2c

Step 3

Now that we have our pixel perfect button shape, we can style it. If you haven’t used layer styles before, you can find them at the bottom of the layers panel.

Step 3a

We will be adding 3 layer styles: Gradient overlay, inner shadow and inner glow. We won’t be adding any colour to these styles which will allow the button colour to be changed very quickly in the future, but more on that later. First off, lets add a gradient overlay. Select ‘Gradient overlay’ from the layer styles panel. Once this is open click on the gradient box to open up the gradient editor. Make sure that both ends of the gradient are white in colour, then bring the opacity of the left hand side down to ‘0’ and click ‘OK’ to close the gradient editor. Now on the Gradient Overlay section of the layer style panel, bring the opacity down to 40%. Your button should now have a subtle light gradient effect over its blue colour.

Step 3b

Now we can add the Inner shadow & inner glow layer styles. See screen grabs below for the settings I have used.

Step 3c

Step 3d

Step 4

Now your button should look something like this.

Step 4a

The next step is to add text.  Select the horizontal type tool from the left hand Tool menu. Change your foreground colour to white and click into the document and type out your button text. In this instance I have chosen to centre my text. Once you have your button text you can change the font and font size, you can even add a drop shadow with layer styles if you wish.

Step 4b

Now we want to have the button shape & button text aligned centrally. To do this select the move tool in the tool panel, then select both layers in the layer panel (You can select multiple layers by holding control whilst clicking or if you are a Mac user like me it’s cmd + click). Once both layers are selected an align panel will appear in the top menu, you can then align the vertical and horizontal centres.

Step 4c

Now we have a finished pixel perfect button. The only thing left to do is put both layers into a layer group to keep your psd file tidy.

Step 4d

Step 5

Now we have a finished button, you need to know how to quickly edit it. The beauty of creating layer style effects that don’t have specific colours (only white & black have been used in the layer styles) is that you can quickly change the button colour, simply by changing the shape colour. You can do this by clicking on the layer thumbnail in the layers panel, then simply select a new colour.

Step 5a

To edit the size I would always recommend editing the vector mask, as opposed to using the free transform tool. This will help keep your corner radius at the size and proportions you intended. To do this first select the vector mask thumbnail in the layers panel. Then you will need the Direct selection tool from the tool panel, this allows you to select the shape points you wish to move. Once you have these selected, you can make the button wider or more narrow. I personally prefer to do this using the arrow keys. However, when you do this it is very important to work at 100% zoom view, other wise you can potentially lose that pixel perfect edge.

Step 5b

So, that’s the end of this basic tutorial. I hope you have found it useful. If you would simply like to take a look at this button in detail, you can also download the source psd file here.

Written by Will Barron

Will is a designer at Evoluted, spending most of his time tweaking layouts and layer effects in Photoshop. Outside of work Will plays ice hockey, enjoys snowboarding and bouldering. Not to mention drinking the odd pint. Read more posts by Will Barron

Free social media icons for every subscriber

Sign up to our mailing list to have new updates delivered straight to your inbox. Every subscriber will get a free pack of social media icons!


19 Comments

  1. Bruce Wayne

    May 14, 2013 at 11:31 am

    Or you could just use Illustrator or Sketch and do it in half the time with a better result?

    • team

      Will Barron

      May 14, 2013 at 1:58 pm

      Thanks for the comment ‘Bruce’, but ‘Why so serious?’ 🙂

      While there are plenty of other design tools out there (like the 2 you mentioned), I still believe Photoshop is the most popular for web design. So I thought that a Photoshop tutorial could be useful for some people. However, I may consider tutorials using other design tools in the future.

  2. DanO

    May 14, 2013 at 1:36 pm

    Nice and simple! Possible follow on article about using Smart Objects?

    • team

      Will Barron

      May 14, 2013 at 1:50 pm

      Thanks Dan, I’ll see what I can do 🙂

  3. Linda Clark

    June 17, 2013 at 9:57 pm

    thanks will! basic, lovely and easy to edit.

  4. Sarah

    April 22, 2014 at 6:31 pm

    Lovely and easy to follow tutorial! Thanks!

  5. Marin

    May 16, 2014 at 1:54 pm

    Thanks much for tutorial,below a link with my button created from this tutorial. http://i.imgur.com/FmwTYKs.png

  6. Ahsan Idrisi

    May 25, 2014 at 12:44 pm

    Good tutorial for button but i feel the white gradient a bit dull

  7. Ronen Vaanunu

    May 28, 2014 at 2:26 pm

    Thanks for the tutorial, really plain and simple!
    Can you please explain how to make the button look pressed?

    • team

      Will Barron

      May 28, 2014 at 2:42 pm

      A quick way to create a “pressed” look would be to turn off the “Inner Shadow” effect in the layer styles, then tick “reverse” in the “gradient overlay” option.

      Hope that helps

      • Ronen Vaanunu

        May 28, 2014 at 3:18 pm

        Thanks, looking great!

  8. Lee

    January 04, 2015 at 1:24 am

    Thanks for the tutorial! It really helped me with my dads website.

  9. Gwen

    February 11, 2015 at 7:34 am

    Wow! Works just the way I wanted for a simple button! Thank you so much! 🙂

  10. Ab moiz

    April 18, 2015 at 2:41 pm

    Thanks for this article

  11. John

    August 21, 2015 at 12:42 am

    When I draw the rectangle, it does not create a new layer. It only draws it in the “locked” background. This is stopping me from changing the size in the vector mask. Any thoughts? I am using cs5.

    • team

      Jenny Hadfield

      September 15, 2015 at 9:21 am

      Hi John,

      When you draw your rectangle ensure you are drawing the rectangle as a shape and not as pixels. There are some options on the top toolbar, when you have selected the rectangle tool, its a small drop down at the top left, make sure its set to shape. Hopefully this should solve the problem.

      Thanks

  12. Sophi

    May 06, 2016 at 5:13 pm

    How can I save the file without the white background showing up?

    • team

      Will Barron

      May 06, 2016 at 5:20 pm

      Hi Sophi,

      If you save the file as a png the background won’t show up.

      Thanks

      • Sophi

        May 06, 2016 at 6:03 pm

        I’d tried doing that and it didn’t work…any idea what I might be doing wrong?

Leave your comment