Web designs and layouts: Create A Stylish Portfolio Layout

Step One

Firstly, create a new document 960×1000.

We’re going to start by creating the background. Set your color pallete to: background – #333333, foreground – #1a1a1a. Select the Gradient Tool (Shift + G) then select Radial Gradient. Now, at the top of your document, drag the gradient from the center to either side and you should come out with a result similar to:
Portfolio Temp One

Step Two

Select the Marquee Tool (M) and create a horizontal bar 66px high and stretch it all the way across the template. Make this selection a new layer. Now, set your colors to #ffffff and #ebebeb and select the Gradient Tool. Set the gradient back to Linear Gradient and drag from the top of the marquee to the bottom. If done correctly, your horizontal bar should be a gradient. You should have:
Port Temp Two

Now, let’s add a Drop Shadow to give it some depth. Use these settings:
Port Temp Drop Shadow

Now create a new 250×92 rectangle with the Marquee Tool (M) and make a new layer. Fill this new layer with the color #ff0060. Place this box on top of the horizontal bar we just made and move it 50px from the left side of the layout. We’re going to add a Drop Shadow here too:
Port Temp Drop Shadow 2

You can now add some text or a logo in the box you just created!

Step Three

Here’s what we have so far:

Now, we’re going to add the “Latest Project” box, which will be coded into jQuery to make it a slider. We used this image (892×330) to start with:

We added a Drop Shadow to this layer:
Port Temp Drop Shadow 2

Next, we created a new 892×98 rectangle below the “Latest Project” image we just made. Fill the rectangle with #ebebeb and set it’s Blending Mode to Overlay. Add some text to describe your latest work and a short description. Now, throw these images on both sides of the “Latest Project” image:

(we provided these arrows to speed up the process and to keep the tutorial length to a minumum, yell at us if you’d rather we not do this)

We should have something like this now:

Step Four

Let’s go ahead and knock out the navigation now. Remember the horizontal bar we made earlier in the tutorial? That bar is going to serve as our navigation. Simply add some text to the navigation bar, it’s not difficult at all. We’ve even thrown in what a rollover will look like:

That wasn’t too bad. Let’s add a few boxes below the “Latest Project” image to display out past work. Create 3 more rectangles with the Marquee Tool (M) with a size of 292×158.

Add these Layer Styles; Inner Shadow and Stroke:
Port Temp Inner Shadow

Now we have this:

Step Five

Let’s add some text to spruce this bad boy up a little.

For the “Latest Project” and “Past Work” text, we used font color: #414141 and font Myriad Pro, Regular at 48pts with a tracking attribute of -75. Then we added these Layer Styles:
Port Temp Drop Shadow 3

We also added a bit more text to briefly describe ourself.

Step Six

Now we’re going to add the footer. Remember the rectangle we made underneath the “Latest Project” image? Well, we’re going to do the same thing for the footer. You can simply duplicate that same layer or create a new one from scratch. Either way, you’ll come out with the same effect. We made ours 128px high.