从图层生成图像资源

上次更新時間 2026年10月29日

使用生成器,通过在图层名称后添加 .png 或 .jpg 等格式扩展名来自动创建文件。

将文件扩展名附加到图层名称后,每次保存时都会触发 Photoshop 的生成器自动创建图像文件。这样可以省去 web、应用程序和多设备项目中因需要多种格式或尺寸而重复执行的导出步骤。

当需要跨多种格式或分辨率进行一致且可重复的导出时,此工作流效果最佳,例如为响应式设计生成 @1x、@2x 和 @3x 版本。对于一次性导出或需要特定格式控件的情况,请改用文件 > 导出 > 导出为。

生成器会为您的资源创建专用文件夹,并在您工作时自动更新文件。您可以通过图层命名约定,从单个图层生成多种格式,指定质量设置,将资源缩放到不同尺寸,并将输出整理到子文件夹中。

  • 包含已命名图层或图层组的 Photoshop 文档
  • 将文档保存到已知位置(否则资源将显示在桌面上)
  • 了解项目所需的输出格式

启用图像资源生成

选择文件 > 自动化 > 生成器插件 > 图像资源。

在图层面板中,找到要导出的图层或组。

通过添加文件扩展名来重命名图层:.jpg、.png、.gif 或 .svg。例如,将“logo”重命名为“logo.png”。

使用 Ctrl + S(Windows)或 Command + S(macOS)保存文档。

Photoshop 会在已保存文档旁边的子文件夹中创建图像文件。如果您的文档尚未保存,资源将显示在桌面上的新文件夹中。生成器会一直保持主要运行状态,对已启用生成器的图层进行任何更改都会自动触发对应资源的更新。

注释

图层名称不能包含 :(冒号)或 *(星号),因为这些字符会阻止生成资源。

从一个图层生成多种格式

单个图层可以同时生成不同格式、尺寸和质量级别的资源。在图层名称中,用逗号或加号分隔各个资源规格。

在图层面板中选择图层。

使用逗号分隔的格式为图层重命名,例如:button.png, button.jpg90, 200% button@2x.png。

保存文档。

Photoshop 会根据同一图层内容生成三个单独的文件,这样就无需以不同格式手动导出同一图形。

控制质量,并针对不同屏幕缩放资源

在图层面板中选择图层。

向文件名添加质量或大小参数。例如:“button.jpg90”将 JPEG 质量设置为 90%,或者“200% logo@2x.png”将资源大小加倍。

对于多种分辨率,请用逗号分隔每项规格:“icon.png, 200% icon@2x.png, 300% icon@3x.png”。

保存文档以生成所有变体。

质量后缀用于控制 JPG 文件的压缩率(1 到 100)和 PNG 文件的位深度(8、24 或 32)。大小前缀可接受用于相对缩放的百分比或绝对像素尺寸。您可以混合使用单位,例如“10in x 5cm banner.jpg”,并省略一个尺寸以按比例缩放:“1080 x icon.png”会将宽度设置为 1080 像素,同时保持纵横比。

提示

使用 @2x 和 @3x 命名约定,可为响应式 web 项目和移动应用程序自动生成 retina 和高 DPI 版本。

相对缩放示例:

200% logo.png 可将资源大小加倍

50% thumbnail.jpg 可将资源缩小至一半大小

绝对大小示例:

300 x 200 hero.png 可创建一个 300×200 像素的图像

10in x 5cm banner.jpg 混合使用单位(宽 10 英寸,高 5 厘米)

1080 x icon.png 将宽度设置为 1080 像素,高度按比例缩放

提示

指定像素尺寸时,请直接写数字,不要添加单位标识。请使用“300 x 200”,而不要使用“300px x 200px”。

将资源整理到子文件夹中

默认情况下,所有生成的资源都会保存到 PSD 文件旁边的一个文件夹中。在文件名前添加子文件夹名称,可指示生成器自动创建并使用该子文件夹。这样即可整理相关资源,而无需手动管理文件夹。

使用正斜杠在图层名称中包含子文件夹路径:subfolder/filename.png 或 icons/logo.svg。您可以嵌套多个层级:assets/icons/logo.png。

将资源导出到特定文件夹

使用文件名中的子文件夹路径重命名图层。例如:mobile/button.png, desktop/button.png。

保存文档。

Photoshop 会自动创建文件夹结构,并将每个资源放置到指定位置。将子文件夹与大小前缀和质量设置结合使用,可以完全控制资源的组织方式:mobile/200% button@2x.png, desktop/button.jpg90。

设置文档范围的默认值

创建一个特殊图层,以建立适用于所有生成资源的基准设置。这样可以避免在单个图层名称中重复指定参数。

创建一个空图层,并以 "default" 开头命名,后面跟上您偏好的设置。常见配置包括使用 "default 200%" 将所有资源缩放到 200%、使用 "default assets/" 将所有内容保存到 assets 子文件夹,或使用 "default @2x" 为所有文件名添加 @2x 后缀。

您可以组合多个默认值:"default 200% retina/ @2x" 会将所有资源缩放到 200%,将其保存在 retina 子文件夹中,并为文件名添加 @2x 后缀。个体图层设置会覆盖文档默认值。例如,如果默认值指定为 "default 200%",但图层名称中包含 "50% thumbnail.png",则该图层将以 50% 生成。

处理云文档

云文档将生成的资源存储在本地,而不是与 PSD 文件放在一起。Photoshop 通过这种分隔来区分本地内容和云同步内容。

云文档的资源会出现在以下位置:

  • Windows:C:\Usersusername>\Documents\Adobe\Photoshop Cloud Associates
  • macOS:/Users//Documents/Adobe/Photoshop Cloud Associates

每个云文档都会在此目录中创建自己的子文件夹。资源会在您工作时自动生成,但会保留在本地计算机上,直到您在 Creative Cloud 中明确共享或同步它们。

禁用资源生成

图像资源生成功能一经启用,便会对文档保持有效,并在各个会话中持续生效。每次保存时,此功能都会自动重新生成资源,这可能会降低复杂文档的性能。

要关闭当前文档的生成功能,请取消选择 文件 > 自动 > 生成器插件 > 图像资源。这样会停止自动创建资源,但会保留所有现有资源和图层命名。

要在所有文档中全局关闭生成器,请选择 编辑 > 首选项 > 插件,取消选择 启用生成器,然后选择 确定。这将完全关闭生成器功能,直到您在“首选项”中重新启用它。