Web Design Blog | Web Design Fan | Resources for Web Designers and Graphic Designers

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

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