design &iphone &marketing &photoshop &programming &technology rob on 28 Jul 2008 09:02 pm
iPhone Developer Resource: Preview Application Icon 3D Effect
My friend Dave Peixotto is in charge of coding and software repository work on our iPhone application development. I am in charge of the marketing and business aspects of our software company, Neutrinos, LLC.
One of my tasks with the release of our recently submitted iPhone application, TipTotaler was to select an icon for our app. As you may be aware from Apple’s iPhone application submission guidelines, you must include a flat 57 x 57 pixel and 512 x 512 pixel image for use on the iPhone and iPod Touch home screen and for the iTunes store.
There are a couple of challenges for iPhone Application icon graphic designers: First, it isn’t always easy to tell what will look good at both 512×512 and 57×57. Second, having the developer rebuild and send updated screenshots is laborious as is monkeying around in Photoshop to eyeball how the images look at lower resolution with 3D effects.
In order to speed up the process, I put together an Adobe Photoshop macro aka ‘action’ that will quickly take any square image and apply similar 3D effects that Apple uses. The 3D effects used on buttons on the iPhone home screen and the iTunes store application pages include rounded corners and a light sheen over rounded across the top third to one half of the button. My macro automatically transforms any image into a 3D iPhone Application icon with these characteristics.
I’ve recorded a screen cast demonstration of how to use the macro using Jing. You can view the screencast here. Click the link below to download a zip file containing the Photoshop action macro and iPhone gallery image to test out your 3D button on.
Remember, your starting image must be a perfect square of any size prior to running the macro. Questions? Watch the screencast above or post a comment.
on 28 Jul 2008 at 11:05 pm 1.Zeus said …
Wow, that’s fantastic! Keep up the good work!
on 13 Sep 2008 at 9:33 pm 2.Thisbe said …
Great Macro, thanks!
on 24 Jan 2009 at 3:57 am 3.ByDesign Games said …
Was just about to make this, when I decided to Google first…
Thanks!
on 02 Mar 2009 at 9:56 am 4.Jeremy said …
Wow. That saved me a lot of time. Can you also create an action for the 512×512 store display? It would be much appreciated. Thanks.
on 05 Mar 2009 at 12:10 pm 5.CIYP said …
Absolutely amazing. Thanks so much! The funny thing is I think we used the same flag for the background for our Congress and California Applications.
on 01 May 2009 at 5:38 am 6.Manuel said …
Thank you. Good idea.
on 26 May 2009 at 7:31 am 7.Highco said …
Many thanks for this, saves a lot of time & frustration, great!
on 16 Feb 2010 at 2:37 pm 8.Chrystal said …
Here is the link to the iPhone Dev center with the icon spacs…
http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html
It clearly says not to include the shine or rounded corners on your icons. So I am not sure what this action is useful for?
on 16 Feb 2010 at 3:23 pm 9.rob said …
Chrystal, you are right. The rounded corners and shine may alter the look of the icon in an unexpected way. This is to allow you to see what the icon will look like live in the store.
on 17 Jan 2011 at 7:51 pm 10.Perla Mottinger said …
The fabulous Apple iPhone 4 can be availed for low-cost costs with the iPhone orange provides