[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.
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.
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 the Author: Stephanie Hamilton is freelance Graphic Designer helping small businesses grow. Holding a BFA in Graphic Design, she has several years experience designing the latest in print and building better user interfaces and websites. You can visit her website and follow her on twitter.