Awesome, War-Style Game Buttons

In this quick Photoshop tutorial we’ll be learning how to design a set of really cool, war-style game navigation buttons

1.

First off start by making a new document and filling the background with a very dark color. For this tutorial I used a document size of 400 x 400 pixels, and a background color of #0e0b06.

Make a new layer and then get the Rectangular Marquee Tool, set the mode to Fixed Size, use the dimensions 100 px by 1 px

2.

On the new layer make the selection and fill it with a light yellowish orange color. (#e39206)

Duplicate the line layerand move it down around 15-20 pixels downwards. Merge the two layers together.

Apply Filter > Blur > Motion Blur with a ratio of 100 to get this look:

3.

Apply these layer styles to the lines layer:

1. Satin
2. Pattern Overlay

(download the pattern from here)

Make a new layer and leave it empty, select the two layers (new layer and the lines layer) and merge them together.

4.

Again, make a new layer and with the selection tool make a selection in between the two orange lines. Since my two lines are 15 pixels apart, my selection in between the two will be 13 pixels in height.

Fill the selection with #115272.

Apply Motion Blur to the layer again then apply the same layer styles as before. (use lower opacities when applying the layer styles though)

Make a new layer and merge the new layer and blue box layer together like last time, now use a grunge brush to erase a few bits of both the orange lines and the blue part.

Looks much better with erased bits, huh?

5.

For the text I used

• Font: Tahoma
• Size: 11 pt
• Anti Aliasing: None
• Color: #dc8e06

I then applied these few layer styles to the text layer:

1. Drop Shadow
2. Gradient Overlay

This is what we have now:

Duplicate your button and text layer(s), move them down, change the text, repeat. This is what I finished with:

Thanks for visiting PhotoshopStar, everyone, I hope you enjoyed the tutorial. I know I did!

Please feel free to download the PSD file from this tutorial from here, for learning purposes only though.

You must be logged in to post a comment.

19 responses

MaZa said:July 4th, 2006

Nice outcome. This great for some RPG gaming site.

Mark said:July 5th, 2006

I love this tutorial, great job.

eZk said:July 6th, 2006

love it. Have been looking 4 this 4 some time…

Patrick said:July 6th, 2006

Wow, nice job. Most nav tuts are all the same, but this one is different and good

Commander said:July 6th, 2006

Ej m8,

Thnx to you I was able to make an astonishing Layout

to be seen at: http://www.nox.clan-hosting.nl/Template%204/Index.html

please reply for, at: stijnpieper@gmail.com

CMY-Design

admin said:July 6th, 2006

Looks sweet, Commander

Commander said:July 7th, 2006

Thnx(A) 3 hours of work;-)

fsd said:July 13th, 2006

Awesome tutorial!
very usful for my games i make

MunkkiPossu said:July 14th, 2006

Hmm… Great! It’s just… Sorry, but I can’t find the grunge brush. Can someone tell me what button is it or where to find it?

Shami said:July 24th, 2006

very nice,but can u show me where is the grunge brush?thank u so much.

admin said:July 24th, 2006

Ok guys, here are some brushes:
http://photoshopbrushes.com/brushes/11.htm
But I think these are the original ones I used:
http://photoshopbrushes.com/brushes/6.htm
Both very nice sets anyway

Lennie said:November 8th, 2006

wow thnx for the great tutorial its helps me alot

Qn said:December 22nd, 2006

Really nice Tutorial i like the outcoem allot. and nice adding a pdf for Download, Gj.

Jarno said:December 25th, 2006

Really nice job, looks very much like original.

Thx a lot

Sebastian said:November 15th, 2007

Nice tutorial! Thank you for the grunge brushes:).

Mishal said:April 10th, 2008

good tutarial . Thank u