Professional Modern Web Layout

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

Using the Line Tool (U) on the right and left sides, try to make two vertical lines along the edges of the recently created stripe, colored in #8D8D8D

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS
Choose the Pencil Tool (B) to draw a double vertical line on the buttons’ panel, upper than the left flare.

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending mode-Soft Light

Create Professional Modern Web Layout in Photoshop CS

Make a copy of the new made layer and select the Free Transform option to place the flare upper than the flare situated on the right side.

Create Professional Modern Web Layout in Photoshop CS

Using the Ellipse Tool (U), draw now the primary layer, reserved for the site’s logotype.

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>Gradient Overlay

Create Professional Modern Web Layout in Photoshop CS

Gradient’s parameters:

Create Professional Modern Web Layout in Photoshop CS

Using the previous instrument, represent the next layer reserved for the logotype.

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

Selecting the Ellipse Tool (U), try to make one more layer reserved for the site’s logotype, colored in #0A0F12.

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Stroke

Create Professional Modern Web Layout in Photoshop CS

Select the last applied instrument to draw now a flare on the logotype’s made element.

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

Press the Alt button and make a mouse’s click between the layers for the flare to be applied in the limits of the primary layer.

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS
Select the Ellipse Tool (U) to draw the next logotype’s layer.

Create Professional Modern Web Layout in Photoshop CS

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

Create Professional Modern Web Layout in Photoshop CS

Blending Options>Inner Glow

Create Professional Modern Web Layout in Photoshop CS

Blending Options>Stroke

Create Professional Modern Web Layout in Photoshop CS

Next step includes creating a special section situated on the left side of the panel on the site’s sections. We’ll select the Rectangle Tool (U) for this operation.

Create Professional Modern Web Layout in Photoshop CS