Design a Stylish Arcade Website Header

By Web Design | 12 comments | Photoshop

Tweet

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.