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)

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

编辑:查看来自@ devin-g-rhode的评论,您可以看到任何未来的图标大小都应该具有1:6.4角半径与图标大小的比率./sf/answers/2068525511/也有一个非常好的答案,其中包含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图标大小

Bjango的Marc Edwards介绍了在Photoshop中创建圆形的不同选项及其重要性:圆形

Apple关于图标大小和设计考虑因素的官方文档:IconsImages

更新:

我在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文档)

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

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

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

编辑

要更好地理解这个答案,请参阅有关iOS图标的官方Apple文档.在此页面中明确指出,当在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

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

来自这个博客:

Apple的物理产品的"秘密"在于它们避免了相切(半径在一个点处与一条线相交)并且使用所谓的曲率连续性来制作它们的表面.

您无需将角半径应用于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

应用程序图标要求更新（截至 2018 年 1 月）：

\n\n

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

\n

\n

保持图标角方形。系统应用一个遮罩，自动将图标角变圆。

\n

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

\n

\n

Answer 12

WWDC 2022 带来好消息！

现在，Xcode 14 根据单个输入图标 1024x1024 pix ( Single Size) 自动生成所有所需的应用程序图标大小。但是，如果您需要老式方法，请All Sizes从下拉菜单中进行选择。

所以，您现在需要知道的是输入图标的半径，即 180 px。

Answer 13

iPhone 为你圆角，你只需要一个方形的 57x57 png 图标，你应该很好