Ok every time I get to slicing there is some trouble with Illustrator slices being off and I forget what I did last time to make it right. Here it is.
In General:
Illustrator is more like a drafting program, and can definitely achieve pixel perfection if you set it up right.
When your drawing boxes, think in pixels from the start, and key in the values of your box dimensions as you go. If you resize then, don't randomly free transform, but key in the dimensions, or, free transform using snap to grid/pixel. Its less to clean up later on.
Page grid:
For designing and rough draft stage I like to have my page grid set to:
Preferences > Guides and Grid > Gridline every 60px, subdivisions 6, which gives a 10px grid and works well for the 960grid designs. Snap to grid and 'try' and draw your boxes using whole numbers as you go.
For slicing stage I change it to Gridline every 60px, subdivisions 60. So it is now a 1px x 1px grid.
Before slicing I go through the boxes and make sure all heights and widths and x,y,-co-ordinates are whole numbers, and zoom right in to affirm they are on the pixel boundaries. Sounds laborious but usually there aren't that many things to slice with CSS3 and favouring a minimalist aesthetic.
For boxes with old school drop-shadows of say precisely 3px, it is really important to get pixel perfection, or drop-shadows will be cut off and boxes misaligned.
Also for your setup, View > Check 'Snap to grid' and View > 'Pixel Preview'. Toggling pixel preview makes the 'snap to grid' item change to 'Snap to pixel'. If you cant find 'Snap to pixel' then try toggling 'Pixel Preview' on and off.
Slice tool caveats:
CS3 slice tool is unwieldy and annoying. It is easier to control the slice tool by first dragging near where you want the slice, then adjusting the slice using the x,y co-ordinates and the width and height (in toolbar across the top). This way you place the slice in exactly the right location to the pixel.
Knowing intimately what size your slices are will help anyway when it comes time to code the layout. I find slice stage a good time to write down the dimensions of the boxes, padding, hex values and the like on a paper printout of the layout, so all the values are right there to glance at when you want to code it up (find glancing at paper faster than switching between windows)
Don't expect to batch slice your entire page in Illy and have it be perfect, my version definitely has a 1px shift buggy thing that crops up.
Save each slice one by one by going File > Save for web and in the web previews, zoom in to 400-800%, and check the slice boundaries are on the correct artwork boundaries.
I found the slice boundaries were sometimes shifted exactly 1px to the left when saving for web.
Not the width, just the location of the slice moves.
Don't ask why, simply go back to the artwork, and shift the x-coordinate of the slice box 1px to the right (eg add 1px to the x-co-ordinate value). Then, when you go 'Save for Web' zoom in again, the slice will be aligned magically on the artwork boundaries.
So the x-co-ordinate of the slice is technically incorrect now, but if it slices in the location you want it to, that's all that matters.
 |
| This is the artwork and slice on the artboard, both have their left edges located at x=660px |
 |
| But this is what the (bottom of the) slice looks like in Save for web preview window at 400%, it is actually slicing exactly 1px to the left of the artwork box. |
 |
| So change the actual x-co-ordinate of the slice to be 661px, which, as you can see here is NOT aligned with the artworks left edge in reality... |
 |
| But in the save for web preview window - it is now aligned with the artworks left edge! Go figure! |
Time to buy CS5, apparently CS5 does great pixel prefect slicing and artworking.
More tips:
Set stroke alignment to be 'Inside' or 'outside' not center.
For 1px lines, make the stroke 0.999px or something, otherwise it gets blurry.
Also it is easier to align 1px rectangles to a pixel grid than 1px lines, which naturally sit on the centre of the gridline.
So try and draw filled rectangles rather than using the line tool with a stroke.
Posts
