To transform your .psd layout in a html file you must follow a few steps. First of all you must slice the entire layout. You use slices to divide a source image into functional areas. When you save both the image and an HTML file, each slice is saved as an independent file. You can add rollover effects and links to slices.

Open the index.psd file located in template/psd. The layout should look like this: (Note: if you don't see the slices press Ctrl+H to see them)

As you can see we have already created and named the slices. It is useful to know how to delete & create slices because your web site may be a little or more different from the template so you'll need to create the slices according with your final layout. Now you have to delete the slices and after this you'll recreate and name them.

To delete all slices you have to go to the main menu and from View choose Clear Slices:

If you want to delete slice by slice (in case you want to modify only a few slices not all the slices) go to Tools palette and choose Slice Select Tool. You have to click and hold down the left mouse button until all tools are displayed and then to select the Slice Select Tool.

Now click on the slice you want to delete and press the Delete button from the keyboard or Right-click on the selected slice and from the menu choose Delete Slice:

In this tutorial you have to delete all slices so choose from the main menu View -> Clear Slices. The layout will look like below. (Note: after clearing all slices your layout will automatically have only one slice marked by the number 1 on a gray background. Slices with their number on a gray background are auto-generated slices. When you create slices you create "user slices" - number on blue background - and Photoshop creates "auto slices" - number on gray background - to complete the layout's slices schema. The slices must cover all the layer so Photoshop have to auto generate slices for the areas the user doesn't define "user slices")

Now let's redo the Slices. To do that select the "Slice tool" from Tools. If you have selected the Slice Select Tool click and hold down the left mouse button until all tools appear and from the menu choose the Slice Tool...or simply press K from the keyboard

As you can see every area containing information that is possible to be changed more frequently is part of a slice (images, headlines, blocks of text). It is very important that each block of content text to be part of a single slice (as you can see above the slices numbered 15, 26, 23 and 31).

Now give a specific name to each slice to identify it more easily (the exported images will take the name of the slice): Right-click a slice and choose Edit Slice Options...