首页 文章

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

提问于
浏览
286

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

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

Edit:

Retina iPad的半径是多少?

16 回答

  • 326

    你可以为你的应用制作四个图标(截至今天),它们都可以有不同的外观 - 不一定基于512x512图像 .

    • 512x512图标的圆角半径= 80 (iTunesArtwork)

    • 角点半径为1024x1024图标= 180 (iTunesArtwork Retina

    • 57x57图标的圆角半径= 9 (iPhone / iPod Touch)
      _119_角落半径为114x114图标= 18 (iPhone / iPod Touch Retina

    • 72x72图标的圆角半径= 11 (iPad)

    • 角落半径为144x144图标= 23 (iPad Retina

    如果你确实创建了一组自定义图标,你可以在info.plist文件中将 UIPrerenderedIcon 选项设置为true,它不会添加光泽效果,但它会在它下面放置一个黑色背景,并且仍然围绕着这些角落的图像角落半径所以如果任何图标上的角半径大于那么它将在边/角周围显示黑色 .

    Edit: 请参阅@ devin-g-rhode的评论,您可以看到任何未来的图标大小都应该具有角半径与图标大小的 1:6.4 比 . https://stackoverflow.com/a/29550364/396005还有一个非常好的答案,它具有SDK中用于舍入图标角的图像掩码文件的位置

    要添加与视网膜兼容的文件,请使用相同的文件名并添加“@ 2x” . 因此,如果我有一个名为icon.png的72x72图标的文件,我还会将一个名为icon@2x.png的114x114 PNG文件添加到项目/目标中,Xcode会自动将其用作视网膜显示屏上的图标 . 如果您已正确完成,则可以在应用程序目标的“摘要”页面上看到此操作 . 这同样适用于您的启动图像 . 使用launch.png(320x480)和launch@2x.png(640x960) .

  • 29

    在尝试了这篇文章中的一些答案之后,我咨询了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中预先渲染 . 在为网站和其他宣传材料创建艺术作品时,它也很有用 .

    Additional reading:

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

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

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

    Update:

    我在Photoshop CS6中做了一些测试,似乎小数点后面的3位数就足够精确到达完全相同的矢量(至少在Photoshop中以3200%变焦显示) . Round Rect Tool有时会将输入舍入为最接近的整数,但您可以看到90和89.825之间的显着差异 . 有几次Round Rectangle Tool没有向上舍入,实际上在小数点后显示多位数 . 不知道那里发生了什么,但它肯定使用和存储输入的更精确的数字 .

    无论如何,我已经更新了上面的列表,只包括小数点后的3位数字(在有13位之前!) . 在大多数情况下,可能很难分辨出在90像素半径下屏蔽的透明512像素图标与屏蔽在89.825处的一个透明512像素图标之间的区别,但是圆角的抗锯齿肯定会略微不同,并且在某些情况下可能会显而易见 . 如果Apple,代码或其他方式应用了第二个更精确的掩码 .

  • 16

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

    15.625% 是这里的关键百分比 . 将上面提到的任何图像尺寸乘以0.15625,您将获得该尺寸的正确像素半径 .

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

  • 8

    重要:iOS 7图标方程式

    随着即将发布的iOS 7,您会注意到“标准”图标半径已经增加 . 因此,尝试按照Apple和我的建议做这个答案 .

    看来,对于120px图标,在iOS 7上最能代表其形状的公式是以下超椭圆:

    |x/120|^5 + |y/120|^5 = 1
    

    显然,您可以使用所需的图标大小更改 120 数字以获得相应的功能 .

    Original

    你应该提供一个具有90°角的图像(重要的是避免裁剪图标的角落 - iOS在应用转角遮罩时为你做的)(Apple文档)

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

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

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

    Edit

    为了更好地理解这个答案,请参阅官方Apple documentation about iOS icons . 在此页面中明确指出,当在iOS设备上显示时,方形图标将自动获取这些内容:

    • 圆角

    • 投影

    • 反光光泽(除非你防止光泽效果)

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

  • 6

    dbarnard的答案有计算正确半径的公式,但由于您正在寻找模板,因此可以在此目录中找到所有掩码和叠加:

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

    (路径适用于最新版本的XCode . 对于旧版本,它可能位于/ Developer /中) .

    正如其他人所指出的那样,你不应该自己掩盖它们,但是你可以使用它们来检查你的图标在被屏蔽后的外观 .

    (这个发现的信用归Neven Mrgan IIRC所有)

  • 3

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

    来自this blog

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

    enter image description here

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

    enter image description here

  • 5

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

  • 2

    正如其他人所说,你不想绕过你的角落 . 您想要平面(没有图层或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 图片:

    AppIconMask@3x~iphone.png

    您可以将其用于 test your icon ,以查看它被屏蔽后是否正常 . 但是, don't round your corners . 如果这样做,当Apple再次更改这些掩码时,您将拥有工件 .

  • 7

    如果不考虑笔划,57x57图标的确切半径实际为10px .

    我从iconreference获得此信息 .

  • 4

    此问题的所有先前答案现已过时 . 自2015年5月起,Apple要求您提供没有舍入的方形图标:

    保持图标角落方块 . 系统应用自动围绕图标角的蒙版 .

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

  • 275

    使用Photoshop设计我的应用程序图标时,我发现没有整数转角半径完全适合设备的蒙版 .

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

  • 0

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

  • 5

    two totally conflicting answers 有大量票数,一个是160px @ 1024,另一个是180px @ 1024 . 女巫一个?

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

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

    正如你在下面看到的那样,160px(第一个)的形状(细灰线)有点偏,而180px的形状看起来很好 .

    shape with 160px radius

    enter image description here

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

    • 我为主设计 Smart Object 创建了一个大小为 1026x1026px with a 180px 的画布 .

    • 我复制了主智能对象5次,并将其大小调整为1024px,144px,114px,72px和57px .

    • 我在每个智能对象上放了一个"New layered Based Slice",我根据它们的大小重命名切片(例如icon-72px) .

    • 当我保存艺术品时,我选择了"All User Slices"和BANG!我有我的应用程序所需的所有图标 .

  • 2

    我为1024x1024尝试了228px半径,它工作了:)

  • 0

    您无需将角半径应用于应用图标,只需应用方形图标即可 . 设备自动应用转角半径 .

  • 28

    更新(截至2018年1月)App Icon要求:


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

    包括:

    保持图标角落方块 . 系统应用自动围绕图标角的蒙版 .

    保持背景简单,避免透明度 . 确保您的图标不透明,并且不会使背景混乱 . 给它一个简单的背景,这样它就不会压倒附近的其他应用程序图标 . 您不需要使用content.and填充整个图标

相关问题