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.

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

Gradient’s parameters:

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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.

Create Online Photo Portfolio in Photoshop CS3

the bottom break off.

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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.

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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.

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

… And one more that must have the color #AECD01

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

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:

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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.

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

The layer’s parameters: Blending Options>Drop Shadow

Create Online Photo Portfolio in Photoshop CS3

Blending Options>Pattern Overlay

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

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.

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

The layer’s parameters: Blending Options>Stroke

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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.

Create Online Photo Portfolio in Photoshop CS3

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%

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

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.

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

Insert the site’s title:

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

The layer’s parameters: Blending Options>Drop Shadow

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

About us

Create Online Photo Portfolio in Photoshop CS3

(the sections’ titles of black color).

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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.

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

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:

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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.

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

The layer’s parameters: Blending Options>Drop Shadow

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

The layer’s parameters: Blending Options>Stroke

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

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:

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

Insert now the titles for the sections’ buttons:

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

Insert the pictures in the recently made sections:

Create Online Photo Portfolio in Photoshop CS3

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:

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

Insert the necessary text in the site’s sections:

Create Online Photo Portfolio in Photoshop CS3

(the bold text)

Create Online Photo Portfolio in Photoshop CS3

(the usual text)

Create Online Photo Portfolio in Photoshop CS3

(the underlined text)

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

(<…123…>)

Create Online Photo Portfolio in Photoshop CS3

( Read more link)

Create Online Photo Portfolio in Photoshop CS3

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

Create Online Photo Portfolio in Photoshop CS3

The layer’s parameters: Blending Options>Drop Shadow

Create Online Photo Portfolio in Photoshop CS3

Blending Options>Stroke

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

Create Online Photo Portfolio in Photoshop CS3

Representing the site’s page came to end!

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: