How to Create Your Own Single Page Portfolio Design in Photoshop

Today we’re going to be creating a single page portfolio design that can be used to showcase your design work and allow people to get in touch with you. You can use this design as your full blown portfolio, or as your personal web page (I may even be switching my personal blog to a modified version of this design).

I will be as detailed as possible in the tutorial, but if you have any questions, feel free to let me know in the comments and I’ll do my best to answer them.

Lets do it!

Step 1: Setting up your photoshop document

The first thing we’ll be doing is setting up our photoshop document. We’ll start by making the width 1000 and the height 1500.

Single Page Portfolio Photoshop Tutorial

Now you’re going to fill your background layer with #ebebeb. After you’ve done this, make sure you download the 960 grid from 960.gs and open up the 12 column photoshop grid, placing it in a new layer in our portfolio design.

Single Page Portfolio Photoshop Tutorial

As you can see, it doesn’t properly from top to bottom, so what I like to do is duplicate the grid layer two times, dragging one of the layers to the bottom and one to the top, making it appear as it’s one long grid. After I’ve got them lined up, I select each each layer and merge them into one layer, naming it “Grid”.

Single Page Portfolio Photoshop Tutorial
Single Page Portfolio Photoshop Tutorial

The last thing we’re going to do is give our background a bit of texture. Create a new layer under our grid layer and name it “texture”. select the entire document (ctrl+a) and fill it with the texture from the image below (it’s a default texture in photoshop cs4).

Single Page Portfolio Photoshop Tutorial

Now, change the blending mode to MULTIPLY and we’re all set to start adding in our web design elements.

Step 2. Adding in our header

This part is going to be the most critical as it is going to help showcase who you are right off the bat and allow people to know the name of your site/company by viewing your logo

What I want to do is create a logo that’s going to stand out and be noticeable when people view the site, so what I am going to do is grab the font tool, get the CHUNK FIVE font (download from the League of Moveable Type), set the font size to 48.4pt and #7fccd6 for the color, placing the text 20 pixels from the top of the document and lining it up with the furthest left grid line.

Single Page Portfolio Photoshop Tutorial

You’ll notice that the text spans the entire width of 5 grid lines. This was done for a reason. What I’m going to do now is help showcase the font a bit and the structure of the grid is going to help things move along a bit quicker.

Make a new layer and name it “underline” and then make a selection 380 pixels wide and 32 pixels tall, right under the title text.

Single Page Portfolio Photoshop Tutorial

Now, grab your gradient tool and have one color #000000 and the other be transparent. You’re going to drag and make a gradient from top to bottom in your selection like this:

Single Page Portfolio Photoshop Tutorial

Change the opacity of the gradient to 10% and add a layer mask. Now, you’re going to grab your gradient tool set it to be black to white and add a gradient to the layer mask like below.

Single Page Portfolio Photoshop Tutorial

Next, we’re going to do the same thing on the right side of the gradient layer, ending up with something very similar to the item below.

Single Page Portfolio Photoshop Tutorial

Duplicate the ‘underline’ layer, move it up two pixels and select the original underline layer (clicking the picture of the image layer like below).

Single Page Portfolio Photoshop Tutorial

What we’ll be doing with this selection is deleting it from the copy layer.

Single Page Portfolio Photoshop Tutorial

Step 3: Now we’ll be adding in the navigation

First, you’re going to want to create a new folder inside the HEADER folder and name it “NAVIGATION” so you can keep it separate from the rest of the header files. Create a new layer and name it “navigation”. Grab the text tool, still using the Chunk Five font, making it 18pt and #e9e9e9.

Single Page Portfolio Photoshop Tutorial

Add a drop shadow to the text layer with the following settings.

Single Page Portfolio Photoshop Tutorial

In order to make sure we know which items are hovered over, we’ll grab the Rounded Rectangle Tool, setting it to be a 5px radius and make a selection in a new layer named “hover”, giving it a color of #dedede.

Single Page Portfolio Photoshop Tutorial

Step 4: Creating the welcome text

The next step is to create a new folder, naming it Welcome and adding a new text layer inside of it, using the following character settings in the image below.

Single Page Portfolio Photoshop Tutorial

We’ll be adding the same drop shadow that we added to the navigation text, which will now make the text look like the below image.

Single Page Portfolio Photoshop Tutorial

Step 5: Lets add in our portfolio items

Now that we’ve got the header and welcome text out of the way, lets add in some portfolio items.

Create a new folder, name it “Portfolio” and head over to the designers toolbox to download their safari window PSD file so we can can set the portfolio items inside of it to give it a bit of better appeal.

We’ll be adding their PSD into our document, centering it and resizing it to 72% of it’s original size.

Single Page Portfolio Photoshop Tutorial

Now, duplicate the folder that the above image is in, renaming it to “left portfolio” and resizing it to 80%. Now, move it to the far left of the grid, 20 pixels from the bottom of the large portfolio box. Do the same thing again but name the new folder “right portfolio” and move it to the right side of the grid. You’ll end up with something like below.

Single Page Portfolio Photoshop Tutorial

The last thing we’ll be doing here is adding a bit of a shadow under the portfolio pieces, so grab your Elliptical Marquee tool and make a selection like below and fill it with black.

Single Page Portfolio Photoshop Tutorial

Now, deselect the circle and to go FILTER > BLUR > GAUSSIAN BLUR. Add in the information from the image below.

Single Page Portfolio Photoshop Tutorial

Step 6: Adding your “About Me” section

For this section, we’re going to keep it clean since it’s just going to give the visitor a bit of background information about you. First, we’ll be using the same font we used for the title of the site and giving our section a title. Notice that we utilized the same drop shadow as the rest of the font’s on the site.

Single Page Portfolio Photoshop Tutorial

Next, we’re going to create two layers – on the first layer, make a selection that’s 940px wide and 1px tall and fill it with #FFF. On the second layer, make a selection just like above, but 1px above the white line and fill it with #c9c9c9.

Single Page Portfolio Photoshop Tutorial

Next, grab your text tool, changing your font to Tahoma, size 12 and make a selection spanning 6 columns of the grid, filling it with some text about yourself. For the below sample, we’re going to use lipsum text.

Single Page Portfolio Photoshop Tutorial

Now, we’ll duplicate this layer and move it to the right side, making a newspaper style text reading.

Single Page Portfolio Photoshop Tutorial

Step 7: Adding in your services

First, we’ll duplicate the About folder and move it down below the original about layers.

Single Page Portfolio Photoshop Tutorial

Next, we’ll make the two text boxes a bit smaller in width, similar to the image below, adding in two more text boxes to fill out the row.

Single Page Portfolio Photoshop Tutorial

Step 8: Adding in the contact section

First, we’ll duplicate the about folder again, moving it down below the services section. Remove both text layers and you should end up with something like below.

Single Page Portfolio Photoshop Tutorial

Next, head on over to Function and grab their free icons (or you can use other icons if you’d like) and set them up under the get in touch text, like the image below.

Single Page Portfolio Photoshop Tutorial

Next, make a text box selection next to the social media icons, three columns wide and add in some text, like the image below.

Single Page Portfolio Photoshop Tutorial

Duplicate this text layer, move it to the right and add in three more forms of contact. I chose AIM, Twitter and Facebook. You can add in whatever you’d like here.

Single Page Portfolio Photoshop Tutorial

Step 9: Touching things up

One thing I noticed afterward was that the text looked a bit flat, so I went back and added in the white text shadow on all of the text, even the about and services text, giving it a bit more ‘umph’. I also added in a couple of my own designs into the portfolio section so they weren’t left white during the final view.

See the final result below (click the image to view it in it’s full size.

Single Page Portfolio Photoshop Tutorial

Join professional testking HP0-J36 training course to learn how to create single page profile in photoshop and become expert in web designing using testking 000-086 photoshop tutorials and testking HP2-E24 demos.

This entry was posted on Monday, March 29th, 2010 at 09:33 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Mike Smith is a full time blog designer who recently started his own WordPress theme site, Giant Themes. He is a regular writer around the web design community. You can follow Mike on Twitter or visit his web site.

About the author Published by Mike Smith

8 Responses »

  1. Very nice… But if it’s one page portfolio site, why did you create Work, Services and Contact link in header?

  2. Those items can link and allow the person to scroll down the page right to the items they’re looking for. Add in a nice jquery smooth scroll and it gives the site some more polish :)

  3. Nice, Mike! This is a cool reference. Thanks for sharing.

    @slaFFik: I’m assuming it’s probably used for anchor links. =)

  4. So Good! … I going to use it for My Personal Portafolio

  5. This was so helpful!
    I used it as a guide to design my one page portfolio!
    http://creativeglofish.com

    Thanks
    Tim

Trackbacks

  1. March�s Fresh Photoshop Web Layout Tutorials
  2. 31????????? | Booto'Blog
  3. 11 Fresh Portfolio Design Tutorials

Leave a Response

We do love friendly, well-constructed and respective comments. We do not love bitchy, stupid and disrespectful comments. Find something wrong in this post?, feel free to send us a note and we will fix the issue asap.