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

by Steven Snell

on January 18, 2010

in Tutorials

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

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

And here is a full-size look.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

And here is a full-size look.

ModestFolio, WordPress theme and Photoshop Tutorial

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

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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

ModestFolio, WordPress theme and Photoshop Tutorial

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

ModestFolio, WordPress theme and Photoshop Tutorial

Then click ok and it should look like this.

ModestFolio, WordPress theme and Photoshop Tutorial

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

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

And here is a look at 100%.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

And here it is at 100%

ModestFolio, WordPress theme and Photoshop Tutorial

Here is a look at what we have so far.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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

ModestFolio, WordPress theme and Photoshop Tutorial

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

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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

ModestFolio, WordPress theme and Photoshop Tutorial

Here is a look at what we have so far.

ModestFolio, WordPress theme and Photoshop Tutorial

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.

ModestFolio, WordPress theme and Photoshop Tutorial

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

ModestFolio, WordPress theme and Photoshop Tutorial

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.

Powered by Shutterstock

About Steven Snell

Stephen Snell is the owner and editor of Vandelay Design. Connect with Stephen on google+