Create an awesome soft portfolio layout in Photoshop

Aug 4th, 2010View Comments

Hello and welcome to another tutorial, here on trendyTUTS.com. For today I will create a soft portfolio template using some warm colors. This psd layout can be used not only for a portfolio, but in the same time can be used to showcase your product (an ebook, a script, a software, etc)

Please note that in this tutorial I will explain only how to design this layout in Photoshop but I will not cover the conversion PSD to XHTML. The tutorial on how to code this layout in XHTML it will be available on our PSD to HTML Section available only to our premium members

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

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why 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.

Here is my final result:

To create this portfolio template I have used:

Let’s start the tutorial.
Open Photoshop, set the Foreground color to #f1eedd than create a new document (Ctrl + N)  with this dimensions: 1020x1300px

Step 1 – Creating the logo

To create the logo I will select Type Tool and I will write “PortfolioWebsite” and for tagline “design by trendyTUTS.com”.

Here is my result:

I will select Brush Tool and using a soft brush I will add a white spot on the middle of the logo. Than from our Premium Files, available to our Premium Members I will select an element from Cool Hand Drawn Vectors.

As you can see, this one is already colored and it does not fit pretty well with our color scheme

That’s why I will apply this layer styles:



Here is my final result for logo:

Step 2 – Creating the navigation

To create the navigation, I will select Rounded Rectangle Tool with a radius of 30px and I will create this red shape, on the right side of the logo.

Then I will apply this layer styles:





My result

Next I will select Ellipse Tool and I will create a black shape just under the navigation.

I will go to Filter>Blur>Gaussian Blur and here I will choose a radius of 3.5px.

Then I will select Rectangle Tool, I will create a shape over the navigation (which will serve as a rollover) and I will apply this layer styles:



With Type Tool I will add the links for Navigation
My result:

Steap3 – Creating the Featured Area

First of all I will select Rectangle Tool and I will create this shape. I have used this color: # fbfbf5, dimensions: 1020by303px, than at the buttom and at the top of this shape I will create 2 shadows. I will create this shadows exactly like we have created the shadow for Navigation. I will select first Ellipse Tool I will create a black shape than I will apply a gaussian blur.

On the left side, using Type Tool I will add some text.

A little bit below the paragraph I will add a “Call to action button”. Using Rounded Rectangle Tool with a radius of 20px I will create a shape than I will apply this layer styles



My result:

On the right side, using this image I will add a macbook.

Because here I would like to create a jquery slideshow, I will try to personalize the mackbook a little bit. Using a screenshot with my latest tutorial I will place it over the screen, than with Rectangle Tool , on the left and on the right area of the screen I will create 2 small rectangular shapes and 2 orange triangles (I have created this triangles with pen tool)

Here’s my final result

Step4 – Creating the middle area

To create the middle area I will create a shape, just bellow featured area, size: 869x167px and I have applied this layer styles:



Using a soft brush I will polish this area and I will add a soft light over the left side of the shape. With Ellipse Tool I will create a black shape and I will apply a Gaussian Blur over it to create a shadow exactly with that one from navigation.

Next I will select Ellipse Tool and I will add this black shape:

I will go to Filter>Blur>Gaussian Blur. For radius I will choose 4.5px and I will press ok, than I will select Rectangular Marque Tool and I will make this selection.

Once you have a similar selection, hit delete on your keyboard than Ctrl + D to deselect.
Duplicate this shapes and move it a little bit to the right:

Next with Type Tool I will add some text and with Rounded Rectangle Tool I will create 3 buttons (in the same way that I have create that “Call to action button” from Featured Area)

Than from our Premium Files available to our Premium Members I will use Logo Vector Pack. I will place few elements  on my document.

Because this shapes are already colored, currently they are not fitting to well on my document, that’s why I will apply this layer styles, for each vector:



And here is my final result for Middle Area

Step 5- Creating the content area

To create the content area is really easy.
First with Rectangle Tool I will create this rectangular shape. Dimensions: 950x583px, color: # fbfbf5. At the bottom of it I have created a shadow exactly like I have created it for Middle Area or Navigation

Than using the basic tools in Photoshop I will add the content. Here is my final result:

Please note that in this tutorial I will explain only how to design this layout in Photoshop but I will not cover the conversion PSD to XHTML. The tutorial on how to code this layout in XHTML it will be available on our PSD to HTML Section available only to our premium members

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

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why 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.

And here is my final result for the entire layout:

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.espreson.com/ Espreson

    Very nice and elegant design..

  • http://www.espreson.com/ Espreson

    Very nice and elegant design..

  • Sebastian

    Great design, really inspiring!

  • Sebastian

    Great design, really inspiring!

  • Carlos

    I love this.

    I’m a new premium suscriber, so far very happy whit the PSD-HTML convertions.

  • Carlos

    I love this.

    I’m a new premium suscriber, so far very happy whit the PSD-HTML convertions.

  • Kyle

    I really like all of your tutorials, but this one is outstanding :)

  • Kyle

    I really like all of your tutorials, but this one is outstanding :)

  • Willie

    Amazing tutorial. Its really simple and easy to learn. Thank you!!

  • Willie

    Amazing tutorial. Its really simple and easy to learn. Thank you!!

  • http://www.vivoocreative.co.uk Web Design Nottingham

    Be useful for developers who don’t touch design wanting a portfolio

  • http://www.vivoocreative.co.uk Web Design Nottingham

    Be useful for developers who don’t touch design wanting a portfolio

  • Paulien

    I have spent a whole day on this tutorial. I feel like its the most valuable time I have ever spent! I have learned a lot, but I think I will become a premium member because I want to download the HTML and some of your premium files. Keep up the good work man!

  • Paulien

    I have spent a whole day on this tutorial. I feel like its the most valuable time I have ever spent! I have learned a lot, but I think I will become a premium member because I want to download the HTML and some of your premium files. Keep up the good work man!

  • http://www.kiararealty.com.my Kent Tan

    Whoa, what a detailed tutorial! Awesome work!

  • http://www.kiararealty.com.my Kent Tan

    Whoa, what a detailed tutorial! Awesome work!

  • http://tutorialblog.info/ tutorial blog

    thank

  • http://tutorialblog.info/ tutorial blog

    thank

  • http://www.webestools.com Webestools

    Awesome! Thanks for this tutorial!

  • http://www.webestools.com Webestools

    Awesome! Thanks for this tutorial!

  • http://www.abouttiyo.web.id Tiyo Kamtiyono

    Awesome tutorial, thanks for sharing.

  • http://www.abouttiyo.web.id Tiyo Kamtiyono

    Awesome tutorial, thanks for sharing.

  • surabhi

    that’s really great layout, soon I will start working and maybe I will have a similar output :) . Thanks!

  • surabhi

    that’s really great layout, soon I will start working and maybe I will have a similar output :) . Thanks!

  • http://www.ricocelada.com drumric01

    this is really great!!..thanks for this tutorial..really helps.

  • http://www.ricocelada.com drumric01

    this is really great!!..thanks for this tutorial..really helps.

  • http://pixeltango.com Mickel

    Very nice tutorial. I enjoyed reading it, thanks :)

  • http://pixeltango.com Mickel

    Very nice tutorial. I enjoyed reading it, thanks :)

  • Cooter

    This was literally awful. I could not follow it at all. I honestly felt like killing myself today. Luckily i’m not like Pauline and have a life outside my house. I have had much better days and intend to have more. I will most likely never use this site again or look at your work. If at all possible please never publish you work ever again.

  • Cooter

    This was literally awful. I could not follow it at all. I honestly felt like killing myself today. Luckily i’m not like Pauline and have a life outside my house. I have had much better days and intend to have more. I will most likely never use this site again or look at your work. If at all possible please never publish you work ever again.

  • admin

    @Cooter,

    You need to have patience if you really want to learn Photoshop. Instead of “killing yourself” you can easily ask for help here.

    Regarding your last request, unfortunately I have some bad news for you :) We will keep publishing tutorials because we love what we do and we have many other visitors that are learning from our hard work.

  • admin

    @Cooter,

    You need to have patience if you really want to learn Photoshop. Instead of “killing yourself” you can easily ask for help here.

    Regarding your last request, unfortunately I have some bad news for you :) We will keep publishing tutorials because we love what we do and we have many other visitors that are learning from our hard work.

  • Malik

    Poor Cooter… Looks like he or she needs to do something else outside of design or pickup a photoshop book.

    Trendytuts does a very good job on creating and presenting their work. Just because of the not so savvy users (Like Cooter that really needs to do something else and not take he or her frustrations on Trendytuts) are so few that Trendytuts should not have even taken the time to entertain users like him or her.

    Please keep up the very good work that you do and not entertain knuckleheads like Cooter because I am learning a lot from Trendytuts that is making me a better designer.

  • Malik

    Poor Cooter… Looks like he or she needs to do something else outside of design or pickup a photoshop book.

    Trendytuts does a very good job on creating and presenting their work. Just because of the not so savvy users (Like Cooter that really needs to do something else and not take he or her frustrations on Trendytuts) are so few that Trendytuts should not have even taken the time to entertain users like him or her.

    Please keep up the very good work that you do and not entertain knuckleheads like Cooter because I am learning a lot from Trendytuts that is making me a better designer.

blog comments powered by Disqus