Total Followers 132,503
Hello there everybody and welcome to another PSD web design tutorial here at 1stwebdesigner! In this tutorial you will learn how to create a Simple Clean Portfolio layout in Photoshop. A few techniques discussed in this tutorial will include the use of proper spacing, typography and colors.
We’ll be using really light color scheme and design is meant to be really minimal for portfolio type of website.
Let’s get started – I hope you will make out together with me until successful finish together !
By the way in few days you’ll see also PSD TO HTML tutorial to this design – so keep up, design this template so you can immediately code it into live design!!
*Updated – here is Detailed PSD to HTML tutorial
Resources you will need to complete this tutorial:
Here is what we will making, click on image for full preview:
Before we get started download first 960grid system for easy Guideline creation.
Open 960_download\templates\photoshop\960_grid_12_col.psd
We also need to make sure that our Rulers and Guides are viewed, do that by pressing
CTRL + SHIFT + C to change the canvas size.
Rename the layer1 folder to Header and rename layer 1 to header_bg (put everything in separate folder like Header, Navigation, Footer to help to be organized better).
Create new guideline go to View > New Guide and set the position to 150 px, orientation to horizontal.
Select Rectangular Marquee Tool(M), make a selection as shown in the screenshot below and fill it with any color.
Add this Blending Option:
Gradient Overlay
Create a folder inside header folder and name it to Logo, put all your logo related layers there.
Create another guideline 50px from the top.
Now Select Text Tool(T) and put up your Site Name and Slogan.
Add this Blending Option:
Drop Shadow
Gradient Overlay
You must have something like this in the result:
Create a folder and name it to Navigation, put all your navigation related layers there.
Create another guideline 5px from the top.
Select Text Tool(T):
Let’s create a hover/active state to our navigation.
Select Pen Tool(P). Create an arrow-head shape and place it as shown in the screenshot below.
We’re finished with our header section, so now let’s proceed with featured section.
Create a folder and name it to Featured_Section, put all your Featured related layers there.
Select Rectangular Marquee Tool(M), make a selection as shown in the screenshot below and fill it with #cccdcd.
Add this Blending Option:
Stroke
Create another layer and name it to middle_light. Set the opacity to 50%.
Select Rectangular Marquee Tool(U). Make a selection as shown in the screenshot below:
Drag the gradient starting from the middle all the way to the right.
Select Text Tool(T), put up your site message.
Now Open up the Imac.psd file. Place it as shown in the screenshot below.
Below the Imac layer Create a new layer and name it Shadow.
Select Elliptical Marquee Tool(U). Make a selection as shown in the screen shot below and fill it with a color #000000.
Remember that while holding shift key you can create multiple selections.
Go to Filter > Blur > Gaussian Blur.
Set the layer opacity to 50%.
Create a folder and name it to buttons, put all your read more buttons related layers there.
Select Rounded Rectangle Tool(M), place it as shown in the screenshot below.
Add this Blending Option:
Gradient Overlay
Stroke
Select Text Tool(T) and add text to buttons.
Add this Blending Option:
Drop Shadow
Gradient Overlay
With the help of drop shadow and gradient overlay this effect will make our text look embedded.
Create a folder and name it to testimonials, put all your testimonials buttons related layers there.
Apply the same layer style as we did into our header and place Place it as shown in the screenshot.
Select Text Tool(T), add up your testimonials.
Create a folder inside testimonials folder and name it to hire_btn, put all your hire button related layers there.
Select Rounded Rectangle Tool(U), set the radius to 10px and color to #141a20. Place it as shown in the screenshot.
Add this Blending Option:
Drop Shadow
Ctrl + click to the layer to make a selection.
Go to Select > Modify > Contract. Set it to 3px.
Create another layer and name it to button , and fill it with any color.
Apply the same layer and text style as we did to our button in featured area.
Create a folder and name it to main_area, put all your main area related layers there.
What I Do
Create another folder inside main_area and name it to What I Do.
Now Open icons that you have downloaded and grab 3 icons that will fit to (What I Do, My Portfolio, I Socialize).
Select Text Tool(T):
My Portfolio
Create a folder and name it to my_portfolio, put all your portfolio related layers there.
Select Text Tool(T):
Apply this Blending Option to the image.
Stroke
I Socialize
Create a folder and name it to i_socialize, put all your I Socialize related layers there.
Open up social icons and place it as shown in the screen shot.
Select Text Tool(T):
Now were done in our main area lets proceed to footer.
Create a folder and name it to footer, put all your footer related layers there.
Go to View > New Guide. Set it to 965px Horizontal.
Repeat the step. Set it to 1158px Horizontal
Select Rectangular Marquee Tool(M), make a selection as shown in the screen shot and fill it with any color.
Add this Blending Option:
Gradient Overlay
Make a selection in to the remaining white space.
Add this Blending Option:
Inner Glow
Gradient Overlay
Stroke
Quick Links
Create another folder inside footer and name it to Quick Links.
Select Text Tool(T)
Latest From The Blog
Create another folder inside footer and name it to Latest_blog
Select Text Tool(T):
Contact Me
Create another folder inside footer and name it to Contact_me
Open up social media icons and grab an icon for email and rss.
Select Text Tool(T):
The last thing to do is add up your Copyright.
Select Text Tool(T). Arial 11pt
Finally were done! Hope you learn something on this tutorial and hope you like it. If you have
any question or tutorial request drop some comments below. Thanks!
By the way in few days you’ll see also PSD TO HTML tutorial to this design – so keep up, design this template so you can immediately code it into live design!!
*Updated – here is Detailed PSD to HTML tutorial
Get The Only Freelancer crash course you will ever need to read!
Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. Other than that he loves Coffee and his Girl.
Tuesday, May 1st, 2012 09:16
Though there was some difficulties, inconsistency, this is a great tutorial. Thanks
Tuesday, March 27th, 2012 07:33
Hello a small correction CTRL + SHIFT + C to change the canvas size. is changed to CTRL + ALt + C to change the canvas size. hope it helped….
Wednesday, February 22nd, 2012 16:24
I got the much needed info from this site. Thanks for the site holder :)
Thursday, December 15th, 2011 06:52
I would love to go through this tutorial but it appears that the icons are longer available. Can someone upload them somewhere or provide us with the complete psd file?
Friday, December 9th, 2011 16:29
STEP 5 … new guide ? Position px?
Select Rectangular Marquee Tool(M), make a selection as shown in the screenshot below and fill it with #cccdcd.
Tuesday, December 6th, 2011 08:39
Thanks, can i simply download this PSD for learning your slicing part tutorial.
As designing is not my job so i only want to learn slicing right now.
thankyou
Thursday, November 3rd, 2011 11:49
Thanks you very much. It’s really nice and It’s useful for me !
Saturday, October 29th, 2011 13:48
Ha nice tutorial. Its not CTRL + SHIFT + C to change the canvas it is CTRL+ ALT+C. Iam using cs4
Friday, July 1st, 2011 01:50
Great tutorial using a css framework. The design is very clean design
Thursday, March 24th, 2011 22:45
This is a great tutorial! It’s very easy to follow.
Tuesday, February 8th, 2011 01:40
Great tutorial thanks
Friday, January 28th, 2011 04:57
Very nice and easy to follow instructions. Gave me some nice inspiration. Thank you.
Thursday, January 20th, 2011 15:11
very nice neat and clean
Wednesday, January 19th, 2011 23:15
Ahmed CSS/HTML will be published sooner. Watch out :D
Wednesday, January 19th, 2011 23:14
Hello max HTML/CSS will be published soon. So watch out and please don’t forget to subscribe and share this article. Have a great day :D
Thursday, January 20th, 2011 01:10
you got it – we’ll have programming article to this layout in 2 days! :)
Wednesday, January 19th, 2011 15:09
clean design, can you post the steps of slicing and CSS/HTML it ?
Wednesday, January 19th, 2011 13:26
Thank you very much for this amazing tutorial!It inspires me ^^
Keep up the good work!
Wednesday, January 19th, 2011 15:21
Great! I hope the you’ll post a html/css coding of that! Is that in your plan?
Wednesday, January 19th, 2011 10:15
A lovely clean and modern design, i like it
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Wiehan Britz
Wednesday, January 19th, 2011 10:15
A lovely clean and modern design, i like it
Michael John O. Burns
Wednesday, January 19th, 2011 23:14
Hello max HTML/CSS will be published soon. So watch out and please don’t forget to subscribe and share this article. Have a great day :D
Michael John O. Burns
Wednesday, January 19th, 2011 23:15
Ahmed CSS/HTML will be published sooner. Watch out :D
Vivek
Thursday, January 20th, 2011 15:11
very nice neat and clean
Ruth Rusch
Friday, January 28th, 2011 04:57
Very nice and easy to follow instructions. Gave me some nice inspiration. Thank you.
Dainis Graveris
Thursday, January 20th, 2011 01:10
you got it – we’ll have programming article to this layout in 2 days! :)
Dainis Graveris
Thursday, January 20th, 2011 01:09
yes, tutorial is almost ready :)
Youyouk
Wednesday, January 19th, 2011 10:20
Very nice template :) thanks!
Max
Wednesday, January 19th, 2011 15:21
Great! I hope the you’ll post a html/css coding of that! Is that in your plan?
Yashodhan P Deshmukh
Wednesday, January 19th, 2011 17:15
very nice explanation ..
thanx…
Ahmed AG
Wednesday, January 19th, 2011 15:09
clean design, can you post the steps of slicing and CSS/HTML it ?
Ian
Wednesday, January 19th, 2011 13:26
Thank you very much for this amazing tutorial!It inspires me ^^
Keep up the good work!
Cgbaran
Tuesday, February 8th, 2011 01:40
Great tutorial thanks
Elaine
Tuesday, February 15th, 2011 23:28
Great tutorial, thanks for sharing.
Roberto
Thursday, December 15th, 2011 06:52
I would love to go through this tutorial but it appears that the icons are longer available. Can someone upload them somewhere or provide us with the complete psd file?
Anand
Wednesday, February 22nd, 2012 16:24
I got the much needed info from this site. Thanks for the site holder :)
Jason
Tuesday, March 27th, 2012 07:33
Hello a small correction CTRL + SHIFT + C to change the canvas size. is changed to CTRL + ALt + C to change the canvas size. hope it helped….
xuwel Khan
Tuesday, May 1st, 2012 09:16
Though there was some difficulties, inconsistency, this is a great tutorial. Thanks
Sergie
Friday, December 9th, 2011 16:29
STEP 5 … new guide ? Position px?
Select Rectangular Marquee Tool(M), make a selection as shown in the screenshot below and fill it with #cccdcd.
Glen
Tuesday, December 6th, 2011 08:39
Thanks, can i simply download this PSD for learning your slicing part tutorial.
As designing is not my job so i only want to learn slicing right now.
thankyou
Robby
Sunday, February 20th, 2011 07:06
I has try this tutorial it’s work… cool!
Brett Widmann
Thursday, March 24th, 2011 22:45
This is a great tutorial! It’s very easy to follow.
james Verado
Friday, July 1st, 2011 01:50
Great tutorial using a css framework. The design is very clean design
rao vat
Thursday, November 3rd, 2011 11:49
Thanks you very much. It’s really nice and It’s useful for me !
aravind
Saturday, October 29th, 2011 13:48
Ha nice tutorial. Its not CTRL + SHIFT + C to change the canvas it is CTRL+ ALT+C. Iam using cs4