How to Create a Clean Portfolio Layout in Photoshop

On 9 Oct, 2012 By With 10 Comments

If you’re looking for a web work, you need two things. The skills to get the job done, and a portfolio to show it to your prospected clients. While you might get a few work without a portfolio, some of the clients out there still prefer to have one. And with the rise of demand on Web Industry, many designers are popping out here and there so the competition is beginning to be hard.

The only way to get a clients attention is to show them your skills using your portfolio, so today we will Create a Clean Portfolio Layout in Photoshop that you can use to get a web design job.

Below is the end product that we will create, we want it clean and focus skills about our past job.

You can download the PSD below this tutorial!

GeekFolio Photoshop Layout How to Create a Clean Portfolio Layout in Photoshop

Before we start, there are several things we need:

For the images, just do a right click > save image, and put all of them in one folder so we know where to get them later on.

Let’s start our Clean Portfolio Layout

1 canvas How to Create a Clean Portfolio Layout in Photoshop

Open a new canvas, set it to 980px by 1302.

header color How to Create a Clean Portfolio Layout in Photoshop

Grab your Marquee Tool (M) and select a 100px from the very top and fill it with #db5450

2 logo How to Create a Clean Portfolio Layout in Photoshop

For the logo, we used the Kaushan Script 34pt #ffffff from the download above and the tag line was Orator Std 15pt medium #8e201c

3 nav How to Create a Clean Portfolio Layout in Photoshop

For the right part of the header, our navigation font is Lucida Console 14pt #ffffff. Set all to caps

5 slide iphone How to Create a Clean Portfolio Layout in Photoshop

Next is to use our iphone app image and place it just under our logo

6 slide stroke How to Create a Clean Portfolio Layout in Photoshop

In Blending Options > Stroke set the color to c9c8c7 and size is 1px

7 slide iphone effect How to Create a Clean Portfolio Layout in Photoshop

Next, we will create a duplicate of the image (CTRL + J) and resize it by 1px, move it down by pressing down arrow key twice. Do another one, so you’ll have two layers underneath.

8 slide iphone complete1 How to Create a Clean Portfolio Layout in Photoshop

This is what you should have

9 slide text How to Create a Clean Portfolio Layout in Photoshop

Next is we add a text on the other side, we used Arial Bold 17pt #3b3a3a for the title and Arial Regular 13pt for the text.

10 slide button How to Create a Clean Portfolio Layout in Photoshop

For the button, select Rounded Rectangle Tool and set the radius to 5px

11 slide button gradient How to Create a Clean Portfolio Layout in Photoshop

In Blending Options > Gradient Overlay, go to color settings and copy the colors above

12 slide button stroke How to Create a Clean Portfolio Layout in Photoshop

Stroke color #859a39 and size to 1px

13 slide button 2 How to Create a Clean Portfolio Layout in Photoshop

We now have this button above

14 slide button highlight How to Create a Clean Portfolio Layout in Photoshop

Duplicate the button layer and disable the blending styles by clicking the eye. Fill it with #FFFFFF and move layer up, and set the fill to 11%

14 slide button text How to Create a Clean Portfolio Layout in Photoshop

Let’s add some text, we used Arial Bold 16pt

15 slide button text dropshadow How to Create a Clean Portfolio Layout in Photoshop

For the text drop shadow Blend Mode is #fffff, Angle is 90 and distance, size 1px

16 slide button text stroke How to Create a Clean Portfolio Layout in Photoshop

Next is inner shadow,  set the Blend Mode to #73872e and distance, size 1px

17 slide complete How to Create a Clean Portfolio Layout in Photoshop

This is what we have now

18 mid icon circle How to Create a Clean Portfolio Layout in Photoshop

Create a three column after the slide layer, select Ellipse Tool (U) and create a circle shape. Use the guides to make sure that everything is aligned.

19 mid icon title How to Create a Clean Portfolio Layout in Photoshop

Use the icon from jigosoar that we download from above, and put it inside the circle. Title font is Arial Bold 16pt #3b3a3a, text is Arial Regular 13pt. Jigosoar icons from 24px folder and light section.

20 mid complete How to Create a Clean Portfolio Layout in Photoshop

This is the the complete set above. Icon used were 24_gallery, 24_css, 24_structure in the light folder.

21 contact body How to Create a Clean Portfolio Layout in Photoshop

Next is to create a contact field, grab Rounded Rectangle Tool (U) and set the radius to 5px.

22 contactme How to Create a Clean Portfolio Layout in Photoshop

Icon from jigosoar 48px folder > dark > 48_email, font was Arial Bold 16pt and for the button, just create a duplicate from the one above (CTRL + J) and change the text.

23 bottom content How to Create a Clean Portfolio Layout in Photoshop

We will use the same three column layout from above, use the Rounded Rectangle Tool (U) set the radius to 15px.

24 image clipping How to Create a Clean Portfolio Layout in Photoshop

Next is to use the tutorial images, drop them into the canvas. Make sure that below the image layer is the rounded layer that we created minutes ago. Now, right click the image layer > create clipping mask. Resize the image until it fits the layer

25 bottom content How to Create a Clean Portfolio Layout in Photoshop

We’ll have something like this, we also added a text title and we used Arial Bold 16pt #db5450.

26 footer bg How to Create a Clean Portfolio Layout in Photoshop

For footer, select Marquee Tool (M) and fill it with #1a1a1a.

27 footer complete How to Create a Clean Portfolio Layout in Photoshop

What we did is just duplicate the layers (CTRL + J) and move them on the footer, change the color to #353535. For the footer navigation, the highlighted text was #ffffff and the rest are the same color.

We are done with our Portfolio!

GeekFolio Photoshop Layout How to Create a Clean Portfolio Layout in Photoshop

Hopefully this will get you started on your portfolio project, and get that design job right away. If you have any other suggestions about our portfolio design, hit me up on the comments section.

10 Responses to “How to Create a Clean Portfolio Layout in Photoshop”