Create a Clean Blue Portfolio Design in Photoshop
Have you ever wanted to create clean and nice portfolio design? In this tutorial I will show you how to design clean blue portfolio layout.
As I mentioned in my The Third Month of Blogging post this month I want to release my first photoshop tutorial. And this is it. I created it very easily but when I come to explaining phase it took some time to complete. I hope that you like it and you’ll learn something new doing this tutorial.
In this tutorial we’ll use Flavours Icon Set, Nevis typeface and Social Network Icon Pack.
Final Result
Step 1: Background
Let’s start by creating a new document in Photoshop – 1000×885 px, resolution 72 pixels/inch.
Then add guidelines View > New Guide… vertical guidelines at 50px, 950px and horizontal guidelines at 102px, 404px, 497px, 832px.
Now set the foreground color to #5398B8 and fill the document with this color (Alt + Backspace). Go to Filter > Noise > Add Noise and apply filter with parametars shown on the picture below.
Step 2: Header
As the portfolio logo and other icons I’ll use Flavours Icon Set released on Smashing Magazine. Download Nevis typeface it will be used for headlines.
Pick Tablet icon from Flavours Icon Set and place it as shown on the picture below. Then pick Nevis font and write something for example “Portfolio”. Then mark the text and change character options as shown on the picture.
Right click on Portfolio text layer and choose Blending Options. Then apply settings shown on the picture below.
Now place text 40 px above guideline (Shift+4 clicks up) you should have something like shown on the picture.
Create a new group Layer > New > Group… and call it navigation. Then choose 18pt size Myriad Pro (Condensed) font pick #2a2a2a as a color and create your portfolio navigation. For the “Home” choose white color #ffffff. Character options shown on the picture below.
Then duplicate navigation layer (Ctrl+J) and move it below original layer. Then reverse text colors, where was white (#ffffff) change to dark grey (#2a2a2a) and where was dark grey (#2a2a2a) change to white (#ffffff). After that move layer 1 px down and 1 px right. Then change opacity to 40% and will have something like shown on the picture below.
Now create new layer (Shift+Ctrl+N) and move it below text. Then pick Rounded Rectangle Tool set Radius to 5 px foreground color #487f99 and create button. Example shown on the picture.
Right click on created button layer or or (Layer > Layer Style > Blending Options) and choose Blending Options. Then apply shown settings.
Here is example shown on the picture how your navigation should look.
Then set foreground color to #487f99 and pick Pencil Tool. Set Brush to 1 px and create 40 px lenght vertical line. After that set foreground color to #a4bfcc and create same length line 1 px to right from the first one. Example shown on the picture below.
Step 3: Lines
Now create new group Layer > New > Group… and call it Lines. Now do the same actions as creating vertical line but this time create horizontal lines on horizontal guidelines. Example shown on the picture. Tip: To create straight line with pencil hold Shift key.
Step 4: “My Works” Block
Now create new group Layer > New > Group… and call it My Works. Then pick case icon from Flavours Icon Set and move it 20 px down from first guideline at the top. Then type My Works and apply settings like on Portfolio text in Step 2: Header.
Now set foreground color to black (#000000) and pick Rounded Rectangle Tool set Radius to 5 px and create button like shown on the picture below.
Now reduce Opacity to 20%. Pick blue plus button from Flavours Icon Set click (CTRL+T) and resize W and H at the top toolbar to 60% then move it on button created before. Set foreground color to dark grey (#2a2a2a) and choose Myriad Pro (Condensed) 14 pt size font. Then type “See all works” and move like shown on the picture.
Right click on “See all works” layer and choose Blending Options… or (Layer > Layer Style > Blending Options…) and apply options shown on the picture below (on the left side shown Character options).
Here is the result with aplied Drop Shadow.
Now set foreground color to #487f99 pick Rounded Rectangle Tool set Radius to 5 px and draw about 190 px height box. Example shown on the picture.
Select button layer from Navigation group and click right mouse button on layer name and choose Copy Layer Style. Then choose previous created box layer in My Works group and click right mouse button to choose Paste Layer Style.
Then copy layer (CTRL+J) and place them like shown on the picture.
After that pick three pictures of your works. Resize them (CTRL+T) and move on the boxes. Example shown on the picture below.
Set foreground color to #2a2a2a and choose Horizontal Type Tool. Pick Myriad Pro (Condensed) font, set size to 16 pt and write brief description of the project. Then apply Drop Shadow options shown on the 2nd picture.
Now copy (CTRL+J) description layer with applied drop shadow and move under other works.
Create new layer and move it under all layers in My Works group. Then pick Rectangular Marquee Tool and select all area between first and second guidelines then fill it (ALT+Backspace) with black (#000000). Example shown on the picture below.
Right click on created layer or (Layer > Layer Style > Blending Options…) and apply Gradient Overlay. Options shown on the picture below.
After that reduce Opacity to 30% and you should get something like shown on the picture.
Pick button fast forward blue and button rewind blue icons from Flavours Icon Set. Resize (CTRL+T) them to 60% and place as shown on the example below.
Step 5: “Twitter” Block
Create new group (Layer > New > Group…) and call it Twitter block. Pick twitter icon from Flavours Icon Set and place it between third and fourth guidelines. Then set foreground color to white (#ffffff), choose Rounded Rectangle Tool set Radius to 5 px and draw about 750 px length and 50 px height box.
Then right click on white box layer and select Blending Options… after that choose Stroke and customize following an example.
Now reduce white box layer Opacity to 20%. Then set foreground color to #245166, choose Horizontal Type Tool and Georgia (Italic) font, set size to 18 pt and write something.
Step 6: “Blog News” Block
Create new group (Layer > New > Group…) and call it Blog news. Then pick screen aurora icon from Flavours Icon Set and place it as shown on the picture. Pick Horizontal Type Tool and write for example “News from blog” and apply Blending Options from Step 2: Header.
Set foreground color to #2a2a2a after that choose Myriad Pro (Regular) font, set size to 18 pt and write blog post headline. Then apply Drop Shadow options from Step 4: My Works like on the “See all works” button.
Then write some text from blog. I used Arial (Regular) 12 pt size font. Leave space for Social media block on the right side.
Create new group in Blog news group (Layer > New > Group…) and call it Read more. Set foregroun color to black (#000000). Pick Rounded Rectangle Tool, set Radius to 10 px and draw button.
Then reduce button Opacity to 20%. Choose check icon from Flavours Icon Set and resize (CTRL+T) it to 60%. Move on button and with Horizontal Type Tool Myriad Pro (Condensed) 14 pt size font write for example “Read more”. Then apply the same Blending Options like on blog headline.
Set foreground color to #487f99. Pick Pencil Tool, set Brush size to 1 px and draw vertical line to separate “Blog news” and “Social media” blocks. Then set foreground color to #a4bfcc and draw same length line but move it 1 px to right.
Step 7: “Social Media” Block
Create new group (Layer > New > Group…) and call it “Social media“. Choose coffee icon from Flavours Icon Set and place about 50 px right from separator. Then pick Horizontal Type Tool, Nevis font 30 pt size and write “Become my friend“, then apply Blending Options and Character options from Step 2: Header same like on “Portfolio” text.
Download Social Network Icon Pack. Then choose 8 icons and place them as shown on the example below.
Set foreground color to #2a2a2a, pick Horizontal Type Tool, choose Myriad Pro (Condensed) 18 pt size font and write social network titles. Then apply Drop Shadow options like on the blog headline text.
Create new layer (Layer > New > Layer…) and move it under all layers in Social media group. Now set foreground color to black (#000000) and choose Rounded Rectangle Tool. Set Radius to 10 px and draw bigger than icon and text button. Reduce Opacity to 20%.
Right mouse click on Read more group in Blog news group and choose Duplicate Group… then move duplicated group to Social media group and place as shown on the example.
Step 8: Footer
Create new group (Layer > New > Group…) and call it “Footer“. Set foreground color to #2a2a2a. Choose Horizontal Type Tool, Myriad Pro (Condensed) 18 pt size font and write something. Then apply Drop Shadow options like on Step 4: “My Works” Block “See all works” text.
Final Result
Download the PSD (5.9 MB)
What do you think?
What do you think about my first photoshop tutorial? Do you understand all steps? I’d like hear your opinion and thoughts. Share your thoughts in comments. Thank you.
Great tutorial Tomas. Clean blue as the title says, very clean.
Hm, nice job, looks quite professional.
I admit, i didn’t expect your first tutorial to be this good ;)
Very nice tutorial, Tomas ….. the output is very neat and unique..
: ) thats a decent tutorial , let me know what stats you get from it ,
I have some published at My ink blog and my site you should chek them out
: )
wow great tutorial, very clean and interesting
Great tutorials. can’t wait for the next one :D
Looking forward to see more tutorials on this level. Didn’t expect it so good for a first time. Congrats, mate!
Nice and clean work Tomas. Excellent tutorial!
Thank you for good words, they motivate me.
It’s Really Awesome.
I very much enjoyed and learning from it.
I am definitely bookmarking this page and sharing it with my friends.
Thanks
Thanks for the tutorial tomas.
Great tutorial, but how i can make this template in a functional theme in wordpress? the final result here its a PSD, but i want the final, en jpg, php,css do you know some tutorial that explain the process thanks.
Great tutorial! I always love the clean style!
very nice design and first tutorial came good ;)
this is the biggest step you made mate, love the tutorials, great work
great tutorial like the intricacies, especially the icons and placing them.
Welldone Thomas. I didn’t think your first tutorial was going to be this good. But now we have high hopes for you in the future
SUPERB! Awesome++.. Loved it! :)
And, I would like to know how do I convert it into wordpress theme? I am new to PS, but I am giving my 100% to learn it :)
Cheers..
Tutorial added to thewebtuts.com
Šaunuolis! Gražu, išbaigta.
Great job! I really appreciate the work you put into this tutorial. The site looks nice, but how do I turn it into a “site” (rather than an image)?
What a great tut and job man!! Very well explained!! =] I want more!! Thanks !!!
Hey there.
Pretty nice tutorial.
Thank you very much for using the icons from my iconset ‘flavour extended’.
In the upcoming version “addictive flavour” – which will be released during the first half of this year – there will also be a huge set of “Social Media” Icons included! :)
Best wishes from germany, Oliver
Very nice tutorial Tomas.
Thank you.