Gaming Style Header

Gaming Style Header

This tutorial has been viewed: 4850 times


We are going to be creating an image like below:

Step 1:

To begin, first create an image 150×80 pixels:

Step 2:

Use the paintbucket tool to fill the background with with: #5B5B5B

Step 3:

create a new layer andUse the Rectangular marquee to make a selection like below and fill it with: #485337

Step 4:

Now apply the following Layer Styles to the layer:

You should come out with

Step 5:

Now create a new layer you should have 3 by now, use the rectangular marquee tool to make a selection like below and fill it with #757957.

Step 6:

Now pull out the Burn Tool , it is in the same place as a the dodge tool, just click and hold down on the dodge tool to pull out multiple tools, make sure that the Exposure is set to 50%, and draw out a line like below.

Step 7:

Create a new layer and make a selection for the top of the header to the top of the layer you just made. Fill it with #898C66

Step 8:
Pull out the pencil tool and at the very bottom of the selection you just made, draw a line with the color #9EA175

Step 9:

Now pull out the Dodge Tool (O) and draw a line


When using the dodge tool, you have to be on the same layer as the layer your trying to highlight.

like below (be sure the dodge tool is set to highlights and opacity of 50%) you may have to draw the line back and forth a few times. Next pull out the pencil tool once again and draw a black line at the top of the header, and with the dodge tool set at 1 pixel, draw a line right underneath it. It should look like below.

Step 10:

Now pull out the brush tool set the foreground color to #1E2213, set the pixel width to 1 pixel, and draw a shape like below (press shift to draw perfectly straight lines and angles).

Step 11:

Now you need to apply the following layer style settings to the layer, a Dropshadow and a Bevel and Emboss:

That should produce:

Step 12:

Press ctrl+j to duplicate the layer and use the Move Tool (v) to move it to the right hand side so you have two vent like items.

Step 13:

Use the polygonal lasso too to make a selection like below:

Step 14:

Now go to Select > Modify > Smooth and set the Sample Radius to 5 press ok, and it will smooth the selection to have rounded corners fill that selection with black.

Step 15:

Duplicate that layer with ctrl+j, then with the duplicated layer selected go to Edit > Transform > Flip Horizontal use the move tool (v) to move the layer to the far right (just above the right vent:

Step 16:

Next use the marquee tool to fill in the middle section with black like below:

Step 17:

Now apply the following Layer Style Settings to the layer

Click on the Gradient to pull up the next window

That should produce:

Step 17:

ctrl+click on the layer you were just working on and create a new layer, go to Select > Modify > Contract and contract it by about 10 pixels, fill that selection with black.

Step 18:

Now apply the following Layer Style settings to that layer

Which should produce

Step 19 (optional):

Create a new layer and press ctrl+g (ctrl+alt+g for cs2) to have that layer mask the layer under it, with the polygonal lasso tool make a selection like below, then pull out the gradient tool, and set the colors white to transparent, and draw a gradient from the top left to the bottom right, which should produce:

Step 20:

Now all that is left is to add in some text, use whatever font you want and apply the following settings to it, I set the color of the font to #FFE500.

And you should get

Duplicate all of the layers that contain a buttom element on them and you can make multiple buttons like below

I hope you enjoyed the tutorial

Learn how to design the skype logo along with this.


Added By:
  1. evden eve nakliyat Said: Comment by evden eve nakliyat on January 15, 2009 at 1:53 pm | Permalink



    Yes we will be coming out with video tutorials soon!


  2. cossacks Said: Comment by cossacks on May 16, 2009 at 8:16 pm | Permalink

    Gaming Style Header | PSDesignZone – Source for Photoshop, Fireworks, Gimp, and CSS Tutorials great article thank you.


  3. araç kiralama Said: Comment by araç kiralama on May 18, 2009 at 9:59 am | Permalink

    this article is very interesting and wonderful informations. Thanks for the informations they are too helpful for this subject…


  4. nakliyat Said: Comment by nakliyat on July 21, 2009 at 1:29 pm | Permalink

    Nice articles, helped me a lot thanks.


  5. perde Said: Comment by perde on July 21, 2009 at 1:31 pm | Permalink

    thanks for site admin


  6. perde Said: Comment by perde on July 21, 2009 at 6:02 pm | Permalink

    nice work


  7. Ali Said: Comment by Ali on November 17, 2009 at 9:54 pm | Permalink

    thanks admin.this article is very interesting


  8. Erd Said: Comment by Erd on November 20, 2009 at 7:37 am | Permalink

    excellent and practical work


  9. evden eve Said: Comment by evden eve on December 16, 2009 at 6:21 pm | Permalink

    good work .thanks


  10. evden eve nakliyat sec Said: Comment by evden eve nakliyat sec on April 18, 2010 at 4:05 pm | Permalink

    makaleler için te?ekkürler buldum ne i arama
    site harika …



Leave a Comment