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

Question

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

我确信我只是个白痴，但是如何使用Illustrator或Photoshop中的图标完全正确地获得圆角呢？

修改

Retina iPad的半径是多少？

Answer 1

你可以为你的应用制作四个图标（截至今天），它们都可以有不同的外观 - 不一定基于512x512图像。

• 512x512图标的角半径= 80 （iTunesArtwork）
• 1024x1024图标的角半径= 180 （iTunesArtwork Retina ）
• 57x57图标的角半径= 9 （iPhone / iPod Touch）
• 114x114图标的角半径= 18 （iPhone / iPod Touch Retina ）
• 72x72图标的角半径= 11 （iPad）
• 144x144图标的角半径= 23 （iPad Retina ）

如果您确实创建了一组自定义图标，则可以在info.plist文件中将UIPrerenderedIcon选项设置为true，它不会添加光泽效果，但会在其下方放置一个黑色背景使用这些角半径围绕图像角落，因此如果任何图标上的角半径大于边缘/角落周围的黑色。

编辑：查看来自@ devin-g-rhode的评论，您可以看到任何未来图标大小的角半径与图标大小的比率应为1:6.4。 https://stackoverflow.com/a/29550364/396005还有一个非常好的答案，其中包含SDK中用于舍入图标角的图像掩码文件的位置

要添加与视网膜兼容的文件，请使用相同的文件名并添加“@ 2x”。因此，如果我有一个名为icon.png的72x72图标的文件，我还会将一个名为icon@2x.png的114x114 PNG文件添加到项目/目标中，Xcode会自动将其用作视网膜显示屏上的图标。如果您已正确完成，则可以在应用程序目标的“摘要”页面上看到此操作。同样适用于您的启动图像。使用launch.png（320x480）和launch@2x.png（640x960）。

Answer 2

在这篇文章中尝试了一些答案之后，我咨询了Louie Mantia（前Apple，Square和Iconfactory设计师），到目前为止这篇文章的所有答案都是错误的（或者至少是不完整的）。 Apple以57px图标开始，半径为10，然后从那里向上或向下扩展。因此，您可以使用10/57 x new size计算任何图标大小的半径（例如10/57 x 114给出20，这是114px图标的正确半径）。以下是最常用的图标列表，正确的命名约定，像素尺寸和角半径。

1. Icon1024.png - 1024px - 179.649
2. Icon512.png - 512px - 89.825
3. Icon.png - 57px - 10
4. Icon@2x.png - 114px - 20
5. Icon-72.png - 72px - 12.632
6. Icon-72@2x.png - 144px - 25.263
7. Icon-Small.png - 29px - 5.088
8. Icon-Small@2x.png - 58px - 10.175

此外，正如其他答案所述，您实际上并不想裁剪您在二进制文件中使用的任何图像或提交给Apple。那些都应该是正方形而没有任何透明度。 Apple将在适当的上下文中自动屏蔽每个图标。

然而，了解上述内容非常重要，因为您必须在应用UI中使用图标，您必须在代码中应用蒙版，或在photoshop中预渲染。在为网站和其他宣传材料创建艺术作品时，它也很有用。

补充阅读：

Neven Mrgan关于其他图标尺寸和其他设计注意事项：ios app icon sizes

Bjango的Marc Edwards关于在Photoshop中创建圆形复制的不同选项及其重要性：roundrect

Apple关于图标大小和设计注意事项的官方文档：Icons and Images

<强>更新

我在Photoshop CS6中做了一些测试，似乎小数点后面的3位数字足够精确，最终得到完全相同的矢量（至少在Photoshop中以3200％变焦显示）。 Round Rect Tool有时会将输入舍入为最接近的整数，但您可以看到90和89.825之间的显着差异。并且有几次Round Rectangle Tool没有向上舍入，实际上在小数点后显示多个数字。不确定那里发生了什么，但它肯定使用和存储输入的更精确的数字。

无论如何，我已经更新了上面的列表，只包括小数点后的3位数（在13之前！）。在大多数情况下，可能很难分辨出半径为90px的透明512px图标与89.825处掩盖的透明512px图标之间的区别，但是圆角的抗锯齿肯定会略有不同，并且在某些情况下可能会特别明显。如果Apple，代码或其他方式应用了第二个更精确的掩码。

Answer 3

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

15.625％是这里的关键百分比。将上面提到的任何图像尺寸乘以0.15625，您将获得该尺寸的正确像素半径。

编辑：感谢@Chris Prince评论iOS 8/9/10半径百分比： 22.37％

Answer 4

重要：iOS 7图标等式

随着即将发布的iOS 7，你会发现“标准”图标半径已经增加。因此，尝试按照Apple和我的建议做这个答案。

对于一个120px的图标，在iOS 7上最能代表其形状的公式似乎是以下超椭圆：

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

显然，您可以使用所需的图标大小更改120数字，以获得相应的功能。

<强>原始

  

你应该提供一个有90°角的图像（这很重要   避免裁剪图标的角落 - iOS会为你做到这一点   适用于圆角面具）   （Apple Documentation）

最好的方法是根本不会对图标的角落进行四舍五入。如果您将图标设置为方形图标，iOS将自动使用预定义的蒙版覆盖图标，该蒙版将设置适当的圆角。

如果您为图标手动设置圆角，它们可能会在此设备或该设备中看起来有问题，因为圆角蒙版恰好从iOS版本更改为另一个版本。有时你的图标会略大，有时（叹气）稍微小一点。使用方形图标可以免除您的负担，您将确保为您的应用提供始终最新且美观的图标。

此方法适用于每个图标大小（iPhone / iPod / iPad /视网膜）以及iTunes图稿。我按照这种方法进行了几次，如果你愿意，我可以给你发一个使用原生方形图标的应用程序的链接。

修改

为了更好地理解这个答案，请参阅官方Apple documentation about iOS icons。在此页面中明确指出，当在iOS设备上显示时，方形图标将自动获取这些内容：

1. 圆角
2. 投影
3. 反光光泽（除非你防止光泽效果）

因此，您可以实现您想要的任何效果，只需绘制一个普通的方形图标并在其中填充内容。最后一个角落半径将类似于其他答案所说的内容，但这绝不会得到保证，因为这些数字不是iOS官方文档的一部分。他们要求你画方形图标，所以......为什么不呢？

Answer 5

dbarnard的答案有计算正确半径的公式，但由于您正在寻找模板，因此可以在此目录中找到所有掩码和叠加层：

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

（路径适用于最新版本的XCode。对于旧版本，它可能位于/ Developer /）。

正如其他人所说，你不应该自己掩盖它们，但是你可以使用它们来检查你的图标在蒙面后的外观。

（此调查结果归Neven Mrgan IIRC所有）

Answer 6

人们争论角落半径略有增加但实际情况并非如此。

来自this blog：

  

Apple的物理产品的“秘密”在于它们避免了相切（半径与单点处的线相交）并使用所谓的曲率连续性制作表面。

您don't need将角半径应用于iOS的图标。只需提供方形图标。但是，如果您仍然想知道如何，实际形状称为Squircle，下面是公式：

Answer 7

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

Answer 8

正如其他人所说，你不想绕过角落。您想要平面（没有图层或alpha）方形图形。 Apple改变了他们用于在iOS7中转弯角落的面具，然后在iOS8中再次改变。您可以在Xcode应用程序包中找到这些掩码。路径随着它们发布的每个新SDK版本而变化。所以，我会告诉你如何随时找到它。

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

此时此命令找到的路径为/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.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图片：

您可以使用它来测试您的图标，看看它是否会在屏蔽后看起来不错。但是，不要绕过你的角落。如果你这样做，当Apple再次更换这些面具时，你会有文物。

Answer 9

如果不考虑笔划，57x57图标的确切半径实际为10px。

我从iconreference获得此信息。

Answer 10

此问题的所有先前答案现已过时。自2015年5月起，Apple要求您提供没有舍入的方形图标：

  

保持图标角平方。系统会应用一个自动围绕图标角的遮罩。

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

Answer 11

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

我现在所做的是使用Xcode创建一个空项目，将一个完全白色的PNG文件设置为图标，然后关闭预设的斜角和放大器。光泽。然后，我运行应用程序并截取主屏幕的屏幕截图。现在，您可以轻松地从该图像创建一个遮罩，您可以在Photoshop中使用该遮罩。这将为您提供完美的圆角。

Answer 12

iphone为你完成了转角，你所需要的只是一个方形的57x57 png图标，你应该很好

Answer 13

两个完全冲突的答案，票数很大，一个是160px @ 1024，另一个是180px @ 1024。那么女巫呢？

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

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

如下所示，160px（第一个）的形状（细灰线）有点偏，而180px的形状看起来很好。

这就是我现在在PhotoShop中所做的事情：

1. 我创建了一个尺寸为 1026x1026px的画布，主屏幕为180px 设计智能对象。
2. 我将主要智能对象复制5次并将其大小调整为1024px，144px，114px，72px和57px。
3. 我在每个智能对象上放了一个“New layered Based Slice”，我根据它们的大小重命名切片（例如icon-72px）。
4. 当我保存艺术品时，我选择“所有用户切片”并砰！我有 我的应用程序所需的所有图标。

Answer 14

我为1024x1024尝试了228px半径并且它有效：）

Answer 15

更新（截至2018年1月）App Icon要求：

https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

  

保持图标方角。系统会应用一个自动围绕图标角的遮罩。

     

保持背景简洁，避免透明度。确保您的图标不透明，并且不会使背景混乱。给它一个简单的背景，这样它就不会压倒附近的其他应用程序图标。您无需用内容填充整个图标。

Answer 16

您无需将角半径应用于应用图标，只需应用方形图标即可。设备自动应用转角半径。