我正在尝试为我的 iPhone 应用程序创建图标，但不知道如何获得 iPhone 图标使用的确切半径。我已经搜索并搜索了教程或模板，但找不到。
我敢肯定我只是个白痴，但是如何使用 Illustrator 或 Photoshop 中的图标使圆角完全正确？
编辑：
Retina iPad 的半径是多少？
问问题
246533 次
16 回答
353
您可以为您的应用程序制作四个图标（截至今天），它们都可以具有不同的外观 - 不一定基于 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 )
如果您确实创建了一组自定义图标，您可以UIPrerenderedIcon在 info.plist 文件中将选项设置为 true，它不会添加光泽效果，但会在其下方放置黑色背景，并且仍然使用这些角半径围绕图像角因此，如果任何图标上的角半径更大，那么它会在边缘/角周围显示黑色。
编辑：请参阅@devin-g-rhode 的评论，您可以看到任何未来的图标大小都应该具有1:6.4角半径与图标大小的比率。https://stackoverflow.com/a/29550364/396005也有一个很好的答案，其中包含 SDK 中用于圆角图标角的图像掩码文件的位置
要添加与视网膜兼容的文件，请使用相同的文件名并添加“@2x”。因此，如果我有一个名为 icon.png 的 72x72 图标文件，我还将向项目/目标添加一个名为 icon@2x.png 的 114x114 PNG 文件，Xcode 会自动将其用作视网膜显示器上的图标。如果您做得对，您可以在应用程序目标的“摘要”页面上看到这一点。这同样适用于您的启动图像。使用 320x480 的 launch.png 和 640x960 的 launch@2x.png。
于 2010-09-28T14:46:01.913 回答
293
在尝试了这篇文章中的一些答案后，我咨询了 Louie Mantia（前 Apple、Square 和 Iconfactory 设计师），到目前为止，这篇文章中的所有答案都是错误的（或者至少是不完整的）。Apple 从 57px 图标开始，半径为 10，然后从那里放大或缩小。10/57 x new size因此，您可以使用（例如10/57 x 114给出 20，这是 114px 图标的正确半径）计算任何图标大小的半径。以下是最常用图标、正确命名约定、像素尺寸和角半径的列表。
- Icon1024.png - 1024px - 179.649
- Icon512.png - 512px - 89.825
- 图标.png - 57px - 10
- 图标@2x.png - 114px - 20
- Icon-72.png - 72px - 12.632
- Icon-72@2x.png - 144px - 25.263
- 图标-Small.png - 29px - 5.088
- 图标-Small@2x.png - 58px - 10.175
此外，正如其他答案中提到的，您实际上并不想裁剪您在二进制文件中使用的任何图像或提交给 Apple。这些都应该是方形的并且没有任何透明度。Apple 将在适当的上下文中自动屏蔽每个图标。
然而，了解上述内容对于应用程序 UI 中的图标使用很重要，您必须在代码中应用蒙版，或在 Photoshop 中预渲染。在为网站和其他宣传材料创建艺术品时，它也很有帮助。
补充阅读：
Neven Mrgan 关于其他图标大小和其他设计注意事项：ios 应用程序图标大小
Bjango 的 Marc Edwards 关于在 Photoshop 中创建圆形矩形的不同选项及其重要性：圆形矩形
Apple 关于图标大小和设计注意事项的官方文档：图标和图像
更新：
我在 Photoshop CS6 中进行了一些测试，似乎小数点后 3 位的精度足以得到完全相同的矢量（至少 Photoshop 以 3200% 缩放显示）。圆角矩形工具有时会将输入四舍五入为最接近的整数，但您可以看到 90 和 89.825 之间存在显着差异。并且有几次圆形矩形工具没有四舍五入，实际上在小数点后显示了多个数字。不确定那里发生了什么，但它肯定在使用和存储输入的更精确的数字。
无论如何，我已经更新了上面的列表，只包括小数点后的 3 位数字（之前有 13 位！）。在大多数情况下，可能很难区分以 90px 半径遮罩的透明 512px 图标和以 89.825 遮罩的透明图标之间的区别，但圆角的抗锯齿最终肯定会略有不同，并且可能在某些情况下可见，尤其是如果 Apple 在代码中或以其他方式应用了第二个更精确的掩码。
于 2012-04-20T02:17:45.543 回答
44
我看到很多“px”讨论，但没有人在谈论百分比，这是您要计算的固定数字。
22.37%是这里的关键百分比。将上面提到的任何图像尺寸乘以 0.2237，您将获得该尺寸的正确像素半径。
在 iOS 8 之前，Apple 使用较少的四舍五入，使用 15.625%。
编辑：感谢@Chris Prince 评论 iOS 8/9/10 半径百分比：22.37%
于 2012-07-17T17:36:58.873 回答
30
重要提示：iOS 7 图标方程式
随着即将发布的 iOS 7，您会注意到“标准”图标半径已经增加。因此，请尝试按照 Apple 和我对这个答案的建议去做。
对于 120px 图标，在 iOS 7 上最能代表其形状的公式似乎是以下超椭圆：
|x/120|^5 + |y/120|^5 = 1
显然你可以120用想要的图标大小改变数字来获得相应的功能。
原来的
您应该提供具有 90° 角的图像（避免裁剪图标的角很重要——iOS 在应用圆角遮罩时会为您执行此操作）（Apple 文档）
最好的方法是根本不把图标的角落弄圆。如果您将图标设置为方形图标，iOS 将自动使用预定义的蒙版覆盖图标，该蒙版将设置适当的圆角。
如果你手动为你的图标设置圆角，它们可能会在这个或那个设备上看起来坏了，因为圆角掩码恰好从 iOS 版本到另一个版本略有变化。有时您的图标会稍大一些，有时（叹气）会稍小一些。使用方形图标将使您摆脱这种负担，并且您一定会为您的应用程序提供一个始终保持最新且美观的图标。
这种方法对每个图标大小（iPhone/iPod/iPad/retina）都有效，也适用于 iTunes 图稿。我多次采用这种方法，如果你愿意，我可以向你发布一个使用原生方形图标的应用程序的链接。
编辑
为了更好地理解这个答案，请参阅Apple 官方文档关于 iOS 图标。在此页面中明确指出，方形图标在 iOS 设备上显示时会自动获取这些内容：
- 圆角
- 投影
- 反光光泽（除非你阻止光泽效果）
因此，您只需绘制一个普通的方形图标并在其中填充内容即可实现您想要的任何效果。最终的拐角半径将类似于此处其他答案所说的内容，但这永远无法保证，因为这些数字不是 iOS 上 Apple 官方文档的一部分。他们要求你画方形图标，所以......为什么不呢？
于 2011-05-10T08:22:07.827 回答
16
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-20T08:01:41.657 回答
8
57 x 57 像素图标的圆角半径为 9 像素。
于 2010-01-22T02:09:36.210 回答
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 再次更改这些掩码时，您将获得伪像。
于 2015-04-09T22:46:42.063 回答
7
以前对这个问题的所有答案现在都已过时。至少从 2015 年 5 月开始，Apple 要求您提供没有四舍五入的方形图标：
保持图标角正方形。系统会自动应用一个使图标角变圆的蒙版。
https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/
于 2015-05-05T07:48:21.753 回答
5
如果不考虑笔画，57x57 图标的确切半径实际上是 10px。
我从iconreference获得此信息。
于 2010-12-21T09:49:18.027 回答
4
iphone 为您转角，您只需要一个方形 57x57 png 图标，您应该很好
于 2010-01-20T21:54:28.053 回答
4
在使用 Photoshop 设计我的应用程序图标时，我发现没有整数角半径完全适合设备的遮罩。
我现在要做的是用 Xcode 创建一个空项目，设置一个全白的 PNG 文件作为图标，并关闭预设的斜角和光泽度。然后，我运行该应用程序并截取主屏幕的屏幕截图。现在，您可以轻松地从该图像创建一个蒙版，您可以在 Photoshop 中使用它。这将使您获得完美的圆角。
于 2011-09-22T16:50:26.463 回答
4
应用图标要求更新（截至 2018 年 1 月）：
https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
保持图标角正方形。系统会自动应用一个使图标角变圆的蒙版。
保持背景简单，避免透明。确保您的图标是不透明的，并且不要弄乱背景。给它一个简单的背景，这样它就不会压倒附近的其他应用程序图标。您不需要用内容填充整个图标。
于 2018-01-08T19:07:58.293 回答
3
有两个完全矛盾的答案，一个是 160px@1024，另一个是 180px@1024。所以女巫一个？
我进行了一些实验，我认为它是 180px@1024 所以 drbarnard 是正确的。
我从 App Store 下载了 iTunes U 图标，它是 175x175px 我在 photoshop 中将它放大到 1024px 并在上面放了两个形状，一个半径为 160px，一个半径为 180px。
正如您在下方看到的，160 像素（第一个）的形状（细灰线）有点偏离，而 180 像素的形状看起来还不错。
这就是我现在在 PhotoShop 中所做的：
- 我为主要设计Smart Object创建了一个大小为 1026x1026px 的画布，带有 180px蒙版。
- 我将主智能对象复制 5 次并将它们调整为 1024px、144px、114px、72px 和 57px。
- 我在每个智能对象上放置了一个“新的基于分层的切片”，并根据它们的大小重命名切片（例如 icon-72px）。
- 当我保存艺术品时，我选择“所有用户切片”并 BANG！我有我的应用程序所需的所有图标。
于 2013-04-19T08:17:41.553 回答
2
我为 1024x1024 尝试了 228px 半径并且它有效:)
于 2014-03-25T05:17:01.967 回答
1
您不需要将角半径应用于您的应用程序图标，您只需应用方形图标即可。设备会自动应用圆角半径。
于 2017-06-28T11:46:21.977 回答