PSDFan Extra

Design a Professional Portfolio Web Layout

Final Image

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

Step 1

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

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.

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:

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:

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:

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:

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.

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

Step 9

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

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

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.

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:

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.

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:

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:

Download Source File for this Tutorial


About the Author:

Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

Leave a comment

15 Comments:

  1. nitos says:

    awesome work! :D I really liked it!

  2. A clean simple design that works really well. I think that I will be taking note from more tutorials like this in the future. Just little hints and tips that I never thought of using before but now that will just add that little more to my own ideas.

  3. Tom says:

    Thanks guys!

    Nitos: Long time no see. Hope you’re well :)

  4. I spent ages trying trying to do this myself before finally opting for wordpress and a premium theme. Don’t think I have the patience for web design :)

    Danny

  5. Fatima says:

    Clean and great layout.

    Thanks

  6. vinoth says:

    awesome work…….
    its really interest to do!!!!!!11111

  7. yury says:

    great tutorial but can you also upload a source file, if possible of course, so I can follow you?

  8. balearic says:

    when your done putting this tutorial in photoshop how do you put it in your index file if your new using notepad and putting it in a web browser?

  9. Leroy says:

    Yes, Agree tutorial is nice and the hints are great reminders.
    However, you can’t put a picture up as a website now can you.. ;)
    As balearic said (paraphrase) now what ?

  10. mark says:

    This isn’t a website, it’s a picture. But, it’s still pretty easy to make this layout in CSS, and there are a lot of nice ideas here. Thanks

  11. thanks for a detailed pictures and info…

    Thanks & Regards,
    DesigningStudios.com

Leave a Comment:

Cancel reply

Related Posts

Your Design Work, But More Awesome:

Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.

JOIN OUR FANEXTRA COMMUNITY TODAY