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)

Here is my final result:

To create this portfolio template I have used:

• Basic Tools in Photoshop (Rectangle, Ellipse Tool)
• From our Premium Files, available to our Premium members, I have used Logo Vector Pack and Cool Hand Drawn Vectors
• This macbook image

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)

And here is my final result for the entire layout:

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.