本文共 7079 字，大约阅读时间需要 23 分钟。

本文翻译自：

I'm trying to create the icon for my iPhone app, but don't know how to get the exact radius that the iPhone's icons use. 我正在尝试为我的iPhone应用程序创建图标，但不知道如何获得iPhone图标使用的确切半径。 I've searched and searched for a tutorial or a template but can't find one. 我搜索并搜索了一个教程或模板但找不到。

I'm sure that I'm just a moron, but how do you get the rounded corners exactly right with your icon from Illustrator or Photoshop? 我确定我只是一个白痴，但是如何使用Illustrator或Photoshop中的图标完全正确地获得圆角？

Edit: 编辑：

What's the radius for the Retina iPad? Retina iPad的半径是多少？

#1楼

参考：

#2楼

After trying some of the answers in this post, I consulted with Louie Mantia (former Apple, Square, and Iconfactory designer) and all the answers so far on this post are wrong (or at least incomplete). 在这篇文章中尝试了一些答案之后，我咨询了Louie Mantia（前Apple，Square和Iconfactory设计师），到目前为止这篇文章的所有答案都是错误的（或者至少是不完整的）。 Apple starts with the 57px icon and a radius of 10 then scales up or down from there. Apple以57px图标开始，半径为10，然后从那里向上或向下扩展。 Thus you can calculate the radius for any icon size using 10/57 x new size (for example 10/57 x 114 gives 20, which is the proper radius for a 114px icon). 因此，您可以使用10/57 x new size计算任何图标大小的半径（例如，10/ 10/57 x 114给出20，这是114px图标的正确半径）。 Here is a list of the most commonly used icons, proper naming conventions, pixel dimensions, and corner radii. 以下是最常用的图标列表，正确的命名约定，像素尺寸和角半径。

1. Icon1024.png - 1024px - 179.649 Icon1024.png - 1024px - 179.649
2. Icon512.png - 512px - 89.825 Icon512.png - 512px - 89.825
3. Icon.png - 57px - 10 Icon.png - 57px - 10
4. Icon@2x.png - 114px - 20 Icon@2x.png - 114px - 20
5. Icon-72.png - 72px - 12.632 Icon-72.png - 72px - 12.632
6. Icon-72@2x.png - 144px - 25.263 Icon-72@2x.png - 144px - 25.263
7. Icon-Small.png - 29px - 5.088 Icon-Small.png - 29px - 5.088
8. Icon-Small@2x.png - 58px - 10.175 Icon-Small@2x.png - 58px - 10.175

Also, as mentioned in other answers, you don't actually want to crop any of the images you use in the binary or submit to Apple. 此外，如其他答案所述，您实际上并不想裁剪您在二进制文件中使用的任何图像或提交给Apple。 Those should all be square and not have any transparency. 那些都应该是正方形而没有任何透明度。 Apple will automatically mask each icon in the appropriate context. Apple将在适当的上下文中自动屏蔽每个图标。

Knowing the above is important, however, for icon usage within app UI where you have to apply the mask in code, or pre-rendered in photoshop. 但是，了解上述内容非常重要，因为您必须在应用程序UI中使用图标，您必须在代码中应用蒙版，或在photoshop中预先渲染。 It's also helpful when creating artwork for websites and other promotional material. 在为网站和其他宣传材料创建图稿时，它也很有用。

Additional reading: 补充阅读：

Neven Mrgan on additional icon sizes and other design considerations: Neven Mrgan关于其他图标大小和其他设计注意事项：

Bjango's Marc Edwards on the different options for creating roundrects in Photoshop and why it matters: Bjango的Marc Edwards介绍了在Photoshop中创建圆形的不同选项及其重要性：

Apple's official docs on icon size and design considerations: Apple关于图标大小和设计考虑因素的官方文档：

Update: 更新：

I did some tests in Photoshop CS6 and it seems as though 3 digits after the decimal point is enough precision to end up with the exact same vector (at least as displayed by Photoshop at 3200% zoom). 我在Photoshop CS6中做了一些测试，似乎小数点后面的3位数字足够精确，最终得到完全相同的矢量（至少在Photoshop上以3200％变焦显示）。 The Round Rect Tool sometimes rounds the input to the nearest whole number, but you can see a significant difference between 90 and 89.825. Round Rect Tool有时会将输入舍入为最接近的整数，但您可以看到90和89.825之间的显着差异。 And several times the Round Rectangle Tool didn't round up and actually showed multiple digits after the decimal point. 并且有几次Round Rectangle Tool没有向上舍入，实际上在小数点后显示多个数字。 Not sure what's going on there, but it's definitely using and storing the more precise number that was entered. 不知道那里发生了什么，但它肯定使用和存储输入的更精确的数字。

Anyhow, I've updated the list above to include just 3 digits after the decimal point (before there were 13!). 无论如何，我已经更新了上面的列表，只包括小数点后的3位数（在有13位之前！）。 In most situations it would probably be hard to tell the difference between a transparent 512px icon masked at a 90px radius and one masked at 89.825, but the antialiasing of the rounded corner would definitely end up slightly different and would likely be visible in certain circumstances especially if a second, more precise mask is applied by Apple, in code, or otherwise. 在大多数情况下，可能很难分辨出半径为90px的透明512px图标与89.825处掩盖的透明512px图标之间的区别，但是圆角的抗锯齿肯定会略有不同，并且在某些情况下可能会特别明显。如果Apple，代码或其他方式应用了第二个更精确的掩码。

#3楼

The answer from dbarnard has the formula to calculate the correct radius, but since you were looking for the templates, all the masks and overlays can be found in this directory: dbarnard的答案有计算正确半径的公式，但由于您在寻找模板，因此可以在此目录中找到所有掩码和叠加：

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

(path is for recent versions of XCode. For older version it will probably be inside /Developer/). （路径适用于最新版本的XCode。对于旧版本，它可能位于/ Developer /中）。

As others have noted, you should NOT mask them yourself, but you can use these to check how your icons will look once masked. 正如其他人所指出的那样，你不应该自己掩盖它们，但是你可以使用它们来检查你的图标在被屏蔽后的外观。

(credits for this finding goes to Neven Mrgan IIRC) （此调查结果归功于Neven Mrgan IIRC）

#4楼

I see a lot of "px" discussion but no one is talking percentages which is the fixed number you want to calculate by. 我看到很多“px”讨论，但没有人会说百分比，这是你想要计算的固定数字。

22.37% is the key percentage here. 22.37％是这里的关键百分比。 Multiply any of the image sizes mentioned above in by 0.2237 and you will get the correct pixel radius for that size. 将上面提到的任何图像尺寸乘以0.2237，您将获得该尺寸的正确像素半径。

Before iOS 8, Apple used less rounding, using 15.625%. 在iOS 8之前，Apple使用较少的舍入，使用15.625％。

EDIT : Thanks @Chris Prince for commenting with the iOS 8/9/10 radius percentage: 22.37% 编辑 ：感谢@Chris Prince评论iOS 8/9/10半径百分比：22.37％

#5楼

There are two totally conflicting answers with large number of votes one is 160px@1024 the other is 180px@1024. 有两个完全冲突的答案 ，大量的票数，一个是160px @ 1024，另一个是180px @ 1024。 So witch one? 女巫一个？

I ran some experiments and I think that it is 180px@1024 so drbarnard is correct. 我做了一些实验，我认为它是180px @ 1024所以drbarnard是正确的。

I downloaded iTunes U icon from the App Store it's 175x175px I upscaled it in photoshop to 1024px and put two shapes on it, one with 160px radius and one with 180px. 我从App Store下载了iTunes U图标，它是175x175px，我将它在photoshop中升级到1024px，并在其上放置了两个形状，一个半径为160px，另一个为180px。

As you can see below the shape (thin gray line) with 160px (the 1st one) is a bit off whereas the one with 180px looks just fine. 如下所示，160px（第一个）的形状（细灰线）有点偏，而180px的形状看起来很好。

This is what I do now in PhotoShop: 这就是我现在在PhotoShop中所做的事情：

1. I create a canvas sized 1026x1026px with a 180px mask for main design Smart Object . 我为主设计智能对象创建了一个尺寸为1026x1026px且带有180px掩模的画布。
2. I duplicate the main Smart Object 5 times and resize them to 1024px, 144px, 114px, 72px and 57px. 我复制了主要的智能对象5次，并将它们调整为1024px，144px，114px，72px和57px。
3. I put a "New layered Based Slice" on each Smart Objects and I rename slices according to their size (eg icon-72px). 我在每个智能对象上放了一个“新的基于分层的切片”，我根据它们的大小重命名切片（例如icon-72px）。
4. When I save the artwork I select "All User Slices" and BANG! 当我保存艺术品时，我选择“所有用户切片”和BANG！ I have all icons necessary for my app. 我有我的应用程序所需的所有图标。

#6楼

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

转载地址：http://jwjnb.baihongyu.com/