Design a Simple, Industrial-Style Gaming Header

In this simple & easy tutorial I’m showing you how to make a grungy-styled gaming header, just like the one shown below!

1. Document / Settings

Firstly, start by making a new document, I used a size of 400 x 400 pixels for this tutorial. Now create a background that will suit the graphic we’re going to make.

Firstly, I added in a blue gradient of which the colors were #2084b1 and #193a4d, I then created a new layer and applied Filter > Render > Clouds, lastly I then changed the layer mode for the clouds layer to Soft Light.

Render Clouds Soft Light

Merge your two background layers together, then apply Filter > Noise > Add Noise with an amount of about 1.0-2.5, this gives it a nice, subtle effect.

Filter Noise Applied

Lastly, you can blend in a render / cutout from one of your favorite games.

I used a cutout from the game Rainbow 6. This render is by the lovely Serenity, and you can download it from here. For the blending it in part: I resized the render, changed the layer mode to Soft Light, lowered the opacity, and also erased a few corners with a large, soft brush.

This is what I came up with: Rainbow Render Blended

Your background is done!

2. Creating the Heading Shape

Find and get out the Rounded Rectangle Tool. If you’re unable to find it, you can see it in this image. Use similar settings as these shown here:

Rounded Rectangle Tool Settings

Create a new layer then draw a rounded rectangle on the document. This is how my shape came out:

Rounded Rectangle Drawn

Please take note that the color you use for your heading doesn’t matter at this time.

3. Applying Layer Styles

Right-click the layer you just created and go into the Blending Options. Click and apply the following settings/layer styles:

Inner Shadow
Outer Glow
Bevel and Emboss, Texture
Gradient Overlay
Pattern Overlay
To create the pattern, first download this image, open it in Photoshop, (select all) then go to Edit > Define Pattern.

Now you should have an outcome similar (pretty much the same) to this:

After Applying Layer Styles

Pretty sweet so far!

Next thing to do is create a new layer then make a selection around the bar (hold ctrl and click the layer thumbnail).

Now you’ve got the bar selected, on the new layer do a little bit of brushing in the corners, I only used brushes that come with Photoshop. The main color I used for this brushing was white (#ffffff), but also some orange from the bar.

Eroded Brushing

That brushing makes it look like the texture (warning tape) has been eroded at the corners. Now, lastly, add in welcome text on the left.

Welcome Text

The font I’ve used in the above screenshot is called kroeger 05_53, you can feel free to download it from here. I also used the following layer styles on my text layer:

Welcome Text

4. Logo Area Shape

On a new layer, create another rounded rectangle about the same width, but about 4 times the height, you can use any color as before — see my shape below.

Larger Rectangle

Into the blending options again – apply the following layer styles to your new rounded rectangle layer:

And now you should now have something like this:

After Applying Layer Styles

The last thing you need to do is add in text inside of the larger box. Get the text tool out and write something.

Text Written

The font I used above is called Impact, it should come with Windows. After you’ve written out your text, apply the following layer styles:

Mission Accomplished

And that’s pretty much it, a nice gaming-style header graphic! I hope you enjoyed this tutorial, and remember, get creative!

Result Image Photoshop Tutorial

Thanks for reading this tutorial, I hope you enjoyed it! If you need the PSD for help or anything like that (but not stealing!), you can download it from here!

Return home. Published Jan 4th, 2007 under Web Graphics.