February 8, 2007

Perfectly-sized web graphics

I am often asked why Illustrator seems "imperfect" when it comes to exporting and optimizing web graphics. You will often find that when exporting files for the web using the Save for Web feature in Illustrator, pixel sizes are often one pixel off -- leaving unsightly slivers of white, or sometimes even clipped graphics. Other times, graphics may seem to export at odd sizes altogether.

This can seemingly happen for a variety of reasons, although in reality, they are all the same -- Illustrator is simply picking up the bounding box of the artwork. And what you think is the bounding box may not be what Illustrator thinks is the bounding box. For example, if you create a mask, even though you can't see parts hidden by the mask, those areas may still be part of the bounding box area. Strokes, which by default sit on the centerline of a path, may also cause extra pixels to be added to the bounding area.

Basically, because web graphics really need to be created as very specific dimensions, you can't leave it up to Illustrator's interpretation of where the bounding box should be. You should be defining that yourself. And there are three ways to do it:

1. Draw a no-fill, no-stroke rectangle at the exact dimensions you need. With the rectangle selected, choose Object > Crop Area > Make. (EDIT: In CS4, with the rectangle selected, choose Object > Convert to Artboards). Now, when you use Save for Web, the exact size of the crop area will be used as the export dimensions. This is also useful for when you want to export a single area within a large illustration -- no need to copy and paste into a new document.

2. Use Document Setup to set up your artboard to the exact pixel dimensions you need (EDIT: In CS4, use the Artobard Tool to do this). Then, when you use Save for Web, click on the Image Size tab (lower right of the dialog) and check the "Clip To Artboard" option.

3. Use slices. You can draw slices using the Slice tool and you can adjust those slices using the Slice Select tool. In Save for Web, you can then treat each slice individually, and export them as needed.


Anonymous said...

Thanks. As I am just starting to explore Illustrator as a tool for developing web page graphics, this should come in handy.

Anonymous said...

Illustrator's slice tool has always seemed unusably buggy to me. Even if I set the exact pixel dimensions of the slice via keyboard, the end result will frequently be one pixel off in one or both directions (no Intel hardware, so it's not a Rosetta rounding error). If I need to slice something accurately, I always do it in Photoshop.

Anonymous said...

I created my site using Illu CS but to have a good control I really needed to save as layered psd and do the last bit of tweaking in P'shop. That's really too bad. Illustrator is a great tool for designing websites, it just misses that 'last mile' you need to save for web. Perhaps we'll see some new features in CS3?

Nikos said...

Alternatively to method 1 you can also click Object>Crop Area>Make with nothing selected.
Illustrator will create crop marks around the artboard so nothing outside it gets exported (also handy when you export to PSD)

Anthony Hessler said...

I've recently been designing artwork for the Web using Illustrator, and in addition to the Object > Crop Area > Make command, I have found it extremely useful to turn on the Pixel Preview (View > Pixel Preview). With this view, Snap to Grid (I set my grid to 1 px squares) is automatically turned on, which makes it even easier to define shapes to exact pixels, which I use mostly for the main or largest shape in the artwork. The only down side is it's almost too helpful sometimes, especially when using the pen tool and drawing curves. But by toggling Pixel Preview on and off when needed, I find it to be a good solution for the little nit-picky aspects of designing graphics for the Web. And like Mordy alluded to, make sure that if you use a stroke, to align it either to the inside or outside of the path, and keep it in 1 pt increments.

Unknown said...

Thanks for all of the comments! These are all wonderful tips and suggestions.

I agree that the final optimization steps in Illustrator -- for pixel output -- seems to be missing something. No doubt that Photoshop has that polished feel.

Although lately, Flash has been more of where my Illustrator art ends up.

I should also point out that the tip about using a crop area works for ALL export options -- not just Save for Web. So for example, if you export a TIFF from Illustrator (using File > Export...) then it works there too...

Unknown said...

This post and these comments have been very helpful.

This thread might be useful to readers as well:


Anonymous said...

Hi Mordy,

You have a very cool blog here…loved the content.
U know there is an awesome opportunity for people like you who have ur own blogs n sites…I came across this site called Myndnet.com…it’s a platform for people to buy and sell IT related information. and everytime you sell some information you get paid for it…Good money for people like us in the IT domain. Here the link http://www.myndnet.com/login.jsp?referral=alpa83&channel=al488

Sign up is free…check it out…
You can contact me at my id here for more questions : barot.alpa@gmail.com


phogasmic said...

Thank you. I was having issues with that.

Anonymous said...

Thanks for the nice post!

Leisha said...

I love you. You saved my ass with this post. I don't have enough practice with crop areas and I need to produce some images in precise dimensions. Thanks!