Slices are the basic building blocks for creating interactivity in Adobe® Fireworks®. Slices are web objects that ultimately exist as HTML code. You can view, select, and rename them through the Web Layer in the Layers panel.
Slicing cuts up a Fireworks document into smaller pieces and exports each piece as a separate file. Upon export, Fireworks creates an HTML file containing table code to reassemble the graphic in a browser.
Slicing an image provides three major advantages:
- Optimizes images
- For fastest downloading.
- Adds interactivity
- So images can respond to mouse events.
- Eases updates
- For parts of web pages that frequently change (for example, photos and names on an employee-of-the-month page).
Create rectangular slices
Create rectangular slices by drawing with the Slice tool or by inserting a slice based on a selected object. Use slice guides (the lines extending from the slice object) to determine the boundaries of the separate image files that the document splits into when the document is exported.
Draw a rectangular slice object
Select the Slice tool .
Drag to draw the slice object.Note: To adjust the position of a slice as you drag to draw it, hold down the mouse button, press and hold down the spacebar, and then drag the slice to another location on the canvas. Release the Spacebar to continue drawing the slice.
Create a rectangular slice based on a selected object
Select Edit > Insert > Rectangular Slice. The slice is a rectangle whose area includes the outermost edges of the selected object.
If more than one object is selected, select Single to create a single slice object that covers all selected objects, or select Multiple to create a slice object for each selected object.
Create nonrectangular slices
Use the Polygon Slice tool to create nonrectangular slices. Nonrectangular slices are useful when you're trying to attach interactivity to a nonrectangular image.
Draw polygon slice objects
Select the Polygon Slice tool .
Click to place the vector points of the polygon. This is necessary because the Polygon Slice tool draws straight line segments.
When drawing a polygon slice object around objects with soft edges, include the entire object to avoid creating unwanted hard edges in the slice graphic.
To stop using the Polygon Slice tool, select another tool from the Tools panel. You don't have to click the first point to close the polygon.Note: Polygon slices combine HTML tables with image maps, requiring more code than similar rectangular slices. Using many polygon slices can increase processing time in a web browser.
Create HTML text slices
An HTML slice designates an area where ordinary HTML text appears in the browser. It then exports the HTML text that appears in the table cell defined by the slice.
HTML slices are useful for quickly updating website text without creating new graphics.
Draw a slice object.
With the slice object selected, select HTML from the Type pop-up menu in the Property inspector.
Type text in the Edit HTML Slice window, and format the text by adding HTML text-formatting tags.Note: Alternatively, apply HTML text-formatting tags after exporting the HTML.
Click OK to apply your changes and close the Edit HTML Slice window.
The text and HTML tags you entered appear in your Fireworks PNG file as raw HTML code on the body of the slice.
View and display slices and slice guides
You can control the visibility of slices and other web objects in your document by using the Layers panel and the Tools panel. When you turn slice visibility off for the whole document, slice guides are hidden too.
View and select slices
The Web Layer displays all the web objects in the document.
Select Window > Layers.
Expand the Web Layer by clicking the triangle.
Click a slice name to select it.
Show and hide slices
Hiding a slice renders the slice invisible in the Fireworks PNG file. Hidden slice objects can be exported in the HTML.
To hide an individual slice, click the eye icon next to the individual web object in the Layers panel.
To show a hidden slice, click in the Eye column to turn visibility back on.
To hide or show all hotspots, slices, and guides, click the appropriate Hide/Show Slices button in the Web tools section of the Tools panel, or click the eye icon next to the Web Layer in the Layers panel.
To hide or show slice guides in any document view, select View > Slice Guides.
Change the color of slice objects and guides
Assigning unique colors to individual slices and slice guides helps you to see and organize them.
To change the color of a selected slice object, in the Property inspector, select a new color from the color box.
To change the color of slice guides, choose Edit > Preferences (Windows) or Fireworks > Preferences (Mac OS). Then select a new Slice Guides color from the Guides and Grids category of the Preferences dialog box.Note: When you preview your document, deselected slices are visible as a white overlay.
Working with a slice layout is similar to using a table in a word-processing application. When you drag a slice guide to resize a slice, all adjacent rectangular slices are also resized.
You can also use the Property inspector to resize and transform slices.
Edit slices by moving slice guides
Slice guides define the perimeter and position of slices. Slice guides that extend beyond slice objects define how the rest of the document is sliced upon export. You can change the shape of a rectangular slice object by dragging the slice guides that surround it.
You can't resize nonrectangular slice objects by moving slice guides.
If multiple slice objects are aligned along a single slice guide, you can drag that slice guide to resize all the slice objects simultaneously.
If you drag one guide along a given coordinate, all other guides on that coordinate move with it.
Resize one or more slices
Position the Pointer or Subselection tool over a slice guide.
The pointer changes to the guide movement pointer .
Drag the slice guide to the desired location.
The slices and all adjacent slices are resized.
Reposition a slice guide to the far edge of the canvas
Use the Pointer or Subselection tool to drag the slice guide beyond the edge of the canvas.
Move adjacent slice guides
Shift-drag a slice guide across adjacent slices guides.
Release the slice guide in the desired location.
All slice guides that you dragged across are moved to this location.To cancel this operation and return all slice guides to their original positions, release the Shift key before you release the mouse button.
Edit slices with tools
Use the Pointer, Subselection, and Transform tools to reshape or resize a slice.
Because the size of adjacent slice objects is not automatically adjusted, resizing and reshaping slices can create overlapping slices. When slices overlap, the topmost slice takes precedence if interactivity is involved. To avoid overlapping slices, use slice guides to edit slices.
Select the Pointer or Subselection tool and drag the slice’s corner points to modify its shape.
Use a transformation tool to perform the transformation. Transforming a rectangular slice can change its shape, position, or dimensions, but the slice itself remains rectangular.
Use the Property inspector to change a slice object’s position and size numerically.
Remove a slice
In the Layers panel, select the slice in the Web Layer.
At the bottom of the panel, click the trash icon.
When you drag a button symbol from the Common Library to the page, it automatically creates a slice that is visible on the canvas but does not appear in the web layer.
If you select the slice on the canvas with the pointer tool and delete it, the entire button symbol is deleted. To retain the underlying graphic, select the slice/object on the canvas with the pointer tool, and then select Modify > Symbol > Break Apart. The slice disappears, and the button graphic from state #1 is retained. However, the graphics from states 2,3, and 4 are lost when you break apart a button symbol.