Create A Stylish Portfolio Layout

by TutsArena - Templates, Tutorials

We’ve done it again. A portfolio should be clean and easy on the eyes while still displaying the designer’s work prominently. We’ve created another portfolio layout that is stylish and functional. This layout displays latest work and even past works on the front page.

In this tutorial we’ll show you how to painlessly create a stylish portfolio layout in Photoshop.  We’ve even gone a step further and added jQuery functionality to allow your potential clients to easily navigate through your latest work without leaving the page.  This tutorial is targeted toward intermediate Photoshop users.  You should have a basic understanding of all of Photoshop’s Tools, as well as the ability to create new layers when needed and how to navigate through Layer Styles.

If you haven’t seen our previous portfolio tutorial, Create A Clean And Modern Portfolio Layout, you should also check that one out!

Enough talk, let’s get started.

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:
Port Temp Three

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:
Port Temp IMG
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:
Arrow2Arrow

(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:
Port Temp Four

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:
Port Temp Five

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.
Port Temp 6

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

Now we have this:
Port Temp Seven

Step Five

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

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
Port Temp Inner Shadow 2

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.
Port Temp Ten

Next, we just added text.
Port Temp Eleven

For the “contact me” and “about me” text, we added a Drop Shadow to give it some depth:
Port Temp Drop Shadow 4

You’re done!

This tutorial has been written so it gives the designer more room to add their own style.  We wanted to provide you with a basic structure and allow you to do your own thing.  We hope you enjoyed this tutorial!

Check out these other tutorials we’ve written:

Thanks for reading!

Update: Check out the Freebies section to download a coded version of this tutorial!

Download!

About the author

TutsArena is dedicated to providing the best, free web design tutorials.


Visit TutsArena's Website | All Articles From This Author

25 Comments


Add your comment - (need a gravatar?)

Enable CommentLuv?

Sponsors

Sponsors

Recent tutorials

Sponsors

Write for us!

Write tutorials for us and make money! Check out the details and submit your tutorial.