Awesome, War-Style Game Buttons

Advertisement


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

Awesome, War-Style Game 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!

Twitter Digg Delicious Stumbleupon Technorati Facebook Email

19 Responses to “Awesome, War-Style Game Buttons”

  1. Nice outcome. This great for some RPG gaming site.

  2. I love this tutorial, great job.

  3. love it. Have been looking 4 this 4 some time… :)

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

  5. 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

  6. Looks sweet, Commander :)

  7. Thnx(A) 3 hours of work;-)

  8. Awesome tutorial!
    very usful for my games i make

  9. 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? :D

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

  11. 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 :)

  12. wow thnx for the great tutorial its helps me alot

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

  14. Really nice job, looks very much like original.

    Thx a lot

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

  16. good tutarial . Thank u :-)

Trackbacks/Pingbacks

  1. Web Sitenize 39 EÅŸsiz Photoshop Buton Tutoriali | Listeniz.Net - 27. Dec, 2007

    [...] PhotoshopStar: Warcraft III tarzı menü buton [...]

  2. Botao web 2.0 tutorial - Button Web 2.0 Photoshop - 03. May, 2008

    [...] PhotoshopStar: Botões no estilo Warcraft III [...]

  3. Webincafe - Blog » 39 Photoshop Button Tutorials You Should Have in Your Arsenal - 25. Jun, 2008

    [...] PhotoshopStar: Creating Buttons for a Game Site like the Warcraft III site. [...]