How to slice a template?

If you want to make use of a Web template that someone gave you, or that you downloaded from some place, you will often need to slice an image. Sometimes this is needed to customize somehow the template, for example by replacing a company name or a company logo.

Web templates that one buys or downloads for free generally include an image in the PSD format, which belongs to the well-known program PhotoShop. The template package may already include the sliced images that will compose the page, or contain instructions on how to slice the PSD image. These instructions generally describe how to perform the slicing with PhotoShop, which is a rather expensive program. Many people would prefer to use a cheaper alternative, and a popular one is PaintShop.

PaintShop can read the PSD image and has the tools needed to perform the slicing. I will describe here how to slice a template image using PaintShop and an image that I prepared specially for the explanation. This image is a kind of synthetic template that will make it easy to understand the instructions I will give. It is also a GIF file instead of a PSD one in order to minimize download times. Here it is.

This image has all the zones normally encountered in the layout of a Web page: header, footer, and three columns in the middle. The header and the left column are further divided into two sections, the first, and three sections, the second. If you want to use this image for your practice, right-click and save it as "template.gif".

We will begin by starting PaintShop Pro. For this lesson I will be using version 7 of the program. Select "Open" from the "File" menu and load "template.gif". Then from the same "File" menu, select "Export" and "Image slicer...". You will see something like this.

At the top left of the window you will see a little toolbar.

These tools are, from left to right: the arrow tool, the grid tool, the line tool, the eraser tool, and a tool for panning the image. The arrow allows you to move lines that you have drawn. The grid tool allows to draw a grid of cells at once. Select this tool and click on the image. A dialog box allows you to set the number of rows and columns of the grid. You can later alter this grid by moving its lines. The line tool works by drawing a line at a time. Select it and click where you want the slicing line. Dragging the mouse to the right or the left creates a horizontal line. Dragging the mouse upwards or downwards creates a vertical line.

Drawing the lines

After you draw a line, if you want to change its position, select the arrow tool, place the cursor on the line you want to move and, when the arrow cursor changes to a double-arrow cursor, click and drag the line to its new position.

Underneath the working area you can see some buttons that can ease your work.

The magnifying glasses let you zoom out off and into the image. The cross is a navigator that lets you position the viewport. By pressing the eye you can get a preview of the image in your default browser.

If you make a mistake, you can use the eraser to remove the wrong line. Select this tool and place the arrow cursor over the line. When the cursor changes to an eraser, click to erase the line.

When you have drawn all your slicing lines and adjusted them precisely by using the zoom and the arrow tool, it is time to save your work. "Save" in this case means to generate the slices and the HTML page that will assembly them so that they appear as a single image. This is simply achieved by pressing the button "Save As..." in the lower button row.

If you want to save the images to a directory other than the one chosen for the HTML, you may set so by using the button "Preferences" in the same place. That's all! PaintShop Pro creates the GIF images and the HTML, and all you have to do is to copy the code into the page of your choice. I will show you next how to slice the sample image and give you some information about supplementary options.

Slicing the template

Generally, a brief examination of the template to be sliced will show that there exists an order to draw the lines that will optimize your work and spare you from redoing it many times. I will show you what this order is for the sample template. First, separate the header and the footer by drawing the two long horizontal lines marked with "1" and "2".

Next, draw the three vertical lines marked with "3", "4", and "5".

Finally, draw the two short horizontal lines marked as "6" and "7".

To see the final result, click on the following link and a new browser navigator will be open. Then you can use the "Save as..." option of your browser to save that page to your hard disk so that you can learn how the page is coded.

Additional settings

It is worth mentioning that using PaintShop Pro you can set individual properties for each cell like the URL, the alternate text, and the target frame. You can also omit cells from the final set of slices; this way, you can add cells from other images (such as logos or text), and create images in non-rectangular shapes.

Optimization can be applied to the set of slices as a whole, or to each slice individually. You can select the type of image file that you want for the slice to be GIF, JPEG, or PNG. Optimization settings such as the transparency, the number of colors, and the interlacing of the image can be specified.

Previous | Contents | Next

	| HOME | FEEDBACK | BOOKMARK | Build your Website © 1999-2008 Hector Castro -- All rights reserved