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
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.
Now apply the following dropshadow to it:
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.
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.
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.
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.
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.
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
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
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:
Do the same think once again, under the Sub Header but fill the new selection with #EDE3CF
Alternate this procedure various times to come out with something like this
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
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
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.