When I run my app on the simulator my app icon is square rather than rounded corners -- I thought iOS automatically added the rounded corners as a mask?
I'm using PhoneGap to build this and I turned the 'pre-rendered icon' setting to false. I also ensured that my plist file does not have an entry for UIPrerenderedIcon.
In Xcode I created an 'App Icon Set' that has the necessary sizes for iPhone Retina.
What am I missing here? (I'm new to iOS development so I don't know what a lot of this stuff actually means...)
Related
I use a icon.png file of size 57*57 and a icon#2x.png file of size 114*114 as app icons. When building as a normal app, which is installed at /var/mobile/Applications, everything seems normal.
But when I build it with iOSOpenDev, installed at /Applications, the icon turns a little bigger than others (the right icon).
Any ideas? How can I set the icon's size to normal?
I've noticed this before, too. It isn't just an iOSOpenDev issue. I see this with jailbreak apps installed to /Applications, not built with iOSOpenDev, too. I'm not sure, but here's what I guess is going on:
With iOS apps, you can choose whether or not the OS should apply a gloss effect to your app icon by setting a flag in your app's Info.plist file:
<key>UIPrerenderedIcon</key>
<true/>
So, obviously, the OS is not just displaying app icons the way you originally drew them. I'm guessing that the OS also applies a standard shadow effect to app icons, at least for normal app store apps (installed in /var/mobile/Applications). The difference is that this effect is not optional for those App Store apps.
Looking at a screenshot off my jailbroken Retina iPhone, it appears that iOS is reserving 120 pixels (for Retina devices) for the app icon, and if you simply provide a 114x114 icon image, it will scale it up. That's what you're seeing.
So, try making your app icon 120x120 pixels. You don't need to change the actual rounded rectangle square. Simply open it up in a photo editor, and increase the canvas to 120x120. The extra space should be transparent. It appears that you don't want the rounded rectangle to be centered, but instead have maybe 1 pixel of transparent space above it, and about 5 pixels of transparency below it.
Rebuild your app with the Icon#2x.png at this larger 120x120 size, and see how it looks.
If you really want to get it perfect, I think you're also going to need to draw in the shadow effect yourself. The light source is from the top, so the shadow should be below the icon.
Note that for jailbreak apps installed in /Applications, your app icons absolutely can have transparency (and PNG supports it). It's just App Store apps that Apple doesn't want using transparent icon images.
Here is the app icon from Cydia, found on your filesystem at /Applications/Cydia.app/icon\#2x.png. As you can see, it comes with the gloss effect and the bottom shadow embedded in the image:
I have strange problem with an app icon. When I run app on iphone simulator the icon is rounded, but on iPhone the app icon shape is square.
How to fix that ?
Check that you haven't got UIPrerenderedIcon set in your plist file. This let's you turn the rounded corners/shine off if you want to do it yourself.
There's a little info on this option here:
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html
(Search for UIPrerenderedIcon)
Got the same problem but with a jailbroken phone. In my case this happens because I ssh (use ssh to transfer file) the directory "myAppName".app straight into the device's file system (/Applications).
Gloss effect is applied and corners get automatically rounded when the app is installed via MobileInstallation - in other words iTunes, Xcode or App Store.
Sadly i have not found a free of charge solution yet. So if this is a critical problem i suggest you should buy the IOS developer licence.
Upon submission of an iPhone app to iTunes Connect for AppStore distribution, they ask for a 512x512 pixel image. Here is what it says next to the place to submit it:
"A large version of your app icon that will be used on the App Store. It must be at least 72 DPI and a minimum of 512x512 pixels (it cannot be scaled up). It must be flat artwork without rounded corners."
So are they going to round the corners like they do elsewhere or not?? The iOS Human Interface Guidelines indicate NOT: "There are no visual effects added to this version of your application icon"
Yet all the images I see on iTunes app store are rounded. Also web version of iTunes show rounded icons, and infact are 175, 175 square with an image mask that has rounded corners: http://a1.phobos.apple.com/us/r1000/050/Purple/49/68/e3/mzi.wijnmlbw.175x175-75.jpg and http://ax.phobos.apple.com.edgesuite.net/htmlResources/2CBF/images/mask175.png.
Your intuition is correct - Apple applies the glossiness and rounded corners automatically in the iTunes Store, so just upload a flat square version.
Don't worry if the rendering looks terrible in iTunes Connect - it will be fine once it's on the store.
The iOS Guidelines appear to be incorrect.
Apple will indeed round the corners of the flat artwork uploaded to iTunes Connect. It will also add a gloss automatically. So you can upload just the square flat version, but an already rounded version will also work just fine.
If your icon already includes gloss, you can add the UIPrerenderedIcon key to your Info.plist. If you use the build in plist editor of Xcode, the full name of the key is Icon already includes gloss effects and you must set it to YES. iTunes Connect will honour the settings in that file and will update the preview of your uploaded artwork after you upload your binary.
Important: Make sure the UIPrerenderedIcon key is in the root of your Info.plist, otherwise the icon uploaded to iTunes Connect will still use the default gloss, because it will not recognize this key.
The iTunes Connect Developer Guide says that the developer must provide a whole bunch of different icon sizes. But I only know from the "normal" app icons (57x57, 114x114) that the device applies the gloss effect and corner rounding automatically.
But how about those other icons? How about the 512x512 iTunesArtwork.png icon? Are the effects applied automatically? Must this icon be shipped inside the bundle of the app? Is there any way to see it "live" how it finally looks, when those effects are applied?
I slightly remember that there was a tool from apple that applied those effects to an icon, so you could see them. Does anyone know more details about this?
The glow and rounded corners are applied automatically. You can control the glow, by adding a key to your Info.plist file: UIPrerenderedIcon set to YES will indicate that your icon is "prerendered" and you don't want the glow.
The AppStore will honor that setting for the 512x512 icon as well.
You actually should supply 6 icons now. One for the iPhone4, iPad, normal iphones/ipod touch, and 2 smaller icons for spotlight search (one is double resolution).
I wrote a pretty cool photoshop script to take you 512px icon and convert it using photoshop into 6 smaller sizes all named correctly.
http://github.com/sponno/iPhone-Photoshop-JSX-Icon-Exporter
You will also see in the header of the file, now to update your info.plist to include all these icons.
For more details on those six icons and their required sizes, here's two great resources:
http://mrgan.tumblr.com/post/708404794/ios-app-icon-sizes
http://blog.cocoia.com/2010/iphone-4-icon-psd-file/
Note that even though the app store honors the UIPrerenderedIcon setting for the icons supplied with your app bundle, the 512x512 icon submitted within iTunesConnect in the app management must not have rounded corners or gloss. If you click the ? next to the icon in iTunesConnect you get this message:
"A large version of your app icon that will be used on the App Store. It must be at least 72 DPI and a minimum of 512 by 512 pixels (it cannot be scaled up). It must be flat artwork without rounded corners."
Why they make it such a p.i.t.a. and make you provide a square icon for this is beyond me. My app icon is rounded with a decorative frame, this square version will look like a**.
In simulator mode, my app has an icon with round corners, but on a real iPhone, the corners aren't rounded.
Corners get automatically rounded if you install via MobileInstallation (from iTunes, Xcode or App Store).
If you're building the package and installing it into /Applications manually or with cydia/apt, you have to make a rounded icon yourself.
You can find the images used to round the corners and add reflection in /System/Library/Frameworks/UIKit.framework/Other.artwork, the first 3 images are the mask, reflection and shadow. You can extract the .artwork file with this script here
by default the iPhone should round your corners and add a reflection effect. Be sure you have not added the UIPrerenderedIcon key to your Info.plist file. Hope this helps!
Adam
I know this post is pretty old. New versions of iOS don't suffer from this problem unless you have Cydia installed and you're building your app as a .deb
If you want to round your corners for Cydia, do the following:
Download iFile and IconMaker from Cydia
Locate the icon file with iFile and click on it, then select IconMaker
Enable Save to Camera Roll
Generate icon
Email the generated icon(s) (144 and 77px versions) to yourself
Source:
http://www.ifans.com/forums/threads/how-to-make-apps-with-square-edges-into-smooth-round-edges.342846/