Portfolio Layout #4

Posted on April 20th, 2008.

16 Votes, Rating: 4.44

 Loading ...

Learn how to create a sleek unique looking portfolio web layout.

Create a new document 900×800, fill your background layer with a linear gradient using the colors #1f1f1f & #000000. Create a new layer above your background layer and label it “pattern” Create a new document 4×4pixels with a transparent background. Select the pencil tool with a 1pixel brush size. Zoom in 1600% and create these markings.

Now goto “edit > define pattern” save your pattern and return back to your orginal canvas. Select the fill tool, then at the top change from “forground” to “pattern”, select your pattern in the box next to this option. Fill your “pattern” layer with your pattern.

Now select the rectangle marquee tool and draw a rectangle the whole length of the canvas but only about 70 or so pixels wide. Fill with a linear gradient using light grey. Add this drop shadow.

Now over the top of this rectangle create another smaller rectangle using the colors #fe1176 & #ff056c and the linear gradient tool. Also add your portfolio text.

Now select the rounded rectangle tool, at the top of the canvas create a small naviagtion bar, add these layer styles to your naviagtion.

You should have something like this.

Now using the rectangle and circle marquee tools and the layer mask tool add two highlights over the naviagtion. Would also be a good time to add our naviagtion text.

Now select the rounded rectangle tool and create a box under your navigation box, add the same layers styles as your navigation.

Now add your content box title. The colors i used were white, #8fc101 and #ff066d.

Now duplicate the pink and green text, right click the duplicated layer and goto “rasterize”. Drag your duplicated layer underneath your orginal layer then goto “edit > transform > flip vertically”. Place the text underneath so it resembles a reflection. Add a layer mask and drag a linear gradient over the top.

Now add your content box content.

Repeat the above steps for every other content box you create.

You should have something similar to this.

You may download this layout as a “PSD” or “FULL CSS TEMPLATE” by using the buttons at the top of this page.

Tags: layout, portfolio

18 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 Lol ~ Apr 22, 2008 at 5:59 pm

  Lol the side bar says ‘Carenter’ instead of ‘Carpenter’

• 2 ADMIN ~ Apr 22, 2008 at 6:10 pm

  haha well spotted

• 3 Bart a.k.a. O2TX ~ Apr 23, 2008 at 8:29 am

  Nice tut thanks! But how do edited this online / how do you use it? Thanks for the andswer in advanced!

  Grtz

• 4 ADMIN ~ Apr 23, 2008 at 4:29 pm

  well you can download the CSS template, just click “download css” button at the top, OR download PSD if you want to code it yourself

• 5 Bart a.k.a. O2TX ~ Apr 23, 2008 at 9:04 pm

  Thanks for the replie! But is there a tutorial for a program to learn it? thanks agian for your andswer!

  Grtz

• 6 ADMIN ~ Apr 24, 2008 at 3:10 pm

  well all’s you need to know is CSS and html, learn those 1st and your onto a winner. the program id recommend is dreamweaver. but you’l need some coding knowledge to code the layout. there is a tutorial on my site using my car layout as an example check the “CSS/HTML” category

• 7 Abid ~ Apr 24, 2008 at 3:50 pm

  WOW thanks

• 8 Bart a.k.a. O2TX ~ Apr 24, 2008 at 5:17 pm

  Thanks agian! I will give it a go!

  Grtz

• 9 mark ~ Apr 27, 2008 at 4:23 pm

  great tutorial. thanks.

• 10 chricke ~ May 7, 2008 at 5:48 am

  What’s the name of FONT?

• 11 ADMIN ~ May 7, 2008 at 4:07 pm

  “shoom vertical”

  its included in the PSD

• 12 chricke ~ May 8, 2008 at 7:53 am

  I know. But I dont want to bought it. Cause I’m not in trust with buying things on the web. Sorry.

  But really nice and good tutorials over all.

• 13 ADMIN ~ May 8, 2008 at 3:11 pm

  well i can assure you no information is collected of you and all payments are dealth throu paypal.

• 14 Shaibani ~ May 11, 2008 at 11:59 am

  Hey,

  Nice tutorial!!! REALLY NICE!!! But what font did you use for the nav???

• 15 aziz ~ May 15, 2008 at 2:42 pm

  hello
  i need some one do to me web site Design for me
  thanks

• 16 Zargam ~ May 29, 2008 at 8:06 am

  Well…That was CooL…n does it fall under the web 2.0 design categoryy???

• 17 Vegas Underground ~ Jun 2, 2008 at 8:29 am

  I tried this out and added my own tweaks to the layout, thanks for the inspiration, I had a pretty nasty case of creative block! Look for a preview on my deviant art page later.

• 18 Vegas Underground ~ Jun 3, 2008 at 5:21 am

  Ive managed to create something of this! Such a fantastic tutorial, really helped me break free from my creative block! My version of this tutorial can be seen here, thanks so much!!!

  Link below

  http://vegas-underground.deviantart.com/art/Portfolio-Layout-Updated-87442155