Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Design a Stylish Arcade Website Header

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)

Design a Stylish Arcade Website Header image 1

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

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

Click to enlarge
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
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
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
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
Click to enlarge

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

Click to enlarge
Click to enlarge

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

Click to enlarge
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
Click to enlarge

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

Drop Shadow

Design a Stylish Arcade Website Header image 10

Gradient Overlay

Design a Stylish Arcade Website Header image 11

Not much change, but still, nice details.

Click to enlarge
Click to enlarge

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

Click to enlarge
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.

Design a Stylish Arcade Website Header Tutorial: Final Result (Click to enlarge)
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.



About the Author:

I started Web Design 5 years ago, and I now make a substantial monthly income each and every month, and so can you.

Author's URL: Michael Dunlop
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Design a Stylish Arcade Website Header"

Only registered users can write comment

Reader's comments