RSS Feed About Tutorials Blog

All        Blog        Business        Entertainment        Illustration        Portfolio        Social NetworkContact Us
create-a-wii-web-header-in-photoshop

Create a Wii Web Header in Photoshop

2-13-08Category 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?

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

Add a Comment