<a name="1008412"> </a>Using a large graphic for navigation is common on the Web. With Corel Painter, you can segment a graphic into slices. Each slice is exported as a separate image, then reassembled using an HTML table.
</p>
<p id="1011630" class="Body">
<a name="1011630"> </a>Most useful for implementing rollovers, the Image Slicer plug-in can also, in some cases, let you replace high-bandwidth image areas with lower-bandwidth HTML elements.
</p>
<p id="1011636" class="Body">
<a name="1011636"> </a>Segmenting a large graphic into smaller, optimized image files can reduce load time while letting you control the resulting image quality.
</p>
<p id="1011637" class="Body">
<a name="1011637"> </a>The Image Slicer supports these export options:
<a name="1011665"> </a><i>You can optimize each slice in your image, depending on content.
</i></p>
<h3 id="1011672" class="Heading2">
<a name="1011672"> </a>Deciding When to Slice Images
</h3>
<p id="1011673" class="Body">
<a name="1011673"> </a>The Image Slicer plug-in is most useful when your image contains rollovers. For more information, refer to <a href="21-Web7.html#1008100">"Creating Rollovers from Image Slices"</a>. Image mapping, in contrast, is most useful when you want to define multiple clickable links within a single image. For more information about image mapping support, refer to <a href="21-Web8.html#1005593">"Image Maps"</a>.
</p>
<p id="1011680" class="Body">
<a name="1011680"> </a>Use image slicing if:
</p>
<ul>
<li class="SmartList1"><a name="1011681"> </a>your image includes areas that feature rollovers. </li>
<li class="SmartList1"><a name="1011682"> </a>one or more areas of your image (for example, flat color areas) can be significantly more compressed than other areas. Use the Image Slicer and set export options accordingly. </li>
<li class="SmartList1"><a name="1011683"> </a>you can replace some areas of your image with pure HTML elements, like text, form elements, or table cell backgrounds. </li>
<li class="SmartList1"><a name="1011684"> </a>the image must reappear on many pages, with small changes on each page (as with a navigation bar). The browser caches most of the common slices, which can help performance. </li>
<li class="SmartList1"><a name="1011696"> </a>you want to create different links for different areas of your image. </li>
</ul>
<h3 id="1008416" class="Heading2">
<a name="1008416"> </a>Understanding the Image Slicer
</h3>
<p id="1011689" class="Body">
<a name="1011689"> </a>You don't have to know HTML or JavaScript™ to create a sliced image because the Corel Painter Image Slicer plug-in generates it for you. However, it's helpful to have some understanding of how tables operate within HTML, as the slices will become part of a table.
</p>
<p id="1008420" class="Body">
<a name="1008420"> </a>A table displays information in rows and columns, with borders that can be shown or hidden. Tables allow you to format or lay out elements on a page to create alignment and space.
</p>
<p id="1008421" class="Body">
<a name="1008421"> </a>If one or more of the slices is designed to be a rollover, the Image Slicer plug-in generates the JavaScript needed for the rollover effect. Refer to <a href="21-Web7.html#1005699">"Understanding Rollovers"</a>.
</p>
<p id="1008425" class="Body">
<a name="1008425"> </a>After you've used the Image Slicer plug-in, you can use the HTML file it creates as a starting point, or you can copy the HTML code for the table and any JavaScript for rollover effects into your own HTML file.
</p>
<h3 id="1008464" class="Heading2">
<a name="1008464"> </a>The Image Slicing Layer
</h3>
<p id="1008468" class="Body">
<a name="1008468"> </a>The Corel Painter Image Slicer plug-in creates an Image Slicing layer that stores information about how your image is sliced (segmented) and about how each slice of your image should be exported.
</p>
<p id="1008469" class="Body">
<a name="1008469"> </a>Every time you apply the Image Slicer, a new Image Slicing layer is created. Each Image Slicing layer generates code for an HTML table. Be careful not to open multiple instances of the Image Slicer plug-in when you're slicing an image. Create one Image Slicing layer, then just double-click it on the Layers palette to continue working.
</p>
<p id="1008470" class="Body">
<a name="1008470"> </a>There may actually be times when you want to have more than one Image Slicing layer. For example, if you want to slice an image in different ways for use on different Web pages, you could create an Image Slicing layer for each page. For most slicing purposes, however, you should create only one Image Slicing layer.
</p>
<p id="1008472" class="Body">
<a name="1008472"> </a>The Image Slicer works on the imagery below it in the layer stack. Because of this, the Image Slicing layer must be topmost in the layer stack.
</p>
<p id="1008473" class="Body">
<a name="1008473"> </a>If you add layers to your image after adding the Image Slicing layer, be sure to move the Image Slicing layer to the top of the layer stack before exporting the slices again. For more information about re-ordering layers, refer to <a href="14-Layers8.html#1003616">"Changing Layer Hierarchy"</a>.
</p>
<p id="1008477" class="Body">
<a name="1008477"> </a>If all or most of your image slices are of the same file format (GIF, JPEG, TIFF, or No Export), have the same number of image states, or reference the same URL, you can save time by setting those options before creating any slices.
</p>
<h3 id="1008479" class="Heading2">
<a name="1008479"> </a>Working with Image Slices
</h3>
<p id="1008480" class="Body">
<a name="1008480"> </a>You create image slices by adding horizontal or vertical slice lines to your image. You can also create both a horizontal and a vertical line at once. You can move or delete single lines. When a slice is created, it is given an incremental name (Image1, Image2, and so on). This name is also the filename for the slice.
</p>
<p id="1008481" class="Body">
<a name="1008481"> </a>After you create slices, you can rename them, export them, and set options such as links so the user can click the slice to jump to a specified location. For specific information about GIF options, see <a href="03-Basics5.html#999738">"Saving GIF Files"</a>. For specific information about JPEG options, see <a href="03-Basics5.html#1013607">"Saving JPEG Files"</a>.
</p>
<p id="1008488" class="Body">
<a name="1008488"> </a>You can also set options for using slices as rollovers. For more information, refer to <a href="21-Web7.html#1008405">"Creating Rollovers"</a>.
</p>
<p id="1008492" class="Body">
<a name="1008492"> </a>After setting options for all the slices in your image, you can export them.
</p>
<h5 id="1008494" class="ToDoHead">
<a name="1008494"> </a>To slice an image
</h5>
<ol type="1">
<li class="SmartList1" value="1"><a name="1008495"> </a>Open the image you want to slice. </li>
<p id="1008496" class="ToDoBody">
<a name="1008496"> </a>Starting with a resolution of 72 dpi is recommended.
</p>
<li class="SmartList1" value="2"><a name="1008497"> </a>On the Layers palette, make sure that no layers are selected.</li>
Combined tool-defines slices using both vertical and horizontal slice lines</li>
</ul>
<ol type="1">
<li class="SmartList1" value="5"><a name="1008515"> </a>In the image window, click where you want to add a slice line. A plus sign next to the cursor indicates you are adding a new slice to the image. </li>
<p id="1008516" class="ToDoBody">
<a name="1008516"> </a>As you move the cursor around in the image window, the X and Y coordinates are displayed in the Image Slicer dialog box. A small preview window displays a zoomed-in version of your image to help create slices based on color.
</p>
<p id="1008517" class="ToDoBody">
<a name="1008517"> </a>Once a slice is defined, its top, left, bottom, and right coordinates, as well as the slice size (in pixels), are displayed.
<li class="SmartList1"><a name="1011356"> </a>If a layer is selected before you slice, an Image Slicing layer is created on top of it, using the same dimensions. Although this behavior can be useful at times, such as when you want to export a single graphic element, it's important to make sure no layer is selected if you want to slice the entire image. </li>
</ul>
<h5 id="1008526" class="ToDoHead">
<a name="1008526"> </a>To move a slice line
</h5>
<ol type="1">
<li class="SmartList1" value="1"><a name="1008527"> </a>In the Image Slicer dialog box, click the Horizontal tool or the Vertical tool. </li>
<li class="SmartList1" value="2"><a name="1008528"> </a>In the image window, move the pointer over the line you want to move.</li>
<li class="SmartList1" value="3"><a name="1008529"> </a>When the pointer changes to include positioning arrows, drag the slice line to a new position. </li>
</ol>
<h5 id="1008530" class="ToDoHead">
<a name="1008530"> </a>To delete a slice line
</h5>
<ol type="1">
<li class="SmartList1" value="1"><a name="1008531"> </a>In the Image Slicer dialog box, click the Horizontal tool or the Vertical tool. </li>
<li class="SmartList1" value="2"><a name="1008532"> </a>In the image window, hold down <span style="color: #000000; font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">Command</span> (Mac OS) or <span style="color: #000000; font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">Ctrl</span> (Windows), and move the pointer over the line you want to delete.</li>
<li class="SmartList1" value="3"><a name="1008533"> </a>When the pointer changes to include a minus sign, <span style="color: #000000; font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">Command</span>+click the line (Mac OS) or <span style="color: #000000; font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">Ctrl</span>+click the line (Windows). </li>
</ol>
<h5 id="1008534" class="ToDoHead">
<a name="1008534"> </a>To rename a slice
</h5>
<ol type="1">
<li class="SmartList1" value="1"><a name="1008535"> </a>In the Image Slicer dialog box, choose a slice from the Slice pop-up menu. </li>
<li class="SmartList1" value="2"><a name="1008536"> </a>In the File Name box, type the new name. </li>
<p id="1008537" class="ToDoBody">
<a name="1008537"> </a>The new name displays in the Slice pop-up menu the next time you select a slice.
<li class="SmartList1"><a name="1011438"> </a>By default, slices are automatically named according to their position order (Image1, Image2, and so on, moving from left to right, top to bottom). These names correspond to cells in the HTML table that reconstructs your image. When you rename a slice, Corel Painter disables the Auto option for that slice. If you re-enable the Auto option, you revert to the automatic, position-related slice name, and any name that you may have previously entered is overwritten. </li>
</ul>
<h5 id="1008549" class="ToDoHead">
<a name="1008549"> </a>To set slice options
</h5>
<ol type="1">
<li class="SmartList1" value="1"><a name="1008550"> </a>In the Image Slicer dialog box, choose a slice from the Slice pop-up menu.</li>
<li class="SmartList1" value="2"><a name="1008551"> </a>From the File Type pop-up menu, choose a file format. </li>
<p id="1008552" class="ToDoBody">
<a name="1008552"> </a>If you do not want an image file exported, such as when a portion of the image can be replaced by an HTML element, choose No Export.
</p>
<li class="SmartList1" value="3"><a name="1008553"> </a>Click Options, and specify the options you want for the chosen file format.</li>
<li class="SmartList1" value="4"><a name="1008554"> </a>Specify any of the following optional settings: </li>
</ol>
<ul>
<li class="Bulleted2"><a name="1008555"> </a>Link URL-specify a URL to link to when the slice is clicked. You can enter either an absolute or a relative URL. </li>
<li class="Bulleted2"><a name="1008556"> </a>Image ALT Text-specify the text to be displayed when the pointer is moved over an image in the browser. This is equivalent to the "ALT" attribute of the HTML <IMG> tag. If the slice will be used in a rollover, this text is displayed in the browser's status bar during the rollover. </li>
<li class="Bulleted2"><a name="1008557"> </a>Rollover State-if you want to use the selected slice as a rollover, specify the rollover states to be supported. </li>
</ul>
<h5 id="1008558" class="ToDoHead">
<a name="1008558"> </a>To export slices
</h5>
<ol type="1">
<li class="SmartList1" value="1"><a name="1008559"> </a>In the Image Slicer dialog box, click Export Settings for Current Image State, and specify any of the following options:</li>
</ol>
<ul>
<li class="Bulleted2"><a name="1008560"> </a>Location where HTML table will be created-click Select, and specify a filename and location for the HTML file.</li>
<li class="Bulleted2"><a name="1008561"> </a>Generate HTML Code in ALL CAPS-enable or disable this option.</li>
<li class="Bulleted2"><a name="1008562"> </a>Location where images will be exported-click Select, and specify a filename and location for the exported images.</li>
<li class="Bulleted2"><a name="1008563"> </a>Include JavaScript-if slices in the image are to be used for rollovers, enable this option and indicate which state the current image represents. </li>
<li class="Bulleted2"><a name="1008564"> </a>Use Single Color Table for All GIF Slices-constrain all GIF slices in the image to the same color table. Enabling this option can help avoid palette clashes between slices exported to GIF. </li>
<li class="SmartList1"><a name="1011368"> </a>RIFF format contains data about your image that is lost when you convert it to GIF or JPEG. If you may need to edit the file later, save a RIFF copy before you generate a GIF or JPEG version.</li>
</ul>
<h3 id="1008574" class="Heading2">
<a name="1008574"> </a>Grouping Slices
</h3>
<p id="1008575" class="Body">
<a name="1008575"> </a>You can fine-tune your sliced image by combining slices that go together or that do not contain slice objects.
</p>
<p id="1008576" class="Body">
<a name="1008576"> </a>For example:
</p>
<ul>
<li class="SmartList1"><a name="1008577"> </a>You might want a slice that extends across several "columns" in the slice map. To accomplish this, you can group smaller slices into a large slice. </li>
<li class="SmartList1"><a name="1008578"> </a>There could be a large area of your image that shows only a single background color. Grouping the slices in these areas makes it easy to export a single GIF image with a small number of colors. Be sure to set the GIF color settings accordingly. </li>
<a name="1008589"> </a>Grouped areas must remain rectangular. If you create a nested group, previously grouped slices may be ungrouped in order to create a rectangular shape.
</p>
<p id="1008590" class="Body">
<a name="1008590"> </a>Automatically assigned slice names change based on the top-left slice in the group.
<li class="SmartList1" value="2"><a name="1008597"> </a>In the image window, click the top-left slice to be included in the group, and drag down or to the right, or both, until the target slices are selected. When you release the mouse button, the slices are grouped.</li>
