photoshop实时自动导出图层/图标的方法

文章2019-08-01867 人已阅来源:网络

先来看一个小示意图

photoshop实时自动导出图层/图标的方法

导出图层/图标的正确姿势

  1. 首先打开设置,在“增效工具”下,勾选“启用生成器”;
  2. 然后在主菜单的“文件”-“生成”,勾选“图像资源”;
  3. 在图层面板选择要导出的图层,把图层文件名改为如“icon.png”带图片扩展名的图层名,然后就完成了资源生成的全部步骤,就这么简单。
  4. 生成的资源在文件同目录下、以“-assets”结尾的文件夹里。而且只要你不关闭生成器,那么你只要修改文件,切图的文件也将同步修改而更新!

详细的知识点

从图层或者组生成图像资源

  1. 将适当的文件格式扩展名(.jpg、.png 或 .gif)添加到您要从中生成图像资源的图层图层组的名称中。
  2. 图层名称不支持特殊字符 :和*
  3. 图像资源生成功能针对当前文档启用。启用后,无论何时再次打开该文档,功能仍然可用。要禁用当前文档的图像资源生成功能,请取消选择“文件”>“生成”>“图像资源”。

从一个图层或者一个图层组生成多个图形资源

若要从一个图层/图层组生成多个资源,请用半角逗号分隔资源名称。例如,以下图层名称生成三个资源:

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

将资源保存到子文件夹

您可以选择将特定图层/图层组生成的图像资源直接保存在文档资产文件夹下的子文件夹中。在图层/图层组名称中包含子文件夹名称;例如:

[我是子文件夹名称] /Ellipse_4.jpg

这句话就是说,你按照上面这样命名,那么该图像资源就会在assets文件下创建新的文件夹,并且把该图像放在里面!

指定质量和尺寸语法

默认情况下,JPEG 资源会以 90% 品质生成。默认情况下,PGN 资源会以 32 位图像生成。GIF 资源会以基本 Alpha 透明度生成。当然您也可以自定义品质和大小。

JPEG资源的语法

将所需要的输出质量添加到图层名称的后缀后面,格式为.jpg(1-10)或者.jpg(1-100%)

举例:

Ellipse_4.jpg5
Ellipse_4.jpg50%

都表示输出质量为50%的图像资源

添加所需的输出图像大小(相应支持的尺寸单位px,in,cm和mm)作为资产名称的前缀。Photoshop会相应地缩放图像。

举例:

200% Ellipse_4.jpg(表示放大该图像200%)
300 x 200 Rounded_rectangle_3.jpg(表示输出该图像为300x200像素)
10in x 200mm Rounded_rectangle_3.jpg(表示长10英寸,宽200毫米)

注意:请记得在前缀和资源名称之间添加一个空格字符。如果要指定像素大小,则可以省略单位。例如,300 x 200。

根据说明,当指定所需输出图像大小时,可以混合使用不同的单位和像素。例如,4in x 100 Rounded_rectangle_3.jpg是资源生成的有效图层名称。但是我测试在文档本身为毫米的情况下混合使用单位会错写错误,这里请大家注意一下哦!

PNG资源的语法

添加所需的输出品质作为该资源的名称后缀:8、24或者32

举例:

Ellipse_4.png24(表示输出png24)

添加所需的输出图像大小(相应支持的尺寸单位px,in,cm和mm)作为资产名称的前缀。Photoshop会相应地缩放图像。

举例:

42% Ellipse_4.png
300mm x 20cm Rounded_rectangle_3.png
10in x 50cm Rounded_rectangle_3.png

GIF资源的语法

添加所需的输出图像大小作为该资源的名称前缀:

举例:

42% Ellipse_4.gif
300mm x 20cm Rounded_rectangle_3.gif
20in x 50cm Rounded_rectangle_3.gif

品质参数对 GIF 资源不可用。

构建复杂图层名称

在生成资源命名图层时,您可以使用参数指定一个图层多个资源名称。例如:

  • 120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif
  • Photoshop 从该图层生成以下资源:
  • Delicious.jpg(缩放 120% 的JPG 图像)
  • Delicious.png(缩放 42% 的 24 位 PNG 图像)
  • Delicious_2.jpg(100x100 像素绝对大小,90% 品质JPG 图像)
  • Delicious.gif(缩放 250%的GIF图像)

在为同一个图层命名是,请在每一个不同名字之间加上逗号

为资源指定路径

可以为生成的资源指定文件路径,比如:

在名为hi-res 的子文件夹中生成所有图像资源

[asset_folder]/hi-res/Delicious.jpg。

在名为 hi-res 的子文件夹中生成所有图像资源。此外,资源名称的后缀为@2x。

[asset_folder]/hi-res/Delicious@2x.jpg。

将缩小 50%的图像资源保存在文档资源文件夹下的子文件夹 lo-res中

50% lo-res/Delicious.jpg。

从图层生成两个图像资源:

一个在hi-res 子文件夹中,图像资源名称的后缀为@2x 一个在 lo-res 子文件夹中,图像资源缩小50%

hi-res/@2x + 50% lo-res/Delicious.jpg

除了逗号 (,) 之外,您还可以使用加号 (+) 作为图像资源名称之间的分隔符。例如:

42% Rounded_rectangle_1.png24 + 100x100 Rounded_rectangle_1.jpg90%

等同于:

42% Rounded_rectangle_1.png24, 100x100 Rounded_rectangle_1.jpg90%

photoshop实时自动导出图层/图标的方法

其实图片格式还可以是WEBP和SVG,但是最新的官方语法里面没有提及这些,在这里我先不和小伙伴说那么多了,上面的这些已经够大家日常使用了!最后要告诉大家的就是如果你对技术这个东西有兴趣的话,就少看那些胡里花哨的教程吧!没事多翻翻软件官方提供的帮助文档 技术文档吧!好了,我们下期分享见!

微信公众号:米夏小雨

adobe官方文档(英文)