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" on page 216.
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_r1cl".
An image slice can also be a rollover. For more information about creating and editing rollovers, see "Creating and editing rollovers" on page 224.
You can also preview a sliced image in a Web browser as you work on it.
Lorem Ipsum
|
Val ■_ |
w" wvfr nnravi ri |
■TW Fl nftwi |
|
vrU i.rP |
w MMto "' »mL vs< 1 | |
|
11 ii L'i |
A v..y ^tf ftifiJm., >T*M |
41 IV - I |
|
cou |
n ELi ™ J ■ " 1 hui! kjfiaui | |
|
C-'JBT IVAV V JITbH WK I rt i Veï |
.lH ». SI '■! |
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" on page 211.
Post a comment