Posted on October 6, 2008 - by Matthew Heidenreich

Create a Professional Gaming Header

Introduction…

In this tutorial you will learn how to create a professional gaming header design. If you have any questions about this tutorial be sure to ask in the comments and i’ll be happy to answer any questions. Also, remember with all the tutorials, the psd is available for download.

Download the PSD…

Don’t have time to do the tutorial, but would like to see the results? The PSD is available to anybody who would like to use it.

Lets get started…

1. As with anything, the first thing we need to do is create a new document. For this tutorial, we will be using a canvas size of 1000×180.

2. Next, go ahead and fill your background with #000000, and then input the following blending options onto your background layer (Right Click > Blending Options)

3. Use your Rectangle Marquee Tool to make a selection similar to the following, and fill it with #FFFFFF

4. Now, on that layer, input the following blending options onto that layer:

5. After this , we want to go ahead and show what our active link will look like. To do so, make a selection similar to the following and fill it with #000000 on its own layer:

6. Now input the following blending options onto that newly created layer:

7. Your results should look something like this:

8. Next step involves creating a extra ‘glow’ to our active layer. What we want to do now is to go to your tools pallet and choose the elliptical marquee tool. Set your feather to around 15%, and make a selection similar to the following:

9. On its own layer, fill it with #FFFFFF, and change the layer style to ‘overlay’. You will notice that you have excess white around your active box area, we want to remove this. An easy way to do this is to CTRL+Click your ‘blue active’ layer, to select it. Then go back to your glow layer and choose (Select > Inverse), then (Edit>Clear). After you have done so, it will look something like the following:

10. We want to add one more slight hint of detail to our navigation. So using our marquee tool, create a selection similar to the following and fill it with #000000

11. Lower the opacity to about 15%, and you will be left with a nice shadow on the bottom of your navigation

12. The last thing we need to do to our navigation is to add some text. So using your text tool, go ahead and add the text for your active link first. I chose to use Helvetica for my font with all caps, and the color set to #FFFFFF. Add the following blending options on its layer:

13. Your results will look like this:

14. Next we want to add our other links. Instead of using white text, we want to use a slight gray to set it apart. So go ahead and make as many links as you’d like with the font color of #ACAAAA. Using the same blending options as step 12, your header will now look like the following:

15. Next, we want to go ahead and pull our your rounded rectangle tool with your radius set to 10px. Go ahead and make a selection similar to the following, and make sure its on a layer below everything but your background layer.

16. Next, we want to go ahead and add a few blending options to that layer, so go ahead and right click it and choose blending options and input the following:

17. Your results will look like this:

18. Next thing we want to do is make a little ‘black strip’ at the bottom of our rounded rectangle. Go ahead and make a selection similar to the following, fill it with #000000, and lower the opacity to about 20%

19. Now we want to go ahead and add some simple text for our logo. I used the font GE Centurion. I am going to apply two different gradients for the ‘domain name’ and the ‘.com’, so place them on two different layers. For the ‘domain name’ text, I used the following blending options:

20. For the “.com”, i used these blending options:

21. Your document should look something like this:

22. I went ahead and used a rounded rectangle tool to make my search bar, and then added a few thick scanlines in the background and this is what I came up with:

**If you have any problems, or have any questions about this tutorial, please leave your comments and I will get back to you. Also, remember the PSD to this tutorial is available for download.

If you enjoyed this tutorial, why not check out our other Adobe Photoshop Tutorials?