Illustrator CS4 and no Sharp Lines

I was using a banner template in Illustrator CS4. Please keep in mind there really is no purpose for mentioning that only to say that I am building a banner. I don't think it is causing my problem, but you never know. The problem exists regardless of using a template or not.

The problem I am noticing is that when I go to save to web my 1 pixel border in squares with a stroke of 1 pixel seem to have almost like a shadow. You can especially see it when you zoom when you are on the save screen.

Photoshop does not have this issue and I get really clean lines. I normally make my banners in Photoshop, but being forced to use Illustrator because that is what someone else is comfortable using. Anybody encountered this problem where lines are clean when saving a graphic for web use. Here is an example. It should just be solid black.  Example Image
Who is Participating?
David BruggeCommented:
Hi Terrigo.
 Here is what is going on. No doubt you are used to Photoshop and  understand how you start with a canvas full of white pixels. As you  build your image, you change those pixels to whatever color your image  needs them to be.
 Illustrator works a little different. It creates a mathematical model of  your image, there are no pixels. Illustrator was originally designed  for artwork intended for printing presses. When you send your file to an  imagesetter that creates artwork at 3200 dots per inch, the Illustrator  turns your artwork into THAT resolution.
 When you take that same artwork and turn it into a jpeg for the web, it  tries its best to give you the size lines that you defined in your  artwork. For instance, if your line is one and a quarter pixels wide, it  will give you a line of dark pixels and next to it, a line of pixels  roughly one fourth as dark.
 If your line is not exactly on top of where the pixels on the screen  are, then you will get the results that you have in your example.  Illustrator is just trying to follow your instructions as best it can.
 BTW, even though Illustrator lets you define measurements in pixel  widths, these are approximations. By definition (depending on what you  have set in your preferences) a pixel is 1/72 of an inch, however this  is one of those fractions that does not convert cleanly into decimal  notation and there is always a bit of an error which can show up in your  files.
 I have a work around in mind, but let me try it out before I post it.
 - David
Sigurdur ArmannssonDesigner Commented:
When Illustrator came out in 1986 there was no talk about any internet or web. This is a problem which results from how Illustrator draws by vector paths.

The thickness of the line is divided on both sides of the path and therefor does not fit into the pixel size and makes anti-alias.

You could prevent this by drawing only by fills. That is, when making a frame you make a box of correct size and filled with black and inside you draw another one -x pixels. Then you can use the Pathfinder to use the white box to cut a hole into the black box.

You could also try make the path be drawn inside the path. Look at the Stroke panel for that.

This is however cured in Illustrator CS5 (align path to pixels)

Excellent article by Mordy Golding about this:
tarrigoAuthor Commented:
I had a feeling this was the case. I tried to explain this to those who want to use illustrator solely to create banners and well, you know how it goes.

This is good info though. Might have them purchase CS5 and let them know if they want this problem solved or to have as good a lines as I have been producing in photoshop, we need to upgrade. I create all my banners in photoshop and do illustration in illustrator normally. Go figure.

tarrigoAuthor Commented:
Thanks for the help. I have what I need to learn and investigate more on a much more sensible path.
If you are going to try using the fill method mentioned above, there is a much more simple way to achieve this. You will make your box the size you want, with a stroke just like you wish. Then select the box and go to object in the top menu and select path/offset path. That is an easier way to achieve the "fill method" mentioned above. Either way you will have the same outcome. I think Illustrator is great if it is used for what it is good at. Illustrator is more of a Logo, or decal, or any type of artwork that needs to be printed with crisp lines. Many printers require artwork to be Vector. Illustrator remains vector when saved as an eps, pdf, .ai,. When you try to save it as a jpeg, png, gif, it is possible, but the results aren't as good as if you saved it through Photoshop, or another "Raster" program.

My suggestion is to do the artwork in Illustrator, save your work as a .ai, or eps. Then open the .ai, or eps in Photoshop to save for the web. I haven't attempted to make Illustrator work for the web, because it is so simple to just open it in Photoshop and handle it that way. Someone might know a trick but for me design in Illustrator, open and save for web in Photoshop.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.