我试图为我的iPhone应用程序创建图标,但不知道如何获得iPhone图标使用的确切半径。我搜索了又搜索教程或模板,但找不到一个。
我确信我只是一个白痴,但你如何让圆角与你的图标从Illustrator或Photoshop完全正确?
编辑:
Retina iPad的半径是多少?
iphone为你圆角,你所需要的是一个方形的57x57 png图标,u应该是好的
57 x 57像素图标的圆角半径为9像素。
你可以为你的应用程序制作四个图标(到今天为止),它们都可以有不同的外观-不一定基于512x512的图像。
如果你确实创建了一组自定义图标,你可以在你的信息中将UIPrerenderedIcon选项设置为true。Plist文件,它不会添加光泽效果,但它会在它下面放置一个黑色背景,仍然用这些角半径圆角图像的角落,所以如果任何图标的角半径更大,那么它将在边缘/角落周围显示黑色。
UIPrerenderedIcon
编辑:查看来自@devin-g-rhode的评论,你可以看到任何未来的图标大小都应该有一个1:6.4的角半径与图标大小的比率。https://stackoverflow.com/a/29550364/396005也有一个很好的答案,它有SDK中用于圆角图标的图像掩码文件的位置
1:6.4
要添加与视网膜兼容的文件,请使用相同的文件名并添加“@2x”。所以如果我有一个72x72的图标文件icon. PNG,我也会添加一个114x114的PNG文件icon@2x.png到项目/目标,Xcode会自动使用它作为视网膜显示器上的图标。如果操作正确,您可以在应用程序目标的Summary页面上看到这一点。这同样适用于您的发射图像。使用launch.png的320x480和launch@2x.png的640x960。
如果不考虑描边,57x57图标的准确半径实际上是10px。
我从iconreference中得到这个信息。
在即将发布的iOS 7中,你会注意到“standard"图标半径增加。所以试着按照苹果和我给出的答案去做吧。
对于120px的图标,在iOS 7上最能代表其形状的公式是下面的超椭圆:
|x/120|^5 + |y/120|^5 = 1
显然,您可以用所需的图标大小更改120数字以获得相应的函数。
120
原始
你应该提供一个有90°角的图像(这是很重要的 避免裁剪图标的边角——ios会为你这样做 应用圆角蒙版) (苹果公司的文档) < / p >
最好的方法是完全不要把图标的边角弄圆。如果你将图标设置为方形图标,iOS会自动用预定义的掩码覆盖图标,并设置适当的圆角。
如果你手动为图标设置圆角,它们在这个或那个设备上看起来可能会坏掉,因为在不同的iOS版本之间,圆角蒙版会有轻微的变化。有时候你的图标会稍微大一点,有时候(唉)稍微小一点。使用方形图标将使你摆脱这种负担,你将确保你的应用程序有一个最新的和好看的图标。
这种方法适用于各种图标大小(iPhone/iPod/iPad/retina),也适用于iTunes图像。我曾多次采用这种方法,如果你愿意,我可以发布一个使用原生方形图标的应用程序链接。
编辑
为了更好地理解这个答案,请参考官方关于iOS图标的苹果文档。在这个页面中,它清楚地说明了一个正方形图标将自动获得这些东西时,显示在iOS设备上:
所以,你可以实现任何你想要的效果,只需绘制一个普通的正方形图标,并在其中填充内容。最终的角半径将与这里的其他答案相似,但这永远无法保证,因为这些数字不是苹果iOS官方文档的一部分。他们让你画方形图标,所以…为什么不呢?
当用Photoshop设计我的应用程序图标时,我发现没有整数角半径适合设备的掩码完全。
我现在要做的是用Xcode创建一个空项目,设置一个完全白色的PNG文件作为图标,并关闭预设的斜角&光泽。然后,我运行应用程序,并在主屏幕上截屏。现在,你可以很容易地从这张图片创建一个蒙版,你可以在Photoshop中使用。这样可以得到完美的圆角。
在尝试了这篇文章中的一些答案后,我咨询了Louie Mantia(前Apple、Square和Iconfactory设计师),到目前为止,这篇文章中的所有答案都是错误的(或者至少是不完整的)。苹果从57px的图标开始,半径为10,然后在此基础上放大或缩小。因此,您可以使用10/57 x new size计算任何图标大小的半径(例如10/57 x 114给出20,这是一个114px图标的合适半径)。这里列出了最常用的图标、正确的命名约定、像素尺寸和角半径。
10/57 x new size
10/57 x 114
另外,正如在其他回答中提到的,你实际上并不想裁剪二进制文件中使用的任何图像或提交给苹果。这些都应该是方形的,没有任何透明度。苹果会在适当的上下文中自动屏蔽每个图标。
了解以上内容是很重要的,但是,对于图标在应用程序UI中的使用,你必须在代码中应用蒙版,或在photoshop中预渲染。这在为网站和其他宣传材料创作艺术品时也很有帮助。
更多阅读:
Neven Mrgan对额外的图标大小和其他设计考虑因素:Ios应用图标大小
bjano的Marc Edwards关于在Photoshop中创建圆形矩形的不同选项以及为什么它很重要:绘制的
苹果关于图标大小和设计考虑因素的官方文档:图标和图像
更新:
我在Photoshop CS6中做了一些测试,似乎小数点后3位的精度足以得到完全相同的向量(至少在Photoshop中以3200%缩放显示)。圆角矩形工具有时会将输入四舍五入到最接近的整数,但您可以看到90和89.825之间的显著差异。有几次圆角矩形工具没有四舍五入,实际上在小数点后显示了多个数字。不知道这里发生了什么,但它肯定使用并存储了输入的更精确的数字。
总之,我更新了上面的列表,只包括小数点后的3位数字(之前有13位!)在大多数情况下,可能很难区分一个半径为90px的512px透明图标和一个半径为89.825的透明图标,但圆角的反锯齿肯定会略有不同,在某些情况下可能会可见,特别是当苹果在代码或其他方面应用了第二个更精确的掩码时。
dbarnard的答案有公式来计算正确的半径,但因为你是在寻找模板,所有的蒙版和覆盖都可以在这个目录中找到:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator5.1.sdk/System/Library/PrivateFrameworks/MobileIcons.framework
(路径是最新版本的XCode。对于旧版本,它可能在/Developer/)内部。
正如其他人所指出的,你不应该自己屏蔽它们,但你可以使用这些来检查你的图标在屏蔽后的样子。
(这一发现归功于Neven Mrgan IIRC)
我看到很多关于“px”的讨论,但没有人谈论百分比,这是你想要计算的固定数字。
22.37%是这里的关键百分比。将上面提到的任何图像大小乘以0.2237,您将得到该尺寸的正确像素半径。
在iOS 8之前,苹果使用的舍入较少,为15.625%。
编辑:感谢@Chris Prince评论iOS 8/9/10的半径百分比:22.37%
有大量投票的两个完全矛盾的答案一个是160px@1024另一个是180px@1024。女巫呢?
我做了一些实验,我认为这是180px@1024,所以drbarnard是正确的。
我从App Store下载了iTunes U图标,尺寸为175x175px,我在photoshop中将其放大到1024px,并在上面放置两个形状,一个半径为160px,另一个半径为180px。
正如你可以看到下面的形状(细灰线)160px(第一个)是有点偏离,而一个180px看起来很好。
这是我现在在PhotoShop中所做的:
我尝试了228px半径为1024x1024,它工作了:)
就像其他人说的那样,你不想拐弯抹角。你想要发布平面(无图层或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/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/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映像:
AppIconMask@3x~iphone.png
你可以用它来测试图标,看看它被蒙面后是否看起来正常。但是,不要拐弯抹角。如果你这样做了,当苹果再次改变这些面具时,你就会有伪影。
以前对这个问题的所有答案现在都过时了。至少从2015年5月开始,苹果要求你提供没有四舍五入的方形图标:
系统应用一个掩码,自动使图标圆角。
https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/
你不需要应用圆角半径到你的应用程序图标,你可以只应用方形图标。设备自动施加角半径。
人们争论角半径会稍微增加,但事实并非如此。
从这个博客:
苹果实体产品的一个“秘密”是它们避免切线(半径在某一点与直线相遇),并使用所谓的曲率的连续性来制作它们的表面。
你< >强不需要< / >强应用圆角半径的图标为iOS。只需要提供方形图标。但如果你仍然想知道如何,实际的形状被称为< >强Squircle < / >强,下面是公式:
https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
保持图标角为方形。系统应用一个掩码自动圆角图标。 保持背景简单,避免透明。确保你的图标是不透明的,不要使背景杂乱。给它一个简单的背景,这样它就不会盖过附近的其他应用程序图标。你不需要用内容填满整个图标。
保持图标角为方形。系统应用一个掩码自动圆角图标。
保持背景简单,避免透明。确保你的图标是不透明的,不要使背景杂乱。给它一个简单的背景,这样它就不会盖过附近的其他应用程序图标。你不需要用内容填满整个图标。
WWDC 2022带来了好消息!
现在,Xcode 14根据单个输入图标1024x1024 pix (Single Size)自动生成所有所需的应用程序图标大小。然而,如果你需要一个老派的方法,从下拉菜单中选择All Sizes。
Single Size
All Sizes
所以,你现在要知道的是输入图标的半径是180像素。