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!
Before we start, there are several things we need:
- Kaushan Script from Fontsquirrel
- Orator Std from Fontzone
- Icons from Jigosoar
- Iphone App image from past tutorial
- Writers online image from past tutorial
- Coming Soon page from past tutorial
- Designrshub Poftfolio from past guest post tutorial
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.
