Post

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

Matte Black Button Down

In part II of this tutorial, we’re going to make the “pressed” or “down” state of our black “matte finish” button.

Step 1


Just like you did for the “up” state, make a rounded rectangle (whatever size you want), with a corner radius of 5px.  Again, make sure you have “Align Edges” checked.  You could also simply copy your “up” state button and start from there.  Some of the styles for the “down” state are the same as the “up” state, so this may be the more efficient option.

matte black button tutorial ntdesigns

Step 2


Add a stroke with the settings shown below (same as the “up” state).  This simulates the bezel or “hole” around the button.

16

Step 3


Add the inner shadow as shown.  This gives the effect of the button being embossed or depressed into it’s bezel.

17

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?!

18

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.

21

Step 6


Next we’re going to add the satin effect to give that depressed look to the sides of the button as well.

19

Step 7


This step is kind of optional, but I like to add a black color overlay at a low opacity to help make the “pressed” state contrast a little better from the “up” state.  This may arguably take away from the realism of our styles, but it makes it easier for the user to be able to tell that they have pressed the button in my opinion.

20

Step 8


Lastly, we need to add a drop shadow, but not a very traditional one.  We’re actually going to use the drop shadow to give the effect of light reflecting off the bottom edge of the bezel.  This is a very effective way to imply that a button has been pressed.

22

At this point, your buttons should look like this.

both states no labels

In the last installment of this tutorial, I will show you two very cool text effects to use with this button.  See you there!

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