Online Photo Portfolio

Online Photo Portfolio
Online Photo Portfolio
This tutorial will show you how to create a clean looking layout for your portfolio.

Create a new file (File>New) with 766×699 px and 72 dpi.

Online Photo Portfolio

Choose after that the Rectangle Tool (U) to represent the background of the site’s page to be next:

Online Photo Portfolio

Apply the next layer’s parameters by making a mouse’s click on the corresponding layer on the layers’ panel. Blending Options>Gradient Overlay

Online Photo Portfolio

Gradient’s parameters:

Online Photo Portfolio

 

Online Photo Portfolio

Create a new layer of 4×4 px and 72 dpi. Select then the Pencil Tool (B) to represent a pattern of white color.

Online Photo Portfolio

 

Online Photo Portfolio

Edit>Define Pattern
It’s time to represent on the upper part of the background a thin stripe, applying the same Rectangle Tool (U).

Online Photo Portfolio

 

Online Photo Portfolio

The layer’s parameters: Fill 0%
Blending Options>Pattern Overlay

Online Photo Portfolio

 

Online Photo Portfolio

 

Online Photo Portfolio

Using the same instrument above the made stripe, try to make another one, colored with #BBDD03

Online Photo Portfolio
Online Photo Portfolio

Make a copy of the earlier made stripe composed of white points and select the Free Transform option to place the copy on the bottom of the background.

Online Photo Portfolio

the bottom break off.

Online Photo Portfolio

Create another layer (Create new layer) of 4×4 px and 72 dpi and select again the Pencil Tool (B) to represent another pattern, colored with #729C06

Online Photo Portfolio

 

Online Photo Portfolio

Save it: Edit>Define Pattern
Choose the Rectangle Tool (U) and try to make another larger stripe on the lowest part of the background, but lower than the copied stripe with white points.

Online Photo Portfolio

 

Online Photo Portfolio

The layer’s parameters: Fill 0%
Blending Options>Pattern Overlay

Online Photo Portfolio

 

Online Photo Portfolio

 

Online Photo Portfolio

Using the Pen Tool (P), try to make an ornament on the background, colored in #AAD500, which shape may be corrected with the Convert Point Tool.

Online Photo Portfolio

Do the same way one more ornament’s element, colored with #AAD700

Online Photo Portfolio

… And one more that must have the color #AECD01

Online Photo Portfolio

Selecting the same instrument and the same color, it’s possible to picture several more ornaments.

Online Photo Portfolio

Make a copy of the last made layer and choose the Free Transform option to make the copy smaller and to place it the same way indicated below:

Online Photo Portfolio

Make another copy of the same layer and select again the Free Transform option to place the copy exactly the way shown below.

Online Photo Portfolio

Create one more new layer (Create new layer) and apply on it the Pencil Tool (B) and the color #E3E3E3 to represent another pattern:

Online Photo Portfolio

 

Online Photo Portfolio

Save it: Edit>Define Pattern
Now we’ll select the Rounded Rectangle Tool (U) to represent the primary layer reserved for the site’s section that must have the white color.

Online Photo Portfolio

 

Online Photo Portfolio

The layer’s parameters: Blending Options>Drop Shadow

Online Photo Portfolio

Blending Options>Pattern Overlay

Online Photo Portfolio

 

Online Photo Portfolio

Make two copies of the last made layer and apply the Free Transform option to place the copies the same way shown below:

Online Photo Portfolio

We need to insert in the recently made sections the corresponding pictures:

Online Photo Portfolio

Using the Rounded Rectangle Tool (U), we must represent the primary layer reserved for site’s section’s number, colored with #EBEBEB. The shape may be corrected again with the usual instrument applied in these cases: Convert Point Tool.

Online Photo Portfolio
Online Photo Portfolio

Make a copy of the last made layer and choose Free Transform option for making the copy smaller, applying for the copy the color shown next: #49BD14

Online Photo Portfolio

The layer’s parameters: Blending Options>Stroke

Online Photo Portfolio

 

Online Photo Portfolio

Using the Rectangle Tool (U), try to make a highlight on the number’s place. The color is #E3E3E3. We shall use also the Add Anchior Point Tool on the lowest part of the highlight. The shape may be corrected with the Convert Point Tool.

Online Photo Portfolio

Keep pressed the Alt button to make a mouse’s click between the highlight’s layer and the green layer reserved for the number for the highlight to be applied in the limits of the number’s green layer.
The layer’s parameters: Fill 50%

Online Photo Portfolio

 

Online Photo Portfolio

For the final result we need to Combine in a group all the layers composing the place reserved for the number (press on Ctrl button to mark out the necessary layers and keep pressed the left mouse’s button to take the marked layers on Create a new group option). Make two copies of the last made group and select again the Free Transform option to place the copies in the appropriate site’s sections. We need also to change the basic colors of the copies: the first copy - #ED9300; the second copy - #5EA9D1 (the color Blending Options>Stroke is the same with that one from the number’s place color).

Online Photo Portfolio

We need to number the site’s sections, but the number should look a little inclined, that is possible to do with Free Transform option.

Online Photo Portfolio

 

Online Photo Portfolio

The numbers’ layers’ parameters are the same: Blending Options>Drop Shadow

Online Photo Portfolio

 

Online Photo Portfolio

Insert the site’s title:

Online Photo Portfolio
Online Photo Portfolio

The layer’s parameters: Blending Options>Drop Shadow

Online Photo Portfolio

 

Online Photo Portfolio

Create a new layer (Create new layer) and try to represent several small white points, applying the standard brush of small size, that must be of one more color also - #D7FF00 (place the points’ layer lower than the layers reserved for the site’s sections, but upper than the site’s title).

Online Photo Portfolio

 

Insert the titles for the site’s sections, keeping the demands from the next tables:

Online Photo Portfolio

About us

Online Photo Portfolio

(the sections’ titles of black color).

Online Photo Portfolio

We need now to create the menu on the site’s top:

Online Photo Portfolio

 

Online Photo Portfolio

Crate one more new layer (Create new layer) and use on it the Pencil Tool (B) to represent the pictograms near the buttons of white color.

Online Photo Portfolio

 

Online Photo Portfolio

Applying the last tool, we must create a dividing vertical stripe

Online Photo Portfolio

Make a copy of this new made layer and apply the Free Transform option to place the copy exactly the same way indicated next picture:

Online Photo Portfolio

Both dividing stripes must have the same parameters:
The layer’s parameters: Blending Options>Outer Glow

Online Photo Portfolio

 

Online Photo Portfolio

Take the Rounded Rectangle Tool (U) to represent the primary layer of the button that must be placed lower than the section itself. Choose this time the white color.

Online Photo Portfolio

 

Online Photo Portfolio

The layer’s parameters: Blending Options>Drop Shadow

Online Photo Portfolio

 

Online Photo Portfolio

Make a copy of the last made layer and select the Free Transform option to minimize the copy a little, applying for the layer also the color #6DD800

Online Photo Portfolio

The layer’s parameters: Blending Options>Stroke

Online Photo Portfolio

Using the Rectangle Tool (U), try to make a highlight on the number’s plate. The color is #A9DB7C. Insert a top on the upper part of the highlight with the Add Anchior Point Tool. The shape must be corrected with Convert Point Tool

Online Photo Portfolio

Press Alt button and make a mouse’s click between the highlight’s layer and the button’s green layer for the highlight to be applied in the limits of the button’s green layer:

Online Photo Portfolio

 

Online Photo Portfolio

 

Combine in a group now all the layers composing the section’s button (Press Ctrl button and mark out the necessary layers and press the left mouse’s button to take the marked layers on Create a new group option). Make two copies of the last made group and select the Free Transform option to place the copies under the corresponding site’s sections. Change the basic colors of the copies: the first copy - #F0920D; the second copy- #5191AD. The highlights’ colors should be changed too: the orange button - #F6C073; the blue button- #89B4C7 (Blending Options>Stroke is the same with the basic button’s color).

Online Photo Portfolio

Insert now the titles for the sections’ buttons:

Online Photo Portfolio
Online Photo Portfolio

Apply the same parameters for all the buttons’ titles:
The layer’s parameters: Blending Options>Drop Shadow

Online Photo Portfolio

 

Online Photo Portfolio

It’s time to represent now the primary layers reserved for the pictures, using the Rectangle Tool (U) and the white color.

Online Photo Portfolio

The layers’ parameters are the same: Blending Options>Drop Shadow

Online Photo Portfolio

 

Online Photo Portfolio

Insert the pictures in the recently made sections:

Online Photo Portfolio

Now we’ll represent a double dividing stripe, choosing the Rectangle Tool (U). The left stripe should have a green texture, but the right one – a white one:

Online Photo Portfolio

The layers’ parameters for the left stripe: Fill 0%
Blending Options>Pattern Overlay

Online Photo Portfolio

The parameters for the right stripe: Opacity 70%
Fill 0%
Blending Options>Pattern Overlay

Online Photo Portfolio

 

Online Photo Portfolio

 

Online Photo Portfolio

Make a copy of this new made layer and choose again the Free Transform selection to place the copy the way demonstrated below:

Online Photo Portfolio

Insert the necessary text in the site’s sections:

Online Photo Portfolio

(the bold text)

Online Photo Portfolio

(the usual text)

Online Photo Portfolio

(the underlined text)

Online Photo Portfolio

Introduce also the navigating buttons and the links on our picture:

Online Photo Portfolio

(<…123…>)

Online Photo Portfolio

( Read more link)

Online Photo Portfolio

Try to picture out a circle situated on the right lowest corner, colored with #FFD40F, having the instrument Ellipse Tool (U)

Online Photo Portfolio

The layer’s parameters: Blending Options>Drop Shadow

Online Photo Portfolio

Blending Options>Stroke

Online Photo Portfolio

 

Online Photo Portfolio

 

Online Photo Portfolio

Representing the site’s page came to end!

View full size here.