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

by 6 03/20/2012

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 is the Owner/Creative Director of Atticus Pet Design Studio and a freelance Web/UI Designer. Holding a BFA in Graphic Design, she has several years experience helping businesses reach their full potential through strategic branding and good design. Follow her on facebook and twitter.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

6 COMMENTS

sebastian

Part 1 is located here

404 – Page not found

??

March 20, 2012 Reply

    Russ Henneberry

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

    March 20, 2012 Reply

SimplySidy

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

December 22, 2012 Reply

Jenny

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 16, 2014 Reply

    Kathryn Aragon

    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.

    June 17, 2014 Reply

    Neil Patel

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

    June 17, 2014 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>