RSS

Professional Modern Web Layout

16 May

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

 

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

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

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

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

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 theEllipse Tool (U) for two times to cut out the unnecessary elements.

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
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).

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

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

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

Advertisements
 
Leave a comment

Posted by on May 16, 2012 in Uncategorized

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: