Designing a Portfolio Template

Introduction

This tutorial will teach what is needed to make a unique portfolio, or any type, of web template. In the tutorial, there are many valuable techniques that are great to know. Instead of just telling you what to do, I am going to tell you why to do it as well. This will help teach you what looks good in a design. :) Also, you can view part 2 to learn how to code the template in all CSS (I'll update with the link once it's ready).

Step 1.
Open a new document that is 750 x 785 pixels. The template is not going to be this big, but it will give us some room to work with. Also, make sure you fill the background with 1e1e1e.

Step 2.
With the rounded rectangle tool, with a 5 pixel radius, make a rectangle like below.



Now, with the selection tool, make a selection on the bottom of the rectangle. It doesn't really matter how high you go up, just make sure you don't make your header to small. :) Once you make your selection, press delete. This cuts the bottom curve off our header. Later, we are going to flip it and use it as a footer, making the template look whole, with rounded corners on the top and bottom.

Step 3.
Next, we are going to add a few effects to the header. The first one is going to be a color overlay. Open your Blending Options, and select Color Overlay. Set the settings to this.



Please proceed to the next page...