ChatGPT解决这个技术问题 Extra ChatGPT

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

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

我敢肯定我只是个白痴,但是如何使用 Illustrator 或 Photoshop 中的图标使圆角完全正确?

编辑:

Retina iPad 的半径是多少?

@NickVeys 无论多大年纪,一个未回答的问题都会困扰我。不确定这是否是海报的意图,但它可能是用于越狱应用程序或 iOS 本身之外的艺术品。
然后 iOS 7 来了,增加了“默认”图标的半径,让这个问题立刻过时了。
图标不应再四舍五入。苹果现在requires square graphics with no corner rounding
您只需要一个 1024*1024 的方形图标,使用一些应用程序(例如 Prepo)来生成所有需要的大小。该设备将为您完成其余的工作。
@MarkWhitaker 确实如此,但有时您需要将圆形图像展示给朋友、家人和互联网。

C
Community

您可以为您的应用程序制作四个图标(截至今天),它们都可以具有不同的外观 - 不一定基于 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 会自动将其用作视网膜显示器上的图标。如果您做得对,您可以在应用程序目标的“摘要”页面上看到这一点。这同样适用于您的启动图像。使用 320x480 的 launch.png 和 640x960 的 launch@2x.png。


正如我在回答中所说,我发现最好的方法不是手动处理圆角,而是让 iOS 为您完成。这样,您将始终确保角落始终是最新的。
512/80 == 114/18 == 72/11 == 57/9 == 6.4 您可以将图标的平方长度除以 6.4 以获得与苹果相同的比率。所以对于一个 19x19 的图标,19/6.4 ~ 3px 的边框半径
iTunesArtwork 的 80px 半径绝对是错误的。您可以在 iTunes 捆绑包中找到 iTunes 中使用的掩码图像。它是 90 像素。最近能改吗?
Retina iPad 半径(144x144 图标)为 23 像素,仅供参考。并且 1024x1024 图标应该有一个 160 像素的半径。虽然很容易自己计算这些。
这一切都不再适用于 iOS 7。他们增加了所谓的标准图标半径。
C
Cœur

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

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

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

然而,了解上述内容对于应用程序 UI 中的图标使用很重要,您必须在代码中应用蒙版,或在 Photoshop 中预渲染。在为网站和其他宣传材料创建艺术品时,它也很有帮助。

补充阅读:

Neven Mrgan 关于其他图标大小和其他设计注意事项:ios app icon sizes

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

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

更新:

我在 Photoshop CS6 中进行了一些测试,似乎小数点后 3 位的精度足以得到完全相同的矢量(至少 Photoshop 以 3200% 缩放显示)。圆角矩形工具有时会将输入四舍五入为最接近的整数,但您可以看到 90 和 89.825 之间存在显着差异。并且有几次圆形矩形工具没有四舍五入,实际上在小数点后显示了多个数字。不确定那里发生了什么,但它肯定在使用和存储输入的更精确的数字。

无论如何,我已经更新了上面的列表,只包括小数点后的 3 位数字(之前有 13 位!)。在大多数情况下,可能很难区分以 90px 半径遮罩的透明 512px 图标和以 89.825 遮罩的透明图标之间的区别,但圆角的抗锯齿最终肯定会略有不同,并且可能在某些情况下可见,尤其是如果 Apple 在代码中或以其他方式应用了第二个更精确的掩码。


Aleksandar,虽然在大多数情况下可能看起来不错,但从 90 开始并不适用于所有情况。请参阅上面的更新。
很棒的帖子,有很多细节。很高兴你让路易得到一个确切的答案。我的都是基于 57px 然后按比例放大的,但那是侥幸。很高兴确认这就是 Apple 所做的。
这是否意味着如果应用程序图标不是方形的,那么我们应该使用 Illustrator 来绘制图标?因为 Photoshop 不支持带小数点的半径.....
O
Owen Versteeg

我看到很多“px”讨论,但没有人在谈论百分比,这是您要计算的固定数字。

22.37% 是这里的关键百分比。将上述任何图像尺寸乘以 0.2237,您将获得该尺寸的正确像素半径。

在 iOS 8 之前,Apple 使用较少的四舍五入,使用 15.625%。

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


对于 1024x1024 图标(我正在创建一些新闻资料包图形),这给出了 160 的角半径,这在我看来太小了。
再次,对于我的眼睛,对于新闻资料袋图形,而不是任何官方的 Apple 提交,22.37% 看起来更接近 iOS8 的四舍五入。例如,在 1024x1024 的 Photoshop 中,半径为 229 像素。
@ChrisPrince 这个答案肯定需要为 iOS8 更新,感谢您的输入
实际上,这个百分比是 22.5%。
呃,我写的时候应该是 iOS 13。我之前没有检查任何东西。
C
Community

重要提示: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 documentation about iOS icons。在此页面中明确指出,方形图标在 iOS 设备上显示时会自动获取这些内容:

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

因此,您只需绘制一个普通的方形图标并在其中填充内容即可实现您想要的任何效果。最终的拐角半径将类似于此处其他答案所说的,但这永远无法保证,因为这些数字不是 iOS 上 Apple 官方文档的一部分。他们要求你画方形图标,所以......为什么不呢?


是的,马上。这正是我得出的结论;除非有时间花钱请设计师为每个设备单独创建和测试每个图标大小。
缩小后,您的图标看起来会很糟糕。
它们没有缩小。您必须为每个设备设置正确的图标大小,而不是绘制角落,您只需将图标保留为纯正方形格式。 Apple 将为您完成剩下的工作。无需缩放。试着让我知道!
Marzapower,你是对的,只要你对 Apple 的灯光效果感到满意。除非您预渲染,否则您不能没有另一个
苹果的灯光效果与圆角无关。顺便说一句,您可以使用方形图标更改图标中的叠加效果,一切都会正常工作。
O
Onur Yıldırım

人们争论拐角半径略有增加,但实际上并非如此。

this blog

Apple 物理产品的一个“秘密”是它们避免相切(半径与一条线在一个点相交),并使用所谓的曲率连续性来制作它们的表面。

https://i.stack.imgur.com/pegDh.png

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

https://i.stack.imgur.com/wrXn1.png


自 iOS 7 以来,iPhone 图标不再是带圆角的正方形。这应该是公认的答案(即使该公式不是对弯角大小的明确答案)。
@Crazyrems 谢谢,但没有半径大小可以给 bec。根据具有特定“公式”的正方形的大小,角落是弯曲的(不是圆形的)。
A
Agos

dbarnard 的答案具有计算正确半径的公式,但是由于您正在寻找模板,因此可以在此目录中找到所有蒙版和覆盖:

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

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

正如其他人所指出的,您不应该自己遮盖它们,但您可以使用它们来检查您的图标在被遮盖后的外观。

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


此路径随 SDK 的每个版本而变化。您可以使用此命令 find /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework' 定位当前路径
w
willc2

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


Willc2,你是对的 - 但如果弗兰克正确设计 iPhone 图标,他将使用 512x512 图像,并且该级别的边框半径为 80 像素,当你将其缩小到 57x57 时,四舍五入为 9 像素。
B
Bruno Bronosky

正如其他人所说,您不想拐弯抹角。您想发布平面(无图层或 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 图像:

https://i.stack.imgur.com/Vm1qr.png

您可以使用它来测试您的图标,看看它在被屏蔽后是否看起来还可以。但是,不要拐弯抹角。如果这样做,当 Apple 再次更改这些掩码时,您将获得伪像。


M
Mark Whitaker

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

保持图标角正方形。系统会自动应用一个使图标角变圆的蒙版。

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


N
NANNAV

如果不考虑笔画,57x57 图标的确切半径实际上是 10px。

我从 iconreference 获得此信息。


我同意这一点。如果您使用内部笔划框住应用程序图标以获得类似于“设置”应用程序的效果,则使用 9px 半径看起来不太正确。 10px 的 57x57px 图标和 20px 的 @2x 图标在我看来要好得多。
D
Daniel

iphone 为您转角,您只需要一个方形 57x57 png 图标,您应该很好


对于官方应用程序,这是真的(嗯,有点。57x57 肯定不是你需要的唯一尺寸)。但是,对于越狱应用程序,这种舍入不是为您完成的。您需要自己在 PNG 图形中进行舍入。所以,这很可能很重要。
r
ryyst

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

我现在要做的是用 Xcode 创建一个空项目,设置一个全白的 PNG 文件作为图标,并关闭预设的斜角和光泽度。然后,我运行该应用程序并截取主屏幕的屏幕截图。现在,您可以轻松地从该图像创建一个蒙版,您可以在 Photoshop 中使用它。这将使您获得完美的圆角。


请参阅@Agos 答案,使用他提到的文件夹中的 png-masks。
C
Community

应用图标要求更新(截至 2018 年 1 月):

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

保持图标角正方形。系统会自动应用一个使图标角变圆的蒙版。保持背景简单,避免透明。确保您的图标是不透明的,并且不要弄乱背景。给它一个简单的背景,这样它就不会压倒附近的其他应用程序图标。您不需要用内容填充整个图标。


是的,我创建了一个没有圆角的方形图标,并且使用“图标集创建”(在 App Store 中),所有图标都会自动生成。
T
Tibidabo

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

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

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

正如您在下方看到的,160 像素(第一个)的形状(细灰线)有点偏离,而 180 像素的形状看起来还不错。

https://i.stack.imgur.com/VgI6H.png

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

我为主要设计智能对象创建了一个 1026x1026 像素的画布,带有 180 像素的蒙版。我将主智能对象复制 5 次并将它们调整为 1024px、144px、114px、72px 和 57px。我在每个智能对象上放置了一个“新的基于分层的切片”,并根据它们的大小重命名切片(例如 icon-72px)。当我保存艺术品时,我选择“所有用户切片”并 BANG!我有我的应用程序所需的所有图标。


如果您调整图像大小但保持细灰线相同怎么办?答案:它最终会匹配灰线。所以它不是错误的边框半径,而是该边框半径的图标大小......
R
Ruby

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


C
Cameron

您不需要将角半径应用于您的应用程序图标,您只需应用方形图标即可。设备会自动应用圆角半径。


我做到了,但应用程序图标在应用商店的圆角框中显示为方形。请参阅dropbox.com/s/yoeb2q7cy4rjggh/…
A
Andy Jazz

WWDC 2022 带来了好消息!

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

所以,你现在只需要知道输入图标的半径是 180 px。

https://i.stack.imgur.com/GM41k.png