Post

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

Matte Black Button

In part III of this tutorial, I will show you how to add the text to the button in the inactive and active styles you see here.

The style of text I used on this button is again, quite subtle. It may not be suitable for many applications because it could be considered “hard to see” by some, but for the purposes of this tutorial, I went for style over practicality. The font is “Nimbus Sans Condensed” which you can easily find for free if you Google it. Otherwise, these styles will look nice with any number of fonts, so just experiment!

Step 1


The overall effect is that the text is very sharply embossed into the button, so first we add a well defined, shallow inner shadow.

12

Step 2


Next add the color overlay. You can most definitely experiment here. I chose a dark grey, just light enough to contrast a bit with the surface of the button.

13

Step 3


Last is a drop shadow, which is again, actually serving as a highlight rather than a shadow. It’s little tricks like this that are nice to have in your arsenal. Just because the name of a style suggests one thing, doesn’t mean it has to be used that way.

14

That does it for the text style of the “up” state of the button. Next we’ll stylize the text of the “down” state to look like a glowing, blue led as shown here.


black button down labelled

Creating a convincing “glowing led” effect is quite often made far more complex than it needs to be in my opinion. I’ve seen countless versions of this effect that involve numerous layers, special paintbrushes, etc; and while these more elaborate renditions definitely have their place, making a small object appear to be illuminated and glowing like an led, can be accomplished quite simply by stylizing a single layer. After all, if you’ve ever looked directly at an illuminated led, your eye doesn’t perceive much more than just a blurred, pool of bright color. So anyway, here we go.

Step 4


First, apply a color overlay in a bright hue (I’ve chosen blue). Feel free to experiment, but document the color you choose so you can use it for the next two steps as well.

23

Step 5


Now we need a tight glow around the text to simulate the blur of a glowing object. We’ll use “outer glow” for this.

24

Step 6


Lastly, we’ll add a much more subtle glow with a much wider spread. Many designers will use a second layer with an additional “outer glow” applied, but you can accomplish the same effect on one layer with “drop shadow” by setting the size high and the distance to zero. You can also play with blending modes and the “spread” slider to create different effects if you wish.

25


At this point, your buttons should look like this, and that’s it! A nice, refined-looking, matte-black finish button with “up” and “down” states.

pt3 preview

I hope you found this tutorial useful and will continue to follow the NTDesigns blog as we post more useful tips and tricks. Thanks for reading!


You can download the completed Photoshop file here.

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