Whiteshading Website Layout V2

Whiteshading Website Layout V2

This tutorial has been viewed: 4911 times


Download the WordPress theme!


In this tutorial you will learn how to create a smooth style website layout with a technique I have dubbed Whiteshading, this is Version 2 of the popular tutorial

  • Fundamentals of Web Design
  • Color choice ideas
  • ‘Whiteshading style’

Difficulty Level: Intermediate

Final Result:


Step 1:

Your first step is to create a new Photoshop document 800×600 pixels in size, fill the background with #F0EEE8, now make a new layer and make a marquee selection in the middle of the document with about an inch of room on every side, fill that selection with white #FFFFFF.

Step 2:

Now apply the following dropshadow to it:

Step 3:

Now we need to start working on the buttons at the top of the screen, create a new layer and position that layer under the layer with the big white square in it, create a selection pictured like below fill it with white and apply the same dropshadow to the button that you applied to the main area.

Step 4:

Duplicate the Layer by pressing


It might help to put each button into a ‘Set’ so that you can group all of the text layers and color layers for each button together, then you can move them all together

ctrl+j or dragging the button layer onto the new layer icon , Duplicate it for as many buttons as you’d like an d use the move tool to move it around.

Step 5:

Now create a new layer, once


Whew! that’s alot of layer styles that are the same, to copy and paste layer styles Simply right click on a layer with the layer style you want to copy, select ‘Copy Layer Style’, then to paste a layer style right click on the Layer that you want to paste it on and select ‘Paste Layer Style’

again underneath the main layer. Create a selection like pictured, and fill it with #AAA196, then apply the same Dropshadow setting to it that you’ve applied to everything else.

Step 6:

Create a new layer above the main layer this time, make a selection like below fill it with white and (are you ready) apply the same layer style once again.

You have now got the base of the website done, proceed to the next page to continue onto adding in the colors

Use the Menu above to navigate.

Step 7:

Let’s start with the buttons, set the foreground color to #AAA196 and make a long thin Rectangular selection in the top of your leftmost button fill it with #AAA196, also Apply an Inner Shadow too it with the following settings.

Step 8:

Now do the same thing to the other two buttons with the same layer style, except for with the new color layers selected press ctrl+alt+u and set the Saturation bar all the way to the left, this will give the colors a grayscale look, subduing the colors

Step 9:

Now for the Side Navigation,


When I design sites I try to stick to only 3-4 colors at most, to make the website look less busy, notice that throughout the design I use the same colors for areas in completely different areas creating Visual similarites

For the Heading, create a selection like below, and fill it with #AAA196

Step 10:

Next create a new layer, and create a selection exactly 1 pixel under the header for the side navigation (like below) and fill it with #7E7E7E:

Step 11:

Do the same think once again, under the Sub Header but fill the new selection with #EDE3CF

Step 12:

Alternate this procedure various times to come out with something like this

Step 13:

This step is optional but it can add some flavor to the design, grap a Stock Photo (I used an image from the upcoming Halo 3) and crop and position it similar to what I did

Step 14:

Now we’re going to add in a grey header bar underneath the image, position it exactly one pixel under and make a selection like below, fill that selection with #E2DFDE

You should have the following so far

Step 15:

Add in some text and your all set


I hope you enjoyed the Tutorial, if you have any questions feel free to leave a comment below.

Tags: , , ,

Added By:
  1. Salai Kidmann Said: Comment by Salai Kidmann on February 23, 2009 at 4:19 am | Permalink

    Thanks for the awesome tutorial, I think this will help out my upcoming site alot, it’ll integrate nice with WordPress.


  2. Kris Said: Comment by Kris on March 30, 2009 at 3:00 pm | Permalink

    Thanks alot for this wonderful tutorial. I will try out your tutorial for my new website layout.


  3. Watch Year One Online Said: Comment by Watch Year One Online on June 20, 2009 at 7:48 pm | Permalink

    Not that I’m totally impressed, but this is more than I expected for when I found a link on SU telling that the info here is awesome. Thanks.
    p.s. Year One is already on the Internet and you can watch it for free.


  4. peter Said: Comment by peter on July 27, 2009 at 2:27 pm | Permalink

    This post is just the tip of the iceberg.I think you made some good points in Features but there might be more good points.


  5. Romanoff Said: Comment by Romanoff on July 28, 2009 at 9:17 am | Permalink

    You made some good points there,I did a search on the topic and found most people will agree with your blog.


  6. Gimp Tutorials Said: Comment by Gimp Tutorials on September 19, 2009 at 8:07 pm | Permalink

    Thanks for this valuable post. I love gimp.


  7. Power 4 Home Said: Comment by Power 4 Home on December 2, 2009 at 11:18 am | Permalink

    I like your style, the fact that your site is a little bit different makes it so interesting, I get fed up of seeing same-old-same-old all of the time. I’ve just stumbled this page for you :-D


    Awesome, thanks alot!



Leave a Comment