Sleek Portfolio Layout

Sleek Portfolio Layout

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

About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

32 comments
Mustapha says

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?

Reply
Richard Carpenter says

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

Reply
frank says

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

Reply
Richard Carpenter says

@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

Reply
lauren says

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

Reply
Richard Carpenter says

@Lauren: works now, thanks for the heads up

Reply
David says

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)

Reply
Cmsqvl says

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

Reply
Richard Carpenter says

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.

Reply
Williams says

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!

Reply
Duca Madalin says

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.

Reply
Richard Carpenter says

Looking good, thanks for sharing your results

Reply
7hp says

Thank you so much!

Reply
Yori Coppens says

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

Thanks for this nice tutorial!

Best regards from Belgium :-)

Reply
Dylan says

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

Reply
Kent says

Anouther sleek design, love it!

Reply
Kenzo says

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

Reply
Leni says

nice tutorial

Reply
EC says

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?

Reply
Matt chandler says

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.

Reply
Find Ferry says

Thanks. Nice step by step tutorial :-)

Reply
Faruk says

nice tutorial

Reply
sreeraj says

Very nice

Reply
Vedran Krizic says

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

Reply
P.I.Julius says

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

Reply
Phil says

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.

Reply
Mie says

Hey Richard.

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

Reply
Thanos says

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

Reply
Niikoi says

great tutorials how do i export HTML

Reply
ramesh says

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

Reply
Christy Harper says

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

Reply
said says

Hi

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

All the best
Said

Reply
Add Your Reply

Popular posts

css.php