Hello there everybody! I really enjoy spending time writing web layout tutorials, as such here comes another one. Are you ready for another PSD web design tutorial here at 1stwebdesigner? Today we will create a Detailed Portfolio Layout. A few techniques discussed in this tutorial include the use of proper spacing, patterns, typography, and colors.

Stay with me till the end so that you will not get lost in the process, everything is important so do not skip!

Resources you will need to complete this tutorial:

• 960 Grid System
• Icons
• Home Icon
• RSS Icon
• Twitter Icon

Here is what we will be making, click the image for full preview:

Step 1: Working with Site Structure

Before we get started download first 960grid system for easy Guideline creation.

Open 960_download\templates\photoshop\960_grid_12_col.psd

We also need to make sure that our Rulers and Guides are in view by pressing:

• CTRL + R (View Rulers)
• CTRL + ; (View Guides)

CTRL + SHIFT + C to change the canvas size.

Using the Paint Bucket Tool(G) fill the background layer to #151515

Now we need to create folders. Here are the folders that we will use in order to be organized all throughout.

When you’re done let’s get started!

Step 2: Working with Header

Create new guideline by going to View > New Guide and set the position to 150px, orientation to horizontal. Repeat the step and change the position value to 100px and 5px.

Inside the Header folder create a new layer and name it header_top (Make sure that you have created the folders as said earlier).

Select Rectangular Marquee Tool(M), make a selection in the 5px guideline we just made and fill it with #000000.

Add this Blending Option:

Drop Shadow

Now create a new layer and name it header_bg. Select Rectangular Marquee Tool(M), make the selection as shown in the screenshot below.

Set the foreground color to #242424, background to #151515. Now select Gradient Tool(G) > Radial Gradient. Fill the selection by dragging from the center to the right.

Add this Blending Option:

Inner Shadow

Step 3: Working with Logo

Inside the Header folder create a new folder and name it logo. Were going to create a quick logo. Select Text Tool(T), follow the screenshot as shown below.

Add the following Blending Options:

Drop Shadow

For the Quick logo Select Custom Shape Tool(U), follow the screen shot as shown below.

Also add the following Blending values:

Drop Shadow

Gradient Overlay

Step 4: Working with Navigation

Inside the Header folder create a new folder and name it navigation. We are going to add navigation links, so select Text Tool(T), use the values below:

Duplicate the text layer. The duplicated layer will be place on the top of the original layer, select the original text layer and set the color to #000000, press up arrow once on your keyboard. This will make the text beveled.

Now we will create an active/hover effect. Select Rounded Rectangle Tool(T), Radius to 10px. Set the shape fill to 0% at the layers panel.

Apply the values as shown below:

Drop Shadow

Inner Shadow

Gradient Overlay

Step 5: Working with Search and Breadcrumbs

Inside the Header folder above the header_bg layer create a new layer and name it bg. Select Rectangle Marquee Tool(M), make a selection as shown in the screen shot below and fill it with any color.

Then follow the given values for the Blending below:

Drop Shadow

Inner Glow

Gradient Overlay

Stroke

Inside the Header folder create a new folder and name it Search. Now were going to add the search input background. Select Rounded Rectangle Tool(U), set radius to 10px and place it as shown in the screen shot below.

Add this Blending Option

Drop Shadow

Inner Shadow

Select Text Tool(T), label it with any text you are comfortable with.

Now open up the social media icons you have downloaded and place it beside the search bar as shown in the screen shot below.

Inside the Header folder create a new folder and name it Breadcrumbs. Open up the home icon you have downloaded and place it as shown in the screen shot below. I added a Color Overlay #696969 in the home icon also with the same color in the text.

Step 6: Working with Slideshow

Select Slideshow folder and create and new layer inside of it, name it slide_bg. Create a new guide line by going to view > new guide > set Value to 430px orientation to horizontal.

Make a selection in the guide we have created and fill it with color.

Blending values as follow:

Drop Shadow

Pattern Overlay

Stroke

Now were going to add a highlights to our slide_bg create a new layer above it and name it highlights. Select the Pen Tool and make the shape as seen below and make a selection from it.

Fill the selection with #ffffff  and set the layer options as shown in the screen shot below.

Now we were going to add some text in our slide show. Select the Text Tool(T) and follow the text formatting.

Step 7: Working with Read More

Next will be the read more button. Inside the slideshow folder create another folder and name it read_more. Select Rounded Rectangle Tool(U) then set the Radius to 10px. Place it like seen below.

At the layers panel set the fill color to 0%.

Add this Blending Option:

Drop Shadow

Inner Shadow

Gradient Overlay

Make a selection to the shape we have just created by clicking the shape thumbnail in the layers pannel. Go to Select > Modify > Contract. Set the pixel value to 5px and fill it with any color.

Follow the blending values as set below:

Drop Shadow

Inner Glow

Gradient Overlay

Stroke

Using the Text Tool(T), label the button with read more.

Step 8: Working with Slide Image

Now were going to add the slide image. Select Rectangle Tool(U), set the color to #000000 and place it as shown in the screen shot below.

Set the layer Fill to 0% then go to Blending Options and do the following:

Drop Shadow

Stroke

I placed an image above the layer. So you may have something that looks like in the screen shot below.

Step 9: Working with Next Prev Buttons

Create another folder inside Slideshow folder and name it prev_next. Select Rounded Rectangle Tool(U) and the radius to 10px. Follow the step as shown in the screen shot below.

Name the layer to prev. Set the layer Fill to 0%.

Copy the following values:

Drop Shadow

Inner Shadow

Gradient Overlay

Duplicate the prev layer and name it to next. Place it at the opposite side.

Step9: Working with Active/Inactive Identifier

Create another folder inside Slideshow folder and name it Identifier. Inside the Identifier folder create a new layer and name it inactive.

Now select Ellipse Tool(U), fill it with #000000 and place it as shown in the screen shot below.

Notice in the screenshot they have the same effect with our prev_next buttons. Refer to the layer styles of prev_next buttons or by simply duplicating the styles by holding the Alt + Click to the FX Icon in the layers panel and drag it to the inactive shape layer.

Now we will create the active identifier. Select the first inactive shape. Go to Select > Modify > Contract. Set the pixel value to 5px.

Use the following values:

Drop Shadow

Inner Glow

Gradient Overlay

Step10: Working with Services

Select the services folder. Now were going to add the header title, so grab the Text Tool(T) and follow the text formatting as shown in the screen shot below.

Now let’s add a divider. To do this select Line Tool(U), weight to 1px. Follow the screen shot as shown below.

Create another folder inside services folder and name it service1. Open up icons you have downloaded and select an appropriate icon for each service. Now select Text Tool(T) follow the text formatting as shown in the screenshot below.

When you’re done duplicate it depending on how many services you offer. For this exmaple I duplicated it 5 times and changed every icon for different services. Follow what I did in the screenshot below.

Step 11: Working with Recent Tweets

Select aboutme folder. Now were going to add the header title, so grab the Text Tool(T) and follow the text formatting (The same as we did to our services header title) as shown in the screen shot below.

Using Text Tool(T) put up some about me information. Use the values presented below.

Go to Blending Options and use the values as shown below:

Drop Shadow

Stroke

Step12: Working with Latest Tweets

Select aboutme folder. Now we are going to add the header title and tweets, so grab the Text Tool(T) and follow the text formatting (The same as we did to our services and about me) as shown in the screen shot below.

Add this blending option to the rounded rectangle.

Drop Shadow

Step12: Working with Footer

In the footer folder create a new layer and name it footer_bg, make a selection as shown in the screenshot below and fill it with color.

Add this Blending Option:

Inner Glow

Gradient Overlay

Stroke

Now select Text Tool(T), put up your copyright info and place it on the center.

Finally we’re done! Hope you learned something on this tutorial and I hope you like it. If you have
any questions or tutorial request drop some comments below. Thanks!

Final Preview