How to make a single-pixel path in Illustrator actually display as such?

November 17, 2005 11:53 AM

I'm pretty new to Illustrator and trying to make screen icons (have used Photoshop so far). I can not get Illustrator to draw a line with a width of 1 pixel.

As I understand it, I should be able to have a real-time pixel preview as I draw. Yet, lines that are set to 1px are always displayed as 2 or 3 pixels wide, with a fainter color than they should be. It is impossible to make any layouts for the web that way.

I have checked that I am in pixel preview mode, set all units to pixels, checked that my lines are exactly horizontal or vertical, and on whole pixel coordinates. I am viewing at 100% zoom. I also did not find anything in the manual, the preferences, or on Google. I'm using CS2 on windows.

Is there a way to do this, or did Adobe just lie in their product description (or am I stupid)?

posted by uncle harold to Media & Arts (15 answers total)

Illustrator is resolution-independent. It's vector-based. Thus, any reference to "pixels" is meaningless.
posted by Thorzdad at 11:57 AM on November 17, 2005

That is to say, it's a relatively useless measurement unless working in conjunction with, say, a Photoshop project. At least that's been my experience.
posted by Thorzdad at 12:00 PM on November 17, 2005

illustrator was not intended for the realm of pixels.

raster vs. vector explained
posted by freq at 12:01 PM on November 17, 2005

Response by poster: I know. I have been working in graphics design for a decade and perfectly know the difference between bitmaps and vectors.

But "pixel preview mode" is supposed to circumvent that, by giving you a preview of how the output as a rendered bitmap at your chosen resolution will look like.

According to Adobe, this is specifically the purpose of the whole affair.

I am trying to find out if it is usable or just marketing gibberish.
posted by uncle harold at 12:04 PM on November 17, 2005

All pixel-preview-mode has been good for, IMHO, has been to see what your art will look like once it's rasterized. It's especially handy when using gradients, meshes, transparencies, and Photoshop effects like drop shadows.
posted by Thorzdad at 12:16 PM on November 17, 2005

Best answer: The pixel preview works fine, it's just that Illustrator doesn't seem to understand the concept of rendering a horizontal or vertical stroke without (effectively) blurring the edges.

If you want hard-edged vertical and horizontal lines, you'll need to create thin rectangles, 1px wide or high, instead of lines. Make sure the rectangles only have a fill colour set, with no outline stroke.
posted by chrismear at 12:17 PM on November 17, 2005

The quick & dirty workaround I used for this is: Make your drawing in illustrator (with the line width set to 1 pixel). Save it in a photoshop compatible format (I always use .eps). Open the file in Photoshop with anti-aliasing turned off. This is a dialog box that shows after you've opened the file. Sometimes the line doubles in pixel size. Then I go back to the original vector file and make sure that the coordinates of the objects have no decimals. Save and open again. Of course, if your vector art is complex, you still will have trouble getting a one pixel line. In cases like that I opend the files in 400% and scaled them down 25%. I don't know if this works in the latest system versions, since I still use system 9 for my artwork. (Copy your vectorart in Illustrator and pasting it in PS also gives you the alias off option)
posted by ouke at 12:20 PM on November 17, 2005

Best answer: Also, just to explain the problem a bit more clearly, imagine your document overlaid with a grid that represents the pixels. Illustrator's pixel co-ordinate system is based on those grid lines, not the pixels themselves.

So when you put your horizontal line on a whole-number y co-ordinate (which is what the 'snap to pixel' option will do), you're actually putting it between two pixels. So it's trying to render half the width of the line in one row of pixels, and the other half in another row of pixels. (Test this by putting it at 0, and see how it overlaps the document border). That's why, in pixel preview mode, you'll get a 2-pixel wide line that's coloured lighter.

It is actually possible to get nice-ish lines if you position the line exactly halfway between the whole number co-ordinates; e.g. 52.5 or 32.5. But then you're having to mess around all the time.

Rectangles are almost certainly the easiest way to achieve clean horizontal/vertical pixel 'lines'.
posted by chrismear at 12:31 PM on November 17, 2005

As of Illustrator CS2 (maybe CS? I skipped that one, so I am not 100% sure when it was introduced), Illustrator fiiiinally introduced stroke alignment (center, outside, inside) so that this fundamentally stupid problem can be side-stepped.

I don't know how people used AI for web design before this. I always ended up back in Fireworks even though it drives me crazy in most other ways, simply because of this.
posted by misterbrandt at 1:06 PM on November 17, 2005

Response by poster: Thanks! Works perfectly.
posted by uncle harold at 1:06 PM on November 17, 2005

Response by poster: Ok, I looked into the stroke alignment just now. It seems to work only partially:

a) in a rectangle, the top edge is still always blurred, while the other edges are fine

b) you can't set stroke alignment for lines, only for shapes that can have a fill

So you'd have to go with rectangles for lines again, I guess...
posted by uncle harold at 1:14 PM on November 17, 2005

Stroke alignment must have been introduced in CS2 -- I'm on CS and can't find it anywhere.

Anyway, glad the rectangles work for you, uncle harold.
posted by chrismear at 1:19 PM on November 17, 2005

You can always set the gridlines to 1 pixel apart with no subdivisions (that is, a gridline every pixel) and set snap-to-grid on. This results in an unworkable grid at 100%, but when you zoom right in you can more easily align the rectangles chrismear described. We used to do this when making icons in the early web days. Again, it's unworkable for an entire comp, but for small details like icons it's really accurate.
posted by BorgLove at 2:31 PM on November 17, 2005

This isn't what illustrator is designed for - stick with photoshop. Or use Microangelo or Pixen.
posted by armoured-ant at 3:30 PM on November 17, 2005

Response by poster: That may have been the case a couple of Illustrator versions ago and before the advent of scalable icons.

OSX, AFAIK, uses scaled bitmaps, but those are still definitely done in vector.

Linux projects such as the Tango Desktop use SVG as a base format.

There are lots of reasons why working in vector and having a realtime preview of the rasterized end result makes sense.
posted by uncle harold at 1:03 AM on November 18, 2005