When designing Icons I prefer to create a page with multiple icons displayed so I can see how the icons look together as a set. I find this very important and convenient when trying to ensure a consistent style across all the icons I am designing.

For example, I have a file in Adobe Illustrator format with a set of icons at 32 x 32 pixels:

This tutorial will explain how to organize the workspace to make working with such a file comfortable and how to optimize the process of saving each icon into the required format.

First, turn the grid on, choose View > Show Grid. The grid will help you accurately place and measure objects in the illustration window or in an artboard. Then specify the spacing between gridlines. Choose Edit > Preferences > Guides & Grid.

You need set spacing between gridlines value to the size of icons. In my case it is 32px.

Also you can choose grid style (lines or dots), grid colour, or whether grids appear in the front of or behind the artwork.

Now you can easily see and prevent the image from exceeding the 32 x 32 pixel dimensions of the icon. This is clearly very convenient.

Now all the icons are ready. How do we save each icon to a separate file?

In Illustrator, you can use slices to define the boundaries of different web elements in your artwork. For example, if your artwork contains a bitmap image that needs to be optimized in JPEG format, while the rest of the image is better optimized as a GIF file, you can isolate the bitmap image using a slice. When you save the artwork as a web page using the Save For Web & Devices command, you can choose to save each slice as an independent file with its own format, settings and colour table.

Slices in an Illustrator document correspond to table cells in the resulting web page. By default, the slice area is exported as an image file that is enclosed in a table cell.

You can view slices on the artboard and in the Save For Web & Devices dialog box. Illustrator numbers slices from left to right and top to bottom, beginning in the upper left corner of the artwork. If you change the arrangement or total number of slices, slice numbers are updated to reflect the new order.

To create slices do one of the following:

• Select one or more objects on the artboard, and choose Object > Slice > Make.
• Select the Slice tool and drag over the area where you want to create a slice.
• Select one or more objects on the artboard, and choose Object > Slice > Create From Selection.
• Place guides where you want to slice the artwork, and choose Object > Slice > Create From Guides.
• Select an existing slice, and choose Object > Slice > Duplicate Slice.

Let’s see at an example of our file:

To show or hide slices:

• To hide slices in the illustration window, choose View > Hide Slices.
• To hide slices in the Save For Web & Devices dialog box, click the Toggle Slices Visibility button .
• To hide slice numbers and change the color of slice lines, choose Edit > Preferences > Smart Guides & Slices.

Use the Slice Select tool  to select a slice in the illustration window or the Save For Web & Devices dialog box.

Do one of the following with the Slice Select tool:

• Select a slice in the illustration window, and choose Object > Slice > Slice Options.
• Double-click a slice in the Save For Web & Devices dialog box with the Slice Select tool.

A slice’s options determine how the content of the slice will look and function in the resulting web page.

Select a slice type and set the corresponding options:

Select Image type if you want the slice area to be an image file in the resulting web page. If you want the image to be an HTML link, enter a URL and target frameset. You can also specify a message that will appear in the browser’s status area when the mouse is positioned over the image, alternative text that will appear when the image is not visible, and a background color for the table cell.

The name you give the slice is a the file name, that will be created. I usually set the name of each slice as the name of icon that I need. So when I have to edit some icon and then resave it, the name will not change. For example, slice 05 will be saved as 0622_Text_Styles_32x32.png.

Also you can choose a format file for slices:

If you need save all slices set All Slices in Export. For saving one or few slices (to select a slice, click it; to select multiple slices, Shift-click) select Selected Slices in Export.

With a little work organising at the start of the project the final result is that I have separate icon files in the correct size, format and with names that I need: