Industrial-Style Navigation Buttons
If you're new here, you may want to subscribe to my RSS feed.
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:
- Inner Shadow
- Outer Glow
- Bevel and Emboss
- Bevel and Emboss — Contour
- Gradient Overlay
- 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:
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.


Nice
Comment by hongkiat — April 17, 2007
it’s very good. thnk’s
Comment by GRoy — May 2, 2007
Cool !! I’ll use it for my website ….
Comment by Greenhorn — May 13, 2007
Its verry good .. like they would say in my country : verry pizda frate
Comment by marcel pavel — May 23, 2007
Respect.
Comment by johnny — May 30, 2007