Portfolio Layout #5

Posted on June 10th, 2008.

27 Votes, Rating: 4.63

 Loading ...

Learn how to create a portfolio layout with a difference.

Create a new document 850 x 800, create your own wood texture or use a premade one and add that as your background, im going to use a premade one (included in PSD download).

Select the rectangular marquee tool and create a rectangle the width of your canvas, leaving about 10 or 15 pixels from the top.

Add these layer styles to your rectangle.

You should have something like this.

Create another rectangle on a new layer the same width as the last one but not has high. Fill with the color #199ad1.

Add your website title, then add a shine on the header using the elliptical marquee tool set layer opacity of your shine to 7%.

The layer styles for the website text are.

Select the rounded rectangle tool and create a small rectangle underneath your website header.

Fill with the color black then add these layer styles.

Now add your navigation text and simple outer glow.

Now select the rectangular marquee tool and create a big white square like this.

With the lasso tool randomly cut off the edges to give the effect of ripped paper.

Do this for TWO rectangles, also rotate then squares slighly by press “ctrl + T”.

Create a third rectangle but dont cut around it. Add these layer styles.

Also add the above “drop shadow” to the other 2 peices of paper. Now add your content onto the main square.

Now go and find a picture of some stationary such as scissors, ruler, pencil etc.. (ive added some in the PSD), remove the background from the items and place around your main content area.

E-mail Del.icio.us Digg Reddit Technorati Furl Stumble Design Links

Tags: layout, portfolio

22 responses so far!

Note: We now use Gravatars here on HV-DESIGNS, they are little icons that appear next to your name on this site and on many others next to your comments. You can get a Free Gravatar account for free and any other site that supports it will show your avatar also!

• 1 Momo ~ Jun 10, 2008 at 6:14 pm

  

• 2 Rhys ~ Jun 10, 2008 at 7:13 pm

  damn nice =]

• 3 D. Carreira ~ Jun 11, 2008 at 7:32 am

  Great tutorial!

  Your tutorials are under any tipe of license?

  Or we can use it for any purposes (excepted selling the template)

  David Carreira

• 4 Dule ~ Jun 11, 2008 at 9:23 am

  This is awesome! I give you 10 outta 10!

• 5 ADMIN ~ Jun 11, 2008 at 4:41 pm

  This work is licenced under a Creative Commons Licence

  check the website footer

  thx for the comments

• 6 Tadd ~ Jun 12, 2008 at 1:20 pm

  Lovely. VERY nice. Funny thing .. I’m using this texture as my desktop wallpaper this very moment!

  I gave you a shout out on a previous tutorial .. I may do the same for this one also! Well done!

• 7 ADMIN ~ Jun 14, 2008 at 7:53 pm

  CSS template now added

• 8 D. Carreira ~ Jun 15, 2008 at 1:19 pm

  @ Admin:

  “- Attribution. You must give the original author credit.

  - Non-Commercial. You may not use this work for commercial purposes.

  - No Derivative Works. You may not alter, transform, or build upon this work.”

  If I’ll do a template based in this tutorial, the final result is not a 100% of your work, so I must do a copyright footer with your link, or can only do a reference to your tutorial (or site) in the about page?

  I’m not using any tutorial to do my work, but anyway, maybe a day I want to use one to get a great result.

  Hv-Designs, Great Tutorials!

  David Carreira

• 9 ADMIN ~ Jun 15, 2008 at 7:24 pm

  do a reference to my tutorial (or site) in the about page! as long as my link is somewhere on the site.

  

• 10 D. Carreira ~ Jun 15, 2008 at 9:31 pm

  @ Admin:

  Ok, continue with your great tutorials, the people thanks

  David Carreira

• 11 Waqas tasneem ~ Jun 17, 2008 at 6:19 pm

  Simply Aweosome.

• 12 Tutorial ~ Jun 17, 2008 at 6:30 pm

  Great tutorial, ive featured it onto my website

• 13 KSandra ~ Jun 19, 2008 at 3:24 am

  great tutorial, thank you very much!

• 14 Lauren ~ Jun 19, 2008 at 3:17 pm

  Thanks for this tutorial! It was really helpful. I am just starting out and it was really helpful for me!!

• 15 Derick ~ Jun 20, 2008 at 3:51 pm

  This is a great tutorial, but I had one problem,
  I could not find the wood texture.
  Where is it located?

  Thanks for your help

• 16 ADMIN ~ Jun 20, 2008 at 6:27 pm

  have you downloaded the PSD?

• 17 Derick ~ Jun 25, 2008 at 8:45 pm

  Oh I see thanks!

• 18 sumit ~ Jul 3, 2008 at 4:16 am

  Just perfect

• 19 London Escorts ~ Jul 6, 2008 at 11:33 am

  Very Nice

• 20 Sraddha ~ Jul 10, 2008 at 1:30 pm

  Good work, keep it up…
  thnx for this amazing tutorial

• 21 cicekci ~ Jul 26, 2008 at 7:15 pm

  internet üzerinden çiçek sipari?i çiçekçi çiçekçiler.

• 22 chuka ~ Aug 27, 2008 at 11:39 am

  killer font…what’s the name?