在 Affinity Designer 中导出 iOS 图标大小

平面设计 图标 出口 IOS 亲和力设计师
2022-01-04 00:39:08

尽管 Affinity Designer 具有非常有用的 @1x、@2x 和 @3x 导出功能,但我想知道是否有一种方法可以导出 iOS 图标所需的各种尺寸?

我在这里找到了所需大小的简洁网格,我将以列表格式复制:

  • 1024x1024
  • 180x180
  • 152x152
  • 120x120
  • 87x87
  • 80x80
  • 76x76
  • 58x58
  • 57x57
  • 40x40
  • 29x29

那是 11 种不同的图标大小!

我确实发现带有切片配置概念的整个导出角色非常出色,尤其是因为您可以将切片应用于各个层(例如,对于按钮的正常版本和按下版本)。是否有某种方法可以使用相同的工具来执行特定大小的导出?

4个回答

由于要求不时更改,因此参考 Apple 的指南总是一个好主意。在我的网站上有一个我开发的Affinity Designer 模板,它导出通用应用程序当前所需的 18 种尺寸。

iOS App 图标模板预览

它看起来像一个庞大而复杂的列表,但实际上您只需要构建 5 种尺寸:

  • 29点
  • 49pt
  • 60pt
  • 76pt
  • 1024像素

前四种尺寸(以点列出)需要 1×、2× 和 3× 版本(如果你是未来的证明,以及覆盖 iPhone 6 Plus)。

您将在网上和 Apple 网站上看到的一些尺寸适用于 iOS 6 及更低版本(57×57 等)。如果您的目标是 iOS 7 及更高版本,则不需要它们。

这是我创建的 Photoshop 模板:

iOS 图标模板

我设置了切片来导出每个图标以及调整大小和重新导出的操作,所以我最终得到:

  • 图标-29.png
  • 图标-29@2x.png
  • 图标-29@3x.png
  • 图标40.png
  • 图标-40@2x.png
  • 图标-40@3x.png
  • 图标-60.png
  • 图标-60@2x.png
  • 图标-60@3x.png
  • 图标-76.png
  • 图标-76@2x.png
  • 图标-76@3x.png

并非所有这些尺寸都需要,但将来可能会需要。从 4 种基本尺寸开始,构建图标变得更加容易。

我在 Photoshop 中使用切片来导出每个图标所需的不同区域。请注意,您提供的图标不应该有任何透明区域——颜色应该一直延伸到角落。iOS 会屏蔽图标,因此您不必担心。

您可以使用 Affinity 的切片功能做同样的事情吗?


更新:我为 Affinity Designer、Sketch、Photoshop 和 Illustrator 创建了一些开源应用程序图标模板他们可能值得考虑。

您可以在 Affinity Designer 中执行此操作,切片可以使用后缀缩放其输出,这是使用“w”后缀导出的 iOS 图标:

在此处输入图像描述

我刚刚在 Affinity Designer 中找到了执行此操作的好方法。虽然它不是完全自动化的。我将解释如何获得 iPhone 当前所需的三种图标尺寸(29pt、40pt、60pt),每种尺寸都有 2x 和 3x 分辨率:

  1. 创建一个新文档,将单位设置为“点”,页面大小设置为 29x29,并在对话框中选中“创建画板”
  2. 在画板中粘贴和定位您的作品
  3. 在“图层”面板中将画板重命名为“29pt”(可选)
  4. 右键单击画板并选择“复制”
  5. 拖动新的画板(这样你可以并排看到),然后将其重命名为“40pt”(同样,此步骤是可选的)
  6. 使用变换面板将新图层的大小调整为 40x40pt - 您的作品将自动放大
  7. 重复步骤 4-6 以创建一个 60pt 的画板(如果需要,为 iPad 加上 76pt 和 83.5pt)
  8. 转到 Export Persona,切换到 Slices 面板并选择 2x 和 3x 分辨率(加上 iPad 的 1x)
  9. 选择列表中的所有画板图层(“29pt”、“40pt”等),然后单击面板底部的“导出所选”。

Affinity 将在每个选定的分辨率下创建所有图标大小,因此您可能会获得比实际需要更多的图标。但是它们被整齐地命名为“29pt@2x.png”等,因此在您的 Xcode 资产目录中分配它们真的很容易。

一个警告:当您转到导出角色时,Affinity 会自动为每个画板创建一个导出切片(即上面带有尺寸标签的蓝框)。我发现有时这些切片的大小会相差几个像素。似乎是 AD 中的一个错误。不过,您可以通过拖动切片的角来轻松修复它。