Portfolio web layout #2 in Photoshop

Mar 22nd, 2010View Comments

Hi and welcome back to TrendyTuts.com
As we have promised, we will update this website regularly especially with high-quality tutorials (web layouts) and then we will code them up. Of course a tutorial on how we will code them will be published on this website soon, that’s why I invite you to subscribe to our website, via RSS feed of via twitter.

For today I will create another portfolio website layout in Photoshop. You can use it to showcase your work or to impress your boss with your skills in Photoshop :P

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.

Portfolio PSD Layout Tutorial #2

Let’s go!
Open Photoshop and create a new document “Ctrl + N”. My document it has this dimensions: 1020X1050, and as a background I have used this color: #fcfbe3

Next with “Rectangle Tool” selected, I will create a similar shape. I have used this color: #907e5d
My shape has this dimensions:  501px by 1020px

Then I will select again “Rectangle Tool” and I will create another shape, at the bottom of the shape created on previous step. I have used this color #f5a817

Next I will select “Ellipse Tool” and I will create this shape (yes with white)

Then apply a Gaussian blur. Go to: “Filter>Blur>Gaussian Blur” and set the “Radius” to 163.4

My outcome:

Step1  – Creating the logo

To create the logo I will select first “Type Tool ” (T) and I will write Oranged (using  this color #f6c458) and then Template (with white), than I will apply the following layer styles for the word “Template”

The slogan “by PSD-Coder.com” uses the same layer styles like the “Template” is using
Here is my outcome:

Step 2 – Creating the navigation:

First I will select “Rounded Rectangle Tool” and I will create this shape:

Then I will apply this layer styles:

My result

Then I will select “Ellipse Tool” and I will make this shape (yes using black). With this one I would like to create a nice shadow for navigation
I will go to Filter>Blur>Gaussian Blur and here I will use this Radios:  34.5px

Here is my result so far

Now I select “Rectangular Marque Tool” and I will make this selection:

Then I will hit “Delete” button on my keyboard
This is my result:

As you can see there is a nice shadow
Now I will add the links for navigation. I will select “Type Tool” and I will add them, one by one
Here is my result:

For each links I will apply the following layer styles:

Here is my result:

The navigation is finished now.

Step3 – Creating Featured Area

For featured area title, with type tool I will add some dummy text and I will use the same layer styles used for logo.

Again using type tool I will add another text just below the title

Using Rounded Rectangle Tool I will create another shape

Then I will apply the following layer styles

My result:

Then with type tool I will add some text. For this one I will apply the following layer styles


My output

Then I will add an image

The only thing which needs to be created here are the slideshow buttons for navigation. With “Rectangle Tool” I will create a similar shape

With Ctrl+T (to make a free transform) or Edit>Free Transform Path, I will rotate this shape like this

I will repeat that step but for the other side (in order to create an arrow) and then I will apply this layer styles:


Then I will duplicate it and I will create another similar arrow for right side.
Here is my final result for “Featured Area”

Step4 – Creating the content area

This one is quite simple to create. All you have to do is to add some text and images. Here is my final output:

Step5 – Creating the footer

With rectangle tool I will create this shape:

The with “Type Tool” I will add some text

Then with rectangle tool I will create this shapes:

Then for each of this shape I will apply this layer styles:


My output:

The only thing which needs to be created here is a call to action button (submit button for Newsletter Form).
For that I will select “Rounded Rectangle Tool” with a radios of 12px and I will create this shape

Then I will apply this layer styles:



Then with “Type Tool” I will add some text.
Here is my result:

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.

Portfolio PSD Layout Tutorial #2

Want to Download the Source File? (CSS/XHTML included)

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.

Well this psd layout is ready now. Next we will need to code it. Stay tuned, because we will code each and every PSD posted on this website!

  • http://www.net-kit.com/photoshop-layout-tutorials-mar-2010/ March’s Fresh Photoshop Web Layout Tutorials

    [...] 22. Portfolio web layout #2 in Photoshop [...]

  • keletso

    thanx alot for the tutorial, can’t wait for the tutorial on coding the design.

  • keletso

    thanx alot for the tutorial, can’t wait for the tutorial on coding the design.

  • http://www.thewebtuts.com The Web Tuts

    Tutorial added to the web tuts

  • http://www.thewebtuts.com The Web Tuts

    Tutorial added to the web tuts

  • rakay

    Thanks! realy nice tutorial is the Coding for this design online already?

  • rakay

    Thanks! realy nice tutorial is the Coding for this design online already?

  • admin

    @rakay. The tutorial on how to code this psd in HTML it’s not yet online. Currently we are try create more photoshop tutorials and some cool graphic elements on our sister website : TrendyPacks.com. Once we will have a good amount of photoshop tutorials we will create a another section on this website – and we will publish the tutorials on how to slice and code each psd template created. Unfortunately I can’t provide a specific time frame, but we hope that in approx 3 – 4 months we will start creating this kind of tutorials.

  • admin

    @rakay. The tutorial on how to code this psd in HTML it’s not yet online. Currently we are try create more photoshop tutorials and some cool graphic elements on our sister website : TrendyPacks.com. Once we will have a good amount of photoshop tutorials we will create a another section on this website – and we will publish the tutorials on how to slice and code each psd template created. Unfortunately I can’t provide a specific time frame, but we hope that in approx 3 – 4 months we will start creating this kind of tutorials.

  • http://trendytuts.com/psd-to-html-tutorials/psd-to-html-how-to-code-portfolio-layout-2.html [PSD to HTML] How to code Portfolio Layout #2 « TrendyTuts – Premium Photoshop Tutorials

    [...] Hello. In this tutorial I will try to explain how I have coded from PSD to HTML Portfolio Layout #2 [...]

blog comments powered by Disqus