Quick links to procedures on this page:

 
 
 
 
 


Slicing images

Image slicing lets you load a large image on a Web page one piece at a time by cutting it into several smaller files. The resulting files, or slices, can be for viewing only or can be clickable.

Slices can only be rectangular. If you want to create clickable areas in other shapes, you can use an image map instead. For more information about image maps, see “Creating image maps.”

As you slice an image, you can preview and test it in a browser at any time.


Creating slice grids

To slice an image, you must first create a slice grid by placing horizontal and vertical slice lines on the image. You can create the slice grid automatically based on the placement of objects in an image, or create equal slices based on the number of columns and rows you specify. You can also import or export slice grids.

The slice grid creates an overlay in the image window. You can still access other features while you work on a sliced image. You also can hide the slice grid and overlay.


Assigning properties to slices

Once you have sliced an image, you can assign properties to any slices you want. You can specify a filename, URL, target, and alternative text for a slice. Individual slices can also be exported to different file formats and optimized separately. The default settings are applied to any slices that are not given specific properties. Slices that are not named are automatically given names based on their row and column location in the slice grid. For example, in a sliced image named “banner”, the slice in the first row and the first column is called “banner_r1c1”.

An image slice can also be a rollover. For more information about creating and editing rollovers, see “Creating and editing rollovers.”

You can also preview a sliced image in a Web browser as you work on it.

Photo Paint web imageslice Slicing images

This sliced image features rollover buttons and slices with text that have been optimized separately. The green lines indicate the slice grid.


Erasing slices

Once slice lines have been added, they can be moved or erased. To remove part of a slice line, you can select and merge adjacent slices. You can also remove the entire slice grid all at once. When you erase a slice line, you create one slice out of multiple slices. As a result, you lose the settings applied to the separate slices; the new, larger slice assumes the default settings.


Exporting sliced images

When you finish slicing an image, you must export it. During export, Corel PHOTO-PAINT creates the following:

 
a file containing the HTML and JavaScript code
 
a folder containing the image slices

If you already exported a sliced image, and opened it again to modify it, you can choose to export only the image slices.


Optimizing sliced images

You can also optimize a sliced image before you export it. Optimization settings apply only to the slices that were not assigned file formats and optimization settings already; these slices are saved with the default JPEG file format settings. You cannot specify settings for individual slices at this stage. You can also choose to optimize the whole image and drop all slices and their settings. For more information about optimizing images for the Web, see “Exporting and optimizing images for the Web.”


To slice an image

Photo Paint btnbacktotop Slicing images
1.
 
Click the Image slicing tool Photo Paint pgx image slicing tool Slicing images.
2.
 
On the property bar, click any of the following buttons to create a slice grid:
Vertical slice button Photo Paint pgx vertical slice button Slicing images — lets you add a single vertical slice line by clicking the image
Horizontal slice button Photo Paint pgx horiz slice button Slicing images — lets you add a single horizontal slice line by clicking the image
Auto-slice button Photo Paint pgx auto slice button Slicing images — lets you slice an entire image based on the placement of objects
Equal slice button Photo Paint pgx equal slice button Slicing images — lets you cut the image into equal-size slices by specifying the number of rows and columns
3.
 
Click the Slice selector button Photo Paint pgx slice select button Slicing images on the property bar.
If you want to move a slice line, drag it to a new position on the image.
4.
 
Click an image slice.
5.
 
In the Image slicing docker, enter the following information for the selected slice or slices:
Name — specifies a filename for the slice. If you do not type a filename, a default name will be inserted based on the original image filename, and the column and row placement of a slice.
URL — specifies an address, or URL, for a Web page that opens when you click a slice
ALT — specifies the alternate text that displays in a browser when you point to a slice
Target — specifies how a Web page opens: _self opens the URL in the current frame, _blank opens the URL in a new browser window, _top opens the URL in the root frame of the browser, _parent opens the URL in the highest level frame.
6.
 
In the Format area, choose a file format for the slice from the list box.
If you do not choose a file format, the image slice is automatically saved to the default file format.

You can also
Optimize a slice
Select a slice, and in the Image slicing docker, click Advanced, and adjust the file format settings.
Preview the sliced image in browser with the current settings
Click the Preview button Photo Paint pgx preview browser Slicing images.
Import a slice grid
Click the flyout arrow Photo Paint pgx flyout arrow Slicing images, and click Import slice grid.
Export a slice grid to use on another image
Click the flyout arrow Photo Paint pgx flyout arrow Slicing images, and click Export slice grid.
Save the file format settings you specify as a preset
Click the flyout arrow Photo Paint pgx flyout arrow Slicing images, and click Save preset.

Photo Paint tip Slicing images

 
If you want to select multiple slices, hold down Shift, and click the slices.
 
To switch between the Horizontal slice and Vertical slice buttons, press Shift.

To display or hide the slice overlay and grid

Photo Paint btnbacktotop Slicing images
 
Click View Photo Paint onestep Slicing images Slice grid.

Photo Paint note Slicing images

 
You cannot choose to display or hide the slice grid when the Image slicing tool Photo Paint pgx image slicing tool Slicing images is selected. When the slice tool is selected, the slice grid is always displayed.

To erase an image slice line

Photo Paint btnbacktotop Slicing images
1.
 
Click the Image slicing tool Photo Paint pgx image slicing tool Slicing images.
2.
 
Click the Erase slice button Photo Paint pgx erase slice button Slicing images on the property bar.
3.
 
Click a line to erase it.
If you want to erase all slices, click the Erase all slices button Photo Paint pgx erase all button Slicing images on the property bar.

Photo Paint note Slicing images

 
When a slice line is erased, the new combined slice reverts to the default settings. Any settings that were applied to the individual slices are lost.

To export a sliced image

Photo Paint btnbacktotop Slicing images
1.
 
Click File Photo Paint onestep Slicing images Export for Web.
2.
 
Choose a folder where you want to save the HTML/JavaScript file.
3.
 
Type a filename in the Filename box.
4.
 
Ensure that the Slices check box is enabled.
5.
 
Ensure that the HTML and images option is enabled.
6.
 
In the Image destination area, enable the Use HTML name for image sub-folder option.
The image slices are saved in the same location as the HTML file, and the folder name is based on the HTML filename.
7.
 
Click Save.

You can also
Specify a different image folder name and location
In the Image destination area, type a path in the Image folder box.
Replace existing image slices
In the Image destination area, enable the Replace existing files option.
Preview the sliced image in a browser
Enable the Display in browser check box to start the default browser and to preview the file with the current settings.

Photo Paint note Slicing images

 
If the Slices option is not enabled, the slices and all settings assigned in the Image slicing docker will not be applied to the exported image. If you choose not to apply the slices and settings, you can choose a file format to apply to the whole image from the Save as type list box.
 
If you have not used a Web-compatible filename, it is automatically corrected during export. If you have inadvertently duplicated a filename, this is also automatically corrected.

Photo Paint tip Slicing images

 
If you want to export only the image slices, enable the Images only option. The Filename box is grayed out because image slice filenames are already specified in the Image slicing docker.

To optimize and export a sliced image

Photo Paint btnbacktotop Slicing images
1.
 
Click File Photo Paint onestep Slicing images Web image optimizer.
2.
 
In the top-left corner of the Web image optimizer dialog box, enable the Keep slices option.
3.
 
Below an image preview window, choose a file format from the top-left list box.
4.
 
Choose a Web preset from the top-right list box.
5.
 
Click below an image preview window to select the file format you want to save.
A red border indicates the selected format.
6.
 
Click OK.
7.
 
In the Export for Web dialog box, type a filename in the Filename box.
8.
 
Choose the folder where you want to save the image.
9.
 
Click Save.

You can also
Preview the image with the current settings

for each slice
Click Preview.
Drop all slices and optimize the whole image
Enable the Create single image option.

Photo Paint note Slicing images

 
Although slices are displayed in the Web image optimizer dialog box, only slices defined with the default file type are optimized. If you want to optimize slices individually, you must return to the Image slicing docker.

Slicing images