Design a Stylish Arcade Website Header

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

Now fill the background 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.

Click to enlarge

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%.

Click to enlarge

Looks a lot nicer now doesn't it?

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

Click to enlarge

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%.

Click to enlarge

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.

Click to enlarge

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

Click to enlarge

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

Click to enlarge

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.

Click to enlarge

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

Drop Shadow

Gradient Overlay

Not much change, but still, nice details.

Click to enlarge

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

Click to enlarge

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

Click to enlarge

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.