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开始批量导出网页素材。

Photoshop脚本批量生成Web切图相关推荐

Photoshop脚本批量生成各尺寸的iOS图标
源自:http://coolketang.com/psscript/menu8lesson12.php 设计师们通常设计一张1024*1024的图标,然后导出十几种用在iPhone, iPad, iT ...
自动切图生成html,Photoshop如何实现UI自动切图？_html/css_WEB-ITnose
切图严格来说并不是UI设计师的工作, 而是前端工程师的工作,指的是将UI设计师的设计(大部分为photoshop创建的PSD文件)转化为界面(网页或窗体等)所需要资源的过程. 切图是衔接UI设计和应用 ...
偷个懒，公号抠腚早报80%自动化——1.批量生成微信封面图
简述 2018年的三月份写过一篇:<小猪的Python学习之旅 -- 18.Python微信转发小宇宙早报>,从一开始手动转发别人发的新闻早报,到编写脚本到自动转发.然后毕竟这个是别人整 ...
python脚本批量生成数据
在平时的工作中,经常会遇到造数据,特别是性能测试的时候更是需要大量的数据.如果一条条的插入数据库或者一条条的创建数据,效率未免有点低.如何快速的造大量的测试数据呢?在不熟悉存储过程的情况下,今天给大家 ...
如何使用Photoshop在PSD文件上切图
在前端或者后台的项目操作中都可能会用到切图,那么如何运用Photoshop在PSD文件上切图呢?拿到psd图本人常用一下两种情况,希望可以帮助到大家. 1.讲所有图层合并为一个完整的大图: 用Ctrl ...
利用Pajek软件批量处理excel数据，批量生成网络关系图
利用Pajek软件批量处理excel数据,批量生成网络关系图 Pajek软件大家想必都不陌生,但是我很陌生,因为我用它不是进行网络分析,而是用它来画关系图(类似网络图).但是Pajek软件手工操作时一 ...
Photoshop超好用的切图神器推荐
描述:Photoshop超好用的切图神器推荐步骤: 打开网站,下载并安装,直接下一步 http://www.cutterman.cn/zh/cutterman Photoshop菜单栏窗口-> ...
web切图怎么做_做前端开发必需要掌握切图技能吗？
我04年的时候开始学习前端,在那个时候,国外基本上转型到了HTML+CSS,而国内貌似HTML+CSS刚刚兴起(不熟,如果时间不准确请纠正).所以我基本上没有做过Table-based design. ...
shell脚本批量生成配置文件
如果管理的站点和服务器较多的情况下,每次修改配置文件都相当痛苦.因而想到了用shell脚本来批量生成配置文件和配置数据.下面这个脚本是为了批量生成nagios监控配置文件的一个shell脚本程序.其原 ...

Photoshop脚本批量生成Web切图

Photoshop脚本批量生成Web切图相关推荐

最新文章

热门文章

Photoshop脚本 批量生成Web切图

Photoshop脚本 批量生成Web切图相关推荐

最新文章

热门文章

Photoshop脚本批量生成Web切图

Photoshop脚本批量生成Web切图相关推荐