-
Illustrator un-intentionally scaling .pngs?
Hoping someone has an answer, I have been searching for days with no resolution.
I use illustrator to create backgrounds for games. I have been using the “Save for web and devices” to export as 24 bit pngs. for the most part thsi works but there is always some little thing or 10 that has to be adjusted then re- exported. The backgrounds contain all vector elements and I have tried with fairly good accuracy to use align to pixel grid and then even verify most assets are on whole pixels to include strokes. Text is generally outlined, and I trim the entire thing to my artboard when exporting.
So the background loaded in photoshop “looks” ok, but it didn’t work. Here is the specific: the Background is 1024×768 24 bit .png all looks well in photoshop, but when we began lining up the buttons and such we noticed a problem. In trying to find the error I took the .png and “placed” it back into the Illustrator file using the place command (mind you the exact .png I just exported from .ai) I positioned it at 0,0 using the transform palette (and my art board is zeroed out to the rulers as well) and it does not match the illustrator layers. I am not saying it’s blurry I understand “raster happens” I am saying everything is shifted slightly. When I look at the transform palette the placed image reads as 1023.872 x 767.904 so I assume that scaling it back up to 1024×768 would fix it, but it does not.
So why does illustrator place the image at a different size, and how can I get a raster image out of illustrator that stays true. I have tired all of the anti-aliasing options in the image size tab of save for web, all give different results but all still get scaled when placing them back into Illustrator.
Thanks,
LVC
-
2 Replies
-
As you’ve noticed, Illustrator can be quite tricky for pixel accurate graphics due to sub-pixel positioning, especially when creating graphics for games, and particularly when you’re using strokes that are center-aligned or outside-aligned.
It sounds like you’re using all of the correct tools.
Have you tried checking object and object group dimensions in the Info palette?I might check that Illustrator’s raster effect settings and the rasters in Photoshop both have a ppi of 72.
Not sure that ppi would be the issue, unless you’re using screenshots created on a Mac, I suspect that it’s the components of the export not being adequately sized somehow.Are you able to select all of the objects that constitute the 1024×768 artwork while in Illustrator to verify the correct size before export.
Some solutions that I’ve occasionally used for this type of thing or icons/web logos is to use ‘registration boxes’.
In Illustrator, either an empty rectangle that has whole number/integer pixel dimensions around the object, or a solid/color-filled rectangle shape off to a corner that uses this rectangle to take advantage of Photoshops snap feature for placement. Then finally, to paste into Photoshop in a NEW document – Once rasterized, finally paste it into the target document.
The ’empty rectangle’ approach can be group of objects.
The ‘color rectangle’ approach can also be a group of objects, but more typically for accurately registering a series of pasted objects as individual Photoshop shape layers.
To reiterate, possibly the most important part is to paste into Photoshop as a new document, then copy/paste this into the target file.I’m not sure if this would help to address your exact issue or if I’m explaining clearly enough, but these are my initial thoughts.
Vince
*Please remember to Rate our replies or check Solution if solved. If you get a good idea from the post, consider clicking the Kudos option.
-
Thanks Vince, as is normally the case..the minute I finally post my question, I come up with the answer.
The problem was/is that the pixel grid is not aligned with the artboard. Therefore when illustrator saves for web and devices it shifts everything and blurs it to align with the artboard and the pixel grid. This causes a semitransparent pixel along the left edge that is hardly noticeable in the .png but Illustrator sees it as a partial pixel when placing and adjusts accordingly. It can be seen by using pixel preview before exporting. Once I set my art board to the pixel grid I saw the layer that was causing the problem, moved it to a full pixel and viola! the exported .png matches pefectly.
Hope this helps the next person who has this problem.
LVC
Reply to this Discussion! Login or Sign Up