How to Create a Clean Portfolio Layout in Photoshop

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!

How to Create a Clean Portfolio 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

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

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

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

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

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

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

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.

This is what you should have

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.

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

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

Stroke color #859a39 and size to 1px

We now have this button above

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%

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

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

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

This is what we have now

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.

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.

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

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

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.

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

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

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

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

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!

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.