Tutorial: Design a Clean Good-Looking Portfolio In Photoshop

Have you ever wanted to create clean and nice portfolio? In this tutorial I will show you how to design clean good-looking portfolio layout. Open Photoshop and let’s get going.

Step 1: Background

Let’s start by creating a new document in photoshop – 960×1200px, resolution 72 pixels/inch.

Add vertical guidlines by choosing View > New Guide, at 0px and at 960px to mark the limits. Go to Image > Canvas Size to resize the document making the canvas width bigger (1460×1200). This way design will be centered into the big document and we’ll be able to see how it looks on widescreen resolutions.

Now set the foreground color to #a5acad and fill the document with this color (Alt + Backspace). Go to Filter > Noise > Add Noise and apply filter with parametars shown on the picture below.

Step 2: Header

Pick up Horizontal Type Tool (T), choose Graublau Web Sans font, for font color choose #ffffff, set size at 60px and type some welcome message.
I suggest to type welcome message as a separate sentences – each part in own layers (I have 3 layers for my message ).

Notice that I use bigger font (72px) with bold style for my name, and also a bigger font (65px) with bold style for words designer and my portfolio. Apply the following layer styles to the welcome message:

You should have something like this now:

I’ve decided to use iPhone for twitts. Download and open iPhone 3G-3GS PSD by `-kol, pickup front group from iPhone 3G/3GS group, copy and paste it into our portfolio. Rename this group to iPhone. Remove Drop Shadow, Shadow and Reflection Layers, rotate, resize it and place it like shown on the picture below (don’t merge the iPhone group yet). Make sure that welcome message have some breathing space.

Since I’m using Tweetie application on my iMac, I want it to recreate Tweetie interface on iPhone screen. So, I’ve captured screen form Tweetie application,

and clear the area.

Then resize it to fit iPhone screen.

Pick up Rounded Rectangle Tool (U), set radius to 5px, and draw rectangle like shown on the picture. Fill it with #f1f1f1.

Add content to twitter.

Merge iPhone group and add Drop Shadow from Layer Styles Menu.

Command + Click on iPhone thumbnail to make a selection, pick up Polygonal Lasso Tool (L), make sure Intersect with selection is selected, and make a selection like on the picture.

Create new layer above iPhone layer and fill with #ffffff, and then lower the opacity to 12%.

This is how header look right now.

Step 3: Navigation

Let’s move on. Choose Horizontal Type Tool (T), font is Graublau Web Sans, color is #dddddd and create navigation.

I’m going to change color of Home to #ffffff and this will be the color for active page.

Step 4: Main Content

First we will create the featured image. Draw a white rectangle and add Drop Shadow.

Now copy that layer and rotate it slightly with the Free Transform Tool (Command + T). Do this one more time.

Import your featured image and place it over the white rectangles. Don’t worry if the image is flowing outside the boxes, we will fix that. Make a selection from the top rectangle (Command + Click on thumbnail), go to Select > Modify > Contract and insert 17px. With the featured image layer selected click the Quick Mask icon on the bottom of our layer palette. You will get nicely bordered image effect like shown in the image below.

Download paperclip icons by ~morinetti, open paperclip-half.png and import into portfolio. Place it over white rectangles, resize and apply Drop Shadow.

Add nice clever text about yourself (font is Graublau Web Sans, size 18px, color #ffffff).

With Rounded Rectangle Tool (U) and radius set to 10px, draw a rectangle, fill it with #dddddd and change the Blend Mode to Multiply.

Type VIEW PORTFOLIO with Horizontal Type Tool (T). Font is Graublau Web Sans and font size is 30px. Apply following layer styles.

Let’s add more details. Once again pick up Horizontal Type Tool, for font choose Journal, set size at 36px, color is #fffff and type “recent work”. Next, choose Custom Shape Tool (U), load Arrows Shapes and pick up Arrow 19. Fill arrow with #ffffff color.

Place text and arrow like on the picture below.

Draw dark gray (#777777) 1px line with Line Tool (U). Duplicate this layer by pressing Command + J on keyboard, change line color to #dddddd, and move it 1px down by pressing down arrow on keyboard once. Group this two lines and lower opacity to 55%.

Take a look at our work till now.

Step 5: Footer

I’m going to keep footer as simple as possible. We need 3 columns in the footer – Recent post from the blog, Flickr group and Social Stuff. Each column is 320px wide.
From left to right:

FROM THE BLOG headline (font: Graublau Web Sans, color: #dddddd, font size: 30px). Add few recent post titles below (font: Graublau Web Sans, color: #f4f4f4, font size: 18px).

FLICKR headline (font: Graublau Web Sans, color: #dddddd, font size: 30px). We will place 6 thumbnails from flickr stream. To do this, pick up Rectangle Tool, choose Fixed Size W:75px H:75px and create rectangle by just clicking on the canvas. Duplicate this rectangle 5 more times.

Import flickr images and place it over the rectangles. Don’t worry if the images are flowing outside the boxes. Make a selection from the rectangle (Command + Click on thumbnail), with the flickr image layer selected click the Quick Mask icon on the bottom of our layer palette. Repeat this step for all flickr images.

SOCIAL STUFF headline (font: Graublau Web Sans, color: #dddddd, font size: 30px). Download Aquaticus.Social by ~jwloh icon set, choose 6 icons (size 64px) you want and place it below headline.

Add some legal information in the bottom right corner (font: Graublau Web Sans, color: #000000, font size: 14px, tracking: -25, Blend Mode: Lighten).

Let’s take a look at final image.

Hope you enjoyed this tutorial.

Sponsor

Author's website

About the author