Website Design Studio
July 1st, 2008 by ART-D Posted in Adobe Photoshop, Web Layout
Learn how to create a professional website design studio. A step by step guide to creating a professional web layout.
Begin your work by creating a new file (File>New), having 800×600 px and 72 dpi.
Next we shall select the Rectangle Tool (U) to create the background of the web site page to be.
Set the next parameters for the layer by clicking on this layer on the layers’ palette.
Blending Options>Gradient Overlay
Gradient’s parameters:
Choose the previous tool to represent a thin stripe of white color.
Select then the Pen Tool (P) to draw a ray like the next one:
Use the same tool to draw several more rays:
Set for the layers the same parameters shown below: Fill 0%
Blending Options>Gradient Overlay
Gradient’s parameters:
Now we should use the Rounded Rectangle Tool (U) (radius of 35 px) to represent the body, applying the white color also:




















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
jason
14/02/2012
The result is very good but i think this tutorial is best for advance user only. A lot of steps are missing or unexplained to the beginner. Specially the gradient tool is not as easy to control the appearance of actual colors.
abd
24/02/2012
Please why you do not put link to download psd file ?
I’m beginner in photoshop