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

Gradient’s 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 turn over the copy and place it the way it is shown next picture.

Create Professional Modern Web Layout in Photoshop CS

Using three lines made of small points, try to mark the sections’ panel, keeping the demands from the tables below.

Create Professional Modern Web Layout in Photoshop CS

(the lowest line)

Create Professional Modern Web Layout in Photoshop CS

(the top lines, on the left and right sides).
The layer’s parameters are the same for the lines situated on the top and on the bottom
Blending Options>Drop Shadow

Create Professional Modern Web Layout in Photoshop CS

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

Introduce after that the titles for the buttons situated on the site’s menu.

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Write also the title of the site’s logotype, keeping the demands from the next presented table.

Create Professional Modern Web Layout in Photoshop CS

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

Entitle the site’s sections, applying the demands from the next tables:

Create Professional Modern Web Layout in Photoshop CS

(about me)

Create Professional Modern Web Layout in Photoshop CS

(portfolio)

Create Professional Modern Web Layout in Photoshop CS

Insert the text in the section entitled “about me”, taking care of the demands from the next tables:

Create Professional Modern Web Layout in Photoshop CS

(the orange text)
Create Professional Modern Web Layout in Photoshop CS

(the rest of the text)

Create Professional Modern Web Layout in Photoshop CS

Insert the screenshots of our projects in the next section “portfolio”
The layer’s parameters are the same for all six screenshots.
Blending Options>Stroke

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

The last stage includes adding the site’s copyright:

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Finished!

View full size here.

Page: 1 2 3 4

Comments