我正在尝试为我的iPhone应用程序创建图标,但不知道如何获得iPhone图标使用的确切半径.我搜索并搜索了一个教程或模板但找不到.
我确定我只是一个白痴,但是如何使用Illustrator或Photoshop中的图标完全正确地获得圆角？
编辑:
Retina iPad的半径是多少？
你可以为你的应用制作四个图标(截至今天),它们都可以有不同的外观 - 不一定基于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/ask/17360801/也有一个非常好的答案,其中包含SDK中用于舍入图标角的图像掩码文件的位置
要添加与视网膜兼容的文件,请使用相同的文件名并添加"@ 2x".因此,如果我有一个名为icon.png的72x72图标文件,我还会将一个名为icon@2x.png的114x114 PNG文件添加到项目/目标中,Xcode会自动将其用作视网膜显示屏上的图标.如果您已正确完成,则可以在应用程序目标的"摘要"页面上看到此操作.同样适用于您的启动图像.使用launch.png(320x480)和launch@2x.png(640x960).
在这篇文章中尝试了一些答案之后,我咨询了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
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图标大小
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,代码或其他方式应用了第二个更精确的掩码.
我看到很多"px"的讨论,但没有人说的是你想要计算的固定数字的百分比
15.625%是这里的关键百分比.将上面提到的任何图像尺寸乘以0.15625,您将获得该尺寸的正确像素半径.
编辑:感谢@Chris Prince评论iOS 8/9/10半径百分比:22.37%
随着即将发布的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设备上显示时,方形图标将自动获取这些内容:
圆角
投下阴影
反光光泽(除非你防止光泽效果)
因此,您可以实现您想要的任何效果,只需绘制一个普通的方形图标并在其中填充内容.最后一个角落半径将类似于其他答案所说的内容,但这绝不会得到保证,因为这些数字不是iOS官方文档的一部分.他们要求你画方形图标,所以......为什么不呢？
dbarnard的答案有计算正确半径的公式,但由于您在寻找模板,因此可以在此目录中找到所有掩码和叠加:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator5.1.sdk/System/Library/PrivateFrameworks/MobileIcons.framework
(路径适用于最新版本的XCode.对于旧版本,它可能位于/ Developer /中).
正如其他人所指出的那样,你不应该自己掩盖它们,但是你可以使用它们来检查你的图标在被屏蔽后的外观.
(此调查结果归功于Neven Mrgan IIRC)
人们争论角落半径略有增加,但实际情况并非如此.
来自这个博客:
Apple的物理产品的"秘密"在于它们避免了相切(半径在一个点处与一条线相交)并且使用所谓的曲率连续性来制作它们的表面.
您无需将角半径应用于iOS的图标.只需提供方形图标.但是如果你仍然想知道如何,实际的形状叫做Squircle,下面是公式:
57 x 57像素图标的圆角半径为9像素.
正如其他人所说,你不想绕过你的角落.您想要平面(没有图层或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再次更换这些面具时,你会有文物.
如果不考虑笔划,57x57图标的确切半径实际为10px.
我从iconreference获取此信息.
此问题的所有先前答案现已过时.自2015年5月以来,Apple要求您提供没有舍入的方形图标:
保持图标角落正方形.系统应用自动围绕图标角的遮罩.
https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/
京公网安备 11010802040832号 | 京ICP备19059560号-6 