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

    05.10.07

    very nice tutorial

  • ThunderEmperOr`

    05.10.07

    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

    05.10.07

    great tutorial,

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