Photoshop Portfolio Tutorial

The portfolio site is a 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.

Here’s a look at what we will be creating (click the image to view it in full size) by the end of this Photoshop portfolio tutorial.

Designing a Portfolio Website in Photoshop

Step 1: Creating the File

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

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.

The result will look like this.

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.

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

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.

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

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.

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.

This is what we have so far.

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.

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

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’s Shop members. Open the search icon and paste it in at the right side of the search field.

Our header is now complete.

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.

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.

For the screenshots we will be using a PSD file that is available to Vandelay’s Shop 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.

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.

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.

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.

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.

So at this point our layout looks like this.

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

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

At 100% it looks like this.

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.

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.

At this point our layout looks like this.

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.

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.

Here is what we have at this point.

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.

Here is what we have so far.

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

Here is what we have at this point.

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.

The Final Result:

For more design tutorials please see:

• Create a Grunge Texture Brush in Photoshop
• How to Create an Adobe Illustrator Brush
• Create a Fun Ink Splatter Vector