Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaver

Wanting to start an arcade website soon and want it to stand out from the rest that have standard ugly headers? Then this is the tutorial for you! Learn how to make a simple but very stylish arcade website header.

Create a Unique Website Header Using Photoshop

You can see the result here:

1.

First start by making a new document, I’ll be using a document size of 900 x 140 pixels.

Now fill the backgrond layer with a nice, dark blue gradient, the colors I used were #476ba7 and #263d65. (darker at top)

2.

Now you’ll need some images to blend into the background, you can download the images that I used below.

• 3D Pacman
• Mario Wallpaper
• Mario Cutout

Start by getting the 3D Pacman Image and sticking it in the bottom left of your header.

With a large, soft brush, erase away the right side of the pacman image. Now change the layer mode to Soft Light and lower the opacity to about 55-65%.

Looks a lot nicer now doesn’t it?

3.

Now get out the Mario Wallpaper and stick it in the middle of the document.

Take note that I resized the wallpaper after putting it in the header, to resize it press CTRL T and change the percentages near the top.

Repeat what you did with the last image, use a large, soft brush to erase away the edges, change the layer mode then lower the opacity to about 15-25%.

Looking pretty nice so far.

4.

Lastly you need to blend in some sort of cutout render, I used the Mario Cutout.

Firstly put it in the document, then position it the way you want it.

Use a large, soft brush and erase away the edges slightly.

Now lower the opacity for mario to about 45-60%.

5.

Now let’s add in our text. Firstly, you need a font that suits the theme, I used a font called Arcade, typical, right? Download Arcade Font.

Now with this font, for it to be dotted I think you have to use 60 px as the font size.

After writing out your text, add in the following layer styles:

• Drop Shadow
• Gradient Overlay

Not much change, but still, nice details.

Lastly for the text, I added in some much smaller text underneath, using the same layer styles.

6.

To finish this off you can add some nice post-effects, or buttons if the buttons are going to be in the header.

I applied Filter > Noise > Add Noise with an amount of about 2.2 for a nice, last effect. And I also added in some simple, glossy buttons.

Thanks for reading, we hope you enjoyed this tutorial.