Design an Attractive One-Page Portfolio Using Photoshop

by Steven Snell

November 9, 2009 in Tutorials

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)

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

Step 1: The Background

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

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

Photoshop Layout Tutorial - One-Page Portfolio

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

Photoshop Layout Tutorial - One-Page Portfolio

Here is how it should look.

Photoshop Layout Tutorial - One-Page Portfolio

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

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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

Photoshop Layout Tutorial - One-Page Portfolio

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

Photoshop Layout Tutorial - One-Page Portfolio

The image below shows where we just added borders.

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

Repeat this process for each of the boxes.

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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

Photoshop Layout Tutorial - One-Page Portfolio

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

Photoshop Layout Tutorial - One-Page Portfolio

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.

Photoshop Layout Tutorial - One-Page Portfolio

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

Photoshop Layout Tutorial - One-Page Portfolio

Step 6: The Footer

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

Photoshop Layout Tutorial - One-Page Portfolio

The End Result:

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

Photoshop Layout Tutorial - One-Page Portfolio

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:

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

Powered by Shutterstock

About Steven Snell

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

  • David Leggett

    Nov 9th

    Wow, this turned out great Steven! I love the use of textures mate :)

  • Design Informer

    Nov 9th

    The end result is great. Very neat but great use of textures as David mentioned!

  • designfollow

    Nov 9th

    great tutorial

    thank you

  • Jonathan

    Nov 10th

    Great tutorial, I just think the website is a little tall…

  • Dan O'Neill

    Nov 10th

    Absolutely love the design.

    Excellent use of subtle features that really make a web design. Something I’ll probably never master!

    Great tutorial too. Keep up the good work!

  • Frazer

    Nov 10th

    Great tutorial, but i question the appeal of its display. Its really hard to display websites, at a tenth of its size, and still look appealing. Perhaps better would be displaying cropped parts of the websites design. Its great to have a personal site but its great to be part of designer networks also, to market yourself differently as a designer.

  • Roy Ho

    Nov 10th

    So simple but yet so elegant. I think this is what designing in general is all about. Great work!

  • BebopDesigner

    Nov 10th

    Excellent Tut! Love the result. Thanks for sharing

  • Billy

    Nov 10th

    Hey great job! Can you give me any help on making the tweets section functional?

  • Steven Snell

    Nov 10th

    Thanks David. And thank you for making the textures available to everyone.

    Hi Jonathan,
    Yes, it is fairly tall. That’s pretty common though for one-page sites, and the navigation at the top would allow visitors to move to lower sections of the page without scrolling all the way down (after it is coded).

    Hi Frazer,
    I’m not quite sure I understand what you mean. Are you referring how the images in the post are displayed? If so, cropping images isn’t always an option because the images need to show readers what is happening at various steps. The images from the design in progress include links to the full size images.

    Thanks for the feedback everyone.

  • Frazer

    Nov 10th

    Hi Thanks for the response. What i mean is that people often make portfolio sites to show off they’re sites they have made, but showing tiny preview images doesn’t draw much attention, or do the sites justice. I mean it as an advice to designers, not to critisize the tutorial, which was great btw.

  • Steven Snell

    Nov 10th

    Billy,
    You can get the code from Twitter here – http://twitter.com/widgets/html_widget
    Then you can use CSS to style the list.

  • web design sydney

    Nov 10th

    Hi
    In this site very super , very useful for me, keep develop, design also very super ,
    i bookmarked in this blog

    Thanks for your information

  • Tom Ross

    Nov 10th

    Awesome work Steven! I love your use of textures and grids in this one :)

  • Jannis Gerlinger

    Nov 11th

    Nice result. Lovly
    kepp going on with this!

  • Tsedaka

    Nov 12th

    Very nice.

    I’ll use the footer for my website :)

    (just too lazy to redesign my own footer lol)

  • BooBoo17

    Nov 15th

    Hello there. Your website is simply beautiful! But I do have a quick (and probably dumb) question for you… How do you get this as a working website for this state from the .PDF form? Do you slice the images for your portfolio from your website?

    Sorry, I am totally new to all this. I am self-taught dreamweaver user and I just know the very basics. I used some of your design steps but only a few including the footer. But I don’t know how to add the ‘twitter’ using the CSS (as you stated above). Do you have any suggestions on what to do from here?

    Thank you very much and I truly appreciate it!

  • Steven Snell

    Nov 15th

    Hi BooBoo17,
    It’s actually not a PDF, it’s a PSD (a Photoshop file). If you’re not familiar with the process of converting to a website you should do a search for tutorials for PSD to HTML, there are a number of them. They will walk you through the process of coding a site from a PSD.

    You don’t add the Twitter using CSS. You’ll add it with the code provided by Twitter (see the link in my previous comment) and then you can style it however you want with CSS.

    I hope that helps.

  • BooBoo17

    Nov 15th

    Hello again. Thanks for the super fast reply. Sorry, I did mean PSD… I was just in a hurry and it was a typo. I will definitely do that.

    It kinda helps but I’ll just google it. THANKS! :]

  • Louis1977

    Nov 16th

    Hello Steven.

    What a wonderful step-by-step tutorial you have here. I do have a few quick question if you don’t mind answering for me.

    First, I am attempting to use the same measurements of your footer and the twitter in the center column. But what is the best way of getting the twitter to align correctly in that center column? Do you have any codes that are correct for this or can you point me in the right way? I can’t seem to get this right.

    Second, with a PSD this wide, does it effect the views on smaller computer monitors? If so, is there a way to make it more ‘multi-size monitor friendly’.

    Thank you very much sir and keep up the great work. I’ll continue to follow.

  • Steven Snell

    Nov 17th

    Hi Louis,
    My approach to coding the three columns would to be to give them all a set width of 300px. Each column would be floated to the left and use display:inline on each. The text in each column would then be left aligned (it should be by default) and then it will all line up properly. Does that answer your question?

    As far as the width goes, the width of the layout is really only 960 pixels, which is a very standard layout width. The background image is very wide, but that will be set by CSS. So for visitors who do not have wide monitors, they will see the 960 px wide layout centered on their screen, they just won’t see much of the background image on either side.

  • Webjohn01

    Nov 19th

    Hello Steven!

    I really like your newest design because it is easy to use either.
    I am waiting for the conversion of this into XHTML/CSS.

    Keep up the good work.

    More thanks!

  • jarekg

    Nov 19th

    Hello, great work but I have a problem.I see in oryginal PSD file that texture 1 and 2 are grey. Im making them overlay and opacity 70% but cant get colors You have. What im doin wrong? Or how to change colors in texture? Thanks

  • Steven Snell

    Nov 19th

    jarekg,
    The color comes from the layer that is below the textures. When the textures are desaturated (removing the color) and set to overlay in the blending mode, the color from the layer below will show through.

  • C Kaufman

    Jul 12th

    Nice design.
    Since it is all graphics does this effect how Google and other search engines look at it or rank it?; i.e. they cannot really read much text to catergorize or rank it.
    Would adding some separate text help with search engines?

  • vuitton

    Aug 14th

    Thanks for sharing great tutorials!

  • Web 3.0 Textures

    Aug 24th

    I love the attention to detail with the texture integration! Very inspiring!

  • dreamincolor

    Nov 15th

    Very good ideas there!
    Don’t forget to include this great Single-Page Portfolio http://www.dreamincoloronline.com/design-code-cool-single-page-portfolio-part2/

  • lucy

    Nov 25th

    my comment got eaten. Anyway I wanted to say that it’s nice to know that someone else also mentioned this as I had trouble finding the same info elsewhere

  • Tuan Hai

    Mar 25th

    So useful & detailed.
    I will share this article with my friends learning Photoshop.
    Thank so much ^_^

  • sawebdesigns

    May 9th

    I love the color and the simplicity of the design

  • discount-drdrebeats-outlet

    Jul 9th

    this is nice post

  • Leave a Comment

    Your email address will not be published. Required fields are marked *