As a special treat for today’s holiday weekend, I’m going to start us off with a simple tutorial on how to make very basic and clean portfolio site to show off your works and some information about yourself. This tutorial is going to be cut into 2-3 parts depending on how I split it, but the main things we’ll be covering in this tutorial is making a layout in Adobe Photoshop.

Final Product

Step 1

To begin, I’m going to make a new document of 1500×1200 | 72 dpi | Background: Transparent. This doesn’t mean our site will be 1500×1200. I use this as a standard just in case I would like to add some nice background texture or do some interesting borders on our layout.

Step 2

Make your background white, and now is the time where we’re going to set some guides to follow. If you haven’t used guides before, then you’re in good luck. This tutorial will show you how important it is to have guides to line your work and be consistent with your spacing. I set my guides with my rulers or going to View > New Guide and fill in the information.

2 Vertical Guides set at 300 and 1200.
3 horizontal guides set at 200, 250, 1000.

I labeled our site so you know where everything is going to be laid out.

Step 3

We’re going to start with our overall build. I want the header to stick to the top of the browser window, and the footer to stick out, so it doesn’t seem like one whole page. For a clean look, we’re going to use some simple drop shadows and gradients. Nothing too fancy.

Make a new layer and make a selection covering from header to a little halfway into the footer and fill it with white. Add a drop shadow to the layer using these settings. You’ll get something similar to the third picture.

Step 4

Make a new layer, call it header, and make a selection around the header. Make sure you have “Snap to Guides” option, it makes it easier. For now, make this header some dark gray color, I chose to use #595959. In addition, I made the background of the layout a different color, to make the white stand out more. Make it a light gray color, I chose to use #d7d7d7. Remember you don’t have to use these colors. This set up doesn’t have to be a light themed color palette. Feel free to use your own colors.

Step 5

Make a new layer, make a selection within the guides for the navigation, call it navigation, and then make it some color you want. I chose to use a light red – #e85663.

Then, make a new layer, make a selection within the guides for the content, call it content, and then make it white. Technically you don’t need a layer, but I like to separate my layout as much as I can just in case I need to change the color or add something to it.

You should have something like this.

Step 6

Now we’re going to decide on how big our content is going to be. Using more guides, outline how far you want you content to reach within your layout. I’m going to give a 50px leeway space.

My 2 vertical guides are set at 350px and 1150px.

Make a new layer, call it footer seperator, and we’re going to take our pencil tool, set it to 1px, and I chose to use the same color as my navigation. Draw a line between the new content guidelines and directly on top of the bottom horizontal guidelines. This will separate your content from your footer. You should get something like the 2nd picture after everything. Check the final product for a clearer view.

Step 7

I went back to the navigation layer and decided to make a little gradient for it in its blending options.

#f1f1f1
#dddddd
#efefef
#ffffff

Here’s how my gradient is set up. Make the gradient lay to be set on multiply. And this is how my navigation looks. Adds a little flare to it.

Step 8

Now take your Text tool, and we’re going to add content to the layout. As stated before, we’re just going to have Home, About, Links, and Contact. I’ll be using Helvetica, but choose whatever you like. I made them all lowercase and bolded the first letter to give it some contrast.

Added a title on the page and a one pixel pencil stroke across the content area.

Step 9

Finally, I added all the thumbnails. My thumbnails are 150 px by 120px. Later, you’ll have to get your images, re-sized them to 150×120 and save them as a separate image apart from its larger counterpart. I finished it off by adding my copyright on the bottom, some other tiny adjustments, and we have ourselves a site.

Conclusion

There you have it. A simple layout to show your works. We’ll talk about slicing and coding in a later tutorial for those of you that don’t know how to do it. However, those won’t be coming so soon. Expect some Photoshop tutorials on certain effects and details to add more to your designs.

Thank you for reading my tutorial. If there’s any questions, comments, suggestions, feel free to leave a comment below.

Thanks again, and visit my blog for more tutorials and resources.

Credits go out to Vina for pushing me to get this done, and http://sxc.hu for the stock images that I used for thumbnails.