Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Professional Modern 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
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
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

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

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

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

Create Professional Modern Web Layout in Photoshop CS

Page: 1 2 3 4

Comments