We are reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn more.

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