Creating images for the Web : Slicing images
 
Slicing images
When you slice an image, you divide it into several smaller images that you can save in different formats or at different levels of optimization. Because these optimized images can take less time to download than one large image, your Web pages may load more quickly.
Slicing an image also can reduce the number of graphics you need to save. If your website displays the same logo or other graphic in more than one image, you only need to save that section once if you slice the images; you reload the same logo or graphic section into all the images.
Using the Image Slicer, you can create a table from the image, saving the location of each sliced section as a region in the table, and generating the HTML code for the column and cells. Then, you copy this code into your source files so that the image can be reassembled when the user downloads the Web page.
You can also create rollovers, which are areas that display secondary images when the user clicks or moves a mouse over them.
Creating and editing cells
When slicing an image, you divide it into cells and edit the cell boundaries. You do this with the tools in the Tools groups box of the Imager Slicer dialog box.
 
Tool
Description
The Arrow tool lets you make a cell active or move its borders.
The Grid tool lets you create a grid of evenly spaced cells, either over the entire image or within another cell.
The Slicer tool lets you create a horizontal or vertical line.
The Delete tool lets you delete slice lines.
The Pan tool lets you drag the image in the preview to view hidden areas of the image.
Assigning sliced cell properties
After you have created sliced cells, you can assign URLs, alternate text, and targets to each cell. You also have the option to have the cell appear in the downloaded image. By omitting cells, you can add cells from other images (such as logos or text) and create images in nonrectangular shapes.
When you assign alternative text, the text is displayed while the image is loading. The text is also displayed if the image cannot be downloaded, or if the user has images disabled in the Web browser. In some versions of Internet Explorer, this text also appears as a tooltip.
Setting slice preferences
You can select colors for the border lines of the active and inactive areas.
Saving and loading slice settings
When you save the slice settings, you save the cell arrangement and the information you typed in the Image Slicer dialog box. You can then reload them into the same image or use them with a different image.
Saving slices
You can save slices to a folder on your hard drive so that you can reuse or edit them.
To slice an image into cells
Edit tab 
1 Choose File Export Image Slicer.
The Image Slicer dialog box appears.
2 Choose the Slice tool and click in the image where you want create a slice line.
Note: To create a vertical line, drag vertically; to create a horizontal line, drag horizontally.
3 Choose the Arrow tool and click inside the cell to make it active.
The cell boundary information is displayed in the lower portion of the Cell Properties group box.
4 In the URL drop-list, type the address of the Web page where you want the cell to appear.
If you want to select addresses already used in the image, select the address you want from the URL drop-list.
5 In the Alt text box, type text that the browser can display while the cell is downloading.
6 Choose one of the following target frames or window options from the Target drop-list:
• _blank — loads the linked page in a new browser window
• _parent — loads the linked page in the parent window or frameset of the link. If the link is not in a nested frame, the image loads in the full browser window.
• _self — loads the linked page in the same window or frame as the link
• _top — loads the linked page in the full browser window and removes all frames
7 Click Save.
The HTML Save As dialog box appears.
8 Navigate to the folder where you want to save the HTML code and click Save.
 
You can also
 
Create cells with consistent spacing and size.
Click the Grid tool . Click in the preview area to open the Grid Size dialog box, and type or set values in the Rows and Columns controls.
Move a slice line or border
Click the Arrow tool , and move the cursor over a line. When the cursor changes to the double-sided arrow, drag the line to a new position. To move only the segment within the current cell, hold down Shift while clicking the line.
Delete a line or border
Click the Delete tool , and move the cursor over the line. When the cursor changes to an eraser-shape, click to delete the line. If deleting the line would create an invalid area, Corel PaintShop Pro displays an icon to indicate that you cannot erase the line.
Omit a cell from the downloaded image
Click the cell with the Arrow tool, and unmark the Include cell in table check box.
Save slice settings to the Clipboard so you can paste them into the HTML code
Click Save to Clipboard to open the HTML Destination Folder dialog box, navigate to the folder where the HTML file is saved, and click OK to save the slice settings.
Open the HTML file, place the cursor where you want to insert the HTML slice code, and press Ctrl + P.
Create a rollover for a cell
Click Rollover Creator. For more information about creating image rollovers, see Creating image rollovers.
You can move lines up, but not across, adjacent parallel lines. You can move individual lines and lines that are part of a grid. As you drag a line, Corel PaintShop Pro moves the longest segment that can be repositioned without creating a non-rectangular cell.
To set slice preferences
Edit tab 
1 In the Image Slicer dialog box, click Preferences.
2 Click the Active tile border color color box, and choose a color.
3 Click the Inactive tile border color color box, and choose a color.
4 In the Maximum history list size control, type or set the number of entries listed in the URL and Alt text drop-lists in the Cell Properties group box in the Image Slicer dialog box.
5 Click OK.
If you want to be prompted for a file location and name for your slices when you save the HTML code, mark the Prompt for image folder on Save or Save As check box.
To save slice settings
Edit tab 
1 In the Image Slicer dialog box, click Save Settings.
The Save Slice Settings dialog box appears.
2 Navigate to the folder in which you want to save the settings file.
3 Type a name for the file and click Save.
The file is saved in the JSD format.
To load slice settings
Edit tab 
1 In the Image Slicer dialog box, click Load Settings.
The Load Slice Settings dialog box appears.
2 Select the JSD file you want to load, and click Open.
If you are loading a grid to a different image, Corel PaintShop Pro automatically adjusts the grid size if the dimensions of the image are not the same.