Professional Modern Web Layout

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

   

This tutorial will show you how to create a modern web portfolio layout.

Create a new file (File>New) having 800×700 px and 72 dpi. Apply now the Paint Bucket Tool (G) to fill the background with color #131313

Create Professional Modern Web Layout in Photoshop CS

Using the Ellipse Tool (U), try to represent an element reserved for the site’s header to be that would have the white color.

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Outer Glow

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Applying the previous instrument, try to make the next layer belonging to the site’s header, which corrections can be made with Convert Point Tool.

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Inner Glow

Create Professional Modern Web Layout in Photoshop CS

Blending Options>Gradient Overlay

Create Professional Modern Web Layout in Photoshop CS
Gradients parameters:

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Make a copy of the new made layer and select the Free Transform option to narrow a little the copy and stretch it out a little the way it is shown below (change the layer’s parameters).

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Gradient Overlay

Create Professional Modern Web Layout in Photoshop CS

Gradient’s parameters:

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Create a new layer having 20×20 px and 72 dpi and then apply the Rectangle Tool (U) about three times and turn over the copy with Free Transform option to create a kind of pattern of white color.

Create Professional Modern Web Layout in Photoshop CS
Create Professional Modern Web Layout in Photoshop CS

Save the Pattern!

Create Professional Modern Web Layout in Photoshop CS

Create a new layer and use on it the Rectangle Tool (U) to represent a wide stripe looking like a part of the site’s background.

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Gradient Overlay

Create Professional Modern Web Layout in Photoshop CS

Gradient’s parameters:

Create Professional Modern Web Layout in Photoshop CS

Blending Options>Pattern Overlay

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS
Make a copy of the recently created layer and select again the Free Transform option to move the copy to the right side and lift it up a little the way it is demonstrated on the picture.

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Using the Rounded Rectangle Tool (U), represent the lowest layer reserved for the buttons’ panel on the site’s header’s menu, colored in #010101

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Outer Glow

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Make a copy of the new made layer and select the Free Transform option to make it smaller a little and apply for this copy different parameters:

Create Professional Modern Web Layout in Photoshop CS
The layer’s parameters:
Blending Options>Gradient Overlay

Create Professional Modern Web Layout in Photoshop CS

Gradient’s parameters:

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

  •  

  •    
  •  

 

Post Pages: 1 2 3 4

  • hossart

    30/09/2009

    very nice tutorial

  • ThunderEmperOr`

    15/10/2009

    nice tutorial. . da best, but can u make electric tutorials? plz send to my ym. . zorilla_aldrian1293@yahoo.com

    -send the tutorial plz. . XD
    GodblesS

  • Stephen

    29/10/2009

    great tutorial,

    too bad it’s 17 pages for more ad page views

  • anonymused

    14/12/2009

    very nice…keep post

  • rajkumar

    29/12/2009

    its nice, thanks

  • Panther

    12/02/2010

    It’s a great job you have done there RESPECT !!!!

  • The J Man

    30/04/2010

    This tut seems good … But it’s hard to follow.

    I start with it but ya lost me at:

    “Applying the previous instrument, try to make the next layer belonging to the site’s header, which corrections can be made with Convert Point Tool.”

    The wording or technique doesn’t seem to be quite right. I dunno what I’m doing wrong but I can’t get the same result as you are.

  • ziin

    31/05/2010

    Hola, perfecto e! quiera descargar el archivo psd pueden publicarlo

  • Agung

    22/07/2010

    cool

  • Devan

    04/08/2010

    Very Nice

  • PhaseGrafix

    05/09/2010

    Wares the rest of the tut ;’

  • coder

    03/10/2010

    looks too plain and boring needs more detail

  • Hidayath

    14/10/2010

    Its excellent. I Got 98% same result, but it took me 4 hours to develop.

  • honey

    21/11/2010

    tutorial is good but hard to follow…can u describe it in detail.

  • harry fox

    22/03/2011

    oh…yeah! very very nice, thanks

  • murat

    24/03/2011

    very nice tutorial

  • sawebdesigns

    13/05/2011

    great job just what im looking for

  • Varian

    31/05/2011

    Sir Can You Gave Me The PSD file ?
    thanks

  • Jay

    10/08/2011

    Sir i like this much, can i get your PSD file?? cause i can make exactly the way you do it… pleassssseee……

  • Martin

    22/08/2011

    Hey would you please be able to send me a psd file of this cheers!

  • Prateek

    17/09/2011

    Awesome man awesome……

  • Shan Mathur

    27/10/2011

    A very good tutorial.Thanks for the post.

  • sakul

    27/10/2011

    Hey, i like this very much! i was trying so hard to make it exactly the way you do it, but i cant :(
    can i get your PSD file pleaseeee :)

  • lukas

    27/10/2011

    where i can downloade the psd file?

  • Düğün

    29/10/2011

    tutorial is good but hard to follow…can u describe it in detail.

  • vN Aggresser

    06/07/2012

    Can i Get your PSD file please

  • ürün çekimi

    04/10/2012

    nice tutorials tanks

  • SorousH

    17/11/2012

    whay you not put the psd file on your site ?

  • sang

    09/05/2013

    Can i get your PSD file please

  • Fizbop

    25/02/2014

    This tut is hard to follow, three are not enough details. I’m guessing how to do most of this tut. Don’t get me wrong it’s a cool tut, just hard to follow.

  • Diana Hickman

    11/04/2014

    This tutorial is nearly impossible to follow. Some of the directions are confusing. It’s a shame because this is a very nice layout, but hard to learn from because the directions are very difficult to follow.

642-426,650-575 and 650-393 all certifications study material is available at affordable prices.You can also download 312-50 and iseb certification very easily.