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)

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.

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

image 3
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.

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

image 5
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.

image 6
Click to enlarge

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

image 7
Click to enlarge

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

image 8
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.

image 9
Click to enlarge

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

Drop Shadow

image 10

Gradient Overlay

image 11

Not much change, but still, nice details.

image 12
Click to enlarge

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

image 13
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
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
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Design a Stylish Arcade Website Header"

Captcha