Professional Modern Web Layout

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

Using the Ellipse Tool (U), try to draw a flare on the right side of the buttons’ panel situated on the site’s header.

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Fill 0% on the layers.
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
Press the Alt button and make a mouse’s click between the flare’s layer and the buttons’ panel for the flare to be applied in the limits of the buttons’ panel.

Create Professional Modern Web Layout in Photoshop CS

Make a copy of the new made layer and move the copy with Free Transform option on the left side of the buttons’ menu.

Create Professional Modern Web Layout in Photoshop CS

Select now the Rectangle Tool (U) to paint the lowest part of the site’s background in here shown color - #1A1A1A

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Outer Glow

Create Professional Modern Web Layout in Photoshop CS

Blending Options>Bevel and Emboss

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS
Choose the Rounded Rectangle Tool (U) to represent the lowest layer reserved for the site’s sections.

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Drop Shadow

Create Professional Modern Web Layout in Photoshop CS

Blending Options>Gradient Overlay

Create Professional Modern Web Layout in Photoshop CS

Gradient’s parameters:

Create Professional Modern Web Layout in Photoshop CS

Make a copy of the last made layer and apply again the Free Transform option to make the copy smaller the way it is demonstrated below and change the copy’s parameters too.

Create Professional Modern Web Layout in Photoshop CS
The layer’s parameters:
Fill 0% on the layers.
Blending Options>Stroke

Create Professional Modern Web Layout in Photoshop CS

Next we have to select two instruments and represent one more element belonging to the site’s header. Use firstly the Rectangle Tool (U) to create the primary layer and then click on the Alt button, selecting simultaneously the Ellipse Tool (U) for two times to cut out the unnecessary elements.

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
We have to represent now another element belonging to the site’s header that must be placed upper than the previously made one. The operation in case needs the same Rectangle Tool (U).