PSDFan Extra

Create a Professional Portfolio Design in 17 Easy Steps

About this Tutorial

This tutorial teaches you how to create a professional looking portfolio design using very basic techniques. The majority of online portfolio’s appear amateur, yet it really isn’t very difficult to produce a simple design, very quickly that can portray a professional image online.

This tutorial hopefully shows how a few simple techniques can bring great results.

Final Image

This is the final image that we’ll be creating:

Images Used

The following images will be used in this tutorial:

Torn Cardboard

Museo Free Font

Step 1

Open up a new document (20X900px). Select your entire canvas (option+a) and fill it with a light cream color (F6F3EA). Then use your rectangular marquee selection tool to create a thin, slightly darker line down the right side of your canvas. This bar should be EFEBE1 in color. Then go to edit>define pattern and define your pattern as ‘creamstripespattern’.

Step 2

Now create a new document (960X900px). Create a new layer called ‘background’ and fill your entire canvas with any color you like. Then go to blending options for this layer and apply a pattern overlay effect, selecting your newly created ‘creamstripespattern’.

Step 3

Now paste in a photo of some ripped cardboard. Position the cardboard in the top of your canvas and call this layer ‘header’. I cut out the photo from it’s original white background using the magic wand tool.

Step 4

Now go to image>adjustments>desaturate to grayscale your cardboard layer.

Step 5

Now go to blending options for this layer and apply a gradient overlay, ranging between very dark grays. Then reduce this overlay’s opacity to 90% to allow your cardboard to show through a little more. Then set your overlay’s blend mode to ‘multiply’.

Step 6

Now duplicate your header layer and call the duplicate ‘footer’. Go to edit>transform>flip vertical, and then move the flipped cardboard down to the bottom of your canvas. I chose to crop away the bottom of my canvas, making the overall layout less tall. Finally, to make my footer area thinner than my header, I go to edit>transform>scale and then reduce the height of my footer area.

Step 7

Now grab a radial gradient, ranging from white to transparent. Then create a new top layer called ‘header gradient’. Pull out your gradient from the top left of your dark header area.

Step 8

Now reduce your gradient layer’s opacity to 15%. Also part of the gradient is jutting out into your cream area, which you don’t want. Therefore select your header area and click beneath your header area using your magic wand tool (to select the cream area beneath your header). Then return to your gradient layer and hit delete.

This should give you a subtle highlighted effect in the top left part of your header.

Step 9

Now repeat the same step but in the center of your cream background area. To do this create a layer called ‘background gradient’ below your header/footer layers but above your main cream background layer. Then create a much larger radial white-transparent gradient ranging from the center of your canvas outwards. To measure exactly from the center go to view>rulers to turn on your rulers. To make the effect more subtle reduce this layer’s opacity to around 30%.


Step 10

Now type out some text for your logo, using the free font Museo. Apply the blending options shown below.

Step 11

Now to make a sleek logo icon. Start by making a rounded rectangle. Now create a smaller rounded rectangle above your main shape. Option+click on your layer in your layers palette to select all of your smaller shape. Then go to select>modify>contract and contract your selection by 4px. Then hit delete. This should leave you with a briefcase shape created by your two shapes.

Finally, right click on your logo font layer and click ‘copy layer styles’. Then right click on your icon layer and click ‘paste layer styles’.

Step 12

Now add some menu text. I went with Arial, at -50 kerning.

Step 13

Now type out some full stop marks multiple times to create dividers between your menu links. Once you’ve typed a line of dots, go to edit>transform>rotate 90 clockwise. Then duplicate this layer each time you want another menu divider.

Step 14

Add some text to your footer.

Step 15

Paste in a thumbnail of a website that you want to display in your portfolio. Then go to edit>transform>scale and resize it to fit into your cream area. Then go to blending options and apply a stroke effect.

Step 16

Add some text to the left of your thumbnail. Be sure to give plenty of line padding, and keep your text nice and dark to give contrast against your light background.

Step 17

Now create a button using your rounded rectangle shape tool. Then apply the blending options shown below:

And We’re Done!

I really hope that you enjoyed this tutorial, and as always would love to hear your comments.

You can view the full sized version by clicking on the image below:

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

125 Comments:

  1. Salmen says:

    man i have nothink to say….good job

  2. Tom says:

    Thanks a lot guys. This tut is very simple, but that’s the point. I wanted to show how just about anyone can come up with a nice looking design, without spending too much effort.

  3. Mike Smith says:

    Nice tutorial! The outcome was great too. You should offer up the PSD and/or do a tutorial on the xhtml/css coding for the layout. Would do really well I think.

    Mike

  4. Pam says:

    What version of PS are you using? I was trying this out and when I got to the layers style – pattern overlay part the window looked entirely different ( I tried it in both CS3 and PS CS2) and I could not find either phrase in the Photoshop help screen! It’s very odd. (oh and small thing: in your intro it should read portfolios, not portfolio’s FYI).
    Any help or suggestions would be appreciated.

    • Tom says:

      Hi Pam, I’m using version CS until I can afford to upgrade. You should still be able to apply a basic pattern overlay in CS2 or 3 though, just in your blending options window. Hope this helps…

  5. hey, great tutorial. It looks really nice. I like the bright spot in the background.

  6. Pam says:

    Hi, Tom,
    Yes, Blending Options window, that’s where I am at…only I’m getting weird bubbles on the overlay not lines, and it looks very odd… I can’t seem to find a way to change the bubbles. I’m sure it is in a window somewhere only I can’t find it. The Layer Style Blending Options window looks nothing like yours… totally different buttons and options in it. Got no help with the Adobe help menu either. I’ve not tried using this feature but one would think they would say something about it in the help menu. I have no manual since I believe the online help is all they offer now. Will check a few of my Photoshop books this weekend to see what I can find out. No time to mess with it today as I have projects to crank out.
    thanks,
    Pam

    • Tom says:

      Hi Pam. The bubbles pattern is the default pattern overlay. All you need to do is change this pattern to your saved pattern of choice. Try clicking on the thumbnail bubbles pattern in your blending options menu.

  7. Ehab says:

    Great stuff ! Now a second tutorial for the slicing and coding would complete it :D

  8. mike says:

    what colors did you use for the gradient in step 5?

  9. Tom says:

    Hi Mike. I don’t actually have the exact colors to hand, but basically just use very dark grays and it should look ok.

  10. titofh says:

    easy and cool job……………

  11. RM Cotton says:

    Thanks for sharing! I love the simplicity of this mainpage design. I guess I will be redesigning my site – AGAIN!! :) A designer’s work is never done!
    HAppy Day and Thank you!
    -Rachel

  12. insic says:

    wow! i was amazed.

  13. Jase says:

    Not complex. Good tutorial for a simple site with only a couple pages.

  14. vicky says:

    nice tutorial, thanks buddy

  15. Kim says:

    Good Tutorial, we used it for an artist website and we might take it online!

  16. Byila says:

    thanks, nice tutorial…

  17. Young says:

    can you tell me how to paste photo of cardboard in step 3. I’m a benginner to photoshop :-(

  18. CgBaran Tuts says:

    Great tutorial i love the design thanks

  19. jairaj says:

    Great tutorial And very inspiring And also useful

  20. great tut, very nice design

  21. [...] Create a Professional Portfolio Design [...]

  22. Samuel says:

    Hey man!! what a great tutorial, I love it! and Museo is simply amazing, recently I published a web design tutorial on my blog using Museo.. in spanish :D

    Really nice work.

  23. excellent job…help me a lot

  24. Great tutorial . Useful for all new persons as well as the web developers ..

  25. din says:

    clean dsign.nice

  26. hans says:

    what agreat job hope you send me moor on my email because I’m trying to do professional design , would you please .
    regards

  27. Fredde says:

    Hi!
    Wonder if you can use this on a website? mayby an stupid quistion but…..

  28. Dwayne says:

    This is really cool. Is it possible to put something like this on joomla?

  29. Paul says:

    Great job! Your design is really nice. Also, thanks for the tutorial!

    I’m looking forward to see more posts like this one from you!

  30. Rascal says:

    For me, as a beginner, the tutorial is very useful, but the question is how the layout can be maked-up?

  31. jose a says:

    Fantastic!
    I’m working on my portfolio, I would like to criticize to improve.

    http://www.joseacreative.com/

  32. Abi says:

    Hi Tom, I landed here from your New Year Post, and may I know do you also design for other people too? If you do, how much do you charge in average?
    Regards

  33. Amit says:

    Thanx…. buddy…It helps me a lot…….

  34. It is a really great tutorial…well explained and very informative, Excellent job!!!!

  35. this information most important for me.
    thanks…

  36. student aid says:

    These are very good steps to create professional portfolio.

  37. Interesting tutorial. The content is amazing and easy to understand. Good post!!!

  38. Francois says:

    Thanx for this great tuto !
    Much appreciated
    Best Regards

  39. Modern Lamp says:

    Thanks for great Tutorial

  40. Great tutorial as always Tom, was exceptionally easy to follow and the finished design looks awesome. Thanks

  41. Very nice post. It’s great. Thumbs up :)

  42. sunil says:

    nice job………………

  43. Daniel says:

    Easy and interesting.

  44. Great tutorial and very easy to follow. I really like how you achieved the end result without a lot of effort. Thanks for sharing.

  45. subodh says:

    good job……. keep it…

  46. Texture plus says:

    Thanks for this great tutorial! i will do practict about! And if some one need back ground for this kind desing i have got enought..!

  47. Great posting ! Thanks for sharing !

  48. hali yikama says:

    Thanx for this great tuto !
    Much appreciated
    Best Regards hali yikama

  49. Joana Watson says:

    Thanks for this nice guide.Having a good portfolio is one of an important thing for a designer and you have posted a nice guide.It really helps.

  50. This tutorial will be helpful for those are beginner in the field of website design.

  51. Great Professional Portfolio Design in 17 Easy Steps. Really great!

  52. Really nice article and step by step guide. I like this.

  53. Nice Design. Love the use of the cardboard. Keep up the good work.

  54. mik says:

    very nice tutorial and easy to underand, but I have a question! if the monitor is more than 24 inches what will happend to the beckground? will it repeat or not or will it expand. And can you please make a tutorial on how to cut and code as well please.

    Thank you.

  55. very usefull thank you

  56. Thanks for this nice guide.Having a good portfolio is one of an important thing for a designer and you have posted a nice guide.It really helps.

  57. Anshuman says:

    hey nice job. it helped me in doing my final year portfolio in fashion design
    thnx

  58. PR company says:

    having a good portfolio is an important thing for a designer and you have posted a nice guide which is really helpful.
    I love this tutorial, nice and easy to follow. thanks for sharing it, cheers mate.

  59. Voeding says:

    Wow, you’re create a great post plus with complete portfolio tutorial..
    i need to bookmark this post because i do believe someday i will need portfolio tutorial..
    Thanks..

  60. games ps3 says:

    thanks admin. great post.

  61. Louis says:

    nice tutorial, but if we move Angle other than 120 then we can change design :)

  62. nice tutorial, but if we move Angle other than 120 then we can change design..

  63. bassam samy says:

    great post thanks i loved this site

  64. water cooler says:

    Professional Portfolio Design are nice!! Thanks. Just the info I needed. :)

  65. Ashish says:

    Hi,
    Really nice and helpful tutorial. Would like to know does this tutorial has the second part in which we can learn the slicing and XHTML/CSS conversion tutorial…

    If yes then please provide the link to the same…

    Cheers
    Ashish

  66. Mistee says:

    This is lovely and looks so simple! However, I was wondering if there is a tutorial somewhere on how to convert a Photoshop layout into an HTML layout for the web? That is what I would really love to know, and see a tutorial on. =) Thank you for your hard work!

  67. Ravi says:

    I just loved and enjoyed your work.
    GUD WORK MAN

  68. evans says:

    it will be nice to have another tutorial explaining how to convert this PSD to html/css. but i love it

  69. mitch says:

    thx, was good

  70. logo design says:

    Thanks…Very good info, I feel a lot more people need to read this.

  71. Shahzaib says:

    very good tutorial but only helpful for those who create full website in photoshop

  72. Outsource to Bangladesh says:

    Great job! wonderful tutorial. Thanks a lot for sharing.

  73. johnson says:

    good tutorial, but you should add more designs in this tutorial

  74. MIKE says:

    u taught me more about building web pages in PSD more than my instructor @ school thank you.

  75. wart removal says:

    Cool designs and really awesome ones that are easy to do. Am very grateful to know this. Would like to try this now.

  76. Great to know the — in depth from this blog.This will really help for my forward steps to be taken.

  77. ilaclama says:

    thanks for great efect

  78. parca kontor says:

    thanks very much for your great :)

  79. parca kontor says:

    great really very nice job

  80. Jerred says:

    this is amazing! so simple, and so effective, great job!

  81. sara says:

    hi. i didn’t know any thing about websites and how they born in to their life.. :D
    i’m glad to see this tutorials anddd now i’m interested.
    i really like to know how we can convert this PSD to html?
    maybe you can tell us here how we can do that, please?
    thanks for your help

  82. jinny says:

    Great tips I am learning how to build a site and this tutorial is really awesome thanks

  83. gunluk kiralik ev This is lovely and looks so simple! However, I was wondering if there is a tutorial somewhere on how to convert a Photoshop layout into an HTML layout for the web? That is what I would really love to know, and see a tutorial on. =) Thank you for your hard work!thanks

  84. bushra says:

    very nice tutorial

  85. Rlseu says:

    thanks nice site.

  86. aluminyum says:

    this is amazing! so simple, and so effective, great job!aluminyum

  87. great post thanks i loved this site serdar

  88. gr8 tutorial..its will really helpful to my web designing campaign..loving it..thanks a lot..!

  89. Great tut. Well laid out and easy to follow. I like the use and simplification of the torn cardboard.

  90. Great Tutorial for all those who needs to have a profession portfolio.

  91. Great tutorial! Just what I was after – thanks for sharing.

  92. Is a great design Thank for the tutorial.

  93. Jeremy says:

    GOOD! That’s excellent! Thanks a lot!

  94. Jon Dev says:

    Very helpful tutorial for graphic designer. Thanks for share to everyone

  95. David says:

    Very nice tutorial.Nice one its relay helpful. Thanks for share

  96. Md Arif says:

    Nice one thanks for posting.

  97. Tyrone says:

    Great tutorial! I’ve been looking for one like this for some time. I can’t wait to code it next. My goal is to take the psd I created for my site to html/css then to wordpress.

    Thanks again

  98. Essay Help says:

    Good post. Thanks for sharing this useful information with us.

  99. tayyab sarwar says:

    very helpful tutorial i really impressed

  100. I’m going to work on a a bit of CSS and HTML to compliment this. I’ll send it your way through your contact area if you’d like to use it! Great tutorial. I’ll be linking to it shortly

  101. shakil says:

    nice teaching…its very helpful….thanks

  102. Quite brilliant tutorial, excellent teaching method. thanks…

  103. Nitai Roy says:

    I love Photoshop and web design. You made both combination and superb theme. I really like it. Thanks a lot for such tutorial.

    I hope other will get the same benefit like I’ve got.

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