Illustrator Image Edges and Anti-Aliasing

By Nannette Thacker

As a developer, many times I work with web graphic designers who provide me a layered template in Adobe Illustrator. It is my job to take each image and save it for the web, as well as design the style sheets and master pages.

Using Adobe Illustrator, I ran into a problem where when saving an image for the web, I noticed that Illustrator put a 1 pixel edge around the image. Not being a designer and Illustrator afficianado myself, I didn't know what was causing it or how to fix it. I tried nearly everything and finally found the solution. I want to share that for those who might have problems with this in the future.

Here is a view of what the image looks like with the edging I'm talking about. Notice the little white edges at the top and bottom. 



Here is what I want it to look like, without the edging:



Here is the "secret." When on the "Save for the Web" page, select the "Image Size" tab, and deselect the "Anti-alias" checkbox and select "Apply." This will remove the edges from the image and save it the way it was designed.



May your dreams be in ASP.net!

Nannette

7 Comments

  • Adobe Illustrator is more useful for web development than many people realize. For example, it can convert a PDF into an image scaled to any dimension you like. And vector graphics also have the advantage of being easily scaled to the required dimensions. But I didn't really get into Illustrator until I studied Adobe After Effects which has many video effects that require vector graphics.

  • Luke,
    Sorry to hear it didn't work for you. I'm using Illustrator CS2 if that makes a difference.
    Sorry.

  • Very bad advise for two reasons...
    1. NEVER save a web design ready for dev as a JPEG, regardless of the quality. JPEG is a lossy format. Save as PNG 24 or 32 bit.
    2. NEVER work on a web design ready for dev that has anti-aliasing turned off, unless you understand the consequences. By all means export illustrator without anti-aliasing as a PNG file, but also export it WITH anti-aliasing. The developer then gets together with the designer to iron out any nigglies.
    3. Use Illustrator for large web projects where a client needs to approve each page before it goes to development/programming, otherwise, Photoshop is always the better bet.

  • Matt,

    Since IE6 doesn't support PNG and there are still companies that require IE6 support and users that use it, I'd suggest you reconsider whether saving as a JPG is really "very bad advice."

    You say to "never" do it, but I haven't seen you give any good reasons why not to.

    The web was using JPGs successfully long before PNG was developed and I'm sure it still will for years to come. In fact, if you look at many of the available web image/icon packages you can purchase today, every image comes available in GIF, JPG, and PNG formats.

    Nannette

  • perfect. thanks so much, you just saved my week.

  • Never would have thunk I would find this so indispnesalbe.

  • Thanks for shiarng. What a pleasure to read!

Comments have been disabled for this content.