Portfolio Template

Step 1 - Open Your Canvas

This tutorial is going to be made using 5 simple steps. These steps will be done in the following order:

1. Header which include that navy bar and the main body
2. latest News Section
3. Latest Images Section
4. Main Content
5. Footer

Once you have opened Photoshop you will then need to create yourself a new document. To do this do [File - New], this will then open up a separate box, and in this put in the following settings:

Step 2 - Add Some Color

Now you will find that this opens up your new document. Now using the set foreground colour options, double click on the first coloured box, this will then open up another box in which you will put the following colour code in [2b2b2b]. Now that you have selected the colour, it is time to select the paint buck tool and click anywhere in the white space. You will then see that this changes the background colour from white to a dark grey colour.

Step 3 - Rectangle Selection

Now that we have our background colour we can start creating the white areas for the content to go in. First of all start by creating a new layer [Ctrl + ALT + Shift + N], once this layer is created get your Rectangular Marquee Tool by holding [Shift + M], now drag across the page so that you end up with something like this (Note image has been resized):

Step 4 - Blending Options

Once you have selected something like the above, then using the same way that we did to do the background colour, fill the selected are in white using the paint bucket tool, but instead of using the colour code [2b2b2b] like before, use [ffffff]. Now that you have the selected area colour in white, click the Rectangle Marquee tool again and click ONCE anywhere on the document, this will the get rid of the dashed lines. Once you have done that, right click on the layer that contains the white background, select blending options and the outer glow. Then in this box put in the following settings:

Step 5 - Duplicate the Layer

This will then give you the impression that the white stands out a bit more. Now duplicate the content area layer by going to [Layer - Duplicate Layer] and then clicking ok, this will then duplicate the layer. So now click the layer below the duplicated layer and then go to [Edit - Free Transform] and grab and hold the left hand corner and pull it counter clock wise so that you end up with something that now looks like this:

Step 6 - Add a Header

Now you have the basis to start adding a header and a nav bar to the template. First of all you will need to find a image that you want to use as the image header. You this example I am going to use the image located here:

http://www.sxc.hu/photo/597078

Please note that you will need to register in order to get the bigger image. So once you have the image you will then need to copy and paste it into photoshop, you will now notice that you will need to resize it in order for it to fit into the template. To do this go to [Edit - Free Transform] then grab one of the corners, hold down the shift key and pull in to make the image smaller. Once you have it at the size you want it to be, then place it at the top of the page. Hopefully now your template might look like this:

Step 7 - Start The Navigation Bar

Now its time for us to create a simple navigation bar. To do this you will first need to create a new layer [Ctrl + ALT + Shift + N] and then selecting the Rectangle Marquee tool. Once you have this tool selected click and hold just below the header image and drag it along to the other side:

Click to enlarge

Step 8 - Add Your Links

Now by using the paint bucket again, but this time using the colour code [4e8500] to fill the selected are in. Now that you have added the colour to the nav bar, it is time to add the links. To do this is easy as all you need to do is grab the text tool and write what links you want in there:

Click to enlarge

Step 9 - Section 2 - Latest News

Before we start creating the latest news section, do the following. Select all of the current layers that you used to make the main body are, header and nav bar [Tip, click the first layer first and then by holder shift click the last layer], once selected then click [Ctrl + g] to group the layers together. Now rename it to what ever you want it to by double click on the text in the folder.

Step 10 - Dividing Dots

Now that you have those layers grouped, make sure you have the folder selected and click [Ctrl + ALT + Shift + N] to create a new layer. This layer is then going to be used to make the divide between the are for latest news and images from the main content area. To create the dots that divide the area, select your text tool and have the following settings along with periods to create your dots:

Step 11 - Add Your News

Now all that is left to do is add the Latest News Titles and some text where the latest news will be using the text tool. Use the Bold setting for the titles, but not on the main text. So now hopefully your template might look like this:

Step 12 - Section 3 - Latest Images

Before we start creating the latest images section, do the following. Select all of the current layers that you used to make the main body are, header and nav bar [Tip, click the first layer first and then by holder shift click the last layer], once selected then click [Ctrl + g] to group the layers together. Now rename it to what ever you want it to by double click on the text in the folder.

Step 13 - Latest Images

Now that we have the latest news section grouped, time to add the latest images section. First of all get your text tool out, choose a font size and colour that you want to use and then write Latest Images. Once you have written it then put it into place below the latest news section.

Step 14 - Add Your Images

Now its time to add in 2 or 3 images. To do this just find what ever image that you want to use as a place holder and then open it up in photoshop [File - Open]. This image will then open up in a new file so all you need to do is unlock the layer by double clicking on it and the dragging it into the file where you are making your template. Now that you have it inside the template file you will probably need to resize it to fit in the little latest images section. To do this just go to [Edit - Free transform] then by holding down the shift key and dragging one of the corners in to make it smaller. Once done just drop it into place any where in the template.

Step 15 - Duplicate and Style

Once you have made the first one all you need to do is go to [Layer - Duplicate Layer] this will then duplicate the layer for you. Do this as many times as you want to. Aslo to get the black border around the images just right click on the layer, select blending options. This will then open up another box, in this one select stroke. Just give it something like a 3px border.

Step 16 - Section 4 - Main Content

Well this section of the tutorial is entry up to you. Try using some of the techniques we used earlier in the tutorial such as the dots and the text titles. All that you need to do this is the text tool so that you can write in some content there. Just space the content out how you would like it and there, you have the main content are done.

Step 17 - Section 5 - Footer

Now its time for us to create a simple footer for the site. To do this you will first need to create a new layer [Ctrl + Alt + Shift + N] and then selecting the Rectangle Marquee tool. Once you have this tool selected click and hold just below the header image and drag it along to the other side as shown in the top of this screenshot. Then using the paint bucket tool and any colour that you want, probably the same colour as the nav bar, fill the space in with the paint bucket as shown below.

Click to enlarge

Step 18 - Finished!

Your template is now complete, it should look something like this, enjoy!