I have an icon for my iOS app that seems to be missing some margins that other icons have. This creates an irregular, unwanted border around the icon when it is selected in Springboard (as the darkened selection overlay is smaller than the actual icon), as visible in this image:
When another app is selected (Safari, for example), there is no extra border:
I've tried this out with "Prerendered" setting (in the Xcode Target Summary page) on and off with no visible difference. I've also noticed other apps icons that have this issue. When I look at the icon for an app that doesn't have this issue, I do notice margins of a few pixels on every side.
I couldn't find any values listed online for the margins of different icon sizes. Does someone happen to know the values for the margins, or a program that can create the images with the correct margins? Or is there something else I may be missing?
(Note that the icons are not parallel due to the wiggling icons do in the app-deletion mode of Springboard. The 72#2x visible on the icon is--I assume--a separate issue.)
UPDATE: I myself have verified this on both a iPod Touch 4 (iOS 5) and iPhone 4 (iOS 6). (If it matters, both devices are jailbroken.) The project contains the following icons: Icon (57x57), Icon#2x (114x114), Icon-72 (72x72) and Icon-72#2x (144x144).
UPDATE 2: Since I'm developing an app for Cydia, the automatic icon rounding done by Springboard for regular App Store apps doesn't seem to be a possibility (see comments in #Vojtech Vrbka's answer).
UPDATE 3: Posted my solution to this problem (also removed the linked question in the last paragraph before the updates).
If you are making round corners manually, don't. Use square icon and the round corners will be added automatically.
Here is list of all sizes, that you should include in your app: Custom Icon and Image Creation Guidelines
It turns out the main problem I had was not knowing what margins to use, but that my app did not get the automatic rounded corners (and margins) from Springboard which regularly installed apps would get (as my app is for Cydia, meaning it's basically a System App, and I was installing it manually to /Applications).
I found a similar question here, which had two useful answers, one which provides a potential way to prepare the icons manually, and another which names a useful app in Cydia which can create the icons correctly: http://cydia.saurik.com/package/org.thebigboss.iconmaker (most likely using the method from the other answer).
Related
I have been stymied figuring out how to release an application from Xcode5 that supports IOS7 AND IOS 6+ in the same build, with assets (icons and splash screens) that load correctly for both, AND still render the assets for IOS 6 correctly. The major hangup I had was trying to make IOS 6 still render the icons without shading or highlighting since the "prerendered" option is no longer even available in Xcode 5's GUI. Any ideas how to get all of the content and the icon to render correctly AND support multiple OS versions?
Andrew
Apple has clear guidelines on requirements for IOS 7 apps but even then, I ran into errors making a single app support multiple OS versions. After getting it to work, I thought I would point out a few areas that were hangups for me to aid others in the future.
I first updated the whole of my app to support IOS 7 cleanly and then went back and enabled previous versions but that process is not necessary.
Just ensure you first set the correct deploy target
Once you set the deployment target, Xcode5 nicely changes the list of default assets it requires to support the multiple OS versions. Ensure you reupload the correct versions of icons at the required resolutions and required filenames (shown below for IOS6-IOS7 support)
Do the same for the launch images, note that you will have to rename your launch images to new names, Xcode tries doing this for you if you let it. Note the new sizes below, as IOS7 expands the launch image background behind the status bar.
Finally, manually add the two .plist flags below and you should be set to have your icons render across IOS versions consistently, with no gloss (explanation follows)
IOS7 in its new flatness removes the postprocessing the previous versions did where they added a highlight and gloss effect to icons. That effect is no longer done for IOS 7 apps but if you load an app from Xcode5 on IOS 6, it will reapply the default gloss effect. This is infuriating because there no longer is a "prerendered" GUI flag in Xcode to disable that postprocessing. As mentioned above, you need to add the flag manually to your application's plist. In my case, I had to add the flag in two locations to force IOS 6 to stop applying the effect. You can access the plist by either opening the file directly or navigating to the settings in your project overview. You may need to uninstall the app from your simulator and then rebuild the app to force simulator to lose its cache of the old icon.
If you setup the asset catalogue you can open it select the image and then go to the inspector and tick this box
Just use "asset catalog" (you can select that from general on your target).
That would create an images.xcassets on your project there you can easily drag your icon designs for pre iOS 7 and for iOS 7.
UPDATE:
So after the formal release of iOS 7 I can now write this:
On the asset catalog itself select the Appicon set that you want to set as pre-rendered then go to Attribute Inspector and just mark "iOS icon is pre-rendered". you can also set there of course which OS and devices you want to support (it would create all options so you can just drag& drop to set).
Important thing to note is that for some reason if you use several targets and several sets inside this catalog you must add the Target Membership manually. To do this just mark the "asset catalog" file, go to file inspector and mark all targets where you want to use it. I think Apple should do that automatically when you select the "asset catalog" from the target settings but till then I decided to mention that here (took me an hour to figure this out).
I went through this recently. Seems by default it only shows the following.
Easy fix is add a new AppIcon
To give you all these options.
My experience with this:
When creating a new empty app, it will create a "default" app icons / launch images asset catalog that is incomplete as stated by #Smick.
The annoying part of this new "catalog" is that it doesn't show the image sizes.
To work around the issue, select the project on the project navigator, and on the "General" you will notice 2 areas - App Icons and Launch Images. Those will point to an asset catalog. You can change it to "don't use asset catalog." After that, the interface will change to a list of files / dimensions.
However there are several issues with this interface:
It should only ask for the retina versions of the images (and compute the normal, or have two links, one for normal and another for retina).
Several images (the launch ones) need to be renamed for them to work (the system does this for you).
Two images are not assignable due to errors (iPad Portrait iOS 7, and iPad Landscape iOS 7, both in normal resolution) - you can specify an image for them, but the image will not stay on and will become de-selected when you insert the next image.
The image dimensions specified are slightly different from the ones stated on the HIG manuals.
I've a strong dislike of the "new" notation of images with points (as they are device dependent and so not exact).
If you don't want to see iOS 6 reapply the "highlight / lighting" on the icons, you need to add a key on the app plist (project manager | project | info. There, you can add a key "Icon already includes gloss effects". You may need to add it also on iOS 5 icons if required.
For Xcode 6
For LaunchImage you must make sure you check iOS 6.0 and Prior
iPhone (Portrait ) or iPad // depend on your project configuration
Sizes
Default.png (320x480)
Default#2x.png (640x960)
Default-568h#2x.png (640x1136)
The same to AppIcon
Apple is now requiring a retina and 4-inch display Splash page (i.e. the "Default-568h#2x.png") for all apps to be submitted, which is fine. However, when I include that and then do another build, once I get into the app, instead of it being centered with dark on the top and bottom (as it was before), is now top-aligned on the screen with 2x the blank space on the bottom.. which looks really unprofessional.
Is there any way via our configuration to tell the OS to go back to centering the app, despite that it has the now-required 4" Splash page included? Ideally I'd like to be able to do this without updating every single IB view in the app to center it manually, as I feel the OS should still be able to do this somehow via configuration.
FYI, answers that say "update your entire app for 4"!" are unacceptable. There are clients who don't yet have a creative budget for this but still want to keep their existing app looking decent in the store. If it's not possible, then it's not possible, but that is why I'm asking the question.
Thanks in advance for any assistance on this, and my apologies if this has already been asked.
As of May 1 if your submitting this app to the app store you will be required to support both retina display's, and the new 4" screen size.
https://developer.apple.com/news/index.php?id=3212013b
You misunderstand. As of now, you must fully support the full 4" screen of the iPhone 5 and 5th gen iPod touch, in addition to retina and non-retina devices.
By adding the "Default-568h#2x.png" launch image (it is not a splash screen) you are telling the OS that your app supports the 4" screen.
You must update your app to fill the screen. There are countless existing posts about how to do that. There is no way around this. It is 100% required - no exception from Apple.
BTW - Apple announced this requirement on March 21st. Every registered iOS developer was notified of the requirement.
It isn't possible to do what you're asking with a single setting. Your best options are a bit of code that runs when you load a view to change the origin.y position, or, go through the XIB files and update the autoresizing rules so that the views expand to fill the space. You might not have budget to update the graphics resources in the app but you should be able to spend the small amount of time required on autoresizing.
The caveat to 'small amount of time' may apply to you - if you explicitly set the size of all of your views in code you've made life painful for yourself.
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 an already shipped app on App Store that made use of Storyboard.
I see from the keynote, comparing to previous model that iPhone 5 has a taller screen.
I wonder how this will impact on my esisting storyboard, because from my 'app point of view' there's only one difference which is the background.png. All the rest is just plain UITableView that can just fit more rows.
I cannot find any document for this on Apple site (I have always been so noob in finding things on Apple developer site).
Has anyone made adjustment to his already developed and published app to match with new layout ?
If yes, do I have to develop a brand new storyboard, or is there an adjustment to be done with code ?
[UPDATE]
I am reporting my experience, now that Xcode 4.5 is long shipped for development.
Xcode itself, as some suggested, asked me if I would like to enable tallest screen support by creating a default png. After saying yes, I had to enter each segue in storyboard for some adjustment, change png background (which was unstrechable by design) with a tallest one, change stretching settings and redeploy.
It has been an annoying work because I have quite some segues, and Xcode doesn't allow to reuse templates within Interface Builder.
Old apps without 1136x640 resolution support will run letterboxed, with black areas on top and bottom.
You can enable new layout support for existing project simply by supplying new Default-568h#2x.png loading screen. Take heed though, you'll have to test your old interface on both old and new resolution (via iOS Simulator) to make sure everything looks good and works as designed.
Its been said when iphone 5 is launched that your app view will be filled with black color on top and bottom if it is not taking account for the increase size ( not designed for iphone5 screen)
so your app will just work fine but will have black border on both and top to filled the extra space..
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**.