Why Slicing in Illustrator (Still) Matters

In 2001, Illustrator 10 was released with a feature called Slicing. For the most part, slicing is a way to "chop up" a large graphic or parts of an overall design into rectangular regions. These regions are then "sewn together" on a web page using HTML tables, where each rectangle -- or slice -- represents a single cell in the overall table. At the time, building HTML content with tables was a common technique. 

These days however, the majority of web pages are built with the far more versatile CSS standard. It's also rare that anyone uses Illustrator to assemble full web pages (graphics are usually created in Illustrator and then exported and assembled using CSS in a program like Dreamweaver for example). So the slicing feature in Illustrator today goes unnoticed for the most part.

In truth, those who use Illustrator for interactive design more often create individual art elements such as various-sized banners for ad campaigns, buttons or graphics for web pages, or icons for apps. Even those who design entire web pages in Illustrator usually end up rebuilding them with CSS, and export individual graphics as needed.

So when it comes to using Illustrator for this type of work, a valuable feature would be one that allows a user to easily define multiple areas within a single document that could each be exported in a variety of formats (PNG, JPG, GIF, etc). When the multiple artboards feature first appeared in Illustrator CS4, and when the feature was enhanced in Illustrator CS5, many thought it was a perfect fit for this kind of work.

Why artboards aren't the answer

In my humble opinion, however, for the kind of work that we're talking about here, using slices is still superior to artboards. Here are my reasons:

Artboards don't snap to the pixel grid. It's possible to position artboards in between pixels, and this result in artwork that is exported at incorrect dimensions. Slices are created from objects that snap to the grid, ensuring that they will always be precise and export at the correct pixel dimension.

Artboards don't "remember" file formats or settings. You can choose to export your artboard in a variety of file formats. However, each time to you want to export your artwork, you have to go through the process of choosing file formats and compression settings. Slices remember which export settings are applied to them, so you can have a single document that always exports one piece of art as a JPG and another as a PNG, each with specific settings.

Artboards are difficult to export. The Save for Web feature in Illustrator is a great way to quickly dial in optimized export settings, but you can only load a single artboard into Save for Web at any one time. Meaning if you have 30 artboards in your document, you must use Save for Web 30 times. You can use Illustrator's various export settings, but then must memorize which artboard number represents the art that you need. Save for Web not only lets you export all of your slices in one feel swoop (even if some are JPG and some are PNG, etc), but with Illustrator CS5, you can even select a slice and simply choose File > Save Selected Slices to export specific artwork directly from your document.

Artboards don't have "usable" file names. With Illustrator CS5, you can assign names to your artboards. These names are indeed used in the exporting process but always in the form of filename_artboardname. Often, designers need to use specific names when generating graphics. Slices allow you to apply names which are used however you like, offering far more control. This means you can export artwork and use it immediately instead of dealing with renaming your files after you create them each time.

Artboards can't migrate to Photoshop or Fireworks. Fortunately, designers have a variety of choices when it comes to creating graphics that are optimized for digital devices. While one designer may choose to use Illustrator, another may prefer Photoshop or Fireworks. While you can certainly export each artboard from Illustrator as an individual PSD file that can be opened in Photoshop or Fireworks for further processing, you can dealing with a large mess of files with larger projects. Take a single file from Illustrator with slices however, and you end up with a single file that still contains all of the slice regions – with their export settings intact – that you can open in Photoshop or Fireworks as needed.

Artboards are limited to 100 per document. Some larger campaigns or icon projects may require that you work with a very large number of graphics. A single Illustrator document can contain as many slices as you need.

At this point, you might be thinking that while artboards certainly aren't perfect, they are still far better than the ancient slicing feature that no one uses anymore. But I don’t use the slicing feature in Illustrator to create HTML tables. Rather, I use slices as a way to define smart "export regions". These regions are extremely versatile and memorize a plethora of export settings. If you often design and generate numerous graphics, using slices is a great way to manage your files.

Admittedly, the slicing feature has been dogged by issues over the years, most notably that artwork would export at incorrect sizes, or feature extra pixels of white – all due to antialiasing issues. However, these issues have been addressed with the pixel-snapping features in Illustrator CS5. So if you’re using CS5, slices can almost be thought of as a new – and usable – feature.

How to use slices as smart export regions

Create a new document using the Web profile. This ensures that anything you draw will align perfectly to the pixel grid, and issues like bad antialiasing or irregularly-sized graphics will be avoided.

Create one artboard per campaign or icon set (optional). Artboards are still useful, and can help you separate different sub-parts of an overall project. Keep in mind that each artboard will maintain its own slices, and you'll have to export the slices from each artboard individually.

Create a new layer for the slices. Being that slices are really just export regions, keeping them all on a separate layer can help you manage them easily without real artwork getting in the way. Think of them almost as guides.

Draw rectangles for each export region. Using the Rectangle tool, draw shapes at the exact dimensions that you need. I usually use black fill/no stroke shapes (you can hide the entire layer later, and avoiding strokes will ensure that your pixel boundaries are correct). Keep in mind that you're just drawing the most basic of shapes in Illustrator. Use the Transform panel to ensure dimensions are correct, and remember that you can use the Align panel to easily arrange the shapes as you wish.

Convert the rectangles to slices. Select all of the shapes you've drawn and choose Object > Slice > Make. This creates perfect slices for each of the shapes you've created. The slices are dynamic so at anytime you can resize the shape and the slice will automatically update. Avoid using the Slice tool to draw your own slices, and avoid using other methods of creating slices (like creating slices from guides or selections). Those methods don’t generate dynamic slices.

Create guides (optional). If you choose to hide the slices, you won't actually see their boundaries. Creating guides will not only help you visualize the boundaries of each slice, it will also allow you snap objects to each slice's boundary. Choose File > Select All and then choose View > Guides > Make Guides. In addition, you can also add text or notes outside the slice boundaries to identify its contents, if you'd like. Being the text sits outside the slice boundary, it won't be included when you export your artwork.

Lock the slices layer. Once your slices are set up, lock the entire layer to ensure that you don't accidentally adjust them. If you didn't create guides, you can also hide the layer so that you don't see the shapes you used to generate the slices.

Apply settings to the slices. If you already know how you're going to export your artwork, you can do it now (of course, you can do perform this task at anytime). Once you tell Illustrator how to export each slice, you won't have to do it ever again. Start by launching Save for Web and Devices, and selecting the Slice Select tool. Double-click each user slice (user slices appear in blue, and auto slices appear in gray — more info here). In the Slice Options dialog that appears, give your slice a name. This name will be used as the filename anytime you export your slice. The other settings in that dialog are irrelevant. Then use the settings on the right of the Save for Web and Devices window to choose file format and optimization settings. Click the Done button (not Save) to save the slice settings and return to the Illustrator document. Once you save your document, you won’t have to adjust these settings again (unless you want to, of course).

Draw your artwork. At this point, you have a template that contains all of the information you need to generate your art. Use your talents to create totally awesome artwork and graphics. If your Illustrator skills are lacking, remember you can always visit www.lynda.com to brush up (shameless plug).

Export your artwork. When you need to generate final optimized files of your artwork, you have two options. If you want to export all artwork, simply choose File > Save for Web and Devices, and then click Save. The Save Optimized As dialog appears, and at the bottom, choose Images Only, Default Settings, and All User Slices before clicking Save. If you want to export specific graphics, you don’t need Save for Web at all. You can simply use the Slice Select tool in Illustrator to select individual slices and then choose File > Save Selected Slices (note that in order to use this technique, the slices layer and guides will have to be unlocked so that you can select them).