Photo portfolio web page layout

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

Create Photo Portfolio Web Page Layout in Photoshop CS3

Create a new file (File>New) with 766×750 px and 72 dpi. Next use the Paint Bucket Tool (G) to paint the new layer with this shown color – #0F1715

Create Photo Portfolio Web Page Layout in Photoshop CS3

Find in Internet a kind of pattern, like this one:

Create Photo Portfolio Web Page Layout in Photoshop CS3

Edit>Define Pattern. Create a new layer and select this option Edit>Fill, to insert the pattern on our main picture.

Create Photo Portfolio Web Page Layout in Photoshop CS3

Make a mouse click on the same layer on Add a Mask option that may be found on the lowest part of the layers’ panel. Next choose the Brush Tool (B) and Opacity of 20% of black color to clean out the upper part of the picture.

Create Photo Portfolio Web Page Layout in Photoshop CS3

Create Photo Portfolio Web Page Layout in Photoshop CS3

Select for this layer these parameters: Blending mode-Soft Light

Create Photo Portfolio Web Page Layout in Photoshop CS3

The Rectangle Tool (U) is helpful in drawing a thin stripe on the lowest part of the picture. The element’s color is #0F1715

Create Photo Portfolio Web Page Layout in Photoshop CS3

Using the same instrument, it’s possible to represent the menu’s panel, reserved for the site’s header.

Create Photo Portfolio Web Page Layout in Photoshop CS3

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

Create Photo Portfolio Web Page Layout in Photoshop CS3

Gradient’s parameters:

Create Photo Portfolio Web Page Layout in Photoshop CS3

Create Photo Portfolio Web Page Layout in Photoshop CS3

Use the Rounded Rectangle Tool (U) with a radius of 10 px to draw on the menu’s panel a button. Next stage we should hold on Alt button while using the Rectangle Tool (U) and cut out the unnecessary elements.

Create Photo Portfolio Web Page Layout in Photoshop CS3

The layer’s parameters: Blending Options>Gradient Overlay

Create Photo Portfolio Web Page Layout in Photoshop CS3

Gradient’s parameters:

Create Photo Portfolio Web Page Layout in Photoshop CS3

Create Photo Portfolio Web Page Layout in Photoshop CS3

Select now the Line Tool (U) (weight 2 px) to represent a line above the menu’s panel on the site’s header. The beginning color is white. Select after that the Free Transform option to make the appropriate corrections on the color’s edges; letting down the frame (the edges should be very clearly defined). Press then Alt button and apply the same instrument to interrupt the line in three demonstrated places on the same distance (the segments are equal to the earlier drawn button).

Create Photo Portfolio Web Page Layout in Photoshop CS3

Create Photo Portfolio Web Page Layout in Photoshop CS3

The layer’s parameters: Blending Options>Gradient Overlay

Create Photo Portfolio Web Page Layout in Photoshop CS3

Gradient’s parameters:

Create Photo Portfolio Web Page Layout in Photoshop CS3

Create Photo Portfolio Web Page Layout in Photoshop CS3

Use the same tool, (Line Tool (U)), to insert on the picture four vertical lines.

Create Photo Portfolio Web Page Layout in Photoshop CS3

Use the same parameters for each layer containing the white line. Fill 30%

Create Photo Portfolio Web Page Layout in Photoshop CS3

Write now the titles for the buttons situated on the menu on the site’s header.

Create Photo Portfolio Web Page Layout in Photoshop CS3

Create Photo Portfolio Web Page Layout in Photoshop CS3

Create Photo Portfolio Web Page Layout in Photoshop CS3

home page

Create Photo Portfolio Web Page Layout in Photoshop CS3

The layer’s parameters: Blending Options>Drop Shadow

Create Photo Portfolio Web Page Layout in Photoshop CS3

Create Photo Portfolio Web Page Layout in Photoshop CS3

Insert also the inscription of the site’s name:

Create Photo Portfolio Web Page Layout in Photoshop CS3

PHOTO

Create Photo Portfolio Web Page Layout in Photoshop CS3

PORTFOLIO

Create Photo Portfolio Web Page Layout in Photoshop CS3

Next select the Rectangle Tool (U) to represent a layer reserved for placing the photos of our portfolio. It doesn’t matter what kind of color you choose for the layer.

Create Photo Portfolio Web Page Layout in Photoshop CS3

The layer’s parameters: Blending Options>Drop Shadow

Create Photo Portfolio Web Page Layout in Photoshop CS3

Blending Options>Stroke

Create Photo Portfolio Web Page Layout in Photoshop CS3

Create Photo Portfolio Web Page Layout in Photoshop CS3

Select a photo of the portfolio and place it above the reserved layer, on the layers’ panel.

Create Photo Portfolio Web Page Layout in Photoshop CS3

Hold on Alt button and make a mouse click between the photo’s layer and the reserved layer for the photos and the selected photo will be placed immediately in limits of the reserved layer for the photos.

Create Photo Portfolio Web Page Layout in Photoshop CS3

Create Photo Portfolio Web Page Layout in Photoshop CS3

Insert the necessary titles of the divisions.

Create Photo Portfolio Web Page Layout in Photoshop CS3

WELCOME, PHOTO

Create Photo Portfolio Web Page Layout in Photoshop CS3

TO MY PORTFOLIO, CATEGORIES

Create Photo Portfolio Web Page Layout in Photoshop CS3

Now we should represent by rectangle to the left side of the divisions. Each one should be situated on a different layer and the instrument used in this case is the Rectangle Tool (U).

Create Photo Portfolio Web Page Layout in Photoshop CS3

Use the next parameters for the rectangles’ layers: Blending Options>Gradient Overlay

Create Photo Portfolio Web Page Layout in Photoshop CS3

Gradient’s parameters:

Create Photo Portfolio Web Page Layout in Photoshop CS3

Create Photo Portfolio Web Page Layout in Photoshop CS3

Fill the division with the corresponding text:

Create Photo Portfolio Web Page Layout in Photoshop CS3

the bold text

Create Photo Portfolio Web Page Layout in Photoshop CS3

the basic text of the division

Create Photo Portfolio Web Page Layout in Photoshop CS3

Create Photo Portfolio Web Page Layout in Photoshop CS3

Fill the next division with the appropriate text:

Create Photo Portfolio Web Page Layout in Photoshop CS3

Create Photo Portfolio Web Page Layout in Photoshop CS3

Use the same method we did when representing the rectangles near the divisions’ names for representing this time on different layers white rectangles on the left side of each division’s category. The instrument is usual, Rectangle Tool (U).

Create Photo Portfolio Web Page Layout in Photoshop CS3

Write the copyright of our web site.

Create Photo Portfolio Web Page Layout in Photoshop CS3

Create Photo Portfolio Web Page Layout in Photoshop CS3

Create Photo Portfolio Web Page Layout in Photoshop CS3

Creating the web site is finished!

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: