在Affinity Designer中导出iOS图标大小


10

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

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

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

那是11种不同的图标尺寸!

我确实发现整个带有切片配置概念的Export Persona都非常出色,尤其是因为您可以将切片应用于单个图层(例如,对于按钮的普通版和按版)。是否有某种方法可以使用相同的工具来完成特定的出口规模?

Answers:



4

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

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

前四个尺寸(以磅为单位)需要1倍,2倍和3倍版本(如果您有未来的需求,以及覆盖iPhone 6 Plus)。

您会在网上和Ap​​ple网站上看到的某些尺寸适用于iOS 6及以下版本(57×57等)。如果您定位的是iOS 7及更高版本,则不需要它们。

这是我创建的Photoshop模板:

iOS图标模板

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

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

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

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

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


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


哇,很好的信息,谢谢!尽管我不确定如何在Affinity中进行操作。您知道如何在Affinity中制作类似的模板吗?
马特·麦克

我在Photoshop中使用切片来剪切和导出所需的区域。我相信Affinity具有相同的名称。(我已经编辑了答案以提供更多信息。)
Marc Edwards

嗯,是的,它确实具有切片功能,这很棒。您的photoshop模板中是否有可以自动复制和调整图像大小的内容?就像您创建的76pt图像一样,其余图像会自动创建吗?还是必须制作每个版本,然后使用切片导出?
Matt Mc

是的,我使用一些操作和脚本来调整大小。我的完整工作流程记录在这里:bjango.com/articles/appdesignworkflow 我张贴了屏幕截图的模板可以在这里找到:bjango.com/articles/actions
Marc Edwards


2

我刚刚在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. 转到“导出角色”,切换到“切片”面板,然后选择2x和3x分辨率(对于iPad为1x)
  9. 在列表中选择所有画板层(“ 29pt”,“ 40pt”等),然后单击面板底部的“导出所选”。

亲和力会在每个选定的分辨率下创建所有图标大小,因此您获得的图标可能会超出实际需要。但是它们被巧妙地命名为“ 29pt@2x.png”等,因此在您的Xcode资产目录中分配它们确实很容易。

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


1

马克·爱德华兹(Marc Edwards)对于需要创建什么尺寸的图标,使用切片的方式以及与Photoshop资源的良好链接提供了很好的答案。但是,我仍在寻找一种解决方案,专门针对如何在Affinity Designer中以多种尺寸导出。

最终,我意识到使用“放置图像”工具可以做到这一点。将您的图标放在一个文件中,然后在另一个“模板”文件中,可以使用“放置图像”工具来创建可拉入图标文件的多个图层。这些层中的每一层都可以转换为命名切片。

此处的缺点是需要创建每个图层并将其指向您的图标文件,因此这似乎很乏味。但是,一旦安装到位,对基本文件进行任何编辑后,您都可以轻松地重新导出所有内容。


1
我还没有做任何测试,但是要小心,这种方法并不能最终实现更大尺寸的位图缩放资产。如果是这样,它们的质量将不如缩放为矢量/图层效果。您不能只在Affinity Designer中使用切片?如果有时间,我会进行测试。
马克·爱德华兹

1
@MarcEdwards的确,我没有检查结果是否按矢量或位图缩放。Affinity Designer中的切片定义了要导出的特定区域。他们无法根据我的判断来扩展其输出。如果您要检查,我确实对“放置图像”方法进行了测试:pixelapse.com/s/RGCQYVQR7DHTYC6KC
Matt Mc
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.