I have created a circle in Illustrator with a radius of 12px.

enter image description here

Now I'm trying to rasterize this into a .png from Photoshop to have the exact same size, but anti-aliasing is messing things up and the height is actually 11px instead of 12px.

enter image description here

I tried both, exporting the .png from AI and opening the .ai file from Photoshop but I get the same result. So how can I rasterize my vector to match the desired size?

  • Is this for a website? – DᴀʀᴛʜVᴀᴅᴇʀ Oct 7 '13 at 14:36
  • nope, for iOS game and I would like to get images as precise as possible, because on Retina display you can notice problems. – Michael Oct 7 '13 at 14:53
  • If you are looking for accuracy why are you not coding it instead of using images? – DᴀʀᴛʜVᴀᴅᴇʀ Oct 7 '13 at 15:01
  • 1
    What happens when you set the center point (x,y origins) of the object to integers? – horatio Oct 8 '13 at 21:18
  • 2
    @horatio I'd post that as an answer! – Yisela Oct 8 '13 at 21:36

Make sure your shape is placed on whole pixel values (ie, X:851px and not X:851,728 px) If your object is aligned to the pixel grid, antialiasing won't make it bigger.

You can do this easily by selecting the option "Align to pixel grid" in the Transform panel (if you don't see it, select "show options" from the flyout menu)

Align to pixel grid

To do this automatically for new objects, in the transform panel options choose "Align new objects to pixel grid"

enter image description here

| improve this answer | |
  • 1
    brilliant. for existing objects I have to do it manually, right? – Michael Oct 9 '13 at 11:57

Adobe Fireworks is ideal for stuff like this. You can create, align, scale, resize vector graphics pixel perfect, and export them as numerous formats, including PNG.

You can even define where the color edge is drawn, inside vector shape, in the middle of the vector shape path, or on the outside.

| improve this answer | |
  • Can I still use my AI files in Fireworks or I have to draw new vectors? – Michael Oct 7 '13 at 18:38
  • You can open AI files with Fireworks without problems as well as you can save your Fireworks PNG files back as AI. – Slava Oct 7 '13 at 18:47

I ask now rhetorically: "What happens when you set the center point (x,y origins) of the object to integers?"

When the origin is set as a fraction of a pixel, when the object is rasterized, there will be rounding of fractions (probably down to the nearest integer).

In my humble opinion, AI should not allow you to specify fractions of pixels, but there it is.

| improve this answer | |
  • In iOS coding pixels also using floating point units for some reason. – Michael Oct 9 '13 at 14:20
  • I guess one cannot know a pixel's size and position at the same time any more... – horatio Oct 9 '13 at 15:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.