Industrial-Style Navigation Buttons

Thanks for visiting the site. In this Photoshop tutorial I will be showing you how to make an industrial-style navigation button, well-suited for a clan template or something of the sort. You can see the result below.

1.

Start by making a new document, or opening up an old file you might want to make this button in.

Using the Rounded Rectangle Tool make a nice, rounded-button on the canvas. Be sure you’re on a new layer.

Note that you can use any color for your button.

2.

Now that you’ve made the base of your button, let’s turn it into something interesting. Firstly right-click your layer and go into the Blending Options, now apply the following layer styles/settings:

1. Inner Shadow
2. Outer Glow
3. Bevel and Emboss
4. Bevel and Emboss — Contour
5. Gradient Overlay
6. Pattern Overlay
   Download pattern: .jpg, .pat.

Now, if you used all the correct settings, you should now have a result like this:

So far so good.

3.

Now you need to add in some little details. All I added was a kind of bullet hole. You can make a bullet hole by using the brush or elliptical marquee tool to make a black circle, then add in some soft white brushing.

I made my bullet hole by first making a black circle, then applying a light Stroke, and lastly some white brushing around the edges and for smoke.

4.

To finish off your button you should add in some text of course. With the text tool write out your button text with white as the color. I used the font Impact, 15pt, Sharp.

To finish off my text I added the following layer styles to my text layer:

1. Outer Glow
2. Gradient Overlay

And now you should have something like this:

5.

Now basically what you need to do is duplicate your button and text layer, move them over and change the text, repeat a few times. And maybe also make more of a template based on the buttons.

I finished off by adding a few post-effects for good looks, they’re not necessary though.

Thanks for reading the tutorial, I hope you enjoyed it. If you need to, you can download the PSD file from here.

Topics: Buttons, Design, Navigation, Photoshop