Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
    
Is this for a website? –  Matt 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? –  Matt 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

3 Answers 3

up vote 2 down vote accepted

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

share|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.

share|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. –  Alph.Dev 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.

share|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

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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