Portfolio web layout

Learn how to create a web layout with services, portfolio, careers and others.

Select File>New option with 800×720 px and 72 dpi. Select the Rectangle Tool (U) to represent the background of the site to be next:

Create Portfolio Web Layout in Photoshop CS

Make the necessary adjustments on the layer’s parameters in the layers’ panel:
Blending Options>Gradient Overlay

Create Portfolio Web Layout in Photoshop CS

Gradient’s parameters:

Create Portfolio Web Layout in Photoshop CS

Using the Rounded Rectangle Tool (U), try to represent the primary layer reserved for the site’s panel:

Create Portfolio Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Gradient Overlay

Create Portfolio Web Layout in Photoshop CS

Gradient’s parameters:

Create Portfolio Web Layout in Photoshop CS

Blending Options>Stroke

Create Portfolio Web Layout in Photoshop CS

Choosing the same Rounded Rectangle Tool (U), we have to represent a button on the menu’s panel on the site’s header which needs to be turned over with Free Transform option. The button’s color must beC92130.

Create Portfolio Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Stroke

Create Portfolio Web Layout in Photoshop CS

Make four copies of the new made button’s layer and change each button’s color:

Create Portfolio Web Layout in Photoshop CS

Select the Ellipse Tool (U) to draw the necessary element for the menu’s buttons:

Create Portfolio Web Layout in Photoshop CS

Apply the next parameters on the layers’ panel:
Fill 0%
Blending Options>Gradient Overlay

Create Portfolio Web Layout in Photoshop CS

Gradient’s parameters:

Create Portfolio Web Layout in Photoshop CS

Blending Options>Stroke

Create Portfolio Web Layout in Photoshop CS

Using the same instrument, try to make a small circle on the lowest part of the site’s panel:

Create Portfolio Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Drop Shadow

Create Portfolio Web Layout in Photoshop CS

Blending Options>Inner Glow

Create Portfolio Web Layout in Photoshop CS

Blending Options>Stroke

Create Portfolio Web Layout in Photoshop CS

Selecting the previous instrument, it’s possible to draw several more circles on the lowest part of the site’s panel:

Create Portfolio Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Gradient Overlay

Create Portfolio Web Layout in Photoshop CS

Gradient’s parameters:

Create Portfolio Web Layout in Photoshop CS

Create Portfolio Web Layout in Photoshop CS

Make copies of the earlier represented circles and apply the Free Transform option to these copies, changing their sizes:

Create Portfolio Web Layout in Photoshop CS

We have to draw now three more circles reserved for marking the site’s section, applying the same method we did earlier with our previous circles:

Create Portfolio Web Layout in Photoshop CS

All three circles look the same, having the same layer’s parameters:
The color is FF627A.
Blending Options>Drop Shadow

Create Portfolio Web Layout in Photoshop CS

Blending Options>Stroke

Create Portfolio Web Layout in Photoshop CS

Try to insert one more circle, using the last instrument also:

Create Portfolio Web Layout in Photoshop CS

Set the layer’s adjustments:
Blending Options>Drop Shadow

Create Portfolio Web Layout in Photoshop CS

Blending Options>Stroke

Create Portfolio Web Layout in Photoshop CS

We have to write now the names for the site’s menu’s buttons, inclining the text with Free Transformoption. The text’s demands are inserted in the next table:

Create Portfolio Web Layout in Photoshop CS

Create Portfolio Web Layout in Photoshop CS

Add the site’s name too:

Create Portfolio Web Layout in Photoshop CS

(WEBSITE)

Create Portfolio Web Layout in Photoshop CS

(NAME)

Create Portfolio Web Layout in Photoshop CS

Set the layer’s parameters:
Blending Options>Stroke

Create Portfolio Web Layout in Photoshop CS

Insert now the site’s sections names:

Create Portfolio Web Layout in Photoshop CS

Create Portfolio Web Layout in Photoshop CS

The layers’ parameters:
Blending Options>Gradient Overlay

Create Portfolio Web Layout in Photoshop CS

Gradient’s parameters:

Create Portfolio Web Layout in Photoshop CS

Blending Options>Stroke

Create Portfolio Web Layout in Photoshop CS

Using the Pencil Tool (B) of white color, try to draw now a kind of indicator on the button:

Create Portfolio Web Layout in Photoshop CS

Create Portfolio Web Layout in Photoshop CS

Number on the site’s sections:

Create Portfolio Web Layout in Photoshop CS

Create Portfolio Web Layout in Photoshop CS

Fill the site’ section with the corresponding text:

Create Portfolio Web Layout in Photoshop CS

(the text of orange color)

Create Portfolio Web Layout in Photoshop CS

(the main text)

Create Portfolio Web Layout in Photoshop CS

(the bold text)

Create Portfolio Web Layout in Photoshop CS

Represent now a special window of white color, reserved for the screenshot, applying the Ellipse Tool (U)

Create Portfolio Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Drop Shadow

Create Portfolio Web Layout in Photoshop CS

Blending Options>Stroke

Create Portfolio Web Layout in Photoshop CS

Make two copies of the new made layer and place them out the way it is shown on the next picture:

Create Portfolio Web Layout in Photoshop CS

Find three screenshots that will be placed by turn above the windows (make a mouse’s click, pressing theAlt button simultaneously between the window’s layer and the screenshot’s one).

Create Portfolio Web Layout in Photoshop CS

Create Portfolio Web Layout in Photoshop CS

Do the same with the rest of them:

Create Portfolio Web Layout in Photoshop CS

Then choose the known Ellipse Tool (U) to create a layer reserved for the scrolling button, which color should be FD9B00.

Create Portfolio Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Drop Shadow

Create Portfolio Web Layout in Photoshop CS

Blending Options>Stroke

Create Portfolio Web Layout in Photoshop CS

Create a new layer. Represent on the already made scrolling button a white pointer directed to the left side, choosing the usual Pencil Tool (B) for these operations:

Create Portfolio Web Layout in Photoshop CS

Create Portfolio Web Layout in Photoshop CS

Merge down in a group all the layers composing the scrolling button (keep pressed the Ctrl button to mark out the necessary layers and press simultaneously the left mouse’s button to move the marked layers lower on Create a new group option). Make a copy of the new made group and select the Free Transformoption to turn the copy over and place it the way you may see below:

Create Portfolio Web Layout in Photoshop CS

The final result is this one!

Advertisements

About alamzyah
Name : Alamsyah Nick Name : Alamzyah Place of Birth : Jakarta, 04 June 1983 sex : Male Religion : Moslem Region : Jakarta, Indonesia Specialist : IT, Computer mail : alamzyah@gmail.com

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: