Illustrated designs - http://www.illustrateddesigns.com
Gamers Zone Header
http://www.illustrateddesigns.com/articles/2570/1/Gamers-Zone-Header/Page1.html
By Art-D !
Published on 12/26/2006
 
Create Gamers Zone Header in Photoshop CS Gamers Zone Header
Learn how to create this excellent web header for game community.

Gamers Zone Header - part 1
Open a new file having 766x309 px and 72 dpi. It should be painted in 30333C.

Create Gamers Zone Header in Photoshop CS

On a new layer with 4x4 px, apply the next instrument to represent the next element

Create Gamers Zone Header in Photoshop CS

. It has the color 7D808E.

Create Gamers Zone Header in Photoshop CS

Save the clich?.
On the new layer with 766x309 px and 72 dpi, apply the next indications:

Create Gamers Zone Header in Photoshop CS

In the opened menu choose the saved earlier clich?.

Create Gamers Zone Header in Photoshop CS

Create Gamers Zone Header in Photoshop CS

Fill 50% on the layers.
Using the shown instrument , represent now the central part of the site’s header.

Create Gamers Zone Header in Photoshop CS

Fill 0% on the layers.
Blending Options-Drop Shadow

Create Gamers Zone Header in Photoshop CS

Gamers Zone Header - part 2
Blending Options-Gradient Overlay

Create Gamers Zone Header in Photoshop CS

Gradient’s parameters:

Create Gamers Zone Header in Photoshop CS

Blending Options-Stroke

Create Gamers Zone Header in Photoshop CS

Using the next tool create now the upper part of the site’s header.

Create Gamers Zone Header in Photoshop CS

Fill 0% on the layers.
Blending Options-Drop Shadow

Create Gamers Zone Header in Photoshop CS

Blending Options-Gradient Overlay

Create Gamers Zone Header in Photoshop CS

Gradient’s parameters:

Create Gamers Zone Header in Photoshop CS

Blending Options-Stroke

Create Gamers Zone Header in Photoshop CS

Gamers Zone Header - part 3
Applying the same instrument, it’s possible to create inside the central part of the site’s header a place reserved for the photo.

Create Gamers Zone Header in Photoshop CS

Blending Options-Gradient Overlay

Create Gamers Zone Header in Photoshop CS

Gradient’s parameters:

Create Gamers Zone Header in Photoshop CS

Copy the new made layer and erase all the effects on the layer. With Free Transform option it’s possible to minimize the element the same way it is indicated below. Paint it in black.

Create Gamers Zone Header in Photoshop CS

From any site World of Warcraft you can download a picture containing the hero from next image. Cut out the hero along the contours and place the same way it is demonstrated below.

Create Gamers Zone Header in Photoshop CS

Keep pressed the Alt button and make a click between the black center’s layer and the hero’s layer and we’ll get this:

Create Gamers Zone Header in Photoshop CS

Apply the following tool to create above the upper photo’s part a stripe colored in white (Fill 70% on the layers), then click on

Create Gamers Zone Header in Photoshop CS

. Using this tool with blurred edges we should erase all that is not necessary to have the same image like the next one.

Create Gamers Zone Header in Photoshop CS

Having the shown instrument , create a button on the left side.

Create Gamers Zone Header in Photoshop CS

Gamers Zone Header - part 4
Blending Options-Drop Shadow

Create Gamers Zone Header in Photoshop CS

Blending Options-Gradient Overlay

Create Gamers Zone Header in Photoshop CS

Gradient’s parameters:

Create Gamers Zone Header in Photoshop CS

Blending Options-Stroke

Create Gamers Zone Header in Photoshop CS

Copy the recently made layer and apply the Free Transform selection to turn it around on 180 degrees vertically. Place it the way it is pictured below by keeping the same sizes.

Create Gamers Zone Header in Photoshop CS

Blending Options-Gradient Overlay

Create Gamers Zone Header in Photoshop CS

Take the shown tool again to represent the middle button on the menu’s left side

Create Gamers Zone Header in Photoshop CS

Blending Options-Drop Shadow

Create Gamers Zone Header in Photoshop CS

Gamers Zone Header - part 5
Blending Options-Gradient Overlay

Create Gamers Zone Header in Photoshop CS

Gradient’s parameters:

Create Gamers Zone Header in Photoshop CS

Blending Options-Stroke

Create Gamers Zone Header in Photoshop CS

For you convenience now you should combine all the layers containing 3 buttons on the menu’s left side in a group. Copy that group and apply the Free Transform selection to turn it around on 180 degrees horizontally. Don’t forget to place it the way it is shown next picture.

Create Gamers Zone Header in Photoshop CS

Add now on the upper part of the header the necessary text, keeping the demands from the next table.

Create Gamers Zone Header in Photoshop CS

Create Gamers Zone Header in Photoshop CS

Blending Options-Gradient Overlay

Create Gamers Zone Header in Photoshop CS

Gradient’s parameters:

Create Gamers Zone Header in Photoshop CS

Gamers Zone Header - part 6
Take a different tool now to choose the appropriate element from next table.

Create Gamers Zone Header in Photoshop CS

Create Gamers Zone Header in Photoshop CS

Blending Options-Inner Shadow

Create Gamers Zone Header in Photoshop CS

Blending Options-Gradient Overlay

Create Gamers Zone Header in Photoshop CS

Gradient’s parameters:

Create Gamers Zone Header in Photoshop CS

Insert on the menu’s buttons the text, keeping the demands from the table below.

Create Gamers Zone Header in Photoshop CS

Create Gamers Zone Header in Photoshop CS

Insert the text on the upper menu’s buttons now.

Create Gamers Zone Header in Photoshop CS

Gamers Zone Header - part 7
Create Gamers Zone Header in Photoshop CS

Blending Options-Gradient Overlay (RULES)

Create Gamers Zone Header in Photoshop CS

Blending Options-Gradient Overlay (GAMES)

Create Gamers Zone Header in Photoshop CS

The common gradient’s parameter:

Create Gamers Zone Header in Photoshop CS

Insert another text on the upper part of the site’s header, keeping the type, size and the color indicated in the next table.

Create Gamers Zone Header in Photoshop CS

Create Gamers Zone Header in Photoshop CS

Blending Options-Gradient Overlay

Create Gamers Zone Header in Photoshop CS

Gradient’s parameters:

Create Gamers Zone Header in Photoshop CS

Gamers Zone Header - part 8
Next step includes adding three rows of points on the upper part of the central panel (above the hero’s picture).

Create Gamers Zone Header in Photoshop CS

Create Gamers Zone Header in Photoshop CS

Combine now all layers containing those 3 rows of points in a group. Copy this new made group. Then apply Free Transform option to turn it around on 180 degrees vertically.

Create Gamers Zone Header in Photoshop CS

Take the next tool to represent the next element

Create Gamers Zone Header in Photoshop CS

Close to (NEWS)

Create Gamers Zone Header in Photoshop CS

Combine all the elements containing the pints close to NEWS in a group. Copy this group 5 times and place it like it is shown next step.

Create Gamers Zone Header in Photoshop CS

The final result!

View full size here.