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.

Create Design Studio Website in Photoshop CS3

Set the next parameters for the layer by clicking on this layer on the layers’ palette.
Blending Options>Gradient Overlay

Create Design Studio Website in Photoshop CS3

Gradient’s parameters:

Create Design Studio Website in Photoshop CS3 

Create Design Studio Website in Photoshop CS3

Choose the previous tool to represent a thin stripe of white color.

Create Design Studio Website in Photoshop CS3

Select then the Pen Tool (P) to draw a ray like the next one:

Create Design Studio Website in Photoshop CS3

Use the same tool to draw several more rays:

Create Design Studio Website in Photoshop CS3

Set for the layers the same parameters shown below: Fill 0%
Blending Options>Gradient Overlay

Create Design Studio Website in Photoshop CS3

Gradient’s parameters:

Create Design Studio Website in Photoshop CS3 

Create Design Studio Website in Photoshop CS3

Now we should use the Rounded Rectangle Tool (U) (radius of 35 px) to represent the body, applying the white color also:

Create Design Studio Website in Photoshop CS3

  •  

  •    
  •  

 

Post Pages: 1 2 3 4 5 6

  • 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

  • Brooke

    19/04/2013

    Woo wee, this was good stuff. Who creates this for you? I’ve got Five blokes that handle my site content, but they sort of stink after reading through this. Do you do all your own content or do you contract out?

Get on time success by using our 640-863,642-642 and VCP-410.Our SK0-003 and SY0-301 are also very easy to understand and pass.