Nannette Thacker ShiningStar.net

ASP.net Web Application Development

Sponsors

News

See all Blog Posts by Nannette.

Nannette Thacker, consultant and owner of Shining Star Services LLC, specializes in development of custom dynamic database driven web applications utilizing ASP.net technologies. Nannette has been developing ASP sites since 1997. Nannette has written numerous articles on web development techniques and tutorials.

Nannette is the owner and developer of ChristianSinglesDating.com.

 Subscribe in a reader





View Nannette  Thacker's profile on LinkedIn

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

Comments

rrobbins said:

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.

# January 30, 2008 3:36 PM

nannette said:

Luke,

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

Sorry.

# February 14, 2008 1:12 PM

Matt said:

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.

# November 16, 2008 12:11 PM

nannette said:

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

# November 16, 2008 2:20 PM

matt said:

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

# January 14, 2010 10:54 AM

Kiona said:

Never would have thunk I would find this so indispnesalbe.

# January 18, 2012 4:54 AM

Journey said:

Thanks for shiarng. What a pleasure to read!

# January 19, 2012 9:24 PM
Leave a Comment

(required) 

(required) 

(optional)

(required)