Gaming Style Header

Jan 7, 2009 Icons, Photoshop

This tutorial has been viewed: 1433 times

+ Add to Todo List

Added By: PSDesignZone

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

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.

Related posts

• Whiteshading Website Layout V2 (8)
• Pixel buttons in Photoshop (1)

Tags: Buttons