Sleek Portfolio Layout

Hello everybody hope you all had a good Christmas and new year. In this tutorial I’ll be walking you through the process of creating a sleek portfolio layout.

In Interface

What We’ll Be Creating

Portfolio Layout Tutorial

Resources Used In This Tutorial

Lets Get Started, Creating Your Document

Create a new document (Ctrl + N) 1200×800 pixels, change your foreground color to #51a2bc and background color to #36697a. Now select the “Gradient Tool” (G) with a reflected gradient.

Portfolio Layout Tutorial

Drag the reflected gradient from the top left corner of the canvas, dragging diagonally towards the bottom.

Portfolio Layout Tutorial

Creating Our Circles Pattern

This layout uses two custom patterns, a stripes pattern and a circles halftone type pattern. We’ll create the circles pattern first. Create a new (Ctrl + N) document 16×16 pixels, zoom in 3200% then replicate the image below using a 1px brush or pencil.

Portfolio Layout Tutorial

Once you’ve replicated the image above save it as a pattern by going to “Edit > Define Pattern”. Head back to your canvas then create a new layer above your background layer then fill (G) the background with your pattern.

Portfolio Layout Tutorial

Add a layer mask to your circles pattern then change your foreground color to white #ffffff and background color to black #000000, select the gradient tool with a radial gradient.

Portfolio Layout Tutorial

Drag the radial gradient from the top left, downwards, your looking for something like this.

Portfolio Layout Tutorial

Creating Our Stripes Pattern

Create a new (Ctrl + N) document 4×4 pixels, zoom in 3200% then replicate the image below.

Portfolio Layout Tutorial

Once you’ve replicated the pattern above save it by going to “Edit > Define Pattern”. Once you’ve saved it head back to your canvas and fill the pattern on the background on a layer underneath the circles pattern. Now, set the lines pattern blend mode to “Soft Light” and opacity to 30%.

Portfolio Layout Tutorial

Creating The Foundations Of Our Layout

Select the “Rounded Rectangle Tool” (U) then drag out two rectangles. The first rectangle should be about 305×620 pixels in the color #181b20.

Portfolio Layout Tutorial

The second rectangle should be around 680×620 pixels and in the color white #ffffff.

Portfolio Layout Tutorial

Allow the rectangles to overlap but make sure the white rectangle is on top of the blue one.

Creating The Header

Select the “Type Tool” (T) then in the top right corner add your layout title and slogan.

Portfolio Layout Tutorial

On the right side of the layout in line with the title add some social icons from the “Aquaticus Social Icon Pack.

Portfolio Layout Tutorial

You should now have something like this.

Portfolio Layout Tutorial

Creating The Navigation

Using the “Type Tool” (T) add your navigation inside the white rectangle at the top.

Portfolio Layout Tutorial

Select the “Rectangular Marquee Tool” (M) then make a selection inside of your white rounded rectangle.

Portfolio Layout Tutorial

Set your foreground to #e3e3e3 and background to white #ffffff then select the “Gradient Tool” (G). Drag the gradient from the top of the selection downwards, down go all the way down, just drag about 200 pixels down.

Portfolio Layout Tutorial

Select the “Rectangular Marquee Tool” (M) once more then drag out a 1 pixel selection spanning the width of the white rounded rectangle, the selection should be on edge of the gradient we just added in the previous step. Fill (G) the selection in the color #c7c7c7, then repeat the process again only this fill (G) the selection in white #ffffff.

Portfolio Layout Tutorial

Creating The Featured Area

Underneath the navigation divider line add a title and a small paragraph.

Portfolio Layout Tutorial

Download the Ipad by Krdesigns then open it up in photoshop. Drag one of the ipads to the side of your paragraph text in the featured area. Duplicate the ipad, then resize it with the “Free Transform Tool” (Ctrl + T). Make the duplicated ipad a little smaller than its original, once your happy select the bigger ipad layer then blur it by 1% “Filter > Blur > Guassian Blur”.

Portfolio Layout Tutorial

Next, select the “Rectangular Marquee Tool” (U) and drag out a small button sized rectangle underneath your paragraph text.

Portfolio Layout Tutorial

Once you’ve created the rectangle add the following layer styles.

Portfolio Layout Tutorial

Portfolio Layout Tutorial

Portfolio Layout Tutorial

You should have something like this.

Portfolio Layout Tutorial

Duplicate your button then move the duplicated button over towards the right. Label each button accordingly.

Portfolio Layout Tutorial

Creating The Gallery

Select the “Type Tool” (T) then add a new title underneath your featured area, once the new title has been added add a small paragraph.

Portfolio Layout Tutorial

Set the color #e3e3e3 as your foreground then create a rectangle using the “Rounded Rectangle Tool” (U).

Portfolio Layout Tutorial

Now load a selection around your grey colored rectangle.

Quick Tip:

To load a selection around an element click the little thumbnail inside of your desired layer whilst holding down the CTRL key on the keyboard.

Once you’ve loaded the selection go to “Select > Modify > Contract” and contract the selection by 10 pixels. Now copy and paste your desired image to the clipboard then go to “Edit > Paste Into”, if your using CS5 go to “Edit > Paste Special > Paste Into”.

Portfolio Layout Tutorial

Creating The Twitter Sidebar Section

Download the twitter icon from the Practika Icon Set, then drag the twitter bird onto your canvas. Resize the icon using the “Free Transform Tool” (Ctrl + T).

Portfolio Layout Tutorial

Select the “Custom Shapes Tool” (U), then select the speech bubble shown below.

Portfolio Layout Tutorial

Drag out a speech bubble inside the sidebar.

Portfolio Layout Tutorial

Now add the following layer styles to your speech bubble.

Portfolio Layout Tutorial

Portfolio Layout Tutorial

Portfolio Layout Tutorial

You should have something this.

Portfolio Layout Tutorial

Select the “Type Tool” (T) then add some twitter text inside of the speech bubble.

Portfolio Layout Tutorial

Select the “Rectangular Marquee Tool” (M) then create two 1 pixels on top of each other.

Portfolio Layout Tutorial

Add layer mask to your lines then drag a reflected gradient from the middle of the lines outwards. When you select the gradient tool make sure the color white is set as your foreground.

Portfolio Layout Tutorial

Creating The Skills Sidebar Section

Using the “Type Tool” (T) create a new title, then create a list of your skills in list form.

Portfolio Layout Tutorial

Underneath each section create 5 small circles using the “Circle Tool” (U) or the “Elliptical Marquee Tool” (M).

Portfolio Layout Tutorial

Once you’ve created the circles use these layer styles for your unused circles.

Portfolio Layout Tutorial

Portfolio Layout Tutorial

Portfolio Layout Tutorial

Add the following layer styles for your used circles.

Portfolio Layout Tutorial

Portfolio Layout Tutorial

Portfolio Layout Tutorial

Adding The Finishing Touches

There’s a couple of things left to do, start by simply adding some footer text at the bottom of the layout.

Portfolio Layout Tutorial

Next we need to add a shine to the twitter box. Select the “Pen Tool” (P) then make a small similar to the one in the image below.

Portfolio Layout Tutorial

Once you’ve made the path fill it with the color white (#ffffff) then load a selection around your speech bubble.

Quick Tip:

To load a selection around an element click the little thumbnail inside of your desired layer whilst holding down the CTRL key on the keyboard.

When the selection has been loaded select the shine layer and go to “Select > Inverse” then hit the delete key. You should be left with something like this.

Portfolio Layout Tutorial

Now set your shine layers opacity to 2%.

Portfolio Layout Tutorial

Finally we need to add our little hover arrow above our navigation bar. Select the “Rounded Rectangle Tool” (U) then create a very small rectangle above one of your navigation items. Once you’ve created the rectangle cut away the rounded corners at the top.

Portfolio Layout Tutorial

Now add the following layer styles.

Portfolio Layout Tutorial

Portfolio Layout Tutorial

Select the “Polygonal Lasso Tool” (L) and make to triangles behind the rectangle.

Portfolio Layout Tutorial

Lastly add a small arrow inside of the rectangle.

Portfolio Layout Tutorial

Conclusion

The final result should look something like this.

Portfolio Layout Tutorial

Thanks for taking part in this tutorial, maybe you could share some of your results by posting them below.

Download Source File

  1. Mustapha
    January 3, 2011 at 6:37 PM

    It’s awesome, thanks bro…
    ;)
    you do well
    can you make a lesson about converting this mock up to Css & html5 ?
    can you advice me about converting PSD templates into pages?

  2. January 3, 2011 at 9:04 PM

    @ Mustapha

    thanks for commenting, much appreciated. Unfortunetly i have no intension to code this layout, BUT if you need any assistance then just email me.

  3. frank
    January 12, 2011 at 6:49 PM

    try to do also another tutorials because i am sick of your web layout tutorials. try to copy the psdtuts idea with much nicer tutorials

  4. January 13, 2011 at 5:16 PM

    @Frank, you might not appreciated my web layout tutorials but alot of other people do. Out of all the emails i get web layout tutorials are among the highest.

    Thanks for your comment anyway, and i assure you web layout tutorials are not the main focus of photoshop plus

  5. lauren
    January 13, 2011 at 5:22 PM

    you’re contact page seems to be 404ing on your Cannock site.

  6. January 13, 2011 at 5:54 PM

    @Lauren: works now, thanks for the heads up

  7. January 13, 2011 at 11:57 PM

    Frank,

    if you don’t like than go somewhere else, or create your own tutorials.
    Just ignore him Rich, great tuts.
    Keep ‘em coming
    (I especially liked the industrial folder icon)

  8. Cmsqvl
    January 17, 2011 at 4:48 AM

    tutplus not do what richard does, in fact, it was recently implemented.
    Richard does from time to hv-designs so so far, so tecnically tutplus copy from richard ;D

    I love this tutorials and love Photoshop Plus :)

  9. January 17, 2011 at 7:24 AM

    thanks for your support, much appreciated, and i can confirm i was around before tuts+.

    Not that it means anything though… photoshop plus and tuts+ provide great unqiue content which benifits everyone.

  10. Williams
    January 20, 2011 at 10:24 PM

    Great tutorial!
    I will try it in a few days. Just one thing i noticed. When you indicate the text color in the “Creating the Navigation” step, you state that both colors are #767d89 (dark and light blue). But, is not a big deal still an awesome tut
    cheers!

  11. January 26, 2011 at 8:00 PM

    After 2 hours of work, this is my final result.
    http://ducadesign.files.wordpress.com/2011/01/sleek-portofolio.png

    Thanks for this tutorial, Richard.

  12. January 26, 2011 at 8:33 PM

    Looking good, thanks for sharing your results

  13. January 29, 2011 at 6:18 PM

    Thank you so much!

  14. Yori Coppens
    February 6, 2011 at 4:34 PM

    This is my result; http://i51.tinypic.com/35aizdk.png

    Thanks for this nice tutorial!

    Best regards from Belgium :-)

  15. February 10, 2011 at 6:19 AM

    Nice tutorial, but what is the point? You cant use it for the web… unless you attempt to code it

  16. February 12, 2011 at 7:10 PM

    Anouther sleek design, love it!

  17. Kenzo
    February 16, 2011 at 10:59 PM

    thanks for the tutorial..gave me lots of ideas since i’m usually used to working with Illustrator rather than Photoshop..looking forward to your next 1

  18. Leni
    February 24, 2011 at 12:29 PM

    nice tutorial

  19. February 24, 2011 at 12:35 PM

    Hi Richard, I’ve been reading your blog for ages and if you don’t mind I have two question for you.
    1. What do you think about CSS3?
    2. Do you think it should be used on a “live” site?

  20. Matt chandler
    March 7, 2011 at 4:12 PM

    I am going to attempt to code for wordpress with the approval of Richard. Does anyone have the .psd file they would let me start with? I am pretty good coder but not all that good in creating photoshop stuff.

  21. March 25, 2011 at 1:26 PM

    Thanks. Nice step by step tutorial :-)

  22. April 24, 2011 at 9:13 AM

    nice tutorial

  23. sreeraj
    May 6, 2011 at 7:34 AM

    Very nice

  24. May 31, 2011 at 12:46 PM

    For all who asked, variation of this site is live on http://www.vedrankrizic.com

  25. July 14, 2011 at 11:50 AM

    Thanks a lot Richard for this beauty and for your simply but to the point tutorials! I have created a jCore template of this one if you don’t mind (of course giving you the credit for the work and linking back to you) you can get it from here:
    http://jcore.net/templates

    Everything is the same exactly, I have only changed a few things, for e.g. the “Bookmark” icon on the top above the menus is moving to the menu/page you are on and I have dropped the shine from the twitter box as I think it better fits the rest of the design. Also instead of the skills box I have put a poll box so you can add polls to there and it looks pretty good I think.

    Thanks again and keep up the good work, I’m sure you will see more of your templates ported over :)

  26. August 5, 2011 at 11:18 PM

    Hey Richard, I love your tutorials! I made up a CSS tutorial of my own for anyone interested:

    http://chphil.com/learn-css-with-phil-sleek-portfolio-layout/

    I hope you don’t mind me coding your designs. If you do, please let me know. This is good practice for me as a beginner-intermediate html/css coder and a good way for me to learn.

  27. Mie
    September 2, 2011 at 1:36 PM

    Hey Richard.

    How did you get the background to work?
    When i use the background it repeats. :(

  28. September 21, 2011 at 3:35 PM

    Hey Richard,
    Thanx lots for the tut. One question: What font are u using? Is it Verdana?

  29. Niikoi
    February 26, 2012 at 10:44 AM

    great tutorials how do i export HTML

  30. April 9, 2012 at 6:48 AM

    great efforts nice tutorial it is more helpful for new photoshop beginners ….keep it up

  31. May 3, 2012 at 8:38 PM

    I love your tutorial. Do you have any that teaches us how to convert these into html :)

  32. said
    October 21, 2012 at 7:12 PM

    Hi

    can help with some design for my traning.
    I pay for any support

    All the best
    Said

  33. December 11, 2013 at 7:41 AM

    Thnks your tutorial is a great tool to consolidate knowledge

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 33 Comments On Sleek Portfolio Layout, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Auto Scroll To The Top
css.php