Design a cool photography portfolio

Create a new file (File>New) that would have 800×800 px and 72 dpi. Selecting the Paint Bucket Tool (G) may help us to paint the new file with the next color #111111

Create Photo Portfolio Web Layout in Photoshop CS3

Next we have to use the Rounded Rectangle Tool (U) (radius 7 px) to represent the primary layer reserved for the menu’s button, situated on the site’s header.

Create Photo Portfolio Web Layout in Photoshop CS3

The layer’s parameters are selected by making a mouse click on the necessary layer on the layers’ panel.
Blending Options>Gradient Overlay

Create Photo Portfolio Web Layout in Photoshop CS3

Gradient’s parameters:

Create Photo Portfolio Web Layout in Photoshop CS3

Blending Options>Stroke

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Using the same instrument, it’s possible to represent a highlight on the menu’s button. Firstly we need to represent the zone of the highlight to be and then, holding on Alt button, erase the unnecessary elements.

Create Photo Portfolio Web Layout in Photoshop CS3

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

Create Photo Portfolio Web Layout in Photoshop CS3

Gradient’s parameters:

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Using the same instrument and the same radius, try to represent next the zone reserved for the buttons’ indicator of white color. Press Alt button and select the Rectangle Tool (U) to erase the unnecessary elements.

Create Photo Portfolio Web Layout in Photoshop CS3

Advertisement:  Stainless steel rings are becoming more and more popular among teens and adult alike. You can find a wide range of designs and style on our site and top quality LusterForever bracelets at an affordable price.

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Combine in a group all the layers composing the menu’s button of the site to be created (press Ctrl button to mark out the appropriate layers and hold on the left mouse’s button while moving the marked layers onCreate a new group selection). Make a copy of the last made group and choose as usually the Free Transform option to place the copy exactly the same way demonstrated below. On the copied button we have to change the layers’ parameters:

1) the parameters of the primary layer: Blending Options>Gradient Overlay

Create Photo Portfolio Web Layout in Photoshop CS3

Gradient’s parameters:

Create Photo Portfolio Web Layout in Photoshop CS3

Blending Options>Stroke

Create Photo Portfolio Web Layout in Photoshop CS3

2) The parameters of the highlight Fill 0%
Blending Options>Gradient Overlay

Create Photo Portfolio Web Layout in Photoshop CS3

Gradient’s parameters:

Create Photo Portfolio Web Layout in Photoshop CS3

3) The parameters of the zone reserved for the button’s indicator: Fill 10%

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Make three copies of the grey button and select the Free Transform option to place the copies as it is demonstrated next picture:

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Using the earlier applied instrument, Rounded Rectangle Tool (U) (radius 7 px), represent on the next stage the panel reserved for the logotype and the menu of the site’s searching system:

Create Photo Portfolio Web Layout in Photoshop CS3

The layer’s parameters: Blending Options>Gradient Overlay

Create Photo Portfolio Web Layout in Photoshop CS3

January 21st, 2008 by ART-D Posted in Adobe PhotoshopWeb Layout

 

Gradient’s parameters:

Create Photo Portfolio Web Layout in Photoshop CS3

Blending Options>Stroke

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Next we have to select the Pencil Tool (B) (1 px) to picture the symbols on the menu’s buttons situated on the site’s header. The color should be white in this case.

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Insert the titles for the menu’s buttons placed on the site’s header:

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

The layer’s parameter (Home Page) Blending Options>Stroke

Create Photo Portfolio Web Layout in Photoshop CS3

The parameters of next layers (About me, Services, Gallery, Contact me): Blending Options>Stroke

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Now it’s time to select the Rounded Rectangle Tool (U) (radius 7 px) to represent the primary layer of the logotype. Keep pressed Alt button while using the Rectangle Tool (U) to move off the unnecessary elements as it is demonstrated next picture:

Create Photo Portfolio Web Layout in Photoshop CS3

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

Create Photo Portfolio Web Layout in Photoshop CS3

Gradient’s parameters:

Create Photo Portfolio Web Layout in Photoshop CS3

Blending Options>Stroke

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Try to make an inscription now, containing the site’s title:

Create Photo Portfolio Web Layout in Photoshop CS3

(PHOTO)

Create Photo Portfolio Web Layout in Photoshop CS3

(PORTFOLIO)

Create Photo Portfolio Web Layout in Photoshop CS3

Next we’ll represent a highlight on the logotype by creating a new layer (Create new layer). Firstly we have to select the Rectangular Marquee Tool (M) to mark out the area shown below. After that we’ll select the Brush Tool (B)Opacity of 50% to paint the marked area with white color.

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

The layer’s parameters: Fill 30%

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Using the Rounded Rectangle Tool (U) (radius 7 px), represent now the primary layer reserved for the search menu, situated on the site’s header. Then press Alt button while using the Rectangle Tool (U) to move off the unnecessary fragment on the right side.

Create Photo Portfolio Web Layout in Photoshop CS3

The layer’s parameters: Blending Options>Gradient Overlay

Create Photo Portfolio Web Layout in Photoshop CS3

January 21st, 2008 by ART-D Posted in Adobe PhotoshopWeb Layout

 

Gradient’s parameters:

Create Photo Portfolio Web Layout in Photoshop CS3

Blending Options>Stroke

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Next we’ll represent the buttons of the searching menu:

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Using the Pencil Tool (B) (1 px) and the color #FF9E00, try to make now the pointers situated near the buttons as it is demonstrated below:

Create Photo Portfolio Web Layout in Photoshop CS3

The Rectangle Tool (U) will be helpful in representing the window reserved for introducing the searching system. The color is #2D2D2D

Create Photo Portfolio Web Layout in Photoshop CS3

The layer’s parameters: Blending Options>Stroke

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Insert the Search word in the searching system’s window:

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Represent on the following stage the button reserved for starting the searching system, using theRounded Rectangle Tool (U) (radius 3 px). The color is #CC6600

Create Photo Portfolio Web Layout in Photoshop CS3

The layer’s parameters: Blending Options>Stroke

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Insert also the button’s title:

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Next we have to create the primary layer reserved for the photos of our portfolio. Use this time theRounded Rectangle Tool (U) (radius 7 px) and the color #111111

Create Photo Portfolio Web Layout in Photoshop CS3

The layer’s parameters: Blending Options>Inner Glow

Create Photo Portfolio Web Layout in Photoshop CS3

Blending Options>Stroke

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Using the same instrument with the same radius and the same color, try to make another layer of the portfolio:

Create Photo Portfolio Web Layout in Photoshop CS3

The layer’s parameters: Blending Options>Inner Glow

Create Photo Portfolio Web Layout in Photoshop CS3

Blending Options>Stroke

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Make four copies of the last made layer and select the Free Transform option to place the copies as it is demonstrated next picture:

Create Photo Portfolio Web Layout in Photoshop CS3

Select now the necessary photos for the portfolio. Cut them out, according to the sizes of the recently made layers. Place the corresponding photos above the layers reserved for the photo (on the layers’ panel). Press Alt button and make a mouse’s click between the photos’ layers and the photo’s layer. Do this operation for each photo and its layer.

Create Photo Portfolio Web Layout in Photoshop CS3

Using the Rectangle Tool (U), try to represent a special area for the text that would have black color.

Create Photo Portfolio Web Layout in Photoshop CS3

The layer’s parameters: Fill 30%

Create Photo Portfolio Web Layout in Photoshop CS3

Insert the text on the represented area.

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

The layer’s parameters: Blending Options>Stroke

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Using the Rounded Rectangle Tool (U) (radius 7 px), it’s possible to represent a special section reserved for the portfolio’s author. Press Alt button when using the same instrument to move off the unnecessary elements. The color is #333333

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Next stage must be done with the Rounded Rectangle Tool (U) (radius 7 px) when representing the layer reserved for the photo of the portfolio’s author. The color is #939393

Create Photo Portfolio Web Layout in Photoshop CS3

The layer’s parameters: Blending Options>Inner Glow

Create Photo Portfolio Web Layout in Photoshop CS3

Blending Options>Stroke

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Place the photo above the photo’s layer on the layers’ panel. Hold on Alt button and make a mouse click between the photo’s layer and the layer containing the photo of the portfolio’s author.

Create Photo Portfolio Web Layout in Photoshop CS3

Insert the text in the author’s section:

Create Photo Portfolio Web Layout in Photoshop CS3

(WELCOME)

Create Photo Portfolio Web Layout in Photoshop CS3

(TO MY WEB SITE)

Create Photo Portfolio Web Layout in Photoshop CS3

(Bold text)

Create Photo Portfolio Web Layout in Photoshop CS3

(simple text)

Create Photo Portfolio Web Layout in Photoshop CS3

Insert also the additional links in the author’s section:

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

Create a new layer and choose this time the Pencil Tool (B) (1px) to represent the pointers near the links. The color is white.

Create Photo Portfolio Web Layout in Photoshop CS3

Find in Internet a picture representing a photo camera, cut it out and introduce it on our picture:

Create Photo Portfolio Web Layout in Photoshop CS3

Make a copy of the camera’s layer and choose the Free Transform option to turn over the copy and to place it the way shown below:

Create Photo Portfolio Web Layout in Photoshop CS3

Make a mouse click on Add a Mask option on the same layer on the layers’ panel and choose the Gradient Tool (G) of black color.

Create Photo Portfolio Web Layout in Photoshop CS3

Try to represent now the site’s menu situated on the bottom part:

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

It’s time to use the Pencil Tool (B) (1 px) and white color to represent the vertical dividing lines:

Create Photo Portfolio Web Layout in Photoshop CS3

Create Photo Portfolio Web Layout in Photoshop CS3

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: