Design a Professional Portfolio Web Layout
Design a Super Clean Blue Portfolio Website
Members Area Tutorial: Design a Complete Ecommerce Website (Part 2)Have every post delivered to your inbox and get access to hundreds of useful design freebies.
PSDFan Extra
Final Image
As always, this is the final image that we’ll be creating:
If you want access to the downloadable .PSD file for this, and every other tutorial at PSDFAN, then join our members area for just $9 per month.
Step 1
Create a new document (900X900px).
Create a new layer called ‘orange header’. Make a selection that’s 900X450px and fill it with an orange gradient:
Step 2
With your header selection in place create a new layer called ‘header clouds’. Go to filter>render>clouds to fill your header area with clouds. Then change your layer mode to ‘color dodge’ and reduce your opacity to 10%.
Step 3
Now download this great texture set from PSDFAN:
Paste one of the textures into your header selection. Call this layer ‘header texture’.
Then reduce this layer’s opacity to 20% and change the layer’s blend mode to ‘overlay’.
Step 4
Now use your radial gradient tool to create a white to transparent radial gradient in the right area of your header.
Then reduce the opacity of this layer to 20% and the layer blend mode to: ‘color dodge’.
Step 5
Create a new layer called ‘lighting 1′. Use your lasso tool to create a triangular shard like selection in your header. Fill this selection with a white to transparent gradient.
Then reduce the opacity of this layer to 5% and the layer blend mode to: ‘color dodge’.
Step 6
Repeat this technique to create a collection of light shards in your header.
Step 7
Create a new layer called ‘menu’. Create a 60px high selection at the top of your canvas. Fill it with black, and reduce the opacity of this layer to 40%.
Then, to create a 1px white line under your menu apply a drop shadow (settings below):
Step 8
Add some menu text, as well as some 1px dividers between the menu items.
Step 9
Download this Macbook Pro vector set:
Paste in your Macbook Pro vector, and position it the right half of your header.
Then apply the following layer blending options to your Macbook Pro layer, including a color overlay, in order to make the laptop blend better with it’s background:
Step 10
Now create a new layer called ‘macbook shadow’. Create an oval selection beneath your Macbook Pro and fill it with black. Then apply a gaussian blur to your shape. This should give the impression of your laptop casting a downward shadow.
Step 11
Write out some large header text (I used the free font Museo).
Then apply the blending options shown below:
Step 12
Add some more text to your header, this time using Arial as your font, and select a color that is a darker version of your header background color.
Step 13
Now work on creating a form in your header section. Create a rounded rectangle shape for your form input (radius 10px), and apply the blending options shown below. This should make your form look embedded in your header background.
Step 14
Now work on creating a form in your header section. Create a rounded rectangle shape for your form input (radius 10px), and apply the blending options shown below. This should make your form look embedded in your header background.
Step 15
Now create a button for your form:
Step 16
Add some text for your form elements:
Step 17
Add text to the white area beneath your header, I’ve just used filler text/images as an example:
Step 18
Create a new layer called ‘footer’. Create a selection at the bottom of your canvas and fill it with light gray.
Step 19
Create a new layer and create a circle in the bottom middle of your canvas. Fill it with the same light gray color as your ‘footer’ layer. Then merge this layer down with your ‘footer’ layer. Apply a gradient overlay (settings below):
Step 20
To finish up, add some text to your footer, adding a subtle drop shadow:
And We’re Done!
I really hope that you enjoyed this tutorial and would love to hear your feedback! (Click on the image below to view the full-sized image):
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.
25 Comments:
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.
you design professional web layout and also giving tips for beginners in this whole tutorial.
The design is easy on the eye, all the important elements are there, yet you made it easy to follow, Thanks Tom
Great tutorial, really nice clean design. Always find this hard to achieve when using such a bold, vibrant colour.
Thanks.
Nice Design Layout – I loved this.
Thanks so much.
nice tut tom……
Thanks a lot guys! I agree that a colorful layout can be difficult to keep clean, but hopefully this should give some ideas of how to achieve the bold, clean look.
I like this design, but always think how converta design like this to html correctly
wow!! amazing tutorial!!! Thanks a lot ..
Best regards
Nice tutorial Tom, you need to code this one!
this is an ugly template, looks rather like a wp-theme than a serious portfolio; absolutely mismatched the color-scheme;
regards
good looking results, nice write up!
Thanks for the tutorial, the end result is very nice!
Nice design but i don´t see it fit for a protfolio.
Why?
- too chaotic
- wrong color-sheme
- nothing creative/unique, looks like the 0815 portfolio and therefore it´s no good for a “personal showing off”
Don´t get me wrong, you are doing a great job on the tutorials, those are just my 2cent.
regards,
Admin – Webcodez.net
I actually appreciate your constructive criticism. I’ll bear your feedback in mind for my next web design tutorial!
Thanks
Nice Work, But you need to code the colour for gradient
I am not in a position to be constructive but I have to agree with “Webcodez”. There is nothing unique about it, I have seen similar design’s so many times. I did however pick up some nice tips, so thanks for that!
Nice Work
Nice work, perhaps you could make a feed url for your blog
Thank u for posting.
nice nice nice
Why would anyone come to a step-by-step tutorial and expect the result to look original? This is a nice, clean layout, explained in simple steps. If you want a portfolio that stands out, then take inspiration from tutorials like these and develop your own original style and layout.
The colors used work nicely together from a technical standpoint, so ”mismatched / bad color scheme” is completely subjective and non-constructive feedback. Shades and contrast, people. The fact that you don’t like the color orange doesn’t make it a bad design.
My main concern is that the selection of textures seems a bit random (except for the “triangular shards,” which I can see as potential spotlights on various works within the portfolio). But they are subtle and blended enough that it isn’t a huge issue. Especially for an open ended tutorial like this. Anyway, well done.
You are amazing <3
Design Bold and Vibrant Portfolio is important matter for both are. I like it, its work are very nice.
Thnank you for sharing with us