Got a tip for us? Let us know

Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Illustrator not porn compatible?

Thread starter Penman
Start date Aug 14, 2004
Sort by reaction score

Penman

macrumors regular

Original poster

Aug 14, 2004

#1

I'm working on something for a left-handed website (that's what we call adult material in the jizz-bizz - I'm undercover) and suspect that perhaps there's hidden moral code in Illustrator CS attempting to thwart my intentions.

I'm using illustrator to design web pages (and please don't suggest another package - I love illustrator) but can't get the layouts to appear cleanly.

What I mean is that I am trying to use boxes (for example) that have borders a single pixel wide.

1) Why when I change Illustrator to measure everything in pixels does the stroke pulldown menu still read in points?
2) Why in pixel preview do thin black lines at 100% opacity appear grey when zoomed in on?
3) Why with anti-alias turned off does 12 pt text appear to be anti-aliased and muddy?

Basically - how can I get the crisp look in illustrator i'd like. I want to be able to draw a single pixel deep black line. I want to be able to see type as it is. Any ideas?

Cheers,

Penman.

MikeLaRiviere

macrumors regular

Aug 14, 2004

#2

Penman said:
I'm working on something for a left-handed website (that's what we call adult material in the jizz-bizz - I'm undercover) and suspect that perhaps there's hidden moral code in Illustrator CS attempting to thwart my intentions.

I'm using illustrator to design web pages (and please don't suggest another package - I love illustrator) but can't get the layouts to appear cleanly.

What I mean is that I am trying to use boxes (for example) that have borders a single pixel wide.

1) Why when I change Illustrator to measure everything in pixels does the stroke pulldown menu still read in points?
2) Why in pixel preview do thin black lines at 100% opacity appear grey when zoomed in on?
3) Why with anti-alias turned off does 12 pt text appear to be anti-aliased and muddy?

Basically - how can I get the crisp look in illustrator i'd like. I want to be able to draw a single pixel deep black line. I want to be able to see type as it is. Any ideas?

Cheers,

Penman.

1. As far as I knew, points and pixels were the same.
2. You need to move the line over slightly; if it appears grey, the program thinks you have placed it in between pixels (at a ".5" or such x or y value), and thusly extrapolates and anti-aliases.
3. What font are you using? Make sure you have the text selected when you turn off AA.

I'm not an Illustrator user, I'm a Photoshop user, but as far as I can see the programs are very similar. These are all steps I'd try in Photoshop, so see if they work for you in Illustrator.

Mike LaRiviere

Penman

macrumors regular

Original poster

Aug 14, 2004

#3

MikeLaRiviere said:
1. As far as I knew, points and pixels were the same.
2. You need to move the line over slightly; if it appears grey, the program thinks you have placed it in between pixels (at a ".5" or such x or y value), and thusly extrapolates and anti-aliases.
3. What font are you using? Make sure you have the text selected when you turn off AA.

I'm not an Illustrator user, I'm a Photoshop user, but as far as I can see the programs are very similar. These are all steps I'd try in Photoshop, so see if they work for you in Illustrator.

Mike LaRiviere

Thanks Mike but:

1) Points and pixels are different. There are 72 points in an inch. The number of pixels in in an inch varies - some people assume it's 72 because monitors used to be fairly low res. They're not anymore. Anyway...

2) I see this but don't see how to stop it happening. Illustrator places the artboard for you and I'm placing items by snapping to a 10x10 pixel grid.

3) Playing with that setting doesn't appear to affect things at all. It's very confusing... I think it only applys to rastar items (like PS files).

Anyone?

LeeTom

macrumors 68000

Aug 14, 2004

#4

Since Illustrator is made for print, the items will look fine when you print. Oh, but you're not printing. You said not to go there, but it's really ridiculous that you're designing a web page in Illustrator. Photoshop would be more up to the task for the design part... it does pixels well on screen.

Lee Tom

Penman

macrumors regular

Original poster

Aug 14, 2004

#5

LeeTom said:
Since Illustrator is made for print, the items will look fine when you print. Oh, but you're not printing. You said not to go there, but it's really ridiculous that you're designing a web page in Illustrator. Photoshop would be more up to the task for the design part... it does pixels well on screen.

Lee Tom

Er... thanks for the sarcasm?

PS isn't object oriented. In many ways it's not as useful a tool. It's not as easy to move objects around, scale them, etc. A lot of web designers use object oriented tools. I'm not on crazy. Any other comments?

shecky

Guest

Aug 14, 2004

#6

i would do everything in illustrator if thats what you are more comfy with, but my last step would be to copy + paste the objects into photoshop + let ps rasterize them - that way you will be able to see how they will properly appear on screen without any aliasing issues + pixel misalignments. this should solve issues #2 and #3. as for #1, thats just the way illustrator is in my experience.

i find Illustrator much easier to design in, but i always move everything to photoshop eventually for final touch ups, etc..

Penman

macrumors regular

Original poster

Aug 14, 2004

#7

shecky said:
i would do everything in illustrator if thats what you are more comfy with, but my last step would be to copy + paste the objects into photoshop + let ps rasterize them - that way you will be able to see how they will properly appear on screen without any aliasing issues + pixel misalignments. this should solve issues #2 and #3. as for #1, thats just the way illustrator is in my experience.

i find Illustrator much easier to design in, but i always move everything to photoshop eventually for final touch ups, etc..

Thanks - that's great advice. Which format would you suggest saving/exporting in? There are a few ways to do that and I'm sure they have differing impacts.

shecky

Guest

Aug 14, 2004

#8

in terms of saving the illustrator file just as a regular .AI file.

as far as the photoshop file, i keep it in native .PSD format, then iterate it, flatten it as needed to make my selections, use "save for web" and then if its mostly line or text, or if i need to preserve transparency, use .GIF, and if its mostly image or color blends, use .JPG

airmac

macrumors regular

Aug 14, 2004

#9

Penman said:
Thanks - that's great advice. Which format would you suggest saving/exporting in? There are a few ways to do that and I'm sure they have differing impacts.

save it in as illustrator file...place it in indesign 2 or higher...make pdf file...and than open pdf file in photoshop version 7 or higher. You can't go wrong with that procedure.

...

zim

macrumors 65816

Aug 14, 2004

#10

LeeTom said:
Since Illustrator is made for print, the items will look fine when you print. Oh, but you're not printing. You said not to go there, but it's really ridiculous that you're designing a web page in Illustrator. Photoshop would be more up to the task for the design part... it does pixels well on screen.

Lee Tom

Huh? you're not serious are you? Illustrator has served as a support application for video and web for years. Designing in PS is sad, possible but not as easy as good old AI.... my opinion.

moving on....

I use Illustrator for all my web work... last time I checked Flash was all vector and um, not print and yes Illustrator is designed to work with it.

Remember that vectors will display a bit fuzzy if not placed on whole number values i.e. x = 3.456, y = 4.566. By having whole numbers such as x = 3 and y = 4, you should see crisp clear lines. Using whole numbers will also be good if you are going to use CSS placement, keeps things precise.

Also, off topic but Illustrator works great with video as well, AE and AI do wonders together... so does FCP and AI

Penman

macrumors regular

Original poster

Aug 14, 2004

#11

zim said:
Huh? you're not serious are you? Illustrator has served as a support application for video and web for years. Designing in PS is sad, possible but not as easy as good old AI.... my opinion.

moving on....

I use Illustrator for all my web work... last time I checked Flash was all vector and um, not print and yes Illustrator is designed to work with it.

Remember that vectors will display a bit fuzzy if not placed on whole number values i.e. x = 3.456, y = 4.566. By having whole numbers such as x = 3 and y = 4, you should see crisp clear lines. Using whole numbers will also be good if you are going to use CSS placement, keeps things precise.

Also, off topic but Illustrator works great with video as well, AE and AI do wonders together... so does FCP and AI

Thanks for the support and the tips. As for keeping things on whole number values - I'm placing things on a 10x10 pixel grid. What would cause things to be off? If anyone has an email address I can mail them an example of what I mean....

Penman.

Horrortaxi

macrumors 68020

Aug 14, 2004

#12

Penman said:
1) Why when I change Illustrator to measure everything in pixels does the stroke pulldown menu still read in points?
2) Why in pixel preview do thin black lines at 100% opacity appear grey when zoomed in on?
3) Why with anti-alias turned off does 12 pt text appear to be anti-aliased and muddy?

I know you said up front not to suggest other software, but some of the answers are DUE to software:

1.) Because you only changed the "General" units to pixels. Right below that is the option to change "Stroke" to pixels in Illustrator preferences. Once you've done that, your strokes are measured in pixels.

2.) First of all, don't worry about how they appear when zoomed in on - web users can't zoom (except in the case of flash, and even then they hardly KNOW that) so don't sweat it. Only worry about their appearance at 100% screen resolution.

If you're drawing a straight horizontal or vertical line thinner than one pixel, it will appear in various shades of the background color. For example, if you draw a .25 pixel black line on a white background, in pixel preview it will appear in shades of grey. Since the line is THINNER than one pixel, NO ONE pixel is completely black. If you're doing straight horiz or vert lines, they have to be at least one pixel thick and should only be measured in whole pixel thicknesses if you want them to be absolutely crisp. Diagonal lines are going to be much worse. If you do a 1 pixel black diagonal line, only some of the pixels will actually be solid. Many will be shades to fill in. You'll have to use a thicker-than-one pixel line to get more solid color pixels, but you'll never eliminate the shaded pixels at the edges. Export to Photoshop and clean up any stray pixels, if you choose not to draw them in Photoshop in the first place.

This is why people will tell you to design for web in Photoshop, not Illustrator. Illustrator is geared toward print. In times like these, I create my basic shapes in Illustrator, then import into layers in Photoshop. I can manipulate objects, tweak their pixels, and preview exactly how they will appear. Illustrator doesn't do that for the web as well as Photoshop.

Additionally, Photoshop includes a vector-drawing pen tool, so you shouldn't be afraid of creating and manipulating vector-like objects in Photoshop for this type of project.

3.) Because your OS is doing the anti-aliasing. If you type in text in Illustrator, the OS still anti-aliases the text. If you type the text in Photoshop and turn anti-aliasing off, then it is shown correctly.

Penman

macrumors regular

Original poster

Aug 15, 2004

#13

Horrortaxi said:
I know you said up front not to suggest other software, but some of the answers are DUE to software:

1.) Because you only changed the "General" units to pixels. Right below that is the option to change "Stroke" to pixels in Illustrator preferences. Once you've done that, your strokes are measured in pixels.

2.) First of all, don't worry about how they appear when zoomed in on - web users can't zoom (except in the case of flash, and even then they hardly KNOW that) so don't sweat it. Only worry about their appearance at 100% screen resolution.

If you're drawing a straight horizontal or vertical line thinner than one pixel, it will appear in various shades of the background color. For example, if you draw a .25 pixel black line on a white background, in pixel preview it will appear in shades of grey. Since the line is THINNER than one pixel, NO ONE pixel is completely black. If you're doing straight horiz or vert lines, they have to be at least one pixel thick and should only be measured in whole pixel thicknesses if you want them to be absolutely crisp. Diagonal lines are going to be much worse. If you do a 1 pixel black diagonal line, only some of the pixels will actually be solid. Many will be shades to fill in. You'll have to use a thicker-than-one pixel line to get more solid color pixels, but you'll never eliminate the shaded pixels at the edges. Export to Photoshop and clean up any stray pixels, if you choose not to draw them in Photoshop in the first place.

This is why people will tell you to design for web in Photoshop, not Illustrator. Illustrator is geared toward print. In times like these, I create my basic shapes in Illustrator, then import into layers in Photoshop. I can manipulate objects, tweak their pixels, and preview exactly how they will appear. Illustrator doesn't do that for the web as well as Photoshop.

Additionally, Photoshop includes a vector-drawing pen tool, so you shouldn't be afraid of creating and manipulating vector-like objects in Photoshop for this type of project.

3.) Because your OS is doing the anti-aliasing. If you type in text in Illustrator, the OS still anti-aliases the text. If you type the text in Photoshop and turn anti-aliasing off, then it is shown correctly.

Thanks again. Your really helping me out and the theory's good too.

Actually my stroke setting is changed to measure in pixels and I can see the change. However - the drop down menu in the stroke window still appears in points. Any ideas?

I'm going to inport the AI file into PS as people have suggested and finish things there.

Should I have every object on its own layer? how can I make things easiest to edit there? I'm usind PS CS and AI CS on 10.3.5 in both cases.

You must log in or register to reply here.

Share:

Facebook Twitter Reddit Email Link

Register on MacRumors! This sidebar will go away, and you'll see fewer ads.