Stylish WebStudio Web Layout

May 30th, 2007 by ART-D Posted in Adobe Photoshop, Web Layout

   

A complete tutorial on how to make a stylish webstudio web layout.

Final Image Preview

Create Stylish WebStudio Web Layout in Photoshop CS

Begin by creating a new file (File>New) with 800×600 px and 72 dpi. Using the Paint Bucket Tool (G), paint it out in here showed color: # E2C89F.

Create Stylish WebStudio Web Layout in Photoshop CS

Next we need to take the Rectangle Tool (U) to create the layer designed for the site’s sections, which color is the same with the background’s one. The shape may be corrected with Convert Point Tool. We’ll add one more top with Add Anchor Point Tool.

Create Stylish WebStudio Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Drop Shadow

Create Stylish WebStudio Web Layout in Photoshop CS

Blending Options>Stroke

Create Stylish WebStudio Web Layout in Photoshop CS

Create Stylish WebStudio Web Layout in Photoshop CS

Create a new layer. After that we’ll represent the shadow under the sections’ layer. Using firstly the Brush Tool (B), try to make a patch of black color and then applying the Smudge Tool (R) we’ll blur out the patch from the right side to the left one. The Eraser Tool (E) will be helpful in erasing the unnecessary elements.

Create Stylish WebStudio Web Layout in Photoshop CS

Create Stylish WebStudio Web Layout in Photoshop CSCreate Stylish WebStudio Web Layout in Photoshop CS

Create Stylish WebStudio Web Layout in Photoshop CS

Now we’ll represent the menu’s buttons situated on the site’s header, choosing the Rectangle Tool (U). Their shape may be corrected with Convert Point Tool. The layer should be placed lower than the sections’ layer, on the layers’ palette.

Create Stylish WebStudio Web Layout in Photoshop CS

The layer’s parameters:
Fill 0% on the layers.
Blending Options>Drop Shadow

Create Stylish WebStudio Web Layout in Photoshop CS

Blending Options>Gradient Overlay

Create Stylish WebStudio Web Layout in Photoshop CS

Gradient’s parameters:

Create Stylish WebStudio Web Layout in Photoshop CS

Blending Options>Stroke

Create Stylish WebStudio Web Layout in Photoshop CSCreate Stylish WebStudio Web Layout in Photoshop CS

Make four copies of the new made button and select the Free Transform option to turn them over if necessary. Choosing the Convert Point Tool, it’s possible to make the corrections on the copies’ shapes too. Change the parameters for each copy’s layer. The copies must be placed, like the first button, lower than the sections’ layer, on the layers’ palette.

Create Stylish WebStudio Web Layout in Photoshop CS

The parameters for the first copy:
Fill 0% on the layers.
Blending Options>Drop Shadow

Create Stylish WebStudio Web Layout in Photoshop CS

Blending Options>Gradient Overlay

Create Stylish WebStudio Web Layout in Photoshop CS

Gradient’s parameters:

Create Stylish WebStudio Web Layout in Photoshop CS

The parameters for the second copy:
Fill 0% on the layers.
Blending Options>Drop Shadow

Create Stylish WebStudio Web Layout in Photoshop CS

Blending Options>Gradient Overlay

Create Stylish WebStudio Web Layout in Photoshop CSGradient’s parameters:

Create Stylish WebStudio Web Layout in Photoshop CS

Blending Options>Stroke

Create Stylish WebStudio Web Layout in Photoshop CS

The parameters for the third copy:
Fill 0% on the layers.
Blending Options>Drop Shadow

Create Stylish WebStudio Web Layout in Photoshop CS

Blending Options>Gradient Overlay

Create Stylish WebStudio Web Layout in Photoshop CS

Gradient’s parameters:

Create Stylish WebStudio Web Layout in Photoshop CS

Blending Options>Stroke

Create Stylish WebStudio Web Layout in Photoshop CS

The parameters for the fourth copy:
Fill 0% on the layers.
Blending Options>Drop Shadow

Create Stylish WebStudio Web Layout in Photoshop CSBlending Options>Gradient Overlay

Create Stylish WebStudio Web Layout in Photoshop CS

Gradient’s parameters:

Create Stylish WebStudio Web Layout in Photoshop CS

Blending Options>Stroke

Create Stylish WebStudio Web Layout in Photoshop CS

Create Stylish WebStudio Web Layout in Photoshop CS

Select then the Custom Shape Tool (U) that would help us to represent several stars (the colors’ codes are indicated). We need to turn the figures over if that is necessary, choosing the Free Transform option:

Create Stylish WebStudio Web Layout in Photoshop CS

Create Stylish WebStudio Web Layout in Photoshop CS

The stars with the shadow have the layer’s parameters:

Create Stylish WebStudio Web Layout in Photoshop CSCreate Stylish WebStudio Web Layout in Photoshop CS

(the same parameters)
Blending Options>Drop Shadow

Create Stylish WebStudio Web Layout in Photoshop CS

  •  

  •    
  •  

 

Post Pages: 1 2

Tags: , , , , ,

  • keith

    15/10/2009

    can i do this at microsoft frontpage annd how??

  • eshanne

    06/11/2009

    Keith : Please read the tutorials before posting..

    THis is Photoshop tutorials.. If you don’t know what is photoshop then you should check out them at :

    http://www.adobe.com and search for the supports or anywhere that you can find adobe photoshop.

    And yes Keith you need to learn a lot.. :)

  • Sam

    15/11/2009

    This is just amazing! Thanks.

  • Daniël

    16/12/2009

    Amazing! Nice tutorial!
    Keep up the good work!

  • mirel

    18/12/2009

    thanks dude that’s realy great …waiting for you’r every new stuff
    good luck

  • Santiago

    03/03/2010

    Awesome tutorial, could someone point me in the direction for another tutorial to make it work, to uploaded an make the buttons work… thank you!

  • Melissa

    05/05/2010

    How did you create the rectangle for the site’s section?
    And when I use the rectangle tool and follow with the convert tool the blending options do not work

    The stroke is jaggered not smooth like urs

    Please help

  • khushbu

    29/05/2010

    Amazing!!!nice tutorial…

  • Jack

    16/07/2010

    Hey can you create a multi-page site on photoshop? So that say I click on the ‘contacts’ button, it takes me to that page, or do I need to do that in HTML?

  • Dom

    12/08/2010

    I had the same question which Jack has. Can someone advise?

  • GarfieldP

    23/08/2010

    Great tutorial! I will try this out

  • venkate

    25/04/2011

    Hi, Awesome and innovative….

  • sa. t

    24/08/2011

    hi
    i am a beginner web design student , its very nice tutorial , but iam wondering how to slice this design and use it in html and apply jquery on it , especially i dont know how i should slice the home,about us , services menu items , and how i can turn them to clickable anchors/buttons…please sombody advise how to do this the right way.
    best regards.

  • sa. t

    25/08/2011

    can you please complete this tutorial and show us how you slice it and turn it to working html page…
    thank you.
    sa. t

  • Sagar

    09/09/2011

    Nice Work And Very Good…
    Thanks…

  • jojo

    19/11/2011

    how to slice it to html ? do we have to use image map here ?
    can sombody give some tips please ?

  • amrew

    04/12/2011

    wooooowwww….

  • chammua

    08/02/2012

    how to i can “+1″ for this topic?
    i can’t see icon G+ :-s.
    tks for share!
    very cool! ^^

  • Uday Vaswani

    29/06/2012

    How to use this psd file in html. !!!

  • Tr

    17/03/2013

    It’s so nice! thanks so much!

Don't complicate your goal by using our 642-415,310-202 and EC0-350.Also use 640-553 and oracle certification to make your job simpler and easier.