Whiteshading Website Layout
Jan 17, 2009 Photoshop, Web Layouts
This tutorial has been viewed: 109 times
Welcome to the tutorial Website Layout White Shadow style tutorial! We will learn how to create a website design like below:
First off create a new image using the following settings:
tip
remember that about 30% of website users still have their resolution at 800×600 pixels, it’s always good to design your sites under 800 pixels wide.
Now pull out the paintbucket tool 
and fill the background with #C09477
Create a new layer 
and make a marquee selection like below, fill that selection with white #FFFFFF
Now we are going to want to make a brown “shadow”, first ctrl+click on the layer with the white on it to select everything in that layer, then create a new layer and move that new layer underneath the white layer, go to Select > Modify > Expand and select 10 pixels
Now you have a bigger selection outside of the white part fill that with #B08469, Be sure that this layer is underneath the white layer, you should end up with this
Now before you do the next step you need to create a new image 3×3 pixels and transparent background, pull out the pencil tool 
and draw out this:
Go to Edit > Define Pattern, it doesn’t matter what it is named. Now back to the other document (the design) press ctrl on the layer with the brown shading to select it, then go to Select > Modify > Expand and set it to 5, press ok, now create a new layer and put it underneath the brown shading layer, press shift+backspace and in the dialouge that comes up choose your pattern:
Press ok and you should come out with this on both sides:
Now we are going to make the header of the site, make a new layer use the marquee tool 
to make a selection like below, fill it with white:
Bring up that layers style 
and apply the following dropshadow to it.
proceed to page 2 to learn how to design the rest of the site.
No tags for this post.
