Professional Portfolio Layout

Step 1

Create a new document in photoshop that is 800 x 800 pixels in size, and fill the background with white (#FFFFFF).

Step 2

I usually start with the header, so that's where we'll begin:

We'll start by creating the header for our layout. Find yourself a nice stock photo to use that you will build and blend your layout around. A good place to find free stock images is here: www.sxc.hu. Which is a service l highly suggest. There are also many great pay-per-photo stock companies out there that you can research as well.

The image I will be using in this tutorial is available in the download pack for this tutorial:

Go ahead and open your image in photoshop.

Press Ctrl + A on your keyboard to highlight the image, and press Ctrl + C to copy it.

Now move back to our original layout document (which is 800x800) and press Ctrl + V to paste it onto our layout.

By picking a stock photo to build the layout around first we can easily decide what would be a good color scheme to, rather than the other way around.

Once your header photo is pasted you may need to resize it by pressing Ctrl + T on your keyboard, placing your mouse near one of the small squares (called nodes) near the top right corner, holding down the Shift key while clicking and dragging inward towards the center of image.

Here is how my header looks so far, after positioning the photo in the top right corner of the layout:

Step 3

Next l went ahead and added a logo to the header. The font used here is a basic Ariel.

Here is how my layout looks after adding my fictional company logo:

Step 4

The next step is to the navigation or menu bar. Create a new layer on your document and name it "Menu Bar". Get our the rectangular marquee tool ( ) and make a selection similar to what l have done here:

Fill this selection with white (#FFFFFF).

Double click this layer, and apply the following blending options:

Outer Glow:

Inner Glow:

Color Overlay:

Gradient Overlay:

Stroke:

Result:

Step 5

Hold down the Ctrl Key on your keyboard and click on the Menu Bar layer in your layers pallet. This will make a selection of everything n this layer. Now get out the Rectangular Marquee tool ( ), press and hold the Alt key on your keyboard. and deselect the lower half of the menu bar selection, so you have the upper bar selected.

Set your foreground color to white (#FFFFFF), get out the Gradient Fill Tool ( ) and select the "foreground to transparent" gradient:

Click a little bit below the selection and drag it to a little bit above the selection.

Result:

Step 6

Create a new layer. Get out the Pencil Tool ( ) and set it up like so:

Change the blending mode of this new layer to "Soft Light":

Now while holding down the Shift key on your keyboard, draw a horizontal line onto your navigation bar one pixel above the bottom as l've done here. Holding down the Shift key ensures that the line will be drawn perfectly straight:

Now draw another horizontal line across the top of the image one pixel under on this same layer as l've done here:

Step 7

Now for the navigation bar dividers. Create a new layer, get out the Pencil Tool ( ) and set it up like so:

Change the blending mode of this new layer to "Soft Light":

Hold down the Shift key on your keyboard, and draw a vertical line on to your navigation bar as l've done here:

Next press Ctrl + J on your keyboard to duplicate this layer.

Press 'V' on your keyboard to get out the move tool.

Tap the Lleft arrow <- on your keyboard once to nudge this duplicate layer to the left one pixel.

Press Ctrl + I (that's an i) on your keyboard to invert the color from white to black.

Press Ctrl + E to merge this layer with the previous.

This will create a very nice inset button effect.

Result:

Repeat this process once for each of the buttons you'll need and use the Move Tool (press V on your keyboard to get out the move tool) to position them along your navigation bar.

Step 8

This step is quite the same as step 3, but than a little bit bigger and with another color.

Make another layer and take the Rectangular Marquee Tool ( ) and make a selection like this:

Fill this selection with white (#FFFFFF).

Double click this layer, and apply the following blending options:

Gradient Overlay:

Stroke:

Result:

Step 9

Create a new layer. Set your foreground color to white (#FFFFFF). Get out your Pencil Tool ( ) and set it up like so:

Now draw a box 1 pixel inside of this container we made in the previous layer as l've done here. Remember holding down the Shift key while you draw your lines will ensure that you make perfectly straight lines.

Here l've added 3 lines total. One on the top, one on the bottom, and one on the right side of the container:

Step 10

Finally we're going to add the text to our layout.

First we'll add some text to our navigation system. To do so select a font you like, here l've used "Perspective Sans".

Once your text has been added, double click the layer, and apply the following blending options:

Drop Shadow:

Result:

At this point you can add a few more minor details to the layout. As you can see l've added some blue lines to separate each of the main content areas. This was done simply with a 1 pixel pencil tool and a blue color setting. Here's how the final layout may look after being sliced and having content added:

Click to enlarge

Thank you very much for reading this tutorial, l hope you have learned some useful techniques along the way.

Download Professional Portofolio Layout Source Package here.