2

I have an iOS layout designed for Retina, which means it's double the resolution of the older devices. To create standard-resolution PNGs, I would need to scale down the design by 50%.

Problem is, I have a lot of vector paths and scaling the image to 50% causes them to land inbetween two pixels. The result is blurry borders all over the place.

So the question: What do I do to resize the document to 50% while keeping all the vector paths on pixel bounds?

Improve this question
1
  • Let me get this straight... you're going half the size, wouldn't you want to double the size because there is 326 pixels per inch(I think). Our monitors were 72ppi then over the years increased. Either way when you blow a rasterized image up it will get blurry. Your best bet is to probably redo the layout at a larger size in Photoshop or do a vector version in Illustrator then export at appropriate sizes. Pixels will seem to double in size on your monitor but when put on the phone will be 50%. Make the different sets for different resolutions, developer.apple.com/library/IOs/#documentat
    – Stefan Thomas Isaia
    Commented Jan 15, 2012 at 0:41

2 Answers 2

Reset to default
3

import the vector paths and raster images into illustrator and redo layout. Illustrator CS5 has in the transform pallet a check box for constrain to pixel grid.
Select all of your vector paths and check this box. Then when you resize it will stay aligned to the pixel grid.

It may be some work but if your raster images are placed from photoshop and your vector is in illustrator then your workflow will be easier to edit in the future.

Another option would be to import the vector lines from photoshop into illustrator without the raster images. Do as above to scale 50% then import back into photoshop as smart object.

Then again you could rasterize the vector lines and scale 50% as well.

Improve this answer
1
  • I'll mark your answer as accepted for now but I'd prefer one that doesn't depend on an external tool that is in itself quite expensive. You do propose the rasterization which doesn't depend on Illustrator, so that's helpful. Would the result of this be any different than the result of resizing the vectors on pixel bounds and then saving for web?
    – lhunath
    Commented Mar 10, 2012 at 10:41
0

Best to recreate the vector art with the pixel dimensions in mind. Adobe Illustrator CS5 has a Pixel Grid feature that can also help align and preview what the raster output will look like.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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