12. Creating And Naming Slices



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

Now slice the layout by dragging rectangular areas. You must have in mind that each slice will be an independent image file and also a cell of the html table...So it is important to create the slices in a logical way trying not to slice an image or blocks on text (especially "html text") into lots of parts because when you'll want to change that specific image in your layout you'll need to replace lots of images in the final html file or in the case of "html text" you won't be able to make the text blocks similar with the ones in Photoshop. Take a look at our sliced layout:

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...

Rename the selected slice and continue with the other slices.