Design & UX
By Anum Khan

Create an Awesome Portfolio Layout in Photoshop

By Anum Khan

A stylish portfolio is critical for any designer. Other professions have the luxury of describing their skills and accolades in words, but designers can’t just describe their work; they have to show it. Designers are most often compared, chosen, and hired based on the impression that their portfolio makes. Even if your work samples are stellar, the portfolio itself is arguably your most important design work, and it should be just as impressive as the work within it. Below, we’ll use some straightforward techniques to help you create a stylish, professional portfolio layout.

Image Resources:

Microbot, Suharrhyme


Now that we’ve got what we need to create this layout, let’s have a look ahead at our final result:

Step 1: Create Your Photoshop Document

Open Photoshop and create a new file with a width of 1100 pixels and a 1500 pixel height.

Step 2: Fill the Background

Now, select the Paint Bucket tool and fill the background with color #f6f6f6.

Step 3: Establish the Navigation

We will start with the top navigation. Use the Rectangular Marquee tool to select a small area on the top.

Step 4: Darken the Navigation Background

Select the paint bucket tool and fill the area with color #191919.

Step 5: Build the Navigation Button Area

Click on the marquee tool and select a rectangular bar within the darkened navigation area. Then, fill it with #050505.

Step 6: Add Dividers

We’ll add some lines that will separate your navigation items. Select the line tool with a 1 pixel weight. Also, make sure that our foreground color is #616161.

Step 7: Add Your Navigation Text

Now let’s add the text for our pages. Simply select the text tool and type in the desired text.

Step 8: Build a Hover Effect

For a hover effect, we will create a white line using the brush tool with a 3 pixel size. Then, select the eraser tool and remove the edges using a soft round brush. Now, reduce the opacity to 40%.

Step 9: Add Your Brand

Add your logo to the left of your navigation menu.

Step 10: Build a Background

Now, we’ll move on to our featured content area. First, create a new layer, and with marquee tool select the area under the navigation. Fill it with color #a0c0c8.

Now, switch off the background layer, select the marquee tool again, and create a rectangle. Fill the selected area with #f0f0f0.

We need some stroke on this, so click on “Layer” > “Layer style” > “Stroke.”

Step 11: Divide Your Content Area into Columns

Create another rectangle and fill it with #323030. And, for the adjacent text area, fill it with #242322.

Step 12: Add a “Read More” Button

Now select the text tool and add our text about the featured image.  Under the text, we will add a “read more” button. To accomplish this, simply select “the rectangle tool and create a small rectangle with color #323030. Then, add your text inside the new rectangle.

Step 13: Add Featured Imagery

Now, add the image on the right, and add our featured ribbon to the top right corner of the image. I’ve created the ribbon with the pen tool, and I added text using the text tool.

Step 14: Add a Drop Shadow

Select the line tool and use it under the feature box with 1px weight and color #dedede.  Now, click on “Layer” > “Layer style” > “Drop Shadow.”

Step 15: Create a “News” Element

Now, we’ll create a “News” element. So, click on the rectangle tool and create a rectangle strip with color #ebebeb. Again, select the rectangle tool and create a very small rectangle on the left with color #000000. Select this black rectangle and click on “Layer” > “Layer Style” > “Gradient Overlay.”

Step 16: Add the “News” Text

Add the “news” text using the text tool.

Step 17: Build a Portfolio Item

Create a small rectangle using rectangle tool with color #f0f0f0. Then, add the same stroke that we used with the feature area.

Step 18: Add Portfolio Imagery and Text

Now, add the image and add the banner on the side. Select the text tool and add the text under the image.

Step 19: Add Additional Portfolio Items

Repeat the same process to create two more portfolio items.

Step 20: Create Buttons Below

Select rectangle tool and create two buttons with colors #ca0e0e and #3c3c3c. Then add text using the text tool.

Step 21: Add Dividing Lines

Now select the line tool and create two lines with a 1 pixel weight and the color #dcdcdc. After that, add the images and text in the same style as the post that we did before.

Step 22: Add Flickr Updates

For the Flickr updates, select the text tool and add the heading. Once again create the gray frame using the rectangle tool, and add a stroke. Now, create a new layer and place it under the frame layer. Then select a soft round brush, and use it on the sides to give a shadow effect.

Now, paste the images in the frame.

Step 23: Building the Footer

Let’s start with our footer. First, select the area with the rectangular marquee tool and fill it with color #191919.

Step 24: Adding Footer Text

Select the text tool and add the desired footer text.

Our awesome layout is all done.

  • Surely anyone capable of creating stuff for a portfolio is capable of making one?

    Nice design though. Thanks.

  • Beautiful work and tutorial Anum!!

    Just clearly such a ton of work you did here to so wonderfully and engagingly present this project and multi-dimensional learning experience!

    Much grattitude and appreciation to you –

    Only the best,
    Children’s Hospital Boston

  • Extremely helpful!

    Every website starts out as a design, and this is often the most important stage. This article should be able to help new web designers wishing to develop their own sites.

    -Designaweb Bury St. Edmunds

  • Very nice design.

    Thank you for the tutorial, Very easy to follow and also very helpful!

  • Ken

    Helpful. What is required to convert into CSS/Html? Drawing board to Internet.

  • Great ‘quick’ tutorial! Basic steps and yet covering some nice features!

  • Very nice design!

  • EBT

    Thank you for the tutorial. Thanks

  • Nice layout, but I wish you had gone on to tell about a program like Adobe Muse or Sitegrinder that then converts the psd for web, without coding.

  • Nice Job.Like it.

  • eddie

    simple & very cool

  • More questions than answers for me, unfortunately… Start with a dark green background, then switch it off… no mention of a grey bg thereafter? That left me wondering about the rest… I’m sorry, but I can’t see why everyone else thinks it’s so brilliant – I was just left with a feeling that something had been left out… As a PS novice (but an advanced HTML/CSS coder), maybe the fault is mine.

  • Expected some textures, etc, which is what I like to see out of every design layout I see. Thanks though.

  • Great layout. I think a lot of designers have had their way with Photoshop one way or another but I think there are still many out there who don’t have a clear grasp on Adobe Muse or Dreamweaver that can help them translate their design over the web. Would love to get some tutorials on that, too.

Get the latest in Design, once a week, for free.