How to Cut and Map Graphics for CSS Web Designs

Cutting or "slicing" a graphic for a CSS web design is a way to optimize a large image for your website. The slices turn the large graphic into a collection of smaller graphics that will load faster. Adobe Fireworks is specifically designed for creating web graphics, including slices for CSS. It also creates CSS layers and HTML code automatically, when the slices are exported, to map the slices back to the original graphic. A web editing tool like Adobe Dreamweaver can then use the files and that code to construct a CSS website.

Things You'll Need

• Adobe Fireworks
• Adobe Dreamweaver (optional)

Instructions

Slicing the Image

1. 

   Open Adobe Fireworks and create your website image. The example shown here is a web page created with rounded rectangles, a circle, some text and a photograph pasted into the circle.

2. Click the File menu and save this file. It will be in PNG format.

3. Examine your graphic and determine the best areas to slice into smaller portions. You want to make logical cuts and keep unified objects together. For example, the text at the top of the screen would make one slice, the daisy corner another, and the button column a third, leaving the white central area as the last slice.

4. 

   Click the Slice Tool in the web section of the tool palette, about halfway down. It looks like a light green square with a knife in front of it. It works like a shape tool.

5. 

   Click and drag to highlight the first slice. In the example shown here, the daisy in the corner is set to be a slice. In the Layers palette on the right side of the screen a new object will appear in the Web Layer representing this slice.

6. 

   Double-click the slice label in the Web Layer palette and rename the object from "Slice" to something more specific that will be easier to understand if you look at the HTML code later.

7. 

   Create more slices to cover the rest of your graphic and save your file again.

Exporting Images and HTML/CSS Code

1. Click the File menu, then Export.

2. 

   Select "CSS Layers .htm" from the Export menu at the bottom of the dialog box. Leave the Source as "Fireworks Slices."

3. Click "New Folder" and create a new location for the exported files if you don't want them exported to the same location at the original PNG graphic file you've been working on.

4. Click the Export button.

5. 

   Exit Fireworks and locate the folder to which you exported the files. You should see individual JPG files for each slice and an HTML document that contains the code to put them back together as a web page.

6. 

   Open the HTML file in Adobe Dreamweaver to see the code Fireworks generated and to continue working with your exported slices to finish the web page.

Tips & Warnings

• If you want to export your slices with code for HTML tables instead of CSS layers, select "HTML and Images" instead of "CSS Layers" from the drop down menu in the Export dialog box.

References

• Benefits of Slicing Images
• Technical Overview of Slices

Resources

• Adobe Fireworks Home Page
• Learn to Slice in Fireworks
• Fireworks Image Slicing
• Slicing with Fireworks