Tuesday, March 30, 2010

Importing Illustrator vectors -- not...

Hey all,

I just opened a mockup that was done in Illustrator CS4 and all the vector shapes are blurry (as if they are not aligned to whole pixels, even though the transform palette in both Illy and FW CS4 shows them on whole pixels). The weird thing is that the entire mockup was created with Pixel Preview enabled in Illustrator and with Pixels as the units (which I thought prevented this from happening). The transform origin in Illustrator?is set to upper left BTW. Visually its as if the whole thing is shifted by a fraction of a pixel in the Y direction. Moving an object in FW does not remove the blurring.

Any ideas how I can get the edges to look clean without rebuilding the whole thing in FireWorks? Image attached.

Importing Illustrator vectors -- not...

With regard to Illustrators end, have a look at number 2/3 solutions here

http://vibr8bros.com/tutorials/illustrator-trick-how-to-avoid-blurred-pixel-font s-shapes

Since they appeared as non-blurred (Snapped to Pixels) in Illustrator, on Fireworks end, you will have to alter choice of 'Stroke: Hard vs Soft' , see table near the bottom of the page here http://kb2.adobe.com/cps/217/d6f2172a.html

h

Importing Illustrator vectors -- not...

thanks. None of my objects have strokes. Other ideas?

Are you viewing the Fw version at 100%?

Anything above that will 'appear' to look blurry/pixelated anyways.

h

Its not a magnification problem (I'm not that dumb).

Have a look at the image attached to the original post and you will see the problem. There is clearly Y-axis blurring on every object.

I did have a look at your screen shot.

According to it, and compared to the Transform (Illustrator)/PI(Fw), your text and arrow shapes looks to be at above 100% view. Thats the only reason I suggested it.

Can you post your original Illustrator - I can test, help verify for you.

h

I enlarged the view in both so you could dramatically see the difference. Obviously the blurring is more subtle at 100%, but its still there.

Attached is a test file for ya. Blurs the shapes every way I import it.

I just opened your .ai File in Fw and at the Import dialog. I left everything at the default (made no changes) and comparatively, it appears to be the same as I see the original opened in Illustrator. I am not seeing any 'blurring' at all.

Did you change anything at the Import dialog in Fw?

h

Did you zoom in and look?

I tried checking and unchecking every option in the import dialog...blurs every time here.

Between the blurring and the intermittent crashing of FW CS4 I am giving up on this craptacular software and moving on. I thought the CS4 apps were all about integration. I love Illustrator and Photoshop but the CS4 web apps (DW, Flash, FW) are all pretty disappointing.

Thanks heathrowe for your time--that was totally above and beyond.

Yes, I zoomed in.

Though I never rely on that for 'visuals', only for 'placement/alignments' with Grids enabled, for pixel perfect placement.

You will always gets pixlated views if you zoom in because that is the nature of Canvas (in Fw), Document (in Ps, is the same way), though Artboards (in Ill is a little better than these two, in this regard).

You have to realize that it's not like a microscope 'zoom' where you expect what you see to become clearer or better, what actually happens is your see more of the true 'pixels per inch (ppi screen based representation)' of the related artwork the more you zoom. Hence I never use it in this regard.

Hope that makes sense.

Surely, integration can be better, but I still think your 'looking' at it the wrong way.

If at 100% view Fw, Ps, Ill looks the same, thats all that matters.

h

I really appreciate your looking into the issue, heathrowe, and take what I am about to say with all respect for your community participation here.

You are completely misunderstanding the problem. I zoom in to verify what my eye can already see and then correct misalignments. I want my designs to be tack sharp. Zooming in is the only way to verify whether that soft edge I am seeing is an optical illusion due to a color relationship or if its truly an edge that is pixel shifted. I have been building websites since 1994 and I have been teaching interaction design at the college level for years. Of course I know that websites are viewed at 100% in browsers. A rectangle that sits on whole pixels and is of whole pixel dimensions--even when zoomed in--should not show pixelation on its sides (as the rectangles do in my FW example). That's the entire reason why Pixel Preview was added to Illustrator...to give us a way to preview a web layout and see all the imperfections that need correction--and to do that while zoomed in.

Perfectly understood.

I did run a few more test for you and I believe I have a solution for you.

When you import the .ai file to .fw, at the Import dialog, 'deselect' the Anti-Alias option only. The vector shapes will match that as if they were created in Fw, the first place.

If you already have the shapes in a Fw doc, then select them all, then in the PI change the 'Edge' option from Anti-Alias to Hard.

Now zoom in, It sould be tack sharp.

Text is a little different and may?also need to 'tinker' with it's option of Anti-Alias.

Hope that helps

h

No comments:

Post a Comment