Create a Wii Web Header in Photoshop

2-13-08 Filed under Designing & Photoshop Tutorials

Step 9:
Now set the font color to #717171 color shade. In a new text layer type the rest of your navigation titles. Then under Layer Style(Layer > Layer Style) add a Drop Shadow blending option.

Step 10:
Back to your Rounded Rectangle Tool, set the radius setting to 20 px. In a new layer draw a rounded rectangle with #B4EFFF color shade and 194×24 px dimensions.

Step 11:
Now cut the right corner of your rounded rectangle with #B4EFFF color shade. Then under Layer Style(Layer > Layer Style) add a Drop Shadow and Inner Shadow blending options.

Step 12:
Create a rectangle with #F2F2F2 color shade and size of 23×25 px dimensions.

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

Step 14:
Select your Horizontal Type Tool and above your screen under the options palette set the font family to Webdings, 15 pt, strong and #939393 color shade. In a new text layer type ‘4′ to get the arrow icon.

Conclusion:
Thats it your done. Click here to see the full view.

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?

---

9 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

6. Christina Says:
   July 2nd, 2009 at 2:52 am

   I am not sure if I did something wrong but I followed the instructions and the result I got was very different. For example, in step 1 the given hex code is pretty dark. It is not the light gray that is suggested.

   This seemed like a good tutorial but it did not turn out so great.

7. Paul Says:
   July 12th, 2009 at 3:02 pm

   Christina, try f2f2f2 as the hex code worked for me

8. treat_d_heat Says:
   July 14th, 2009 at 5:29 pm

   nice work……

9. Oyunlar Turk Says:
   August 29th, 2009 at 6:37 am

   Great job, thanks..

Add a Comment

Name (required)

Mail (required)

Website