Video Game Web Site Header

Multiple Game Website Header

In this Photoshop tutorial I will be showing you how to make a simple but effective game-site-style web header. You can see my outcome in the below image.
Gaming Header Tutorial Result - Photoshop Tutorial
(Click for fullview.)


Well, start this off by creating a new document/canvas, I used a document size of 800 x 271 pixels.
Next thing to do is lay out where everything will go, do this by making a new layer or two, then making the selection for the header and navigation and filling them with different colors.
Laid Out Header and Navigation - Photoshop Tutorial
What I’ve done in the above image is made two shapes (rectangles) and filled them with different colors, on separate layers of course. The header is 780 x 200 pixels in size, and the navigation is 780 x 50 pixels, with a 1 pixel space above it inbetweem the header.
After you’ve got it all the way you want it, we can continue.


We’ll start with the header. I firstly added a low-opacity Gradient Overlay in the Blending Options, you can find my for the Gradient Overlay settings here.
Gradient Overlay Added - Photoshop Tutorial
Now, you need to find some game wallpapers or renders.
You will be able to find some nice gaming wallpapers at GameWallpapers, although you will need to subscribe for access to all of the wallpapers, some are free though. Also, you can find some free cutout renders over at ClanTemplates.
I used the following wallpapers:

  1. Tom Clancy’s Ghost Recon: Advanced Warfighter 2
  2. Heroes of Might and Magic 5: Hammers of Fate
  3. World of Warcraft: The Burning Crusade

Ok, I started off by copying the Ghost Recon Wallpaper onto the canvas, resizing it then cropping it to the edges of the banner.
Wallpaper Added - Photoshop Tutorial
To resize you press CTRL+T then drag the corners downwards (while holding shift.)
To crop it you can simply cut the edges off using the Rectangular Marquee Tool.

Leave a comment