Sound System Studio Web Layout

June 22nd, 2007 by ART-D Posted in Adobe Photoshop, Web Layout

   

In this tutorial you will learn how to create a nice looking layout.

Firstly we need to open a new file (File>New) of 800×800. The first layer will represent the site’s background. After that we need to select the Rectangle Tool (U) and use it on the entire page. Set the here shown parameters of Blending Options> Gradient Overlay>Gradient Editor

Create Sound System Studio Web Layout in Photoshop CS3

We must get the same result as it is demonstrated next picture:

Create Sound System Studio Web Layout in Photoshop CS3

Take now the Rounded Rectangle Tool (U) and represent an element like that one from below, placed in the middle of the picture.

Create Sound System Studio Web Layout in Photoshop CS3

Fill 0% on the right side on the layers’ palette, for our picture to get a transparent gradient.

Create Sound System Studio Web Layout in Photoshop CS3

Set next parameters in the Blending Options> Gradient Overlay

Create Sound System Studio Web Layout in Photoshop CS3

Select Blending Options> Gradient Overlay>Gradient Editor and choose here Presets transparent gradient’s type. Set the same parameters, like those from next table.

Create Sound System Studio Web Layout in Photoshop CS3

We should get that:

Create Sound System Studio Web Layout in Photoshop CS3

Continue by working with the next element. Select for the beginning the Custom Shape Tool (U) where we have to choose the Thin Frame.

Create Sound System Studio Web Layout in Photoshop CS3

  •  

  •    
  •  

 

Post Pages: 1 2 3 4 5 6 7 8 9 10 11

  • Yadav

    16/09/2009

    thank

    Nice tutorial

  • amit

    24/09/2009

    thanks, very nice tutorial. :)

  • chrys

    14/01/2010

    I have been educated.

  • Mithun

    11/02/2010

    this is the first tutorial i have found for adobe and it looks great with step by step instructions, will browse more to see what more i can learn.

  • Egyptian web designer

    14/02/2010

    normally I dont post on blogs,
    but yours forced me to do..
    this is one of the best toturials I’ve ever seeeeeeeeeeeeeeeeeeeen

  • eee

    10/05/2010

    can i download this site with psd ?

  • Taryn

    24/08/2010

    Thanks for adding the colour numbers

  • Naresh

    23/01/2011

    Thank U

  • dcv

    12/04/2011

    how do i select the colours of blue? can someone help?

  • Martin

    06/06/2011

    this is good

  • safdar

    15/06/2011

    Now i am learn photoshop
    THANKS

  • sylvain

    27/10/2011

    I just don’t understand, once you’ve done that, is it just a background or really a web site? You just have to upload it on your ftp server?

  • Jeff

    09/11/2011

    Really man no you have to cut it up and turn it into a site from there

  • gobylcy

    29/05/2012

    thanks,It’s a nice toturials for me,can i download this site with psd ?

Make your fundamental concepts strong by using our 642-974,HP0-D07 and 70-648.You can also take guidance from 640-721 and scmad.