How to Design a One-Page Portfolio in Photoshop

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

Step 1: Create a new file

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

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.

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

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:

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.

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.

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

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.

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.

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.

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.

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.

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.

That will give you a result that looks like this:

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.

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.

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

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.

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.

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

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.

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.

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.

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

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.

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.

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.

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.

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

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.

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

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.

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.

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

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

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.

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

The Finished Product:

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

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.