Design a Stylish Arcade Website Header

Design a Stylish Arcade Website Header

Posted on 15. Jun, 2008 by Web Design in Photoshop


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.

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:

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.

12 Responses to “Design a Stylish Arcade Website Header”

  1. siri

    16. Jun, 2008

    its nice and easy to work with
    bye

    Reply to this comment

  2. MySiteComeTrue

    17. Jun, 2008

    Thank you for this. It will help me greatly with upcoming designs/projects.
    PS: i love this site

    Reply to this comment

  3. Raj

    18. Jun, 2008

    simply nice tutorial. Thanx!

    Reply to this comment

  4. Freelance Web Design

    01. Aug, 2008

    Not bad :) Good stuff.

    Reply to this comment

  5. NaldzGraphics

    07. Aug, 2008

    nice tutorial.keep it up

    NaldzGraphics’s last blog post..30 Professional Logo Collection

    Reply to this comment

  6. arturo

    21. Sep, 2008

    i like this wallpaper i set is as my backround

    Reply to this comment

  7. Mike Huang

    10. Oct, 2008

    Something I really need to learn…especially since I’m going towards the arcade business :P

    -Mike

    Reply to this comment

  8. Apec Eswar

    17. Mar, 2009

    Good stuff for beginners, i rec-amend my friends do see this site

    Reply to this comment

  9. Joculete Gratis

    13. Apr, 2009

    Thanks for teaching me… i will try to make a header for my arcade site using your tutorial

    Reply to this comment

  10. beli

    10. Aug, 2009

    I think that you made a really easy and useful manual for desgning a great header. Thanks.


    Programmierung Leonberg

    Reply to this comment

  11. Just For Laugh

    12. Oct, 2009

    This is very useful to me. I am just learning photoshop. thanks sir

    -Andreas Lee

    Reply to this comment

  12. Alex High

    05. Mar, 2010

    Nice one, will probably edit my header on http://www.towerdefencesonline.com with a similar technique…

    Reply to this comment

Leave a Reply