Creating Slices
Creating Slices
Professional Web designers will confirm that a fast download time versus a slow one can spell the difference between commercial success and failure. A visitor may quickly loose patience and hit the dreaded Back button if forced to wait too long for a Web page to load. Slicing large images into small, faster-loading pieces is one of the Web design tricks most often used.
A slice is a rectangular area of an image that becomes a cell in an HTML table. The HTML table is then exported to be placed onto a Web page.
You can import the table into an HTML editor for further editing.
We suggest that you preview your work in a browser to ensure that your document will appear correctly. Also, remember that an image may appear differently when it is viewed on other platforms.
| Slice Creator |
| Slice Selector |
The tools that you need to use are the Slice Creator and the Slice Selector. The creation and manipulation of slices can only be accomplished when either of these two tools are activated.
The slicing tools lets you optimize and export any Canvas X object for use on the Web. In addition, you can assign a URL to a specific slice. (See About Hyperlinks and Hypertext.)
If you are new to slicing, then you need to know that Canvas X Draw contains default settings that allow you to quickly perform the slicing function. In other words, you may immediately begin slicing an image and Canvas X Draw will assign default settings; however, so that you can achieve the optimal results, we suggest that you review Slicer Preferences. (See Slicer Preferences.)
By using the Slicer Preferences prior to exporting an HTML table, you can efficiently manage your slices and significantly reduce the likelihood of potential problems. The procedure for properly setting up the export of your slices into an HTML table is detailed later in this section.
Slicer Preferences
Double-click the Slice Creator icon or Slice Selector icon to open the Slicer Preferences in the Configuration Center.
General options | Name template: Assign a name to the slice template. This default name is shared by all of the slices. The name specified here must always use one of the formatting marks (either “# ” for numbers or “&” for a letter). If these marks aren’t used, then the application automatically adds a (#) to the end of the name. Other formatting keywords, such as [document] and [page] or a combination of these keywords, could be used together with the formatting marks. Additional naming information will be provided later in this section. A default name is automatically applied to a template if you don’t enter one; however, if a Web page is going to have more than one HTML table (which will contain a sliced image), then it’s a good idea to assign a unique template name before exporting the slices. Split preference: Choose a way of splitting overlapped slices. By default, slices are split without any preference. In that case, Canvas X Draw automatically designates where or how to split an overlapping slice. You may edit the default by selecting either vertical or horizontal as your choice. The Splitting preference remains in effect for all overlapping slices. Changing this preference affects all existing (overlapping) slices, but not those that are hard-split using the Split command. |
Default image options | Image format:
JPEG Quality:
Anti-aliasing: Smoothes the edges of rendered vector objects and text objects.
Select Save these settings as the default to make these settings your default slicer preferences. |
Using the Slice Creator
The Slice Creator tool gives you the ability to actually create a rectangular (horizontal or vertical) Slice box; i.e., you can define the area of the object that is to be sliced.
| Select the Slice Creator icon. Slice Creator cursor appears as a (+) plus sign. At this point, manually slice each desired area by clicking and dragging your mouse over the image. The Slice box contains a yellow transparent fill and has a red outline. |
All slices are automatically created inside a Slice layer. Specifically, this means that no matter which layer you were originally working in, the Slice operation will take place inside its own layer.
We suggest that you refer to the Document Layout palette during the first few times that you create slice. (See Using the Document Layout Palette.) Doing so will better illustrate how your slices are handled by Canvas X Draw.
When creating a new slice, the cursor will automatically snap to an existing slice or a grid (in that order). (See Drawing Grids to learn how to create a grid).
Another way to ensure precision is to create and place alignment guides around and over the object. If you are unfamiliar with this process, then we suggest that you read Using Alignment Guides.
Snapping to an existing slice is absolute. The cursor automatically snaps to a grid within a 3-pixel range of an existing slice.
Other Canvas X Draw operations are not allowed during the Slice Creator mode. You can only create slices.
To Slice an Image:
- Click on the Slice Creator icon.
- Then, click and drag over the section of the image to be sliced.
The cursor turns into a (+) sign when the Slice Creator function is active.
Each yellow-shaded box represents a sliced area.
Using the Slice Selector
Once you have sliced the image, you may need to edit and move it. To do this, select the Slice Selector tool.
The Slice Selector tool allows you to select, move, resize, copy, or delete the slice. You also have the option to both Undo and Redo any of the previously mentioned procedures.
Slices can’t be rotated or skewed. Additional slice-related commands are available through a context menu. (See Slice Operations Context Menu.)
To View Slice Properties:
- Select the slice with the Slice Selector tool.
- Right-click to open the context menu.
- Select Properties to open the dialog box.
Certain slice properties are available in the Properties bar when a slice is selected.
Change slice’s index to | Change the index of any selected slice. This function could be necessary if the index is part of the slice’s name when using either the ‘#’ or ‘&’ formatting symbol. It is available only if one slice has been selected. First select the Change slices index to box. Enter either a number or choose one of the existing indices available in the menu. |
Naming | Slice name: Enter the name of the slice or choose one of the values from the menu. [current] indicates that the name won’t be changed. [default] means the default name is used. [document] is the current document’s name. This keyword can be combined with the [page] keyword and with (&) or (#) formatting marks or with other text. Names like [document]_[page]_slice_## are legal and may be used. [page] represents the current page name. This keyword can be combined with the [document] keyword and with (&) or (#) formatting marks. # denotes the index of the slice. By using this setting, the index will be formatted as a number. More than one of these marks may be used; e.g., if you type “Image_###” and the index of the image is 7, then the name of the image would be “Image_007.” Otherwise, if only one mark is used, then the name would be “Image_7.” This mark (or a set of them) can be used only once in the name and it is mutually exclusive when using the (&) as a formatting mark. & represents the index of the slice, but it is formatted as a letter. More than one of these marks may be used to format a text designation that contains more than one letter; e.g., if you type “Image_&&&” and the index of the image is 7, then the name of the image is “Image_aag.” Otherwise, if only one mark is used, then the name would be “Image_g.” This mark (or a set of them) can be used only once in the name and it is mutually exclusive when using the (#) as a formatting mark. If more than one slice is selected, then a name with either (#) or (&) formatting mark is required since each slice must have a unique name. Use ASCII characters only and ensure that the name doesn’t contain a space between the characters. Alt text: assigned alternative text won’t take effect until it is exported to HTML. Some browsers display alternative text by default while the image is being downloaded. Alt text may have up to 64 characters and does not have to be in ASCII format. Image title: A title will take effect only if it is exported to HTML. By default, a browser will display the title as either a tool tip or on the status bar when you move the cursor above the image. The image title message may contain up to 64 characters. These characters do not necessarily need to be in ASCII format. |
Setting mode Default options: The slice(s) will share the Slicer’s default setting. Optimized: When checked, the standard dialog for image optimization will show up. You can set any combination of image parameters. After you close the dialog, a summary of the settings will be displayed along with a small button. Clicking the button will reopen the optimizing dialog. For more information on how to optimize an image’s parameters, see Saving Web Graphics (GIF/JPEG). Although it is possible to select a transparent color (or colors) when optimizing GIFs, such settings will be lost after returning to the Slice Preferences dialog. Simple setting: Using this mode, you can choose the desired options for anti-aliasing, image format, and JPEG output quality. Anti-aliasing, Image format and JPEG quality image options are the same as the ones that appear in HTML Options. |
Slice Operations Context Menu
The context menu can only be accessed if the Slice Selector tool is selected. Some of the commands are available only if they are relevant to the context of the current situation.
To Open the Slice Operations Context Menu:
Right-click the Slice Selector tool on a slice.
- Select this slice: selects the slice at the cursor’s current position.
- Deselect this slice: Deselects a slice if it is the only one selected.
- Remove from selection: Removes the slice at the cursor position from the selection set.
- Select/Deselect all slices: Selects or deselects all slice objects.
- Delete slice(s): Deletes all currently selected slices.
- Divide slice: Allows you to divide a slice horizontally and/or vertically into smaller slices. When choosing this command, the Slice divider dialog box appears with two options.
Slice Divider Dialog Box
Horizontally | Specifies how many horizontal portions in which the slice will be divided. To prevent horizontal division of the slice, a value of 1 can be specified. |
Vertically | Specifies how many vertical portions in which the slice will be divided. To prevent vertical division of the slice, a value of 1 can be specified. Using this method, a slice that overlaps another slice cannot be divided. |
- Split slice: Splits all selected slices that are overlapped by other slices. Slices are sliced along the soft slice-lines. This operation separates the image into individual slices. These slices will have the parent slice’s parameters by default, but the parameters can be modified.
- Export slice: Exports slices as images. It can also create an HTML file with a table that will contain all of your image slices. (See Exporting Slices.)
- Arrangement commands: Will arrange selected slices in a certain order: Shuffle Up, Shuffle Down, Bring to Front, Bring to Back. (See Arranging Objects in the Stacking Order.)
Exporting Slices
Once you have finished slicing your work, you can export the images (GIFs or JPEGs). You can also create an HTML file with a table that contains all of the images. The options to perform these functions are available in the Slicer Export Options dialog box.
Slicer Export Options
To open this dialog box, select Export Slices from the Slice Operations menu.
Replace existing images | Selecting this item automatically replaces existing images that have the same file name and location. If deselected, a dialog box will warn you when a slice is about to be replaced. |
Creates an HTML file that will contain the images to be exported. The file will contain one table that will link with all of the images. These settings can affect how the HTML table will be designed. | |
Render empty slices | If checked, all empty spaces (within the rectangle that determines the boundary of all of the selected slices) will be rendered. If not checked, the cell in the table will appear to be empty. For rendering the empty slices, default image options will be used. |
When working with complex tables, it may be necessary to use a one-pixel wide transparent GIF image as a spacer. These spacers force a Web browser to accurately display a complex HTML table. Choose a predefined name or enter your own spacer name with only HTML-safe characters. | |
Images to subfolder | Allows you to name a subfolder to which all images will be exported. If not checked, then images will be created in the same folder where the HTML file is being exported. The name of the subfolder should contain HTML-safe characters only. |
Text encoding | If activated, all text (i.e., alternative texts and image titles) will be encoded using the specified encoding. Also, the information about which encoding is used will be declared in the HTML file’s header. Western (ISO) is best used for the western Latin alphabet. Unicode (UTF-8) is best used for other alphabets (central European, Cyrillic, Asian) or mixed alphabets. If no encoding is required, then all of the text is exported as is. Only invalid characters are encoded so that the HTML output will always be valid. |
Force default image options | If this option is turned on, then the individual image parameters will be overwritten by the Slicer’s default options. This image setting is temporary and will not affect parameters of individual slices. See HTML Options for the image options, which are Image format, JPEG quality, and Anti-aliasing. |
Assigning URLs to Slices
Selected individual slices or groups of slices can be assigned a URL by using the Link Manager palette. Choose Object | Options | Link Manager to open the palette. The process is the same as assigning a URL to an ordinary object; however, the slice or slices must be selected with the Slice Selector. (See Using the Link Manager Palette.)
Related Articles
Creating Slices
Creating Slices Professional Web designers will confirm that a fast download time versus a slow one can spell the difference between commercial success and failure. A visitor may quickly loose patience and hit the dreaded Back button if forced to ...Creating Web Pages from Canvas X Documents
Creating Web Pages from Canvas X Documents Any document that you create in Canvas X Draw can be exported for the Web in a matter of seconds. To export a document as one or more Web pages, save the document in HTML format. Canvas X Draw does not ...Creating Web Pages from Canvas X Documents
Creating Web Pages from Canvas X Documents Any document that you create in Canvas X Draw can be exported for the Web in a matter of seconds. To export a document as one or more Web pages, save the document in HTML format. Canvas X Draw does not ...Creating Flowcharts
Creating Flowcharts In Canvas X Draw, you can use the Flowchart palette to create a flowchart using standard flowchart symbols and lines. You can adjust the pen, fill, dash, and arrow attributes of the lines, the amount of offset spacing between ...Creating Flowcharts
Creating Flowcharts In Canvas X Draw, you can use the Flowchart palette to create a flowchart using standard flowchart symbols and lines. You can adjust the pen, fill, dash, and arrow attributes of the lines, the amount of offset spacing between ...