Design a Portfolio Site in Photoshop

The portfolio site is critical factor in the success of a freelance designer or a design studio. Today we’ll be going through the process of creating a homepage layout of a portfolio site in Photoshop. The design we will be creating is available for download to Vandelay Premier members. The download includes the PSD files for the homepage and 2 secondary pages in three color schemes.

Here is a look at what we will be creating (click the image to view it in full size).

Portfolio Design Photoshop Tutorial

Step 1: Creating the File

Go to File – New and create a file that is 1400 pixels wide and 1205 pixels high.

Portfolio Design Photoshop Tutorial

Step 2: The Header

Use the rectangular marquee tool to select the top 50 pixels of the canvas across the entire width of the canvas. Add a new layer (Layer – New – Layer), then set the foreground color to #a90101 and use the paint bucket tool to fill the selection. Then set the background color to #b50201 and double click on the layer in the layer’s palette to open the Layer Style options. Click on “gradient overlay” and set the gradient to 90 degress so that the foreground color (darker) is at the bottom and the background color (lighter) is at the top.

Portfolio Design Photoshop Tutorial


The result will look like this.

Portfolio Design Photoshop Tutorial

Create a new layer and use the rectangular marquee tool to create another selection the entire width of the canvas, this one from the 50 pixel mark to the 85 pixel mark. Set the foreground to #930201 and use the paint bucket tool to fill the selection. Then set the background color to #9b0201, a slightly lighter shade of red. Double click on the layer in the layer’s palette to open the Layer Style options, and click on “gradient overlay”. Set the gradient to 90 degress and so that the lighter shade of red is at the top. Now you should have two horizontal bars at the top with slightly different shades of red gradients.

Portfolio Design Photoshop Tutorial

Now we’ll add some borders to these red bars, so create another new layer. I like to use the pencil tool with a square tip set at 1 pixel, and I zoom in to about 1000% to get precise control.

Between the two red bars we’ll add two borders that are 1 pixel each. The first one is #930201 and the second one is a much lighter #dc302f. Here is how it looks at 1000%.

Portfolio Design Photoshop Tutorial

And below the second red bar we’ll add a 1 pixel border in #700201. Here is how it looks at 1000%.

At 100% it looks like this.

Portfolio Design Photoshop Tutorial

Now that we have the background of our header done we can move on to adding the other elements. For the logo I am using the Bitstream Vera Sans font, which can be downloaded for free. I’m using 20 pt text in white (#ffffff) with a drop shadow that has a distance and size of 1 pixel. I’m using a vertical guide at 220 pixels to align the logo (our page content area will be 960 pixels wide).

Portfolio Design Photoshop Tutorial

Below the logo I’m using 14 pt bold Arial text in #feed7b for the navigation menu. This text also has a drop shadow with a distance and size of 1 pixel.

Portfolio Design Photoshop Tutorial

Now on the right side of the layout I’ll set a vertical guide at 1180 pixels to align text to the right edge of our 960 pixel content area. For this sub-navigation I’m using the same settings for the text, it’s just in lowercase instead of uppercase.

Portfolio Design Photoshop Tutorial

This is what we have so far.

Portfolio Design Photoshop Tutorial

We’re also going to add a site search to the header, so use the rectangular marquee tool to create an area for a search field. Add a new layer and fill this selection with white. Next, use the rectangular marquee tool again to create a button, and fill it with #700201.

Portfolio Design Photoshop Tutorial

Next, use the pencil tool to add a 1 pixel border to the search field and the button in #590201. Here is how it looks zoomed in at 1000%.

Portfolio Design Photoshop Tutorial

Add the word “search” to the button in 14 pt Arial in white. Next, we’ll be using a search icon from the General Website Icon Set that is available to Vandelay Premier members. Open the search icon and paste it in at the right side of the search field.

Portfolio Design Photoshop Tutorial

Our header is now complete.

Portfolio Design Photoshop Tutorial

Step 3: The Featured Area

The main focal point of our homepage layout will be an area that showcases screenshots of example sites from the portfolio. We’ll start by creating a gray background. Create a new layer. Set the foreground color to #dbd7dd and the background color to #b0a3a8. Click on the gradient tool and select a radial gradient that will go from the foreground color to the background color.

Portfolio Design Photoshop Tutorial

Use the rectangular marquee to select the entire width of the canvas from 85 pixels (the bottom of the neader) to 600 pixels. With that area selected use the gradiet tool to apply a radial gradient so that the lighter shade of gray is at the top and center. Then go to Filter – Noise – Add Noise and add 1.5% of uniform noise. It will look like this.

Portfolio Design Photoshop Tutorial

For the screenshots we will be using a PSD file that is available to Vandelay Premier members, 3D Screenshots Display PSD. Of course, you can also do it manually, this file just makes it a bit easier and faster. Instructions for editing this file are available, but we’ll quickly go through the process here.

There are 7 different screenshot variations to choose from but we will be using the one titled web-portfolio-3D-4.psd. Open up that file.

Portfolio Design Photoshop Tutorial

The first thing you’ll need to do is get 5 screenshots from your work. Each screenshot should be at least 1349 pixels in width. Each of the five screenshots in this PSD file is in it’s own layer. To edit a layer, double click on the smart object thumbnail in the layers palette.

Portfolio Design Photoshop Tutorial

You may get a pop-up message, just click ok and it will open up a new file called web-1.psd. Paste your screenshot here over the existing screenshot and then save the file. This will then update the web-portfolio-3D-4.psd file to show your own screenshot instead of the example. Repeat the step with each of the other 4 screenshots. Then hide the background layer.

Portfolio Design Photoshop Tutorial

Hiding the background gives us a transparent background so when we paste it in to our layout it will show the background that we have created.

So in the web-portfolio-3D-4.psd file, resize the image to be 960 pixels wide so it will fit in our layout. Then, with the background hidden and all of the screenshots edited, go to Select – All and then Edit – Copy Merged. Then go back to the portfolio layout that we are designing and go to Edit – Paste. Go to Edit – Free Transform and align the screenshots as shown below.

Portfolio Design Photoshop Tutorial

Next, we’ll add some text above the screenshots. We’ll use the font Vollkorn, which can be downloaded for free. For the top line I’m using 24 pt text in #191919 and for the second line I’m using 18 pt text in #515151. The link color is #700201. Then double click on the layer in the layers palette and click on “drop shadow”. Change the color to white (#ffffff), the blend mode to “normal” and the size and distance to 1. The result should look like this.

Portfolio Design Photoshop Tutorial

So at this point our layout looks like this.

Portfolio Design Photoshop Tutorial

Step 4: The Call to Action

One of the keys to a successful portfolio site is actually getting visitors and potential clients to make contact with you. We’re going to add a bar that will encourage visitors to make contact if they are in need of your services.

Create a new layer and set the foreground color to #930201 and the background color to #9b0201. Use the rectangular marquee tool to select an area the entire width of the canvas that is 50 pixels high (from the 510 pixel mark to the 560 pixel mark. Then use the paint bucket tool to fill the selection. Double click on the layer in the layers palette and click on gradient overlay. Set the gradint to go from the foreground color to the background color (with the lighter color at top).

Portfolio Design Photoshop Tutorial

Now we’ll add some borders. Set the foreground color to #700201. Create a new layer and use the pencil tool to add a 1 pixel border at the top and the bottom. Then change the foreground color to #dc302f and add 1 pixel borders just inside the borders that you previously created. The image below shows it at 500%.

Portfolio Design Photoshop Tutorial

At 100% it looks like this.

Portfolio Design Photoshop Tutorial

Next, we’ll add a line of text in 18 pt Vollkorn in white. Give the text a drop shadow with a size and distance of 1 pixel.

Portfolio Design Photoshop Tutorial

We’ll also need a button that will link to a contact page. Select the rounded rectangle tool and set the radius to 5 pixels. Create the rounded rectangle and then double click on the layer in the layers palette to bring up the Layer Style options.

First, add a drop shadow with 50% opacity and distance and size of 3 pixels.

Second, add an inner shadow with 75% opacity, a blend mode of normal, 90 degress, and a distance and size of 1.

Third, add a gradient overlay with #ed4241 at the top and #dc302f at the bottom.

And lastly, add a stroke of 1 pixel outside, with a color of #700201.

Then add text to the button in 14 pt white Arial text. This is how it looks.

Portfolio Design Photoshop Tutorial

At this point our layout looks like this.

Portfolio Design Photoshop Tutorial

Step 5: The Content Area

The first thing we need to do here is to get rid of the gray area below the red call-to-action bar. Create a new layer and use the rectangular marquee to select the gray area and then fill it with white. It will then look like this.

Portfolio Design Photoshop Tutorial

Now we’ll add some text to a narrow lefthand column. Set vertical guides (View – New Guide) at 220 pixels and 520 pixels. Then add a text box. I’m using 18 pt bold Arial #191919 in all caps for the sub-headers and 14 pt Arial text, also #191919, for the body text. The links are in #700201.

Portfolio Design Photoshop Tutorial

Here is what we have at this point.

Portfolio Design Photoshop Tutorial

Now we’ll add some thumbnails of screenshots from the portfolio to showcase the work. I’m using images that are 170 pixels wide and 130 pixels high. Each image has a 5 pixel border. The first four pixels are #eeeded and the outside pixel is #dbd9d9. There should be 40 pixels of whitespace between the images and 100 pixels of whitespace between the first row and the second row.

Portfolio Design Photoshop Tutorial

Here is what we have so far.

Portfolio Design Photoshop Tutorial

Next, we’ll add some text to give the name of each project, as well as the type of work that was involved.

Portfolio Design Photoshop Tutorial

Here is what we have at this point.

Portfolio Design Photoshop Tutorial

Step 6: The Footer

The last thing we have to do is complete the footer. Add a new layer and set the foreground color to #700201. Use the rectangular marquee tool to create the selection for the footer. Then use the paint bucket tool to fill the selection.

Add some text in the footer in 14 pt Arial in white.

Portfolio Design Photoshop Tutorial

The Final Result:

Portfolio Design Photoshop Tutorial

If you’re a Vandelay Premier member you can download the PSD files. If you’re not a member and you want to find out more, please visit the Tour page.

For more design tutorials please see:

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

24 Responses

Comments are now closed on this post.

  • Brian, November 18, 2010

    May I point out that this isn’t really how to design _a_ portfolio website as much as it is about how to recreate _your_ portfolio website. What about the planning phases that are inevitably necessary to figure out what you want to do? I think that would be much more interesting than another photoshop tutorial for the uninspired masses.

    • Vandelay Website Design, November 19, 2010

      Brian,
      I agree with you that the planning phases are a critical part of the process, however, the purpose of this post was only to cover the part of the process that involves the work in Photoshop. It’s possible that we will cover other aspects in the future (although probably for a different site/design), so thanks for the feedback.

  • Giacomo Colddesign, November 18, 2010

    Great tut, thanks!!

  • Html Code, November 18, 2010

    Useful and great work.

    Thanks.

  • Brad | StartWebDevelopment.com, November 18, 2010

    Very nice work. Nice clean and simple.

  • Ben Dunkle, November 19, 2010

    Now you need to write a tutorial on how to code that bad boy.

  • Netpaths Design, November 19, 2010

    Excellent design tutorial and case study on creating a personal portfolio website. I’m joining.

  • mr.law, November 19, 2010

    thanks!
    I love it

  • Michaël Ambass, November 19, 2010

    Great tutorial :) I love the carousel concept, with a little bit of jQuery or Flash it can be really nice. Thanks

  • Dan | Itsos Design, November 19, 2010

    Great tut, loving the clean lines.

  • Web Design Hull, November 20, 2010

    Nice tutorial, very useful thanks!

  • Graphic Design Inpirations, November 20, 2010

    im doing a project and this was a lot of help thank you very much!!

  • chandler, November 20, 2010

    Thank’s a lot/ I like Photoshop and I want improve my skills

  • Karen Scharf, November 21, 2010

    I need more tutorial! And I guess I’ll do better if you’re the one who will do it for me! I agree on the planning phases and on every part of the steps you’ve shown. There’s no doubt for the best result to come up.

  • Andy @ FirstFound, November 22, 2010

    That’s a great, clean design. Thanks very much – I’ll bookmark the tutorial for future use!

  • Facebook Application Developer, November 23, 2010

    Very nice step to step guide for designing a portfolio in photoshop. Really nice i must say.

  • Gareth rees, November 23, 2010

    Brilliant tutorial guys, I’m terrible at design but it was so in depth it even made me think twice about giving it a go.

    • Vandelay Website Design, November 23, 2010

      Thanks for the feedback everyone. We’ll probably have some more Photoshop tutorials in the future.

  • Mike Gandell, November 23, 2010

    Brilliant article and instructions. Completely accepted and successfully used by our students in cologne, your manual has been introduced to the students by Chris (http://www.siegweg24.de) and me, and we were happy to forward it.

  • Ace Media, December 2, 2010

    What a clean design.. Much appreciated, thanks for this!

  • George Columbow, December 4, 2010

    Nice and air-full design. Though it has some minuses too:
    – it can be seen only at widescreen monitors
    – it can be transformed into correct HTML-code only for modern browsers. At least IE6-IE7 will not be able to support new CSS3-options for loadable fonts and shadows.

    Anyway it is bright, effective and nice looking design yet. Thank you for sharing!

    • Vandelay Website Design, December 6, 2010

      George,
      A width of 960 pixels for the content area is very standard, that is not only for widescreen monitors.

  • Krysten, May 27, 2011

    Great design. Would love to see you take it one step further and show your readers how to code it.

  • Toronto Web Developer, June 10, 2011

    Simple and Great, Thanks!