How can I 'shine' a png on the iPhone in the same way that the app launcher does?

Question

I want to show users what their square flat .png image will look like when converted to a normal 'shined' icon by the app launcher.

e.g. round corners and glassy effect.

Thanks

Answer 1

Check out this tutorial:

http://www.keepthewebweird.com/iphone-style-icon-tutorial/

Answer 2

For in-application representation of the 'shine' on an icon, you can create a custom UIView that draws the shine gradient, using the code here (adjusting the gradient colors to match Apple's). When you want to apply the 'shine' to the preview icon, just overlay this custom UIView on top of its UIImageView (or whatever you're hosting it in).

The rectangular clipping could be a little trickier. If you have a solid black background, you could overlay a frame UIImageView that has a black area with a rounded rectangular transparent region in its center. You can also do this in a more general-purpose manner via Core Graphics by drawing your image and the gloss into a view, then using CGContextClip with a rounded rectangle to carve out the rounded interior.

Answer 3

If you want to do this on the iPhone itself, here's a quick way to see how it will look using a website favicon.