1

How do I replicate the effect that the app launcher uses on a square .png to show my users what their icon will look like as an app badge.

NB - I want to do this in code on the iPhone, not in photoshop on my computer.

Thanks!

edit: trying to be really clear here. How do I do this with code! I have tried creating an overlay, but the shine apple does actually brightens the top, so just putting a png over the top will not give the same effect.

Presumably the app launcher applies some CA effects - does anyone know how to duplicate them???

Rob
  • 59
  • 5
  • Dupe, please keep it in the original question. http://stackoverflow.com/questions/716978/how-can-i-shine-a-png-on-the-iphone-in-the-same-way-that-the-app-launcher-does – bobince Apr 07 '09 at 15:11

2 Answers2

1

Create a transparent shine overlay in Photoshop on your computer and merge the two images in code.

Short of hard-coding the shine mask, or building a mini ray-tracer, that's probably the easiest way to do it.

There's even a link to a photoshop tutorial/template here:

http://www.keepthewebweird.com/iphone-icon-psd-template/

Andrew Rollings
  • 14,340
  • 7
  • 51
  • 50
1

Another more simple approach is to save your icon as a 57px x 57px PNG called "icon.png" without any shine effects, then FTP it to the root folder of a web server and create a file there called icon_test.html containing the following code:

<html>
    <head>
        <link rel="apple-touch-icon" href="/icon.png"/> 
        <title>The App Name</title>
    </head>
    <body>
         iPhone test page
    </body>
</html>

Then just browse to the icon_test.html file in mobile Safari on your iPhone, tap the "+" button in the toolbar to save the page as a bookmark, tap "Add to Home Screen", and tap "Add" in the top right. You'll then see your icon appear on the home screen, complete with Apple's shine overlay.

Nick
  • 8,480
  • 3
  • 37
  • 33
  • 1
    When the users create a web-app with my image, that's what they'll do. I'm trying to show them in advance what it will look like. -In code... – Rob Apr 08 '09 at 22:31
  • How can I save the icon from the home screen? Do I have to make a screenshot and than crop the image? – testing Oct 18 '10 at 10:54