Jul 13

Design a Professional Portfolio Web Layout

Tue, 07/13/2010 - 20:30 — julie

psdfanmembersbut Design a Professional Portfolio Web Layout

Final Image

As always, this is the final image that we’ll be creating:

proport14 Design a Professional Portfolio Web Layout

Step 1

Create a new document (1000X900px) and fill your canvas with dddad6:

proport1 Design a Professional Portfolio Web Layout

Step 2

Now create a new layer called ‘top gradient’. Use your linear gradient tool to create a gradient at the top of your canvas ranging from b1ada9 to transparent. This should give a little extra shadow to your header.

proport2 Design a Professional Portfolio Web Layout

Step 3

Create a new layer called ‘white area’. Create a large white rectangle in the center of your canvas. This is where your content will be placed later:

proport3 Design a Professional Portfolio Web Layout

Step 4

Now use your rounded rectangle (10px radius) and create a rounded rectangle at the bottom of your canvas. This should result in having a white content area that is straight edged at the top, and rounded at the bottom:

proport4 Design a Professional Portfolio Web Layout

Step 5

Now you want to add a highlight to the area where your logo will be. Create a layer BENEATH your white content area layers, called ‘radial gradient’. Drag out a radial gradient (ranging from white to transparent) in the top left of your canvas.

Then change this layer’s blending mode to ‘overlay’ and reduce it’s opacity to 40%. This should give a subtle highlight lighting effect in your header:

proport5 Design a Professional Portfolio Web Layout

Step 6

Now we want to add some tabs for our menu. Use your rectangular marquee tool to create a white tab just above the top left of your white content area. Then next to this create 3 dark gray tabs (ranging from 171717 to 454444). The white tab will be your active menu tab, and the darker tabs the rest of your menu:

proport6 Design a Professional Portfolio Web Layout

Step 7

Now create your logo. I used the font Chunkfive, 36pt, -50 kerning for my logo text, and downloaded this great free icon for the logo icon.

proport7 Design a Professional Portfolio Web Layout

Step 8

Now in the top-right of your canvas type out ‘RSS Feed’ and ‘Twitter’ using Arial, 12pt, -50 kerning. Then paste in these two great free icons:

RSS Icon

Twitter

proport8 Design a Professional Portfolio Web Layout

Step 9

Now using Arial, 12pt, -50 kerning, type out some text over your menu text:

proport9 Design a Professional Portfolio Web Layout

Step 10

Type out some headings in your main content area using the font Chunkfive.

Add in these great free icons:

Featured Client Icon

Blogging Icon

proport10 Design a Professional Portfolio Web Layout

Step 11

Use Arial, 10pt, ‘None’ Styling as vertical type in order to create a subtle divider between the two columns of your content area.

Then paste in an image of your featured client’s website.

In this case I went with a screenshot of our upcoming network FanExtra.

Be sure to check out the network page today if you’d like more information.

proport11 Design a Professional Portfolio Web Layout

Step 12

Now type out some information below your featured client image. I used Arial 18pt for the header, and Arial 12pt for the main info text:

proport12 Design a Professional Portfolio Web Layout

Step 13

Add some more text to your sidebar, and create a new heading (using Chunkfive) called ‘Our Services’. I used the free icon: Services Icon.

proport13 Design a Professional Portfolio Web Layout

Step 14

Now repeat your logo design, but in the footer of your website. Reduce the logo’s opacity to 25%. This should give it a nice watermark effect.

The using Arial, 12pt, -50 kerning, 6f6f6f repeat your menu links in the footer, and add a copyright notice:

proport14 Design a Professional Portfolio Web Layout

And We’re Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome:

proport14 Design a Professional Portfolio Web Layout

psdfanmembersbut Design a Professional Portfolio Web Layout

 Design a Professional Portfolio Web Layout

Copyright 2009. E-mail Me
Auto Spare Parts