Sign Up Now
Twitter Facebook Flickr Buzz
Social Networks


Forgot Password? Go Join Now
Sign Up for Starter's Pack (Free)
Call (800) 223-8720
Need Web Solutions? Get Free Sample Issue

Library: Creative Design


Utilize optimized slices to output optimized web graphics

Added on Tuesday 4th of August 2009 09:23 am EST

Applications > Adobe Illustrator CS/CS2, Adobe GoLive CS/CS2
Operating Systems > Microsoft Windows, Macintosh

Today's websites rely on emerging technologies such as ASP, PHP, MySQL, and JavaScript. This means if you're an artist, designer, or illustrator, and your task is to prepare graphic content for a website, your job may seem more and more challenging. But you needn't worry. Adobe has included an amazing variety of web tools in Illustrator. In addition to standards such as outputting a drawing as a JPEG or GIF file, you have the ability to slice up an image into multiple pieces and then output the entire set as an optimized web file image, as Figure A shows. Let's begin with a brief overview about Illustrator's slicing capabilities.

Get better control with user slices
Illustrator enables you to slice an image using two methods; Auto Defined and User Defined. While Auto slices work well for simple layouts, it's better to use User Defined slices. When you first create a User Defined slice, Illustrator, by default, slices up the remainder of your surrounding artwork you didn't identify as a slice into Auto slices. When you output your drawing as a web page, any slices that you keep as Auto slices allow you to choose only the compression and file format type. Let's now slice a drawing for optimized web page utilization.

Open a web page drawing
If you wish to follow along using our example, download the file from the URL given at the beginning of this article. Launch Illustrator and open the file. The web page drawing is already divided into slices, as shown in Figure B, so let's begin by accessing the Slice Option dialog box.

1. Choose the Selection tool from the Toolbox.
2. Select the slice for the first menu item in the left navigation bar, as shown in Figure C.

3. Choose Object > Slice > Slice Options to display the Slice Options dialog box, as shown in Figure D