photoshop实时自动导出图层/图标的方法
先来看一个小示意图
导出图层/图标的正确姿势
- 首先打开设置,在“增效工具”下,勾选“启用生成器”;
- 然后在主菜单的“文件”-“生成”,勾选“图像资源”;
- 在图层面板选择要导出的图层,把图层文件名改为如“icon.png”带图片扩展名的图层名,然后就完成了资源生成的全部步骤,就这么简单。
- 生成的资源在文件同目录下、以“-assets”结尾的文件夹里。而且只要你不关闭生成器,那么你只要修改文件,切图的文件也将同步修改而更新!
详细的知识点
从图层或者组生成图像资源
- 将适当的文件格式扩展名(.jpg、.png 或 .gif)添加到您要从中生成图像资源的图层或图层组的名称中。
- 图层名称不支持特殊字符 :和*
- 图像资源生成功能针对当前文档启用。启用后,无论何时再次打开该文档,功能仍然可用。要禁用当前文档的图像资源生成功能,请取消选择“文件”>“生成”>“图像资源”。
从一个图层或者一个图层组生成多个图形资源
若要从一个图层/图层组生成多个资源,请用半角逗号分隔资源名称。例如,以下图层名称生成三个资源:
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%
其实图片格式还可以是WEBP和SVG,但是最新的官方语法里面没有提及这些,在这里我先不和小伙伴说那么多了,上面的这些已经够大家日常使用了!最后要告诉大家的就是如果你对技术这个东西有兴趣的话,就少看那些胡里花哨的教程吧!没事多翻翻软件官方提供的帮助文档 技术文档吧!好了,我们下期分享见!
微信公众号:米夏小雨