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

Portfolio Design final

Step 1: Background

Let’s start by creating a new document in Photoshop – 1000×885 px, resolution 72 pixels/inch.

Create a Clean Blue Portfolio Design in Photoshop step01

Then add guidelines View > New Guide… vertical guidelines at 50px, 950px and horizontal guidelines at 102px, 404px, 497px, 832px.

Create a Clean Blue Portfolio Design in Photoshop step0111

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.

Create a Clean Blue Portfolio Design in Photoshop add noise

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.

Create a Clean Blue Portfolio Design in Photoshop portfolio text

Right click on Portfolio text layer and choose Blending Options. Then apply settings shown on the picture below.

Create a Clean Blue Portfolio Design in Photoshop portfolio text drop shadow

Create a Clean Blue Portfolio Design in Photoshop portfolio text gradient overlay

Now place text 40 px above guideline (Shift+4 clicks up) you should have something like shown on the picture.

Create a Clean Blue Portfolio Design in Photoshop portfolio text finished

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.

Create a Clean Blue Portfolio Design in Photoshop navigation

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.

Create a Clean Blue Portfolio Design in Photoshop navigation text shadow

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.

Create a Clean Blue Portfolio Design in Photoshop navigation button

Right click on created button layer or or (Layer > Layer Style > Blending Options) and choose Blending Options. Then apply shown settings.

Create a Clean Blue Portfolio Design in Photoshop navigation drop shadow

Create a Clean Blue Portfolio Design in Photoshop navigation inner shadow

Create a Clean Blue Portfolio Design in Photoshop navigation button gradient overlay

Here is example shown on the picture how your navigation should look.

Create a Clean Blue Portfolio Design in Photoshop navigation button finished

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.

Create a Clean Blue Portfolio Design in Photoshop vertical line

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.

Create a Clean Blue Portfolio Design in Photoshop horizontal line1

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.

Create a Clean Blue Portfolio Design in Photoshop my works

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.

Create a Clean Blue Portfolio Design in Photoshop my works more button

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.

Create a Clean Blue Portfolio Design in Photoshop see all works

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).

Create a Clean Blue Portfolio Design in Photoshop see all works blending options

Here is the result with aplied Drop Shadow.

Create a Clean Blue Portfolio Design in Photoshop see all works with 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.

Create a Clean Blue Portfolio Design in Photoshop my works box

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.

Create a Clean Blue Portfolio Design in Photoshop navigation button layer

Create a Clean Blue Portfolio Design in Photoshop navigation button layer paste

Then copy layer (CTRL+J) and place them like shown on the picture.

Create a Clean Blue Portfolio Design in Photoshop my works boxes

After that pick three pictures of your works. Resize them (CTRL+T) and move on the boxes. Example shown on the picture below.

Create a Clean Blue Portfolio Design in Photoshop my works with pistures

Create a Clean Blue Portfolio Design in Photoshop my works with pistures2

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.

Create a Clean Blue Portfolio Design in Photoshop my works description

Create a Clean Blue Portfolio Design in Photoshop my works project description drop shadow

Now copy (CTRL+J) description layer with applied drop shadow and move under other works.

Create a Clean Blue Portfolio Design in Photoshop my works project descriptions

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.

Create a Clean Blue Portfolio Design in Photoshop my works background

Right click on created layer or (Layer > Layer Style > Blending Options…) and apply Gradient Overlay. Options shown on the picture below.

Create a Clean Blue Portfolio Design in Photoshop my works background gradient overlay

After that reduce Opacity to 30% and you should get something like shown on the picture.

Create a Clean Blue Portfolio Design in Photoshop my works background reduced opacity

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.

Create a Clean Blue Portfolio Design in Photoshop my works previous button

Create a Clean Blue Portfolio Design in Photoshop my works next button

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.

Create a Clean Blue Portfolio Design in Photoshop twitter box

Then right click on white box layer and select Blending Options… after that choose Stroke and customize following an example.

Create a Clean Blue Portfolio Design in Photoshop twitter box stroke

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.

Create a Clean Blue Portfolio Design in Photoshop twitter message

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.

Create a Clean Blue Portfolio Design in Photoshop news from blog

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.

Create a Clean Blue Portfolio Design in Photoshop news from blog headline

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 a Clean Blue Portfolio Design in Photoshop blog content

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.

Create a Clean Blue Portfolio Design in Photoshop read more 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.

Create a Clean Blue Portfolio Design in Photoshop read more

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.

Create a Clean Blue Portfolio Design in Photoshop separate

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.

Create a Clean Blue Portfolio Design in Photoshop become my friend

Download Social Network Icon Pack. Then choose 8 icons and place them as shown on the example below.

Create a Clean Blue Portfolio Design in Photoshop social media icons

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 a Clean Blue Portfolio Design in Photoshop social media links

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%.

Create a Clean Blue Portfolio Design in Photoshop social media active button

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.

Create a Clean Blue Portfolio Design in Photoshop social media read more

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.

Create a Clean Blue Portfolio Design in Photoshop footer

Final Result

Portfolio Design final

Source File

To download the source file, you must be a member of the Web Design Fan Club. Joining the Web Design Fan Club grants you access to all the incredible resources and knowledge you need to become an expert web designer. Read more about our club here.

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.

1Y0-A17 practice questions and 70-646 pdf cover all the important exam topics that you must go through in order to successfully move on next level. Download free demo of N10-004 online test to practice and learn exam taking strategies so you can easily pass your exam.

Budget Friendly Catalog Printing Services at PsPrint.com



Comments
  1. Nice Work…I love the simplicity.

  2. This is nice. Now can you show us how to take this from psd to html?

  3. Nice psd tutorial,
    very detail, thank a lot
    Could we be friends by exchanging link, I would really appreciate that

  4. this is nice look, but hard to edit or re-edit, my advice keep photoshop for editing images not for bulding a website, espicaly if you make that website for acostumer, and that costumer want to change somthing, offfffffff, will be sad storry

    • zlatomira said:

      Hi, temo, I am quite familiar with Photoshop and it’s easy for me to create a website using it. What program do you think I should rather use? Front Page or Dreamweaver? Which one is closer to Photoshop?

  5. zlatomira said:

    Hi, I enjoyed your tutural, but am interested in how to turn this psd to html, just like Susan. 10x!

  6. Hi,

    I’m very interesting the very simple tutorial, step by step, very clean and clearly. Thanks a lots of.
    p/s: Let take it to create tutorial from the psd to html. I trying do this one.

  7. I would also really like to know how to go from psd to html.
    It would be nice if you at least give us a answer rather you want to do that or not.
    Overall very nice tutorial!

  8. @ Joanny

    That may just happen, stay tuned :-)

  9. Amazing creativity, nice effort,

  10. Thanks a lot of!
    I’m very interesting the very simple tutorial.

  11. Good! Thank you! I always wanted to write in my site something like that. Can I take part of your post to my blog?