Voosh Themes

How To Design A Freelancer Portfolio Website

Last week I released a new WordPress Theme called Sanura – the theme has a clean design and is primarily aimed at freelancers who want an online portfolio to showcase their work. In this tutorial I will show you how to create the frontpage of this theme in Photoshop.

Designing a portfolio template can be quite challenging – it’s tempting to include details of all the projects you’ve ever worked on – but this will potentially overload your visitors with too much information. It’s important to include only what’s absolutely necessary – for example, details of a subset of your best project work, advertising of your service(s), and making it easy for people to get in touch with you. Having a blog can also be useful for driving traffic to your site and for showing that you are active in the community within which you work.

The template that we’ll be creating In this tutorial will include several of these “features” – there are no overly fancy effects – just subtle ones that all combined create a nice and professional feel.

Here’s a screenshot of the template that we will be creating:

Step 1: Create A New Document

Create a new document with a size of 1100×2000. Then add some vertical guides at 70px and 1030px – that gives us a width of 960px which should easily fit on most screens.

Step 2: Create The Header

In the header we need to include the name of the portfolio owner and a subtitle that includes their job title/profession. The first thing that we need to do, however, is to create the template background. Add a Gradient Overlay to your background layer using the following settings (where the colors used are #EEEEEE and #FFFFFF):

In the Gradient Editor, move the white and grey boxes closer together:

This will then create a subtle grey-white gradient at the top of your template (see the screenshot below). To create the name, use the Myriad Pro font, set the size to 100px, the font weight to bold, the letter spacing to -50px, and the color to #333333. Then type some text and place it next to your left border.

Underneath that we want to add the job title – using the same font, set the font size to 60px, the color to #CCCCCC, and type some text. Position this directly under the name.

Step 3: The Navigation Section

To add the navigation links, change the font to Arial, set the size to 24px, the color to #333333, and type the different page names that will be included in the template. Separate each page name with a “~”. Also set the “Home” text color to #E86E14.

Underneath the text we need to draw a line – using the Line Tool, set the line “Weight” to 2px and the foreground color to #EEEEEE – then draw a line from the left border to the right.

Step 4: Add The Featured Text

Following the navigation section we need to include the featured text – switch the font to Myriad Pro, set the font size to 56px and the color to #222222. Type some text that covers two lines and place it around 60px under the navigation section.

Then select the second line of text that you added and set the color to #BBBBBB – you should end up with something like the following:

Step 5: Featured Projects

In the “Featured Projects” section, we need to add a title and three images that each represent a different project. Let’s start by creating the title – use the Myriad Pro font, set the size to 40px, the color to #333333, and the letter spacing to -50px – then type “Featured Projects”.

Next we need to add the three images – I’ve used some screenshots from some of the premium web templates available here at Voosh Themes, but use whatever is relevant to what you do. Ensure that these images are 300×300px in size and place them next to each other with around 30px space between them.

We now want to add a subtle drop shadow effect to make them stand out a bit. Use the following settings (where the color of the shadow is #CCCCCC):

Also add a stroke effect with the following settings (where the color is set to #DDDDDD):

This should result in something like the following:

Finally, create a copy of the line you added in step 3 and place it around 60px under the images (as can be seen above).

Step 6: The Services Section

In the services section we need to add a title, an image for each service, and some descriptive text. To add the title, ensure that you’re using the Myriad Pro font, set the size to 32px, the color to #333333, and type “Services Available”.

Underneath that we need to add details of the first service – let’s start by creating the image – add an image that has dimensions of 56×56px. I’ve again used some template screenshots just for the purposes of the tutorial, but use whatever you like here.

Add the following drop shadow effect to your image (where the color is #CCCCCC):

Also add a stroke effect with the following settings (where the color is #DDDDDD):

We now need to add some text to the right of this image – set the font to Arial, the font size to 14px, and the color to #E86E14. Type something like “Web Design and Development” and place it to the right of your image.

Underneath that we need to add a couple of lines of descriptive text – set the font size to 12px, the color to #555555, and type some dummy text.

Select the image and text and create two copies – position the services under one another and change the text and images to something that you’d like to display. You should end up with something like the following:

Step 7: Latest Blog Posts

The latest blog posts section is basically the same as the services section we just created – therefore, create a copy of everything in the services section and position it against the right border. Change the images and text to something more appropriate.

Following this we need to add a vertical divider between the two sections – so, using the Line Tool, set the line “Weight” to 2px and the color to #EEEEEE, and draw vertical line between the services and blog posts sections.

Step 8: Footer

Creating the footer is very straightforward – create a copy of the line you added in step 3 and place it below the services and blog posts sections. Then, using the Arial font, set the size to 12px, the color to #888888, and type something like “Copyright © 2010 / Steve Anderson / All Rights Reserved”.

Step 9: Conclusion

I hope you found this tutorial useful. As you can see, it’s not always necessary to use lots of fancy fonts and a wide range of color and images to create a nice design. Remember that you can check out the live demo if you want to take a closer look at the template – you can also download the template from the Sanura features page.