看到设计工具发展以适应现代需求总是令人高兴的。让我们来看一个例子：图像导出。设计师和开发人员花费大量时间导出图像。设计工作通常在专为设计的软件中进行，然后导出这些设计中的资产，以便在其他地方构建该设计时使用。
高密度显示屏使这个过程变得有些复杂。移动和 Web 开发人员现在需要生成多种分辨率的图像资产，以适应不同类型的屏幕。在 Web 上，这是一项特别重要的任务，对 Web 性能至关重要。
像这样的图形（通过 imgix）很好地说明了这个概念
我们无需在此深入探讨响应式图像的所有 HTML 语法可能性。picturefill 首页对此进行了很好的介绍。相反，让我们假设我们将使用响应式图像执行最基本的操作，即仅通过 srcset 提供 1x 和 2x 版本。
<img src="example.png"
srcset="[email protected] 2x"
alt="example">同样的事情也可能 在 CSS 中 实现。
现在问题是：我们如何获得这两个不同版本的图像？过去，我们可能需要在设计软件中手动调整大小并逐个导出以获得所需内容。
这就是我的意思：很高兴看到设计软件发展到我们不再需要那样做了！让我们看几个例子。
从 Adobe Photoshop 导出
假设我们设计了一个需要这两种尺寸的东西
如果我们转到**文件 > 导出为…**，我们将看到以下内容（在 Creative Cloud 2017 版本中）
这使我们有机会在实际保存之前调整导出格式、大小等。这也是我们可以利用机会告诉 Photoshop 导出多个版本的地方。我们可以通过单击“+”并选择所需选项来请求 2x 版本。
请记住，Photoshop 通常用于处理光栅/位图图形，因此放大可能不是一个好主意（质量损失）。相反，您的设计文档可能以 2x 开始，然后您将以 1x（对于“2x”）和 0.5x（对于“1x”）导出。
当您单击**导出全部…**时，Photoshop 将一起导出它们。
您并不总是希望在 Photoshop 中导出整个文档。如果您只对导出特定图层感兴趣，请注意所有这些相同选项都适用于该图层，因此您可以通过图层面板进入导出屏幕。
从 Adobe Illustrator 导出
Illustrator 的导出可以理解地类似，但同时也更复杂。以一种好的方式！等效项在这里是**文件 > 导出 > 导出为屏幕…** 这使我们有机会导出整个文档并拥有与我们在 Photoshop 中看到的相同的多文件导出选项。
但也要注意“资产”选项卡。这使我们能够导出文档中任何我们想要导出的部分。可以是任何东西。单个对象或任何对象的组合。您可以在新的资产导出面板中定义这些对象。
您可以直接从该面板导出（方便！）或者，下次您转到**文件 > 导出 > 导出为屏幕…**时，您在那里设置的所有内容都将可用。
Adobe 还有一个有趣的演示 GIF
从 Sketch 导出
Sketch 始终拥有一个非常好的导出系统。它类似于我们刚刚在 Illustrator 中看到的，因为任何给定的元素或组都可以导出。您在侧边栏中选择要导出的内容，然后单击右下角的“设为可导出”。
在那里，您将拥有所有选项，可以导出到多个文件中的多个分辨率。
从 Affinity Designer 导出
Affinity Designer 或许拥有最强大的导出功能。首先，它在使用应用程序时具有“角色”的概念。它们与您当前使用应用程序的方式有关。如果您正在设计，您可能将其设置为**绘图角色**。当您导出时，您切换到**导出角色**。
导出发生在**切片**中，切片可以是任何东西。您可以将对象或对象组设为切片。或者您可以绘制一个完全任意的框作为切片。
一旦您按照自己的喜好设置好，您可以根据需要导出单个切片或一次导出所有切片。
如果视频是您的首选，这里有很好的解释