如何在不牺牲图像质量的情况下，将大型png图像放入XCode上较小的自定义“圆角矩形”按钮中？

Question

I am creating a button for my application that, when pressed shows an indention looking effect to make it appear that the user is clicking a real button. It is very simple, using only an image for the default state and the depressed one for the highlighted state. I'm having a few problems. The quality is terrible. I have uploaded the images to XCode in the exact pixels they will be presented in my application but when I export it from Illustrator it gets really pixelated. So I was wondering if there was a way for me to upload an image a few times bigger than my button and have it shrink to fit the button size. I've tried to do that but when I run my app it gets really messed up and weird looking. I would just put text inside the button but then it ruins the pressed effect. Any ideas?

Answer 1

If you export an image at the same aspect ratio as the button, the image will be re-scaled to fit within your button. Don't forget to use the Custom style so you don't get the button oval.

However generating an exact pixel version of your button should be possible, and look good - especially if you specify a 2x sized @2x version of the image for retina use. Are you sure your Illustrator export settings are correct? One thing to consider is that perhaps anti-aliasing needs to be enabled on export.

This page has a helpful quick checklist for how to save for the iPhone from Illustrator (Scroll down to the " How To Save Art For The iPhone In Illustrator " header)

http://www.vickiwenderlich.com/2011/11/faq-how-do-i-save-art-for-the-iphoneipad/