How to create a modern portfolio layout using Photoshop

Sep 13th, 2010View Comments

Hello and welcome to another tutorial here on trendyTUTS.com. In this tutorial I will show you how to create  a modern portfolio layout (psd template) using Photoshop.

If you’d like to see more tutorials on how to create different kinds of psd templates (for various niche), I invite you to visit Website Layout Tutorials section.

Like I do on every tutorial, I remember you that in this tutorial you will learn how to create this psd template in Photoshop, but I will not cover the PSD to CSS/HTML conversion.

If you would like to download the CSS/HTML version for this tutorial you will need to sign-up for a premium membership on trendyTUTS.com.

As a premium member you will be able to download all our Web Layouts (PSD and CSS/HTML version for each tutorial), all Premium Files and unlimited access to our PSD to CSS/XHTML Tutorials.

Click Here To See The Live Preview (CSS/HTML)

For security reasons some files from this template have been encrypted, that’s why, browsers such as Internet Explorer wont display this template correctly. In order to see a working live preview, I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

Final preview:

Portfolio website layout - psd template

To create this web layout I have used:

Let’s start the tutorial.
Open Photoshop and create a new document 1020 by 1350px and as a background color choose: #0193a9

Now I will select Ellipse Tool and I will create this white shape on the top of my document:

Next I will apply a gaussian blur (Filter>Blur>Gaussian Blur) of about 43px

From my layer palette I will change the blending mode to Soft Light.

My result

Using the same steps I will create a similar effect on footer also

Step 1 – Creating the logo

To create the logo is really easy. I will select Type Tool and I will write “My Folio”, and underneath it I will write “a design by trendyTUTS”

To see what type of fonts I have used, please see the screenshot bellow:

Then I will apply this layer styles, to create the letterpress effect only for “Folio” text:



My result

On the right side with I will create the navigation. I will select Rectangle Too I will create a shape and I will apply this layer styles:




Over this shape I will write “Services” using Type Tool than I will apply this layer styles:



Using Type Tool I will add the rest of the links also

Next I will select Line Tool and I will create this 2 lines.

On my layer palette I will select those 2 lines (to select multiple layers hold down Ctrl and with mouse select the layers which you’d  like ). Once I will have the layers selected I will press Ctrl+E to merge this 2 layers into a single one.

I will select Eraser Tool with a smooth brush I will lower the flow to 1%, than I will start erasing a little bit from the left then from the right side.

Here is my result:

Step 2 – Creating the Featured Area

To create Featured Area, I will select Rounded Rectangle Tool with a radius of 10px and I will create this shape. As a color I have used #efe202

Having Rounded Rectangle Tool selected, but this time with a radius of 30px I will create another shape, on the top of the previous one.

With Pen Tool I will create some small shapes to cover the open space on the right and on the left side.

This selected area it was created with Pen Tool. Here’s my final result for this area:

Next  I will add some screenshots of my layouts. For each image added I have applied this layer styles:



Next with type tool I will write:
“We work for you so you don’t have too!”

Then I will apply this layer styles:



My result for featured area:

Step 3 – Creating the content area

First with Rectangle I will create this shape

Then with pen Tool I will create this triangle on the right side

I will apply a Gaussian Blur (Filter> Blur> Gaussian Blur) with a radius of 8px.
Here is my result:

In the same way I will proceed for the right side, than I will add an image.

Using the same method I will create 5 more thumbnails

Next I will create a separator using line tool. I will use the same method used to create the separator between the logo and featured area.
Here’s my result

With Type Tool and using some Vector Icons from our Premium Files, available to our Premium Members I will create this

With Rounded Rectangle Tool (with a radius of 5px) I will create a contact form

Next I would like to create a speech bubble in Photoshop to include it on testimonials area. To do that, first I will create a new layer on my layer palette (Ctrl + Shift +Alt +N) I select Ellipse Tool then from the top I will select Paths….and I will create this path

With Pen Tool I will create the second path.

Now I will select Path Selection Tool and holding Shift I will select both paths. I will right click on them and I will choose Fill Path.


A new window will pop up

Hit OK, than hit Delete Button to delete the paths
My result:


Next I will lower the fill to 0%

and I will apply this layer styles:

Using Type Tool I will add some testimonials and from our Premium Files, available to our Premium Members I will add some peoples from People chatting/Speech bubbles
Here is my result for this area

And here is my result for the entire layout:

Portfolio website layout - psd template

Want to Download the Source File? (including CSS/HTML version)

In order to download the source file you will need to become a Premium Member.

Already a premium member? When you click on the download link please make sure that you are logged in.

If you’d like to read more tutorials, I invite you to visit our Website Layout Tutorials section.

Also, you can follow us on twitter if you’d like to know when we post new tutorials on trendyTUTs.com.

  • http://www.gurufurniture.co.uk keshav sharma

    excelant work …

  • http://www.gurufurniture.co.uk keshav sharma

    excelant work …

  • r2d2

    Realllly nice :)

  • r2d2

    Realllly nice :)

  • http://www.yourcoupononline.com rico

    Thanks for this nice tutorial.

  • http://www.yourcoupononline.com rico

    Thanks for this nice tutorial.

  • http://dreaminofyou.wordpress.com/ Haley

    Woah. This is amazing, especially for me being an aspiring graphics artist.
    Thanks for this great tutorial!

  • http://dreaminofyou.wordpress.com/ Haley

    Woah. This is amazing, especially for me being an aspiring graphics artist.
    Thanks for this great tutorial!

  • http://www.20milesnorth.com Spokane Web Designer

    Good tutorial, shows that design layout can be elegant and quick without looking cheap.

  • http://www.20milesnorth.com Spokane Web Designer

    Good tutorial, shows that design layout can be elegant and quick without looking cheap.

blog comments powered by Disqus