Photoshop脚本 > 批量生成Web切图

欢迎大家与我交流

邮箱：coolketang@163.com

我的微信公众号“酷课堂”，获取更多学习资源，欢迎留言交流。

设计师们完成网页设计稿后，需要将所有页面元素导出为web格式图片，供web开发工程师使用。本节将演示如何将设计稿中的图层导出为web格式图片。

首先创建一个空白的脚本文档，并保存在硬盘上某个位置。

接着输入脚本代码：

//调用[Folder]的[selectDialog]命令，弹出文件夹选择窗口，提示用户选择输出web图片的文件夹，并将文件夹存储在变量[outputFolder]中。
var outputFolder = Folder.selectDialog("选择输出的文件夹");

//定义一个变量[layers]，表示当前文档的所有图层。
var layers = app.activeDocument.layers;

//定义一个变量[doc]，表示当前文档。
var doc = app.activeDocument;

//定义一个变量[option]，表示图片的输出格式。
var option = new ExportOptionsSaveForWeb();

//设置图片输出时支持透明度。
option.transparency = true;

//设置图片输出的色彩范围为256色。
option.colors = 256;

//设置图片输出的格式为GIF格式。
option.format = SaveDocumentType.COMPUSERVEGIF;

//添加一个循环，遍历所有图层。
for(var i=0; i＜layers.length; i++)
{
	//将当前遍历到的图层拷贝到内存。并获得当前图层的尺寸大小。这个尺寸排除了图层特效如阴影、外发光等产生的范围。
	layers[i].copy();
	var bounds = layers[i].boundsNoEffects;

	 //计算当前图层的宽度，为范围数组变量的第三个值与第一个值的差。
	var width    = bounds[2] - bounds[0];
	 //计算当前图层的高度，为范围数组变量的第四个值与第二个值的差。
	var height   = bounds[3] - bounds[1];

	 //创建一个新文档，新文档的尺寸为拷贝到内存中图层的尺寸一致。
	app.documents.add(width, height, 72, "myDocument", NewDocumentMode.RGB, 
                                        DocumentFill.TRANSPARENT);

	//将内存中的图层，复制到新文档。
	app.activeDocument.paste();

	 //定义一个变量[file]，作为图层输出的路径。
	var file = new File(outputFolder + "/Output" + i + ".gif");

	 //调用[activeDocument]对象的[exportDocument]方法，将新文档导出为GIF图片。
	app.activeDocument.exportDocument(file, ExportType.SAVEFORWEB, option);

	 //调用[activeDocument]对象的[close]方法，关闭新文档。[close]方法内的参数，表示关闭新文档时，不再存储新文档。
	app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);

	 //将Photoshop的当前文档，重置为网页设计稿文档。
	app.activeDocument = doc;
}

//当全部图层都导出后，关闭网页设计稿文档。
doc.close(SaveOptions.DONOTSAVECHANGES);

我们的脚本已经编写完成，把它保存下来。

然后切换到Photoshop。

接着依次点击[文件] > [脚本] > [浏览]，打开刚刚保存的脚本文件。

在弹出的[载入]窗口中，直接双击脚本名称，Photoshop将直接调用并执行该脚本。

点击选择所有网页素材导出后的文件夹。然后点击[确定]按钮，确认文件夹的选择。Photoshop开始批量导出网页素材。