iOS如何设置应用图标和启动图片

251

如何设置图片以便对我的应用程序进行归档和验证?屏幕现在看起来像这样:

输入图像描述

首先,第一个说明是 29pt,但它还说了2x。那么我应该放一个29x29的图像还是一个58x58的图像?其他所有尺寸的图像应该放在哪里?(我知道有比294060更多的尺寸)。

无论如何,我尝试了将一个29x29的png拖到第一个空位,一个40x40拖到第二个空位,以及一个60x60拖到第三个和第四个空位。当我尝试Product->Archive时,我会得到:

/Users/kendon/Documents/iPhone Apps/Sales Tool/Sales Tool/Images.xcassets: 名为"AppIcon"的应用程序图标集没有任何适用内容。


选择应用图标并点击属性检查器,它还显示所需的尺寸为1x的29x29和2x的58x58等。 - Muhammad Adnan
4
您可以使用此网站制作所有应用程序图标:https://makeappicon.com/ - AL̲̳I
36
为什么我们不能在Xcode本身完成这个操作呢?不需要特殊的应用程序或网站,只需要一个大图像,这样就太容易了。这是我在Unity中的做法。 - tsukimi
似乎图标中的图片距离白色背景的边缘太近了,有没有办法让图片变小但保持所需的像素比率不变?这是在使用makeappicon.com后出现的。 - nosh
2
它在iOS 13中不再使用。它已被弃用。 - Manish
14个回答

282

我最近在App Store发现了这个叫做Icon Set Creator的应用程序。它是免费的,没有广告,能够更新到新版本,直观易懂,并且可以为在OSX、iOS和WatchOS中使用的每种图标大小提供完美支持:

使用Icon Set Creator:

  1. 将您的图像拖入视图中
  2. 选择目标平台
  3. 导出图标集文件夹

iconSetCreator

在XCode中:

  1. 导航到Assets.xcassets文件夹
  2. 删除预先存在的 AppIcon
  3. 右键单击 -> 导入 您创建的图标集作为AppIcon,然后完成操作


8
在我研究企业应用程序的应用图标系统时,这对我来说成为了一项很大的资产。值得一提的是,需要在其工作原理上更清晰明了一些。该应用程序并没有明确告诉你新生成的图像的名称或位置。作为一款iOS应用程序,我花了一段时间才意识到该应用程序创建了一个名为“iOS”的文件夹,并将图像保存在其中的另一个名为“Appicon.appiconset”的文件夹内。在准备导入项目时,您应该选择此文件夹。 - Bill Norman
2
完全节省了我的时间...我只用了15分钟就完成了所有事情。 - NduJay
4
好的应用程序。通过应用内购买为作者"买杯咖啡"以表示支持。 - Buzz Moschetti
1
我的两天浪费了。这个工具救了我。 - mtahir08

247

更新:如果你不想手动调整每个图标的大小,可以查看Schmoudi的答案,这样会容易得多。

图标尺寸

图片描述

上面的图片取自Designing for iOS 9。这些尺寸在iOS 10中是相同的

如何设置应用程序图标

在项目导航器中单击 Assets.xcassets,然后选择AppIcon

图片描述

这将给你一个空的应用程序图标集。

图片描述

现在只需从Finder中拖动正确大小(.png格式)的图像到应用程序集中的每个空白处即可。现在应该已经设置好应用程序图标了。

如何创建正确大小的图像

最上面的图片显示了iOS 9中所需的每个点大小的像素大小。然而,即使我没有为未来的iOS版本更新此答案,你仍然可以使用下面的方法确定正确的像素大小。

查看空图像集上每个空白处的点数(pt)。如果图像是1x,则像素与点相同。对于2x,将点数加倍,对于3x,将点数加倍。因此,例如,在上面的第一个空白处(29pt 2x)中,你需要一个58x58像素的图像。

你可以从1024x1024像素的图像开始,然后缩小到正确的大小。你可以自己完成或使用网站和脚本获取正确的大小。搜索“ios app icon generator”或类似的内容。

我认为名称并不重要,只要尺寸正确即可,但一般的命名约定如下:

Icon-29.png      // 29x29 pixels
Icon-29@2x.png   // 58x58 pixels
Icon-29@3x.png   // 87x87 pixels

启动图像

虽然可以使用图像作为启动屏幕,但建议使用启动屏幕故事板文件。这样可以方便地调整大小和方向。请查看此 SO 回答 或以下文档以获得帮助。

有用的文档

此帖中的 Xcode 图像是使用 Xcode 7 创建的。


在XCode 7.2中,XCode不允许你将图像拖放到那些框中。你能帮我解决这个问题吗? - ahitt6345
1
@ahitt6345:我用Xcode 7.2再次测试了一下,它仍然有效。打开Finder并在您拥有的任何文件夹中找到您的图像。然后将它们拖到Xcode中正确的应用程序图标集位置,如上所示。如果您的图像格式不正确,则可能无法正常工作。请使用.png格式。 - Suragch
它们是.png格式,我已经尝试再次拖放,但仍然无法工作。 - ahitt6345
@ahitt6345,看看这个YouTube视频教程。它可能有助于实际操作中的演示。 - Suragch
我也遇到了拖动问题,直到我改变了PNG格式以匹配我要拖动的位置。这是在Xcode 8.3中发生的。 - curt
显示剩余2条评论

25

为了节省时间:

1)你可以在Finder中将应用程序图标图片全部标记并一次性拖入Assets目录,只需将其拖入应用程序图标imageset的一个空槽中即可。当你将拖动悬停在插槽上时,其他几个插槽看起来被选中,当你放下时,它们将一次性填满。请注意,这在XCode 8中有效(我没有尝试过XCode 7),但在XCode 9 beta中还不行。

Dragging into app icon Asset catalog imageset

2) "技术问答QA1686" 苹果文档网站已经为您计算了每个应用图标插槽的尺寸,并以美观的图片形式呈现,同时还包含正确的图像名称约定。

App icon sizes


17

我已经尝试了大部分的方法和其他一些方法,发现https://appicon.co是最简单、最快速、提供最全面的集合。

  1. 将您的图像拖到屏幕上
  2. 点击生成
  3. 打开刚刚下载到您的下载文件夹中的文件

在这里,您可以尝试将整个文件夹拖入Xcode。如果不能:

  1. 双击Assets.xcassets文件夹
  2. 选择所有文件
  3. 将它们拖到Assets.xcassets中
  4. 将其重命名为AppIcon

1
步骤4-7在Xcode 13中有些不同:下载的文件夹名为AppIcons,其中包含一个名为Assets.xcassets的文件夹,在其中包含一个名为AppIcon.appiconset的文件夹,将此文件夹拖入您项目的Assets.xcassets文件夹中并同意“替换”。 - mrzzmr
1
谢谢你! - Johan

12

正确的尺寸如下:

1)58x58

2)80x80

3)120x120

4)180x180


10

我使用一个叫做 Prepo 的工具来生成所有必要的图片尺寸。你只需将图像文件导入该应用程序,它就会输出每个必要的文件并附上适当的名称。

完成这一步骤后,您可以拖曳相应的文件或直接指向您预处理导出的文件夹。


它不支持最新iPad的167x167图标。 - yernarun
当您导出图像时,它实际上会生成167x167。只是在预览窗口中不显示该大小(以及许多其他大小)。 - tiguchi

10

我发现了一个叫做Iconizer的应用。你可以在Github找到它的代码库。Iconizer可以用一张图片生成OS X,iPad,iPhone,CarPlay和Apple Watch的应用图标。

只需将图标拖放到Iconizer中,选择所需平台以及是否要将所有平台生成一个资源目录,然后点击导出即可。

之后,只需在Assets.xcassets中替换(删除并导入)你的AppIcon即可。


我已经尝试过了,1024像素的导出图像比原始图像更大,并且颜色不好。 - zgjie

10

现在设置App图标非常容易,只需访问https://makeappicon.com/上传您的图片,他们将为您发送所有尺寸的App图标(包括手表和iTunes),然后在项目导航器中点击Assets.xcassets,选择AppIcon。现在,您只需要根据要求拖放图标即可。


7

在左侧列表中,右键单击“AppIcon”,然后单击“在查找器中打开” 将会打开一个名为“AppIcon.appiconset”的文件夹。 将所有所需分辨率的图形粘贴到其中。 完成后,所有这些图像将在同一屏幕上可见(您截图中的其中一个)。然后将它们拖到适当的框中。 应用程序图标已添加。 启动图像通过此过程添加到iOS 7及以下版本。 对于iOS 8,将默认创建单独的LaunchScreen.xib文件。


5
我非常喜欢Jordi Bruin制作的Bakery应用程序。
它允许使用表情符号和SFSymbols进行快速原型设计(在这种情况下不适用于App Store!)。
只需将设计拖放到应用程序中,然后再次拖放到资源目录中,而无需手动填写所有尺寸,非常容易上手。

enter image description here


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接