How to Design a One-Page Portfolio in Photoshop

by Steven Snell

September 15, 2009 in Tutorials

Yesterday we released a free one-page portfolio template in cooperation with Snobby Slice, and today we’ll go through the process of designing that template in Photoshop. If you want to get the Photoshop file used in this tutorial or grab the free template, you can do so at the end of this post. The template is free for personal or commercial use.

A Preview of the End Result:

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

How to Design a One-Page Portfolio in Photoshop

Step 1: Create a new file

To start with, create a new file (File – New) that is 1600 pixels wide and 1280 pixels high.

How to Design a One-Page Portfolio in Photoshop

Step 2: The background

Our design is going to use a dark textured background, and the first step is the use the paint bucket tool to fill the background layer with #161514, a dark shade of gray.

How to Design a One-Page Portfolio in Photoshop

For the texture we will be using a free texture from Lost and Taken. Get can get the photo here.

How to Design a One-Page Portfolio in Photoshop

After downloading or copying the image, open it up in Photoshop and desaturate it (Image – Adjustments – Desaturate) to take out the color. Then flip it vertically and horizontally (Image – Image Rotation). That will give you an image like this:

How to Design a One-Page Portfolio in Photoshop

Now select the entire image (Select – All) and copy it to your clipboard (Edit – Copy). Then paste it on top of the background layer of our design (Edit – Paste). Double click on the texture layer in the layers palette and change the Blend Mode to Overlay and the opacity to 40%. You can use the free transform (Edit – Free Transform) to line up the texture how you want it since the texture you’re pasting in is much wider than the canvas.

How to Design a One-Page Portfolio in Photoshop

We’ll want the texture to be able to blend in with a solid background color, so we need to get a solid color at the bottom and to the sides of the texture. Add a new layer (Layer – New) and with the foreground color set to #161514, select the gradient tool. Make sure that the linear gradient is selected and that the gradient will fade from the foreground color to transparency.

How to Design a One-Page Portfolio in Photoshop

We’ll want the solid color to be at the bottom and the transparent part to be at the top, so we will start the gradient low on the canvas and move upwards. I started the gradient (by clicking the mouse) about 750 pixels from the top of the canvas and dragged it up to about the 450 pixel mark (hold Shift to keep it straight).

How to Design a One-Page Portfolio in Photoshop

Next, we will apply linear gradients to each side of the canvas. Add another new layer and keep the gradient settings the same. Start the next gradient about 25 pixels in from the left edge of the canvas and drag towards the right until you get to the 250 pixel mark. Then add another new layer and duplicate this process on the right. Our canvas now has a solid gray color on the bottom and both sides, so when the page is coded we can use CSS to set the page background in the same gray color and it will flow seamlessly.

How to Design a One-Page Portfolio in Photoshop

That completes our background and we can now move on.

Step 3: The header

Our header will contain a simple logo/branding area and a horizontal navigation menu. We’ll start with the logo. For this I am using the free Bergamo font. The text should be lined up with a vertical guide set at 350 pixels. For the designer’s name, in this case “John Smith”, I am using 36 pt text in #dedbda, a very light gray. After the name I am adding the words “freelance designer” in 24 pt italic text with the color #a8a5a4, a slightly darker gray. Then double click on the text layer in the layers palette and select Drop Shadow. Change the opacity to 50% and the distance and size to 2 pixels each.

How to Design a One-Page Portfolio in Photoshop

We will be making the navigation menu 960 pixels wide and 40 pixels high. I have set vertical guides at 320 pixels and 1280 pixels and horizontal guides at 100 pixels and 140 pixels to mark off the spot that will be used for the navigation menu. With the rectangular marquee tool select the area between those guides. Then select the paint bucket tool, set the foreground color to black (#oooooo) and set the opacity to 20%. Fill the selected area.

How to Design a One-Page Portfolio in Photoshop

Now we are going to make our own pattern to use as a scan line effect that will sit over top of the background that we just made for the navigation menu. Create a new file (File – New) that is 8 pixels wide and 8 pixels high with a transparent background. Now look at the image at about 800%. Because it’s transparent we see what looks like a gray and white checkerboard.

How to Design a One-Page Portfolio in Photoshop

We’re going to create a scan line pattern by filling three of those gray diagonal lines with black (#000000). Select the pencil tool and choose a brush tip that is square and 1 pixel in diameter. Using the pencil tool, click on the gray boxes one at a time to duplicate the image below.

How to Design a One-Page Portfolio in Photoshop

With that done, go to Edit – Define Pattern and give it a name, something like “custom scan lines” will work. Now go back to the file that we are designing and add a new layer on top of the one that we just used to create the background of the navigation menu. With the guides still there, again use the rectangular marquee to select the area for the navigation menu and once it is selected, press shift and backspace (shift and del on Mac) to bring up the fill options. Select Pattern from the drop down and select the pattern that we just created. Then set the opacity to 70% , and click ok.

How to Design a One-Page Portfolio in Photoshop

That will give you a result that looks like this:

How to Design a One-Page Portfolio in Photoshop

With the type tool add text for links in the navigation menu. I’m using 18 pt Georgia in #a8a5a4. The first link should line up with a vertical guide at 350 pixels, which also lines up with the logo. These links will take the visitor to sections of this page rather than leading to other pages.

How to Design a One-Page Portfolio in Photoshop

Next, we will add some links at the right side of the navigation menu to Twitter and Facebook profiles. For this I am still using 18 pt Georgia, but with a color of #7488ef for the links.

How to Design a One-Page Portfolio in Photoshop

That completes our header area. Here is what we have so far:

How to Design a One-Page Portfolio in Photoshop

Step 4: The “services” area

Below our navigation menu we will have some text that provides visitors with information about the different services that our offered. We will creating three columns and will be using the headings web design, web development, and logo design. We will be using three columns with a width of 280 pixels each.

To line up the columns, set vertical guides at 350 pixels, 630 pixels, 660 pixels, 940 pixels, 970 pixels, and 1250 pixels.

How to Design a One-Page Portfolio in Photoshop

Leave 40 pixels of space from the bottom of the navigation menu and enter a text box. I’m using 18 pt Georgia in #dddc67 for the header “Web Design” and 14 pt Georgia in #dedbda for the rest of the text.

How to Design a One-Page Portfolio in Photoshop

Then duplicate the same thing for the middle and right columns.

How to Design a One-Page Portfolio in Photoshop

Step 5: The “portfolio” area

Below the text that we just added, we will be creating an area where we will be showing selected pieces from the designer’s portfolio. To set the background for this area we will be creating a rectangle that is 960 pixels wide and 410 pixels high. We want the textured background to show through at the top and a solid color at the bottom, so we will be using the paint bucket tool with some opacity. Select the paint bucket tool, set the foreground color to #000000 and the opacity to 40% and fill this area.

How to Design a One-Page Portfolio in Photoshop

The set the foreground color to #21211f and use the pencil tool to add a one-pixel border at the edge of the dark area.

How to Design a One-Page Portfolio in Photoshop

Next, we will be adding six images that showcase work from the portfolio. Find whatever images from your own work that you want to showcase and crop and resize the images to be 280 pixels and 160 pixels. Then paste in the images leaving 30 pixels surrounding each image at all sides.

How to Design a One-Page Portfolio in Photoshop

With the foreground color still set at #21211f, use the pencil tool to add a one-pixel border around each of the images.

How to Design a One-Page Portfolio in Photoshop

Step 6: The “about me” section

Below the portfolio area, we will be adding some space for text that will cover whatever you want to cover in the “about me” section of the site. Leave 40 pixels from the bottom of the portfolio area and create a text box that aligns with the columns used in the services and portfolio section. I’m using 14 pt Georgia in #dedbda.

How to Design a One-Page Portfolio in Photoshop

In the right column, add another text box. For the text “My Skills:” I am using bold 14 pt Georgia in #dddc67. The other text is 14 pt Georgia regular in #a8a5a4.

How to Design a One-Page Portfolio in Photoshop

Next to each item in the “skills” list we are going to add stars to indicate the level of proficiency or expertise. The star icon that we will be using comes from Function’s free icon set. Download the icon set and open the star icon. Resize it to 18 pixels by 18 pixels (Image – Image Size). We will be using 4 and 5 stars for the tutorial, but you can obviously change this to the number of stars that you want to use for your own purposes. There is also an icon for star_off, which we will be using for the last star on items that we are designating as four stars. Rather than trying to paste in and align each star one-at-a-time we will be creating two separate rows of stars and using them to paste into our document.

Create a new file that is 90 pixels wide and 18 pixels high with a transparent background. Set vertical guides at 18 pixels, 36 pixels, 54 pixels, and 72 pixels.

How to Design a One-Page Portfolio in Photoshop

Copy the 18 x 18 pixel star icon, choose the rectangular marquee tool, and select the first box in the new file that we created.

How to Design a One-Page Portfolio in Photoshop

Now, paste the star and it will be place in the middle of that block.

How to Design a One-Page Portfolio in Photoshop

Now select the next block between the guides and paste in the star. Repeat this process for each of the blocks and you’ll have a row of five stars that are evenly spaced.

How to Design a One-Page Portfolio in Photoshop

You can do this again but put in the blank star at the end.

How to Design a One-Page Portfolio in Photoshop

Now, with these new files that we created, you can copy them and paste them in to our design to have an easier time with lining up the stars.

How to Design a One-Page Portfolio in Photoshop

Step 7: The “contact me” section

Below the text that we created for the About Me section we will be adding a line of text to encourage potential clients to send an email. We will be creating a dark colored box to go behind the text that will match the portfolio area. Use the rectangular marquee tool to select an area that is 960 pixels wide and 40 pixels high. Use the paint bucket tool to fill it with #000000 at 40% opacity. Then use the pencil tool to give it a one-pixel border with #21211f.

How to Design a One-Page Portfolio in Photoshop

Now we want to add text to this area. I’m using 18 pt Georgia italic in #a8a5a4, and #dddc67 for the link.

How to Design a One-Page Portfolio in Photoshop

Next we will add a “back to top” link in 18 pt Georgia italic in #dddc67.

How to Design a One-Page Portfolio in Photoshop

Step 8: The footer

The last step is to add the footer. Select the bottom portion of the canvas and use the paint bucket tool to fill it with #000000 at 40% opacity. Then use the pencil tool to give it a top border of one pixel in #21211f.

How to Design a One-Page Portfolio in Photoshop

Add copyright text in the footer with 14 pt Georgia, #dedbda.

How to Design a One-Page Portfolio in Photoshop

The Finished Product:

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

How to Design a One-Page Portfolio in Photoshop

If you’d like to use the free template, you can download it at Folio Focus. Thanks to our friends at Snobby Slice for coding the template for us.

Powered by Shutterstock

About Steven Snell

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

  • Michael Austin

    Sep 15th

    Thanks for the tips, this is what i came up with maustingraphics.com one page portfolio

  • N-Designs

    Sep 16th

    awesome tutorial. Thank you for sharing.

  • Mars

    Sep 16th

    great tutorial you got here

  • Rahul - Web Guru

    Sep 16th

    Nice inspiration n tutorial for a single page portfolio.

  • Lori Buff

    Sep 16th

    Nice tut. I think viewers like to see the portfolio images open in a larger view. Using a lightbox or shadowbox script is great for making that happen.

    Thanks,
    Lori

  • Webmasters Gossip

    Sep 16th

    Very nice and detailed tutorial. Thanks for sharing :)

  • fjiver

    Sep 16th

    if you really need a template for your portfolio and showcase your work… you shouldn’t have one.

  • Ankur Shah

    Sep 16th

    Extremely nice and well demo’ed!

  • ian

    Sep 17th

    thanx for the tut…

  • Edgar Leijs

    Sep 17th

    Nicely done tutorial. Well explained! Shall RT this one…

  • furzen

    Sep 17th

    awesome, thanks…

  • Steven Snell

    Sep 17th

    fjiver,
    That may be the case, but portfolio templates/themes are very popular and get used a lot. They could be used by graphic designers who do not do web work, photographers, developers who don’t design, or any number of other people for legitimate reasons. Since people like them, I figured I would make one available.

  • Joshua Chase

    Sep 17th

    Incredible tutorial, thank you. Thanks for taking the time to produce the screen shots and copy.

  • kelvinwebdesigner

    Sep 17th

    Nice tut. This will help me with my one page portfolio website about to be launched.
    Keep sharing
    CG

  • selling art online

    Sep 17th

    Very cool tut. Some stuff for me to learn for sure. thanks

  • tjenner

    Sep 17th

    +1 what fjiver said.
    @Steven: A graphic designer who does not do web work is not going to need a photoshop template, is he? He needs a html/css tutorial! Even a developer who does not design doesn’t need a photoshop tutorial, he needs the final psd or design.
    That said, it is a nice bit of design inspiration (for me, a non-designer).

  • Steven Snell

    Sep 17th

    tjenner,
    “A graphic designer who does not do web work is not going to need a photoshop template, is he? He needs a html/css tutorial!” – There is an html/css template provided as well for anyone who falls into this category.

    As far as the Photoshop tutorial is concerned, my emphasis is not necessarily to show how to design a portfolio site specifically. The principles and Photoshop techniques could be used to design a site for any purpose. If I’m looking for help while I’m working on a website for a construction company and I see a helpful tutorial that covers the process of designing a website for a doctor, I’m not going to ignore the tutorial because it was not intended specifically for designing a site for a construction company. The things that I would learn from the tutorial could be applied in other ways.

    I don’t disagree with your point, but as I said earlier, the template was created because there is a large demand for portfolio templates. If you browse through a site like ThemeForest you’ll see that there are a lot available and many people are buying them. In some cases they can be used for other types of sites aside from a portfolio. Would I personally use a template for my own portfolio? No (for the reasons that you guys have already pointed out). But other people do have an interest in them, that’s why it was provided – and there may be more to come in the future.

  • wien

    Sep 17th

    nicer work

  • Website Design Bristol

    Sep 18th

    Great Work,

    I really like the structure you have employed and would consider using it do my own site as it needs a revamp.

    Like it a lot.

  • Alexandros

    Sep 19th

    Awesomeness!! Great how-to!!!

  • Freelance Graphic Design | Tony

    Sep 21st

    Thanks for the tips. This will be of great help to anyone who wants to learn how to make a one-page portfolio in Photoshop. The structure looks great and the instructions are easy to follow. Great post to say the least.

  • E11World

    Sep 30th

    I liked this tutorial very much. Thank you for the freebie.

  • Ivan Mišić

    Oct 6th

    Awesom layout :-)

  • crumblepie

    Oct 11th

    I like how minimalistic this theme is – it has all the info a potential client would need, yet it doesn’t look busy.

  • Scarlett

    Dec 16th

    Brilliant, things like this is needed for designers that aren’t the best at web. Many thanks for this tutorial! RT’d

  • Theodore B Brown

    Feb 5th

    really nice tutorial. Thanks for sharing!

  • Brian Jones

    Mar 5th

    Great tutorial Steven – thank you for sharing. These tutorials are excellent stepping stones for novice designers as myself. This helps understand and learn the ins and outs of using PS for web design. By practicing and learning these tutorials – they not only bring inspiration but ideas to put into our own designs. Keep up the excellent job and support for our community. Looking forward to doing my part soon!

  • Tim

    Sep 18th

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

    Thanks
    Tim

  • sawebdesigns

    May 10th

    Great job I love what you did on this one

  • Interactive Solutions

    May 11th

    On-Page-Portfolio is very important part in Photo section as you discuss. Thanks for explaining each and every point.

  • rgf

    Jul 29th

    I love tutorials that don’t work. That’s why I go to Manuals.

  • Leave a Comment

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