Website Design Studio
July 1st, 2008 by ART-D Posted in Adobe Photoshop, Web Layout
It’s time to represent the panel reserved for the menu of the site’s buttons. In this case we should apply the Rounded Rectangle Tool (U) (radius of 30 px). Press then Alt button while applying the Rectangle Tool (U) to trim a little the bottom part of the panel. 
The layer’s parameters: Blending Options>Inner Shadow 
Blending Options>Gradient Overlay 
Gradient’s parameters: 
Use the same method described above to insert also the footer: 
The layer’s parameters: Fill 0%
Blending Options>Inner Shadow 
Blending Options>Color Overlay 
Choose again the Rounded Rectangle Tool (U) (radius of 35 px) to draw the lateral panel, colored with #F6F6F6. Firstly we need to create the basis itself of the panel, then press Alt button white applying the same tool to cut out the windows reserved for the news: 
Let’s draw now a white stripe above the menu’s buttons, choosing the Rectangle Tool (U) for this operation. The stripe needs to be inclined, applying the Free Transform solution. 
faris vio
23/02/2010
good design guidelines, with perfect results
TonyFalcon
03/04/2010
superb ill mke it for my own site
chris
22/06/2010
Worthless guide, not enough information on each step…
DJs
05/09/2010
This guide needs much more information. It feels like big parts have been skipped.
moe
22/10/2010
is good tutorial..gives inspiration and something new.. i always visit this site to find any creation…could you mind giving other design….thanks
Aidan Langelaan
22/10/2010
Very good tutorial! I used this to create my own website, but then with some tweeks (twitter instead of second news article, colours etc.).
Manoj
21/02/2011
I am totally happy now after see this excellent tutorial. Now I can make my own.
dpuk44
12/06/2011
Hi I really like this and understand how to creat in Photoshop, however can someone explain how I would go about creating this as a website.
Would I slice the psd image up and using as background images in my CSS?
Thanx