[Tutorial] Design a Professional Portfolio Website Using Photoshop and 960 Grid System – Part 2

This is the second part of a two-part tutorial on building a portfolio website using Photoshop and the 960 Grid system.

Part 1 is located here

We are well on our way to completing our portfolio website design.

Here is a preview of the finished product:

Let’s pick up where we left off with the first part of this tutorial.

Step 6: Add the Latest Works

Now it’s time to show off your latest work. Create the containers for your portfolio images. Make the grid visible for reference.

Add an outer glow to each box:

You should end up with the following:

To add more contrast, you can add a drop shadow to each image. Create a dark rectangle that’s the same size as the image on a new layer below it, apply a Gaussian Blur filter with a 5px Radius, and then use Transform > Distort to give the shadow a curve in the middle. The following result should be achieved:

 

I add the title ‘Latest Work’ in 30pt ChunkFive below the portfolio samples. I add a slight 20% drop shadow for contrast.

Step 7: Create Call to Actions

I start by duplicating the separator group and moving the copy below the portfolio section for separation.The next step is a call to action. I’ve created two call to actions that allow the visitor to view more of my portfolio, or hire me.

The styles I’ve used on the call to actions are the following:

Step 8: Create the Footer

Lastly, the footer needs to be built and should include useful information like links to your social profiles, the contact form and Twitter updates.

I start by duplicating the header background and moving it down to the footer area.

The Get In Touch heading is created with 20pt Myriad Pro, along with the other headings.

In the first section we will put a contact form. So create a rectangle that will be the entry name field.

I’ll give the field a nice engraved effect using the following styles:

Now create the remaining field of the form by duplicating the name field.

The submit button was created by duplicating the call to action in the center and shortening the length of the button by about 25%. I also gave the ‘Send’ text a slight drop shadow to help it pop.

In the center section of the footer, I simply added the links to some social profiles using BuddyIcons.

For the twitter updates I simply copy and paste the latest three tweets I have (or use dummy text). I also placed this Twitter icon created by mfayaz.

We’re almost finished! The last thing to do is add the copyright. After that’s done you can now select all footer layers, group them and title this group “footer”

There you have it! That’s the end of our tutorial. Hopefully it got you thinking about how you can apply various styles and textures to your own portfolio website. If you have any comments or questions, feel free to ask in the comments!

About 

Stephanie Hamilton runs a small branding and web design studio where she helps clients market their company online. Visit By Stephanie and let's collaborate to tell your brand's story. Visit the blog for more helpful design and business resources.

Comments

  1. sebastian says:

    Part 1 is located here

    404 – Page not found

    ??

  2. That definitely is a great tutorial. And I am almost done. Now, I would love to convert this wonderful design to the website. Where canI find that tutorial or it is still underway? Waiting eagerly as this segment would really help me learn the 960 grid. :)

  3. Great Tutorial ! Now I really want to convert it into HTML. But I dont know how. Please give me some tips or guide that might help me. I a total newbie. Thank you in advance !

Comment Policy:

Please join the conversation! We like long and thoughtful communication. Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment. Finally, please use your favorite personal social media profile for the website field.

Speak Your Mind

*