iPhone应用程序图标-精确半径?

我试图为我的iPhone应用程序创建图标，但不知道如何获得iPhone图标使用的确切半径。我搜索了又搜索教程或模板，但找不到一个。

我确信我只是一个白痴，但你如何让圆角与你的图标从Illustrator或Photoshop完全正确?

编辑:

Retina iPad的半径是多少?

iphone为你圆角，你所需要的是一个方形的57x57 png图标，u应该是好的

2010-01-20 21:54:28

57 x 57像素图标的圆角半径为9像素。

2010-01-22 02:09:36

你可以为你的应用程序制作四个图标(到今天为止)，它们都可以有不同的外观-不一定基于512x512的图像。

512x512图标的圆角半径= 80 (iTunesArtwork) 1024x1024图标的圆角半径= 180 (iTunesArtwork Retina) 57x57图标的圆角半径= 9 (iPhone/iPod Touch) 114x114图标的角半径= 18 (iPhone/iPod Touch Retina) 72x72图标的圆角半径= 11 (iPad) 14x144图标的角半径= 23 (iPad Retina)

如果你创建了一组自定义图标，你可以在你的信息中将UIPrerenderedIcon选项设置为true。Plist文件，它不会添加光泽效果，但它会在它下面放置一个黑色背景，仍然用这些角半径圆角图像的角落，所以如果任何图标的角半径更大，那么它将在边缘/角落周围显示黑色。

编辑:查看来自@devin-g-rhode的评论，你可以看到任何未来的图标大小都应该是1:6.4的角半径与图标大小的比例。https://stackoverflow.com/a/29550364/396005上也有一个很好的答案，它有SDK中用于圆角图标的图像掩码文件的位置

要添加与视网膜兼容的文件，请使用相同的文件名并添加“@2x”。所以如果我有一个72x72的图标文件icon. PNG，我也会添加一个114x114的PNG文件icon@2x.png到项目/目标，Xcode会自动使用它作为视网膜显示器上的图标。如果操作正确，您可以在应用程序目标的Summary页面上看到这一点。这同样适用于您的发射图像。使用launch.png的320x480和launch@2x.png的640x960。

2010-09-28 14:46:01

如果不考虑描边，57x57图标的准确半径实际上是10px。

我从iconreference中得到这个信息。

2010-12-21 09:49:18

重要:iOS 7图标方程式

随着即将发布的iOS 7，你会注意到“标准”图标半径已经增加。所以试着按照苹果和我给出的答案去做吧。

对于120px的图标，在iOS 7上最能代表其形状的公式是下面的超椭圆:

|x/120|^5 + |y/120|^5 = 1

显然，你可以改变120的数字与所需的图标大小，以获得相应的功能。

原始

你应该提供一个有90°角的图像(这很重要避免裁剪图标的边角——ios会为你这样做应用圆角蒙版) (苹果文档)

最好的方法是完全不要把图标的边角弄圆。如果你将图标设置为方形图标，iOS会自动用预定义的掩码覆盖图标，并设置适当的圆角。

如果你手动为图标设置圆角，它们在这个或那个设备上看起来可能会坏掉，因为在不同的iOS版本之间，圆角蒙版会有轻微的变化。有时候你的图标会稍微大一点，有时候(唉)稍微小一点。使用方形图标将使你摆脱这种负担，你将确保你的应用程序有一个最新的和好看的图标。

这种方法适用于各种图标大小(iPhone/iPod/iPad/retina)，也适用于iTunes图像。我曾多次采用这种方法，如果你愿意，我可以发布一个使用原生方形图标的应用程序链接。

Edit

为了更好地理解这个答案，请参考苹果官方关于iOS图标的文档。在这个页面中，它清楚地说明了一个正方形图标将自动获得这些东西时，显示在iOS设备上:

圆角阴影反光(除非你防止反光效果)

所以，你可以实现任何你想要的效果，只需绘制一个普通的正方形图标，并在其中填充内容。最终的角半径将与这里的其他答案相似，但这永远无法保证，因为这些数字不是苹果iOS官方文档的一部分。他们让你画方形图标，所以…为什么不呢?

2011-05-10 08:22:07

当我用Photoshop设计我的应用程序图标时，我发现没有整数角半径完全适合设备的掩码。

我现在要做的是用Xcode创建一个空项目，设置一个完全白色的PNG文件作为图标，并关闭预设的斜角和光泽度。然后，我运行应用程序，并在主屏幕上截屏。现在，你可以很容易地从这张图片创建一个蒙版，你可以在Photoshop中使用。这样可以得到完美的圆角。

2011-09-22 16:50:26

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 图标。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

另外，正如在其他回答中提到的，你实际上并不想裁剪二进制文件中使用的任何图像或提交给苹果。这些都应该是方形的，没有任何透明度。苹果会在适当的上下文中自动屏蔽每个图标。

了解以上内容是很重要的，但是，对于图标在应用程序UI中的使用，你必须在代码中应用蒙版，或在photoshop中预渲染。这在为网站和其他宣传材料创作艺术品时也很有帮助。

更多阅读:

Neven Mrgan谈到了额外的图标大小和其他设计考虑因素:ios应用程序的图标大小

bjano的Marc Edwards关于在Photoshop中创建圆形矩形的不同选项以及为什么它很重要:圆形矩形

苹果关于图标大小和设计考虑因素的官方文档:图标和图像

更新:

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.

总之，我更新了上面的列表，只包括小数点后的3位数字(之前有13位!)在大多数情况下，可能很难区分一个半径为90px的512px透明图标和一个半径为89.825的透明图标，但圆角的反锯齿肯定会略有不同，在某些情况下可能会可见，特别是当苹果在代码或其他方面应用了第二个更精确的掩码时。

2012-04-20 02:17:45

dbarnard的答案有公式来计算正确的半径，但因为你是在寻找模板，所有的蒙版和覆盖都可以在这个目录中找到:

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator5.1.sdk/System/Library/PrivateFrameworks/MobileIcons.framework

(路径是最新版本的XCode。对于旧版本，它可能在/Developer/)内部。

正如其他人所指出的，你不应该自己屏蔽它们，但你可以使用这些来检查你的图标在屏蔽后的样子。

(这一发现归功于Neven Mrgan IIRC)

2012-04-20 08:01:41

我看到很多关于“px”的讨论，但没有人谈论百分比，这是你想要计算的固定数字。

22.37%是这里的关键百分比。将上面提到的任何图像大小乘以0.2237，您将得到该尺寸的正确像素半径。

在iOS 8之前，苹果使用的舍入较少，为15.625%。

编辑:感谢chris Prince评论iOS 8/9/10的半径百分比:22.37%

2012-07-17 17:36:58

有两个完全矛盾的答案，一个是160px@1024，另一个是180px@1024。女巫呢?

我做了一些实验，我认为这是180px@1024，所以drbarnard是正确的。

我从App Store下载了iTunes U图标，尺寸为175x175px，我在photoshop中将其放大到1024px，并在上面放置两个形状，一个半径为160px，另一个半径为180px。

正如你可以看到下面的形状(细灰线)160px(第一个)是有点偏离，而一个180px看起来很好。

这是我现在在PhotoShop中所做的:

我创建一个大小为1026x1026px的画布，主蒙版为180px 设计智能对象。我复制主智能对象5次，并将其大小调整为1024px, 144px, 114px, 72px和57px。我在每个智能对象上放了一个“新建分层切片”，我根据它们的大小重命名切片(例如icon-72px)。当我保存艺术品时，我选择“All User Slices”，然后BANG!我有所有图标必须为我的应用程序。

2013-04-19 08:17:41

我尝试了228px半径为1024x1024，它工作了:)

2014-03-25 05:17:01

就像其他人说的那样，你不想拐弯抹角。你想要发布平面(无图层或alpha)方形图形。苹果改变了他们在iOS7和iOS8中用来绕过角落的掩码。你可以在Xcode应用程序包中找到这些掩码。路径会随着他们发布的每个新SDK版本而变化。我来告诉你们怎么找到它。

find /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework'

此时，该命令找到的路径是/Applications/Xcode.app/Contents/Developer/Platforms/ iphoneonesimulator .platform/Developer/ sdk/ iphoneonesimulator .sdk/System/Library/PrivateFrameworks/MobileIcons.framework，但不要相信它。使用命令自己查找。

该路径指向包含这些文件的目录(同样，在这篇文章中)

./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

正如你所看到的，有很多不同的面具，但它们的名字都很清楚。以下是AppIconMask@3x~iphone.png图片:

你可以用它来测试你的图标，看看它蒙版后看起来是否正常。但是，不要拐弯抹角。如果你这样做了，当苹果再次改变这些面具时，你就会有伪影。

2015-04-09 22:46:42

以前对这个问题的所有答案现在都过时了。至少从2015年5月开始，苹果要求你提供没有四舍五入的方形图标:

保持图标角为方形。系统应用一个掩码自动圆角图标。

https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/

2015-05-05 07:48:21

你不需要应用圆角半径到你的应用程序图标，你可以只应用方形图标。设备自动施加角半径。

2017-06-28 11:46:21

人们争论角半径会稍微增加，但事实并非如此。

来自这个博客:

苹果实体产品的一个“秘密”是它们避免了切线(半径在某一点与直线相交)，并以所谓的曲率连续性来制作它们的表面。