Design an Attractive One-Page Portfolio Using Photoshop

Today we will be designing a one-page portfolio in Photoshop. We’ll go through the process step-by-step and you can download the PSD file from Folio Focus if you would like to use it. The portfolio will include some brief biographical information, some sample work, brief description of services, your latest tweets, links to social profiles, and a call to action.

The Final Result:

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

This post is supported by SnobbySlice. SnobbySlice provides PSD to HTML/CSS services created by coders for coders. With our money back guarantee, we’re confident in our abilities to slice your PSDs into pixel perfect HTML. Learn more about our services.

Create the New File

To get started, open a new file in Photoshop (File – New) that is 1600 pixels wide and 2000 pixels high.

Step 1: The Background

Set the foreground color to #362914 and use the paint bucket tool to fill the background layer with this color.

To create the texture we’re going to use two images from the Heavy Coffee Stains texture pack by Callum Chapman and distributed by Tutorial9. There are 7 textures in the pack, so check them out and see which ones you like. I am using the two that are shown below.

Copy the first texture and paste it in to your Photoshop file. Double click on the layer in the layers palette to open the layer style options. Change the blend mode to “overlay” and the opacity to 70%.

Here is how it should look.

Then paste in the second texture on top of the first and also change the blend mode to “overlay” and the opacity to 70%.

We’re going to use a gradient on the sides of the image so that it will fade to a solid color. That way when the page is coded it will flow into the background color rather than ending abruptly. With the foreground color still set at #362914 , select the gradient tool and the linear gradient. Choose the gradient that fades from the foreground color to transparency.

Add a new layer (Layer – New) above the background color and the textures. Click and hold the mouse about 25 pixels from the left edge of the canvas and drag it to the right about 300 pixels, then release the mouse. This will give you a solid color on the left side of the canvas.

Add a new layer and repeat this process on the right side of the canvas.

Now, use the rectangular marquee tool to select everything below the 500 pixel mark. Add a new layer and set the foreground color to #201b0e. Use the paint bucket tool to fill the selection.

Change the foreground color to #594522, a lighter brown, and select the pencil tool and a one-pixel square brush tip. Use the pencil tool to add a one pixel border. You can hold the shift key to get a straight line. (The image below is shown at 600% to see the border).

Find the layer with the solid dark brown color in the layers palette and double click it. Select “drop shadow” and set it to 50% opacity, -90 degrees, and a size and distance of 5 pixels. This will give it a subtle shadow that will rest over the bottom of the textured area.

Next, use the rectangular marquee tool to select everything below the 1300 pixel mark and add a new layer. Set the foreground color to #2d2413 and use the paint bucket tool to fill the selection with this color.

Again, add a new layer and use the rectangular marquee tool to select everything below the 1885 pixel mark. Set the foreground color back to #201b0e and use the paint bucket tool to fill the selection.

Next, use the pencil tool to add two one-pixel borders (2 different colors, one pixel each) to the top of the footer area. The darker color is #16130a and the lighter color is #594522. This is how it looks at 600%.

Then we will use the same two colors to add a two-pixel border at the top of that lighter brown area.

The image below shows where we just added borders.

That completes the background.

Step 2: The Header

Set a vertical guide (View – New Guide) at 320 pixels to show the left edge of the layout (we will be using a 960 pixel width for the layout, but the canvas is 1600 pixels wide to show the texture beyond the layout width). We will be using the font Nevis, so if you don’t already have it you can download it now.

I’m using 30 pt Nevis in #cfcdb4 for the title of the site. The top of the text is 35 pixels from the top of the canvas.

Set the foreground color to #cfcdb4 and the background color to #bab79d. Double click on the new text layer in the layers palette and select “gradient overlay.” Select the gradient that flows from the foreground color to the background color and check “reverse” so the darker color is at the bottom of the text.

Then select “drop shadow” and set it at 75% opacity, 120 degrees (with the “use global light” box unchecked), distance and size at 3 pixels.

That will give you a title/logo that looks like this.

Next, we will add a line of text just below the title. I’m using 18 pt italic Georgia in #af9671, with a drop shadow set at 75% opacity, 120 degrees, and 2 pixels for distance and size.

The navigation menu will be lined up to the right edge, also 35 pixels from the top of the canvas. Since it is a one-page portfolio, these links will lead to lower areas of the same page.

For the text I am using 18 pt Arial in #af9671.

Step 3: The Top Content Area

Below the header we will include some space for biographical info and a call to action that will encourage visitors to send an email about a design project. We will be dividing the area into two columns of equal width (460 pixels) with 40 pixels of spacing between the two columns.

If you like to use guides to help layout the text you can set vertical guides at 320, 780, 820, and 1280 pixels, and a horizontal guide at 140 pixels.

Add headers for each section using 18 pt Arial in #ea9f3e.

Next, add some text to the columns in 14 pt Georgia, #cfcdb4. I have the line spacing set to 20 pixels.

We’ll be using a free icon from the portfolio icon set that IconShock designed for the Vandelay Design Blog. We are using is the “hire me” icon. Download it and re-size it to 200 px by 200 px. Copy it and paste it in to your canvas. Use the free transform (Edit – Free Transform) to line it up.

Then add some more text to the right of the icon with an email address.

Step 4: The Portfolio Area

Now we will be moving on to the section of the page that will include work samples. We will be using three columns and three rows of thumbnail images, of course you could add more rows once the site is coded. The idea here is to use a JavaScript lightbox effect that would show a larger version of each image when clicked.

You can clear any guides that are still in use (View – Clear Guides) because we will be using three columns here instead of two.

To start with, add a heading in 18 pt Arial, #ea9f3e. The top of the text should be 30 pixels below the border.

To help with layout of the thumbnails, set vertical guides at 320, 620, 650, 950, 980, and 1280 pixels. And set horizontal guides at 575, 740, 810, 975, 1045, and 1210 pixels.

Each thumbnail is going to be placed in a box in this grid. Each box is 300 px by 165 px. Our thumbnails will be 290 px by 155 px with 4 pixels of padding and then a one-pixel border. That will fill up the 300 x 165 space.

I think the easiest way to get the border applied to each box is to create a new file and then paste it in to each space. So create a new file that is 300 pixels wide and 165 pixels high. Fill it with #201b0e. Use the pencil tool to give it a one-pixel border on each side in #3c3218. Here is a look at the corner of that canvas at 600%.

Now, select the whole canvas (Select – All) of the new file, copy it (Edit – Copy), and go back to our layout. The grid of guides will allow you to easily paste this file in the precise places. Use the rectangular marquee tool to select the first box.

Then paste (Edit – Paste) the file and it will be positioned in the right place. Repeat this process by selecting each box and pasting in the file with the border. After you have done so for all nine boxes, with the guides cleared it should look like this.

Next, you will need to gather 9 screenshots from your portfolio. Re-size and crop them so they are each 290 pixels by 155 pixels. For this tutorial I am using screenshots from other Photoshop layout tutorials that have been published here.

Once again using the guides. select the first box using the rectangular marquee tool and paste in your first screenshot. It will line it up in the center if your thumbnail is 290 by 155 and the selected box is 300 x 165.

Repeat this process for each of the boxes.

Below each thumbnail, add a title, description and date for the project. I am using 14 pt Georgia. The title is #af9671 bold, and the description and date are #cfcdb4 normal.

That completes the portfolio area.

Step 5: The Bottom Content Area

Below the work samples we will be using three columns of text, including a listing of services, display of recent tweets, and relevant contact information.

These columns will line up with the thumbnails above, so we can use the same guides. Here we will be using another icon from the portfolio icon set (the palette),the Twitter icon from Function’s free icon set, and the mail icon from the blogging icon set here at DesignM.ag.

Resize each icon to 40 pixels by 40 pixels. The top of the text should line up at 1350 pixels and the icons will extend above and below the text a little bit. Use 18 pt Arial in #ea9f3e for the headers.

Add some text to the left column. It should include a listing and brief description of the services that are offered. I’m using 14 pt Georgia, #cfcdb4 for the text with #af9671 bold for the sub headers (the services).

In the center column we’ll add some text to represent recent tweets.

In the right column add some text with an email address, and then some links to social profiles. I’m using the Twitter, Delicious, and Flickr icons from the Function free icon set. I’ve set the leading of those three lines to 48 pixels and re-sized the icons to 32 x 32.

Below the “Services” column we will add a “return to top” link.

Step 6: The Footer

The last step is to add a copyright to the footer. I’m using 14 pt Georgia in #cfcdb4.

The End Result:

Here is a look at what we just designed (click the image to see it in full size).

If you’d like to get the PSD file used for this tutorial, it can be downloaded from Folio Focus for free. You can use it for personal or commercial purposes, but it cannot be re-distributed.

For more Photoshop layout tutorials see:

• Design an Online Template Shop Layout Using Photoshop
• Design a Blue Corporate Website in Photoshop
• Design a Clean Portfolio Site in Photoshop
• How to Design a One-Page Portfolio in Photoshop
• Design a Stylish Blue Blog Theme in Photoshop
• Design an E-Commerce Website in Photoshop
• Design a Website for a Non-Profit Organization in Photoshop

This post is supported by SnobbySlice. SnobbySlice provides PSD to HTML/CSS services created by coders for coders. With our money back guarantee, we’re confident in our abilities to slice your PSDs into pixel perfect HTML. We can also convert mockups into WordPress and MySpace templates. Learn more about our services and place your order to get started.