I'm trying to create the icon for my iPhone app, but don't know how to get the exact radius that the iPhone's icons use. I've searched and searched for a tutorial or a template but can't find one.
I'm sure that I'm just a moron, but how do you get the rounded corners exactly right with your icon from Illustrator or Photoshop?
Edit:
What's the radius for the Retina iPad?
You can make four icons (as of today) for your app and they can all have a different look - not necessarily based on the 512x512 image.
corner radius for the 512x512 icon = 80 (iTunesArtwork)
corner radius for the 1024x1024 icon = 180 (iTunesArtwork Retina)
corner radius for the 57x57 icon = 9 (iPhone/iPod Touch)
corner radius for the 114x114 icon = 18 (iPhone/iPod Touch Retina)
corner radius for the 72x72 icon = 11 (iPad)
corner radius for the 144x144 icon = 23 (iPad Retina)
If you do create a set of custom icons, you can set the UIPrerenderedIcon option to true in your info.plist file and it will not add the gloss effect but it will place a black background under it and still round the image corners with these corner radii so if the corner radius on any of the icons is greater then it will show black around the edges/corners.
Edit: See comment from #devin-g-rhode and you can see that any future icon sizes should have a 1:6.4 ratio of corner radius to icon size. There is also a very good answer from https://stackoverflow.com/a/29550364/396005 which has the location of image mask files used in the SDK for rounding icon corners
To add a retina-compatible file, use the same file name and add '#2x'. So if I had a file for my 72x72 icon named icon.png, I would also add a 114x114 PNG file named icon#2x.png to the project/target and Xcode would automatically use that as the icon on a retina display. You can see this in action on the Summary page of the application target if you've done it right. The same works for your launch images. Use launch.png at 320x480 and launch#2x.png at 640x960.
After trying some of the answers in this post, I consulted with Louie Mantia (former Apple, Square, and Iconfactory designer) and all the answers so far on this post are wrong (or at least incomplete). Apple starts with the 57px icon and a radius of 10 then scales up or down from there. Thus you can calculate the radius for any icon size using 10/57 x new size (for example 10/57 x 114 gives 20, which is the proper radius for a 114px icon). Here is a list of the most commonly used icons, proper naming conventions, pixel dimensions, and corner radii.
Icon1024.png - 1024px - 179.649
Icon512.png - 512px - 89.825
Icon.png - 57px - 10
Icon#2x.png - 114px - 20
Icon-72.png - 72px - 12.632
Icon-72#2x.png - 144px - 25.263
Icon-Small.png - 29px - 5.088
Icon-Small#2x.png - 58px - 10.175
Also, as mentioned in other answers, you don't actually want to crop any of the images you use in the binary or submit to Apple. Those should all be square and not have any transparency. Apple will automatically mask each icon in the appropriate context.
Knowing the above is important, however, for icon usage within app UI where you have to apply the mask in code, or pre-rendered in photoshop. It's also helpful when creating artwork for websites and other promotional material.
Additional reading:
Neven Mrgan on additional icon sizes and other design considerations: ios app icon sizes
Bjango's Marc Edwards on the different options for creating roundrects in Photoshop and why it matters: roundrect
Apple's official docs on icon size and design considerations: Icons and Images
Update:
I did some tests in Photoshop CS6 and it seems as though 3 digits after the decimal point is enough precision to end up with the exact same vector (at least as displayed by Photoshop at 3200% zoom). The Round Rect Tool sometimes rounds the input to the nearest whole number, but you can see a significant difference between 90 and 89.825. And several times the Round Rectangle Tool didn't round up and actually showed multiple digits after the decimal point. Not sure what's going on there, but it's definitely using and storing the more precise number that was entered.
Anyhow, I've updated the list above to include just 3 digits after the decimal point (before there were 13!). In most situations it would probably be hard to tell the difference between a transparent 512px icon masked at a 90px radius and one masked at 89.825, but the antialiasing of the rounded corner would definitely end up slightly different and would likely be visible in certain circumstances especially if a second, more precise mask is applied by Apple, in code, or otherwise.
I see a lot of "px" discussion but no one is talking percentages which is the fixed number you want to calculate by.
22.37% is the key percentage here. Multiply any of the image sizes mentioned above in by 0.2237 and you will get the correct pixel radius for that size.
Before iOS 8, Apple used less rounding, using 15.625%.
EDIT: Thanks #Chris Prince for commenting with the iOS 8/9/10 radius percentage: 22.37%
Important: iOS 7 icon equation
With the upcoming release of iOS 7 you will notice that the "standard" icon radius has been increased. So try to do what Apple and I suggested with this answer.
It appears that for a 120px icon the formula that best represents its shape on iOS 7 is the following superellipse:
|x/120|^5 + |y/120|^5 = 1
Obviously you can change the 120 number with the desired icon size to get the corresponding function.
Original
You should provide an image that has 90° corners (it’s important to
avoid cropping the corners of your icon—iOS does that for you when it
applies the corner-rounding mask)
(Apple Documentation)
The best approach is not rounding the corners of your icons at all. If you set your icon as a square icon, iOS will automatically overlay the icon with a predefined mask that will set the appropriate rounded corners.
If you manually set rounded corners for your icons, they will probably look broken in this or that device, because the rounding mask happens to slightly change from an iOS version to another. Sometimes your icons will be slightly larger, sometimes (sigh) slightly smaller. Using a square icon will free you from this burden, and you will be sure to have an always up-to-date and good looking icon for your app.
This approach is valid for each icon size (iPhone/iPod/iPad/retina), and also for the iTunes artwork. I followed this approach a couple of times, and if you want I can post you a link to an app that uses native square icons.
Edit
To better understand this answer, please refer to the official Apple documentation about iOS icons. In this page it is clearly stated that a square icon will automatically get these things when displayed on an iOS device:
Rounded corners
Drop shadow
Reflective shine (unless you prevent the shine effect)
So, you can achieve whatever effect you want just drawing a plain square icon and filling content in it. The final corner radius will be something similar to what the other answers here are saying, but this will never be guaranteed, since those numbers are not part of the official Apple documentation on iOS. They ask you to draw square icons, so ... why not?
People arguing about the corner radius being slightly increased but actually that's not the case.
From this blog:
A ‘secret’ of Apple’s physical products is that they avoid tangency (where a radius meets a line at a single point) and craft their surfaces with what’s called curvature continuity.
You don't need to apply corner radius to icons for iOS. Just provide square icons. But if you still want to know how, the actual shape is called Squircle and below is the formula:
The answer from dbarnard has the formula to calculate the correct radius, but since you were looking for the templates, all the masks and overlays can be found in this directory:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator5.1.sdk/System/Library/PrivateFrameworks/MobileIcons.framework
(path is for recent versions of XCode. For older version it will probably be inside /Developer/).
As others have noted, you should NOT mask them yourself, but you can use these to check how your icons will look once masked.
(credits for this finding goes to Neven Mrgan IIRC)
The corner radius of the 57 x 57 pixel icon is 9 pixels.
As others have said, you don't want to round your corners. You want to ship flat (no layers or alpha) square graphics. Apple changed the mask they use for rounding your corners in iOS7 and then again in iOS8. You can find these masks inside your Xcode application bundle. The path changes with every new SDK version they release. So, I'll show you how you can always find it.
find /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework'
At this very moment, the path found by that command is /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/MobileIcons.framework but don't trust that. Use the command to find it yourself.
That path points to a directory with these files (again, at the time of this post)
./AppFolderBadgeIconMask-128_1only_.png
./AppFolderBadgeIconMask-16_1only_.png
./AppFolderBadgeIconMask-256_1only_.png
./AppFolderBadgeIconMask-32_1only_.png
./AppFolderBadgeIconMask-512_1only_.png
./AppFolderBadgeIconOverlay-128_1only_.png
./AppFolderBadgeIconOverlay-16_1only_.png
./AppFolderBadgeIconOverlay-256_1only_.png
./AppFolderBadgeIconOverlay-32_1only_.png
./AppFolderBadgeIconOverlay-512_1only_.png
./AppFolderBadgeIconShadow-128_1only_.png
./AppFolderBadgeIconShadow-16_1only_.png
./AppFolderBadgeIconShadow-256_1only_.png
./AppFolderBadgeIconShadow-32_1only_.png
./AppFolderBadgeIconShadow-512_1only_.png
./AppIconMask#2x~ipad.png
./AppIconMask#2x~iphone.png
./AppIconMask#3x~iphone.png
./AppIconMask~ipad.png
./AppIconMask~iphone.png
./CarAppIconMask.png
./CarNotificationAppIconMask.png
./DefaultIcon-20.png
./DefaultIcon-20#2x.png
./DefaultIcon-20#3x.png
./DefaultIcon-29.png
./DefaultIcon-29#2x.png
./DefaultIcon-29#3x.png
./DefaultIcon-40.png
./DefaultIcon-40#2x.png
./DefaultIcon-40#3x.png
./DefaultIcon-60#2x~iphone.png
./DefaultIcon-60#3x~iphone.png
./DefaultIcon-76#2x~ipad.png
./DefaultIcon-76~ipad.png
./DocumentBadgeMask-145.png
./DocumentBadgeMask-145#2x.png
./DocumentBadgeMask-20.png
./DocumentBadgeMask-20#2x.png
./DocumentBadgeMask-20#3x.png
./DocumentBase-320#2x~ipad.png
./DocumentBase-320~ipad.png
./DocumentBase-48.png
./DocumentBase-48#2x.png
./DocumentBase-48#3x.png
./DocumentMask-320#2x~ipad.png
./DocumentMask-320~ipad.png
./DocumentMask-48.png
./DocumentMask-48#2x.png
./DocumentMask-48#3x.png
./NanoDefaultIcon-24.0#2x.png
./NanoDefaultIcon-27.5#2x.png
./NanoDefaultIcon-40.0#2x.png
./NanoDefaultIcon-44.0#2x.png
./NanoDefaultIcon-86.0#2x.png
./NanoDefaultIcon-98.0#2x.png
./NanoIconMaskChiclet-24.0#2x.png
./NanoIconMaskChiclet-27.5#2x.png
./NanoIconMaskChiclet-40.0#2x.png
./NanoIconMaskChiclet-44.0#2x.png
./NanoIconMaskChiclet-86.0#2x.png
./NanoIconMaskChiclet-98.0#2x.png
./NewsstandDefaultMagazine_1only_.png
./NewsstandDefaultNewspaper_1only_.png
./NewsstandMagazineGradientLeft#2x~ipad.png
./NewsstandMagazineGradientLeft#2x~iphone.png
./NewsstandMagazineGradientLeft~ipad.png
./NewsstandMagazineGradientLeft~iphone.png
./NewsstandMagazineGradientRight#2x~ipad.png
./NewsstandMagazineGradientRight#2x~iphone.png
./NewsstandMagazineGradientRight~ipad.png
./NewsstandMagazineGradientRight~iphone.png
./NewsstandMagazineSwitcherGradientLeft.png
./NewsstandMagazineSwitcherGradientLeft#2x.png
./NewsstandNewspaperGradientBottom#2x~ipad.png
./NewsstandNewspaperGradientBottom#2x~iphone.png
./NewsstandNewspaperGradientBottom~ipad.png
./NewsstandNewspaperGradientBottom~iphone.png
./NewsstandNewspaperGradientLeft#2x~ipad.png
./NewsstandNewspaperGradientLeft#2x~iphone.png
./NewsstandNewspaperGradientLeft~ipad.png
./NewsstandNewspaperGradientLeft~iphone.png
./NewsstandNewspaperGradientRight#2x~ipad.png
./NewsstandNewspaperGradientRight#2x~iphone.png
./NewsstandNewspaperGradientRight~ipad.png
./NewsstandNewspaperGradientRight~iphone.png
./NewsstandNewspaperSwitcherGradientBottom.png
./NewsstandNewspaperSwitcherGradientBottom#2x.png
./NewsstandNewspaperSwitcherGradientLeft.png
./NewsstandNewspaperSwitcherGradientLeft#2x.png
./NewsstandNewspaperSwitcherGradientRight.png
./NewsstandNewspaperSwitcherGradientRight#2x.png
./NewsstandThumbnailShadow#2x~ipad.png
./NewsstandThumbnailShadow#2x~iphone.png
./NewsstandThumbnailShadow~ipad.png
./NewsstandThumbnailShadow~iphone.png
./NotificationAppIconMask.png
./NotificationAppIconMask#2x.png
./NotificationAppIconMask#3x.png
./SpotlightAppIconMask.png
./SpotlightAppIconMask#2x.png
./SpotlightAppIconMask#3x.png
./TableIconMask.png
./TableIconMask#2x.png
./TableIconMask#3x.png
./TableIconOutline.png
./TableIconOutline#2x.png
./TableIconOutline#3x.png
As you can see, there are a lot of different masks, but they are named pretty clearly. Here is the AppIconMask#3x~iphone.png image:
You can use that to test your icon to see if it will look okay after it is masked. But, don't round your corners. If you do, when Apple changes those masks again, you will have artifacts.
All the previous answers to this question are now out of date. Since at least May 2015, Apple requires you to provide square icons with no rounding:
Keep icon corners square. The system applies a mask that rounds icon corners automatically.
https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/
If not considering stroke, the exact radius is actually 10px for 57x57 icon.
I get this info from iconreference.
Update (as of Jan. 2018) for App Icon requirements:
https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
Keep icon corners square. The system applies a mask that rounds icon corners automatically.
Keep the background simple and avoid transparency. Make sure your icon is opaque, and don’t clutter the background. Give it a simple background so it doesn’t overpower other app icons nearby. You don’t need to fill the entire icon with content.
The iphone rounds corners for you, all you need is a square 57x57 png icon and u should be good
When designing my app icons with Photoshop, I have found that no integer corner radius fits the device's mask exactly.
What I do now is create an empty project with Xcode, set a completely white PNG file as the icon, and turn off the preset bevel & gloss. Then, I run the app and take a screenshot of the home screen. Now, you can easily create a mask from that image, which you can use in Photoshop. This will get you perfectly rounded corners.
There are two totally conflicting answers with large number of votes one is 160px#1024 the other is 180px#1024. So witch one?
I ran some experiments and I think that it is 180px#1024 so drbarnard is correct.
I downloaded iTunes U icon from the App Store it's 175x175px I upscaled it in photoshop to 1024px and put two shapes on it, one with 160px radius and one with 180px.
As you can see below the shape (thin gray line) with 160px (the 1st one) is a bit off whereas the one with 180px looks just fine.
This is what I do now in PhotoShop:
I create a canvas sized 1026x1026px with a 180px mask for main
design Smart Object.
I duplicate the main Smart Object 5 times and resize them to 1024px, 144px, 114px, 72px and 57px.
I put a "New layered Based Slice" on each Smart Objects and I rename slices according to their size (e.g. icon-72px).
When I save the artwork I select "All User Slices" and BANG! I have
all icons necessary for my app.
I tried 228px radius for 1024x1024 and it worked :)
You don't need to apply corner radius to your app icon, you can just apply square icons. The device is automatically applying corner radius.
WWDC 2022 brought good news!
Now, Xcode 14 automatically generates all the required app icon sizes based on a single input icon 1024x1024 pix (Single Size). However, if you need an old-school approach, choose All Sizes from dropdown menu.
So, all you have to know now is the radius of input icon which is 180 px.
Related
I'm new to Unity and to game development in general.
I would like to make a text-based game.
I'm looking to reproduce the behavior of an instant messenger like messenger or whatapp.
I made the choice to use the Unity UI system for the pre-made components like the rect scroll.
But this choice led me to the following problem:
I have "bubbles" of dialogs, which must be able to grow in width as well as in height with the size of the text. Fig.1
I immediately tried to use VectorGraphics to import .svg with the idea to move runtime the points of my curves of Beziers.
But I did not find how to access these points and edit them runtime.
I then found the "Sprite shapes" but they are not part of the "UI",
so if I went with such a solution, I would have to reimplement
scroll, buttons etc...
I thought of cutting my speech bubble in 7 parts Fig.2 and scaling it according to the text size. But I have the feeling that this is very heavy for not much.
Finally I wonder if a hybrid solution would not be the best, use the
UI for scrolling, get transforms and inject them into Shape sprites
(outside the Canvas).
If it is possible to do 1. and then I would be very grateful for an example.
If not 2. 3. 4. seem feasible, I would like to have your opinion on the most relevant of the 3.
Thanks in advance.
There is a simpler and quite elegant solution to your problem that uses nothing but the sprite itself (or rather the design of the sprite).
Take a look at 9-slicing Sprites from the official unity documentation.
With the Sprite Editor you can create borders around the "core" of your speech bubble. Since these speech bubbles are usually colored in a single color and contain nothing else, the ImageType: Sliced would be the perfect solution for what you have in mind. I've created a small Example Sprite to explain in more detail how to approach this:
The sprite itself is 512 pixels wide and 512 pixels high. Each of the cubes missing from the edges is 8x8 pixels, so the top, bottom, and left borders are 3x8=24 pixels deep. The right side has an extra 16 pixels of space to represent a small "tail" on the bubble (bottom right corner). So, we have 4 borders: top=24, bottom=24, left=24 and right=40 pixels. After importing such a sprite, we just have to set its MeshType to FullRect, click Apply and set the 4 borders using the Sprite Editor (don't forget to Apply them too). The last thing to do is to use the sprite in an Image Component on the Canvas and set the ImageType of this Component to Sliced. Now you can scale/warp the Image as much as you like - the border will always keep its original size without deforming. And since your bubble has a solid "core", the Sliced option will stretch this core unnoticed.
Edit: When scaling the Image you must use its Width and Height instead of the (1,1,1)-based Scale, because the Scale might still distort your Image. Also, here is another screenshot showing the results in different sizes.
I'm grabbing app images from the iTunes affiliate program. Unfortunately Apple provides a square .jpg image which does not have the smooth rounded edges. How can I programmatically take the provided image and round the edges?
The only way I can think of how to do this is set the image as the background of a view, and then round the layer borders until it cuts off what I don't want to see. Is this a good approach?
I don't see any problem with that approach, I was going to suggest the same thing.
I just uploaded my first iPhone app. The app icon has a border, sort of like the "settings" icon. However, when I upload my large icon in iTunes connect, there are some weird white edges in the corners. It appears that they might use a smaller corner radius or something. How can I make sure it will display correctly on the apple store?
The image is a jpeg with no transparency.
Thanks for the help!
What's happening is the appstore is expecting a purely square 512x512 image. It then masks it to have rounded corners and then adds a drop shadow automatically.
If you want it to have a specific border like what you've designed you need to match their rounding exactly.
If you search around. there are PSD templates available that will help you design it (i.e. they have the exact mask that itunes uses).
Here's an example: http://www.pixelresort.com/blog/app-icon-template/
Another technique which can work really well is leaving the outer part of the icon square — in your case, the dark brown outer border would extend to the edge of the canvas – and let the roundrect mask handle the corners for you. There's a bit more info in this excellent blog post: All the sizes of iOS app icons
You'd still get the border effect, but let it be cut cleanly by the mask rather than by your icon's transparency.
I believe this to be a bug with iTunes Connect. I've seen the same problem, but it only appears on the Versions summary screen.
I've seen this when uploading a square icon. For example:
In summary, don't worry about it. Your icon should still show up correctly in the iTunes Store and on the Devices themselves. If your icon looked clean in the iOS Simulator and on your device, you're good to go.
I have a grayscale icon that I'm editing with Photoshop with a transparent background, but I can't, for the life of me, figure out how to convert the icon to one that can be used as an iPhone toolbar icon. If I simply save the image as a PNG, it doesn't show up as anti-aliased on the iPhone because every pixel with color is being rendered as black, instead of a shade of gray.
According to the Apple docs and other sources, there needs to be an alpha channel on the image to specify varying levels of transparency for each pixel. However, I have no idea what that means. I've read these posts and docs from Adobe and I still can't figure out how to properly convert a grayscale image into one that can be used as an iPhone toolbar icon. The blog post is hard to comprehend and poorly written, and the Adobe docs don't really help.
http://cahit.hayalet.net/blog/514/converting-an-image-to-iphone-toolbar-icon/
http://livedocs.adobe.com/en_US/Photoshop/10.0/help.html?content=WS74B356C9-353F-4483-8632-7B1A102F2A2E.html
Can someone point me in the right direction or provide exact, step-by-step directions to doing this in Photoshop?
It's much more simple than having to muck with actual masks in Photoshop.
iPhone toolbar icons are about 30px by 30px, so make a new Photoshop file with those dimensions. Ensure the background is transparent (you can specify that when creating a new file).
Then, any pixels you draw on top of this transparency become what iOS uses for the icon. Doesn't matter what color it is in Photoshop for NSToolbar icons -- they're automatically used as masks by iOS.
Leave transparent the parts you want to show through. Save as 24-bit PNG, and chuck into XCode as usual.
For a few icons that serve as good starting examples, check out the ones I publish for free here: http://glyphish.com Just take one of the PNGs and open it in Photoshop and you'll see that it's drawn in an arbitrary color (#444444) with varying levels of opacity to create darker and lighter parts of the icon.
This is more of a photoshop question than coding but anyway, here's a suggestion.
Lunacore has a good tutorial on how to use masks.
What you want to do is:
Make sure you're background is transparent.
Create a new layer and
fill it with any solid color.
Create a mask on the solid color
layer, and fill your greyscale image into the mask. (Use your
greyscale image as the mask.)
Toolbar icons use your image as a mask. They only consider what transparancy the image has. Not what color or shade.
I’ve been busy working on the graphics for my iPhone application. I started working on generating icons for my UITabBar and ran into lots of problems. How do you create these icons?
I created this solution:
http://www.nailrails.com/?p=46
Are there any shortcomings to this approach? It seemed to work for the few icons I created...
Apple's guidelines can be found at http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW1
The docs are pretty straightforward-- alpha is all that matters when the image gets loaded by the toolbar, meaning that anything that's not at least semitransparent will render in the same opaque shade. As for how I do that, I mainly use Adobe tools. Fireworks is my preferred tool but Photoshop's also more than up to it. Another one I've had good results with is Acorn, which is frankly a lot cheaper while being more than sophisticated enough for this kind of work. I'm not really a graphic designer but a certain familiarity with this kind of stuff goes with the job.
I have an article up on my site that shows how to use OmniGraffle with a template I use to create great iPhone toolbar icons in minutes:
http://steveweller.com/articles/toolbar-icons/
The template sets up a grid to work to that corresponds to one square for each pixel. You draw your icon in white on top of the black template background and then export as a PDF exactly the right area to match the icon size you need (typically 21 pixels high). Then you reimport the PDF, resize it to the final icon size (21 pixels again), and export as PNG. The template does nothing magical; it just provides an already set up working area and helps you get the final PNG right every time to the scale is correct.
You could use the same technique in Acorn or any other app that supports PDF export and layers.
(I use Gimp. Assume your icon layer already has alpha channel.)
Right click the layer, then add layer mask.
Done with option "transfer alpha channel of layer" chosen.
Select the whole layer (but not layer mask), and clear it with pure white.
Resize image to Apple-suggested size, and export it as png file.
You may also paint directly on the layer mask.