How to Design a Portfolio Site in Photoshop, Plus Free WordPress Theme

I’m happy to release a free WordPress portfolio theme called Modest Folio. It’s a simple design and layout that will allow your work to take center stage. It features a tabbed featured area on the front page to show the different services that you offer. Modest Folio was design by me and coded by our friends at Snobby Slice. They offer PSD to HTML services, as well as PSD to WordPress (and other CMSs).

Download the WordPress Theme as a Zip File. (The theme contains instructions for setting up the front page, navigation, and Twitter areas within a “notes” folder. Please read those instructions before using the theme.)

In addition to releasing the WordPress theme, this post will also take you step-by-step through the process of designing the front page in Photoshop in case you would like to see how it was done.

Create a New File

Open Photoshop and create a new file that is 1400 px wide and 1100 px high.

Step 1: The Background

We’ll be using a simple background with a solid color, a light shade of gray. Set the foreground color to #d6d6d6 and select the paint bucket tool. Fill the background layer with this color.

Step 2: The Header

Set new horizontal guides (View – New Guide) at 120 px and 160 px. Create a new layer (Layer – New) and use the rectangular marquee tool to select everything above the guide at 160 px.

Set the foreground color to #4d4d4c and the background color to #141414. We’re going to use a radial gradient in the header with these two shades of gray. Select the gradient tool, choose the radial gradient and make sure you’re using the gradient that fades from the foreground color to the background color.

We want the gradient to be in the center of the header horizontally, so at the 700 px mark. Start above the top of the canvas by about 50 px, click and drag to about 250 pixels below the top of the canvas, and release the mouse.

Once you have released the mouse you will see the radial gradient. We’ll add some noise to give it a slight texture. Go to Edit – Noise – Add Noise. You can experiment to see what you like, but I think I set it at 2%. And here is what you have.

Add a new layer and set the foreground color to #000000. Use the rectangular marquee tool to select the area between the two guides, this will become the navigation menu.

Select the paint bucket tool and set the opacity to 40%. Use the paint bucket tool to fill the selected area. Here is what it should look like.

Add a new layer and set the foreground color to #373433. Select the pencil tool and a square brush. Set the brush diameter to 1 px. Use the pencil tool to add a one-pixel border at the top of the navigation menu. Here is a blown up image of how it will look.

And here is a full-size look.

We’re also going to add two one-pixel borders to the bottom of the navigation menu. First, use the pencil tool to add a one-pixel border in #000000, and then add another one-pixel border in #ffffff right below it. Here is a blown up look.

And here is a full-size look.

Set a vertical guide at 240 px and add text for the navigation menu. I am using 14 pt Arial in #92a2ef.

Next, set a vertical guide at 780 px, which will show the right edge of the layout. Add a new layer and set the foreground color to #d6d6d6. We’re going to add a site search here, so use the rectangular marquee tool to select and area for the button and use the paint bucket tool to fill it with #d6d6d6. Then add the word “search” in 14 pt Arial, #141414.

Then use the rectangular marquee tool to select an area for the search field and use the paint bucket tool to fill it with #ffffff.

To finish off the search field we’ll use the pencil tool to add a one-pixel border in #373433 around the outside. Here is a blown up look.

For the title/logo I’m using the free font ChunkFive. I’m using 36 pt text in #778cf6 at the center of the header.

We’re going to add some style to the text, so set the foreground color to #778cf6 and the background color to #94a3ef. Double click on the text layer in the layers palette to bring up the layer style options. Click on “gradient overlay” and select the gradient that fades from the foreground color to the background color.

Then click on “stroke.” Add a one-pixel inside stroke with #778cf6.

Then click on “drop shadow.” Add a drop shadow at 75% opacity with a distance and size of 4 px.

Then click ok and it should look like this.

The last step for the header is to add the description just below the title/logo. I’m using 18 pt Georgia italic, #b1b1b1.

Step 3: The Featured Area

To set the background for the featured area, set vertical guides at 220 px and 1180 px, and horizontal guides at 180, 220, and 580 px. Add a new layer and set the foreground color to #b1b1b1. Use the rectangular marquee tool to select the area and use the paint bucket tool to fill it. See the image below.

Add another new layer and set the foreground color to #c6c5c5. Use the rectangular marquee tool and the paint bucket tool to add a box that is 440 px wide and 320px high. It should leave 20 pixels on the top, right, and bottom to the edge of the larger, darker gray box.

You’ll want to put an image from your portfolio here, so find an image that you want to use and crop/re-size it to be 420 px wide and 300 px high. Then paste the image in the center of the light gray box.

To the left of the image we’ll add some text in 14 pt Arial, #141414. The text box should leave 20 px of space to the top and left, and 40 px to the right.

Add a new layer and set the foreground color to #0c1c6b. We’re going to make a simple button below the text that will link to the full portfolio. Use the rectangular marquee tool to select the area, and leave 20 px of space to the left and the bottom so it lines up with everything else in this area. For the text I am using 14 pt Arial, #d6d6d6.

Now we’re going to create the tabs for the slider. Add a new later and the foreground color should still be set to #0c1c6b. Use the guides at the top with the rectangular marquee tool to create an area for tabs that are 40 px high. The tab area is 600 px wide. Then fill the selection with #0c1c6b.

Next, add text for a few different tabs, I’m using four of them. The text should be 14 pt Arial in #d6d6d6.

The first tab is going to be the active one, so we’ll give it a background color to match the background of the featured area. Add a new layer and move it below the text that we just added, and set the foreground color to #b1b1b1. Use the rectangular marquee tool to select the area for the tab, and use the paint bucket tool to fill it with color. Then change the text of the first link to #0c1c6b.

The tabs need some separation, so we’ll use the pencil tool to add one-pixel borders. Add a new layer and set the foreground color to #06103e. First we will add a one-pixel bottom border to the blue tabs in this color. Then change the foreground color to #213493 and add one-pixel borders between the blue tabs. Here is a blown up image.

And here is a look at 100%.

The last thing we want to do to the featured area is to apply a one-pixel border to the gray box, going around the outside of the active tab as well. Add a new layer and set the foreground color to #9f9e9e. Use the pencil tool to add the border. Here is a blown up image of how it will look around the active tab.

And here it is at 100%

Here is a look at what we have so far.

Step 4: The Content Area

Below the featured/slider area we will have two columns. On the left will be an “About Me” section, and to the right we will show the titles of recent blog posts that visitors can click to, or they can choose to see your recent tweets.

We’ll start on the left by adding the text “About Me” in 18 pt Arial, #141414. Leave 40 pixels of space above the top of the text to the bottom of the featured area.

We’re going to include a photo here. Add a new layer, and set the foreground color to #c6c5c5. The box should be 160 px wide by 160 px tall. Leave 20 pixels from the bottom of the text above, and use the rectangular marquee tool to create the selection and fill it with the paint bucket tool.

Find a picture that you want to use (I will be using this one from sxc.hu) and crop/resize it to be 150 px by 150 px, which will leave a 5 pixel border using the box that we just created. Once you have your picture ready, paste it in the middle of the gray box.

Next, we’ll want to add some text around the photo. The column should be 460 px wide, between vertical guides at 220 px and 680 px. Add text using 14 pt Arial, #141414.

Now we can move on to the right column. We’ll start by adding a gray box to give the area a background color. The easiest way is to set vertical guides at 720 px and 1180 px, and horizontal guides at 660 px and 960 px. Add a new layer and set the foreground color to #c6c5c5. Select the area between these 4 guides using the rectangular marquee tool, and use the paint bucket tool to fill it.

Then add another new layer and work on creating some tabs at the top of the area. Start by adding a rectangle in the same color that is 250 px wide and 40 px high.

Add text for recent blog posts and recent tweets using 14 pt Arial, #0c1c6b.

Next, use the rectangular marquee tool to select the area for the right (non-active) tab, set the foreground color to #0c1c6b and use the paint bucket tool to fill the selection. Then change the recent tweets text to #d6d6d6.

We’re going to give this gray box, including the active tab, a one-pixel border in #9f9e9e.

Go back to the blue tab and add a one-pixel bottom border of #06103e. Here is a blown up look.

Now we can add links to 5 recent blog posts. All the text is 14 pt Arial. Links are in #0c1c6b, and the rest of the text is in #141414.

Add a new layer and set the foreground color to #9f9e9e. Use the pencil tool to add one-pixel borders between the list items.

Here is a look at what we have so far.

Step 5: The Footer

To separate the footer from the content area we will add a one-pixel border in #c6c5c5 using the pencil tool. The border should be 40 px below the bottom of the text.

The last step is to add some text to the footer in 14 pt Arial. Links are in #0c1c6b and other text is #141414.

Here is the Finished Product

Download the WordPress Theme is a Zip File. A big thank you to Snobby Slice for coding the theme and making it available for free.