Illustrator Save for Web

[Cameron]

Start a new document.

Draw a square with any color fill or stroke.

File>Save For Web.

Stare in wonder at the 2 pixel border illustrator has added to your square.

How do you stop this behaviour?

[Cameron]

Align artwork to the grid. If your lucky your artwork will align on all 4 sides to the grid. If not set up your grid to accomodate the artwork or start again...

Hey Adobe this is a pain in the @$$.

[AdobeAce]

Hi Cameron,

Try turning off Anti-Aliasing under Image Size in Save for Web window.

Ace

[AdobeAce]

:)

Hope this helps.

Ace

[wardo]

If you don't ant-alias (by rasterizing) your artowrk before turning off anti-aliasing in the Save for Web dialog, your artwork will look horrible. Here's workaround for the anti-aliasing of artwork and the 1-pixel white lines:

• If you have more than one layer, merge copies of the layers into a single layer.
• Lock or hide the original layer(s) to protect them.
• Select 'Document Setup' and set the 'Artboard' to the overall size of your artwork.
• Reposition artwork, if necessary.
• Select all artwork, select 'Object > Rasterize...', then:
- Set 'Resolution' to 'Screen'.
- Set 'Anti-Aliasing' to 'Art Optimized' or 'Type Optimized'.
- Click 'OK'.
• Select 'Save for Web', then:
- In the 'Image Size' options, uncheck 'Anti-Alias'.
- Check 'Clip to Artboard'.
- Click 'Save", etc.

[gcoghill]

Perhaps setting the crop area ['Crop Area'-->'Make' under the Object menu] using a rectangle of the exact dimensions you want the outputted art to be might work. Illustrator will then use the crop area for the dimensions when "Saving for Web".

Note that when using a rectangle to 'Make Crop Area', that rectangle will no longer be a shape, so do a quick copy & "paste in back" (or front) before running the 'Make Crop Area' menu item. Also good idea to use that object to make guides, easier to tell where exactly it will crop. Again, performing a 'Make Guides' using a shape will "use up" that shape.

I just discovered the wonders of the Crop Area menu item myself recently :)

[AdobeAce]

The 1-pixel white lines are actually the RESULT of the anti-aliasing which is smoothing (softening) the SHARP edges of the square.

Cameron said that he was drawing a Square by lining it up to a Grid. Anti-aliasing will do NOTHING to help the rendering of a shape that is not made up of curves or diagonals.

Anti-aliasing helps smoothe out parts of shapes that cut across the raster grid by interpolating variations of the shape's outer pixels so that the shape does not look jaggy.

Ace

[wardo]

That's correct. I was just thinking that if someone had a project that included text and biomorphic shapes, and only turned off anti-aliasing in the 'Save for Web' dialog, the artwork would not look very good. My workaround is meant as a solution for these real world projects.

[carngtn]

try to save as gif and make "matte" none

[The Repro Kid]

Lets get back the basics of this task of saving for the web an image of a square filled with a flat field of color.

Any image using flat fields of color with no gradations should be saved as a GIF file for the web, not as a JPG.

Problem solved.

:)

[GabbyAbby]

Hello Cameron,

When you create a rectangle to a set size such as 100 x 10 the program will create this rectange and add 1 px stroke (border) around it. Resulting in 102x12. If you want to remove these pixels, set Stroke to null on Control Panel.