Create a Wii Web Header in Photoshop

2-13-08 Filed under Designing & Photoshop Tutorials

Step 1:
Let’s start out by creating a new file. I used a 10550×151 pixels canvas set at 72dpi, and I filled my background with a white color.

Step 2:
Select the Rounded Rectangle Tool from your tools palette then above your screen under options palette choose Fill Pixels, set the radius to 16 px and check anti-aliased. Create a new layer and draw a light gray, color code #2F2F2F rounded rectangle with 980×83 px dimensions. Now cut the top corners of the rounded rectangle.

Step 3:
Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options to your gray rounded rectangle layer.

Step 4:
Now change the radius setting to 8 px for the rounded rectangle tool. In a new layer draw a gray, color code #888888 rounded rectangle with 64×72 px dimensions.

Step 5:
Cut the bottom half of your gray rounded rectangle. Then under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your dark rounded rectangle layer.

Step 6:
Now make another layer and draw a black rectangle with 64×10 px dimensions.

Step 7:
Under Layer Style(Layer > Layer Style) add a Drop Shadow blending option to your black rectangle. Then set the layers blending mode to Darken on the layers palette.

Step 8:
Select your Horizontal Type Tool and above your screen under the options palette set the font family to Arial, bold, 13 pt, strong and white for color. In a new text layer add a link title on the tab.

Pages: 1 2 3
Did you enjoy this design? We publish fresh tutorials
on a daily basis so why not Subscribe to our RSS Feed?

---

5 Responses to “Create a Wii Web Header in Photoshop”

1. Tutorial Effect Says:
   February 15th, 2008 at 5:48 am

   This looks pretty good, thanks for submitting it to tutorial-effect.net

2. Katalog Stron Says:
   February 20th, 2008 at 8:26 am

   Yeah it looks very good. Thanks for tut.

3. Webmaster Widget Says:
   March 6th, 2008 at 11:27 am

   Nice navigation it could be used for other sites, thanks. come by and post your tutorial on your forum when ever you want.

4. Clay Says:
   December 13th, 2008 at 1:35 pm

   I love this tutorial and I love the look of nintendos site. Thanks so much for making this tut.

5. Paul Says:
   June 14th, 2009 at 4:15 pm

   Muchas gracias por el tuto se ve realmente bien. Very nice

Add a Comment

Name (required)

Mail (required)

Website