Post

How To Make a Black “Matte Finish” UI Style button in Photoshop: Part I

black matte button
The final button we will be creating.

I’ve received numerous requests asking me to share some of my Photoshop techniques for making buttons and the like. So, I’m starting with this, and will do my best to continue to regularly post helpful tips and tricks in the future!

Of course, there are many ways to reach the same goal in Photoshop, and no one is any more right or wrong than another. These tutorials are just a summation of my own personal techniques, and I would encourage you to search for other tutorials and learn other techniques so you can combine them into your own unique style.

In this three part tutorial, I am going to show you how to make a dark button with a “matte” or “flat” finish, using Photoshop.  I will be making both the “normal” and “pressed” states of the button and will include text styles for each as well. For “Part I”, let’s start with the normal state.

The accompanying Photoshop file is available to download at the end of Part III.

Matte Black Button Up

Step 1


Make a rounded rectangle (whatever size you want), with a corner radius of 5px. Make sure you have “Align Edges” checked. This option causes the straight edges of your shape to snap to the nearest pixel, assuring a sharp, well-defined edge. Next we’ll apply layer styles to our button.

matte black button tutorial ntdesigns

Step 2


Add a stroke with the settings shown below. This simulates the bezel or “hole” around the button.

matte black button tut - add stroke

Step 3


Add the inner shadow as shown. This gives the effect of light reflecting off the top edge of the button. Keep the opacity pretty low to enhance the “matte finish” look.

matte black button tut - add inner shadow

Step 4


Next is one of my favorite effects! We’re going to add texture to the button using noise created by the “inner glow” effect. It also helps eliminate “banding” in the gradient in the next step if your version of Photoshop doesn’t feature dithering of style gradients. Basically, you crank the noise slider all the way up and set the opacity really low. Pretty cool huh?!

matte black button tut - add inner glow

Step 5


Now we’ll add the gradient that gives the button it’s “arched” look. You can experiment with the light and dark points of the gradient, but I used the following values: #0D0D0D and #1A1A1A; a very subtle gradient. Basically, the lighter the top color, the more arched your button will look, but I think the subtle difference in color makes the button look more realistic.

matte black button tut - add gradient

Step 6


Last, we’ll add a drop shadow. Because this button is intended to look like it is housed in a bezel and is in it’s “up” or “unpressed” state, we want a drop shadow that is shallow and tight, so the button doesn’t look like it’s floating. Below are the settings I used.

matte black button tut - add drop shadow

 


If you applied the styles correctly, your button should now look like this.

Matte Black Button Up

That concludes Part I of this tutorial. In Part II, we will create the “pressed” or “down” state of our black, “matte finish” style button. Thanks for reading and I’ll see you in the next tutorial!

Aaron Craig

Aaron Craig is a graphic designer & entrepreneur. He is the founder of NTDesigns, a UI design firm that specializes in touchscreen based interfaces, especially in the home automation industry. He is the primary author for the NTDesigns Blog, and writes periodically for other blogs and publications in the UI design and automation realms when he can. Aaron lives in Milwaukee with his family and two dogs, Napoleon and Kip.

Leave a comment  

name*

email*

website

Submit comment