DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

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

by Stephanie Hamilton

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!

6 Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Stephanie Hamilton

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.

6 COMMENTS

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

Your email address will not be published.

  1. Jenny says:
    June 16, 2014 at 10:23 pm

    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 !

    • June 17, 2014 at 8:56 am

      Hi Jenny. When I need help coding something, whether html or css, I go to www3schools: http://www.w3schools.com/

      Their tutorials are really helpful for creating clean html that works.

    • Neil Patel says:
      June 17, 2014 at 1:55 pm

      Jenny, glad we could help. Thanks for the great feedback 🙂

  2. SimplySidy says:
    December 22, 2012 at 11:07 am

    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. sebastian says:
    March 20, 2012 at 12:00 pm

    Part 1 is located here

    404 – Page not found

    ??

    • Russ Henneberry says:
      March 20, 2012 at 12:57 pm

      Apologies Sebastian. Thanks for pointing this out. I fixed the link.

Show Me My Heatmap

literally addicted to the stuff I'm seeing in @CrazyEgg. Such a fantastic piece of software! #Marketing #Content #Digital

Chris Vella-Bone

@chrisv2432