Web Designing Lesson for a Portfolio Website and its Quick Design..

In this Photoshop tutorial I am going to show you how to create a portfolio layout with a wooden background.
Before we begin, you will need a wood texture.


I have also used the Gridmaker plugin. If you have Photoshop CS4, download the plugin, install it, and then let’s get started!

Step 1 – Setting up the document

Use the Gridmaker plugin with the following settings to create a new document. You can hide/show your guides by going to View > Show > Guides (Ctrl+;).

Step 2

Increase the size of your document by going to Image > Canvas Size.

Step 3 – Creating the background

Open your wood texture image and move it into your document using the Move Tool (V).

Step 4

Now we are going to use two Brightness/Contrast adjustment layers to make the texture darker. Go to Layer > New Adjustment Layer > Brightness/Contrast and use the settings from the following image. Set the blend mode of this layer to Multiply, then duplicate it (Ctrl+J) and set the blend mode of this new layer to Normal.

Step 5

Select the Gradient Tool (G), hold down the Shift key and drag three black to transparent gradients in three separated layers, like I did. Set the opacity of these three layers to 90%.

Step 6 – Creating the navigation bar

Create a new group and name it "navigation bar." Open the Info palette (F8), select the Rectangle Tool (U) and create a rectangle with the size 940px by 60px using the color #aa4113. You can see the size of your rectangle in the Info palette while you are creating it. Name this layer "navigation bar."
Note: You can create more guides by dragging them from the ruler (Ctrl+R).

Step 7

Double-click on the "navigation bar" layer to open the Layer Style window and use the settings from the following image.

Step 8

Select the Type Tool (T) and add the text for your menu items using the color #dc8158. Add a layer style to each of these text layers using the settings from the following image.

Step 9

Create a new group inside the "navigation bar" group and name it "separators." Then select the Line Tool (U), set the weight to 1px and create a vertical line between two of your menu items using the color #9a3001. Double-click on this layer to open the Layer Style window and use the settings from the following image. Then duplicate this layer (Ctrl+J) as many times as you need and move each line between your menu items using the Move Tool (V).

Step 10

Select the Type Tool (T) and write the name of your layout above the navigation bar using the color #aa431b. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Step 11

Select the Type Tool (T) and add some text beneath the navigation bar using the color #e3b9a0. Considering that we are creating a portfolio layout, you can write a small description about who you are and what you do. Then double-click on this text layer to open the Layer Style window and use the settings from the following image.

Step 12 – Creating the "Featured Project" area

Create a new group and name it "featured project." Select the Rectangle Tool (U) and create a rectangle with the size 940px by 240px using the color #994b1d. Double-click on this layer to open the Layer Style window and use the settings from the following image. Name this layer "featured image bg."

Step 13

Open an image that you like in Photoshop and move it into your document using the Move Tool (V). Put this image above your rectangle, then right-click on it and select Create Clipping Mask. Now your image is using the rectangle which you have created at the previous step as a mask. Set the opacity of this layer to 80% and name it "featured image."

Step 14

Select the Rectangle Tool (U) and create a rectangle like I did using the color #1d0d05. Set the opacity of this layer to 90% and name it "small rectangle."

Step 15

Select the Type Tool (T) and write the name of your image on that black small rectangle using the color #bb9680. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Step 16

Select the Custom Shape Tool (U), right-click on your image, select an arrow that you like, hold down the Shift key and create an arrow using the color #bb9680. Move this arrow in the right side of the "featured project" area and name it "right arrow." Set the opacity of this layer to 20%.
Duplicate this arrow (Ctrl+J), go to Edit > Transform > Flip Horizontal and move this new arrow in the left side of the "featured project" area. Name this layer "left arrow."

Step 17 – Creating the "Recent Projects" area

Create a new group and name it "recent projects." Then select the Rectangle Tool (U) and create a rectangle with the size 620×230 using the color #0c0704. Name this layer "image 1 bg."

Step 18

Open an image that you like in Photoshop, move it into your document using the Move Tool (V), and put it above the black rectangle which you have created at the previous step. Name this layer "image 1", right-click on it and select Create Clipping Mask. Set the opacity of this layer to 80%.

Step 19

Select the Type Tool (T) and add some text in the right side of the first image from the "recent projects" area, using the color #e8a48c. Double-click on this text layer to open the Layer Style window and use the settings from the following image for Drop Shadow.

Step 20

Repeat the last three steps to create the second image for the "recent projects" area.

Step 21 – Creating separators

Create a new group and name it "separators." Select the Line Tool (U), set the width to 1px and create a horizontal line from the left side of your layout to the right side, using the color #2f1107. Name this layer "dark line."
Duplicate the "dark line" layer, select the Move Tool (V) and hit the down arrow on your keyboard to move this layer one pixel down. Change the color of this line to #aa431f and name it "light line." Put these two lines between the main block of text and the "featured project" area.
You can create as many separators like this one as you want.

Step 22 – Creating the footer

Select the Rectangle Tool (U) and create a rectangle with the height of 50px using the color #220d06. Double-click on this layer to open the Layer Style window and use the settings from the following image. Set the opacity of this layer to 90% and name it "footer."
Select the Type Tool (T) and write anything you want in the footer of your layout using the color #8b4c38.

Final Result

We’re done! I hope you enjoyed this tutorial. It’s the first layout tutorial that I wrote on PSDBURN. If you like it, I will write more like this one in the future.
Don’t forget to spread the word about this tutorial and share your thoughts about it in the comments bellow.