博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
开博第二篇:记一个利用JavaScript,编写PS脚本,开发图片量产工具
阅读量:5235 次
发布时间:2019-06-14

本文共 14778 字,大约阅读时间需要 49 分钟。

背景:身在一个有实业的电商公司,设计部的妹子们总是会有做不完的商品图片,当然了,要是做点有技术含量的美化工作也罢,但是最近她们很是无聊,总是要做一些重复性的工作,就比如如题所说的,图片量产,量产什么呢?价格牌。。。这东西很没意思哎!就是给你一个模板,然后你自己把模板原来的文字图片换掉就行了,再排一下版,纯体力劳动好么!博主做过一阵子的对日外包工作,深知她们的痛苦,如果说某些对日外包的程序猿是人肉转码器的话,那么设计部的妹子们现在就成了。。算了,词就不说了,太残酷了

========================================炫炸天的分割线========================================

线索:针对背景交代的情况,BOSS给了我一个提示:PS脚本,顺着这个线索,我就进行了一系列调查,我分别做了@#¥%……&*()的努力,简而言之,photoShop自带的开发文档帮了我大忙,文档位于Adobe Photoshop CS5\Scripting\Documents\,参考了Photoshop CS5 Scripting Guide.pdf和Photoshop CS5 JavaScript Ref.pdf,当然了,自带的文档貌似还不能完全满足我的需求,我还自己下载了一个JavaScriptToolsGuide_CS5.pdf,抱着这三个文档啃了又啃,总归算是完成了这样一个量产工具。

========================================酷炸天的分割线========================================

开发思路:既然是量产工具,那么他的工作流程应该是这样的,1工具读了一个文件,文件包含了所有产品的信息,2循环抽取每一个商品的信息,生成图片并保存,3循环完毕,给出一个提示,OK,大概思路就是这样了,然后接下来就是顺着这个思路啃文档了。。。

========================================拽炸天的分割线========================================

代码如下:

1 //测试版本:PhotoShop CS5 12.0.3 x32 通过  2 //作者:Duke  3 //测试完结日期:2014/08/24  4   5 priceCardGenerator()  6   7 function priceCardGenerator(){  8   9     /** 10     * 定义统一的赋值变量 11     */ 12     var title //标题 13     var liwaiCode //里外编码 14     var priceTitle //售价标题,为了方便替换 15     var price //售价 16     var sample //价格符号 17     var fiveAssureFeeTitle //五包费用标题,为方便替换 18     var fiveAssureFee //五包费用 19     var seftFeeTitle //自提费用标题,为方便替换 20     var seftFee //自提费用 21     var size //尺寸 22     var producingArea //产地 23     var material //材质 24  25     /** 26     * 定义统一的字体配置 27     */ 28     var tipFont = "MicrosoftYaHei-Bold" 29     var valueFont = "MicrosoftYaHei" 30     var priceFont = "Century Gothic" 31  32     /** 33     * 定义统一的颜色配置 34     */ 35     //价格的颜色 36     var priceColor = new SolidColor() 37     priceColor.rgb.red  = 208 38     priceColor.rgb.green = 28 39     priceColor.rgb.blue = 119 40     //顶部栏的颜色 41     var topBarColor = new SolidColor() 42     topBarColor.rgb.red  = 212 43     topBarColor.rgb.green = 0 44     topBarColor.rgb.blue = 102 45  46     /** 47     * 在此读取文件 48     */ 49     //打开logo图片 50     var logoImg = app.open(File("D:/priceCard/liwailogo.jpg")) 51  52     //读取数据文件 53     var dataFile = new File("D:/priceCard/priceCardData.xml") 54     //后续操作设置为“读”操作 55     dataFile.open("r") 56  57     //缓冲变量 58     var xmlCode = dataFile.read() 59     //alert(xmlCode) 60  61     //空文件直接退出 62     if(xmlCode == ""){ 63         alert("文件没有内容") 64         return 65     } 66  67     //新建XML对象 68     var products = new XML(xmlCode) 69      70     //产品总数 71     var productCount = products.product.length() 72  73     //遍历 74     for( i = 0;i < productCount;i++){ 75  76         //变量赋值 77         title = products.product[i].elements()[0] 78         liwaiCode = "里外编码:" + products.product[i].elements()[1] 79         priceTitle = "售价" 80         price = products.product[i].elements()[2] 81         sample = "¥" 82         fiveAssureFeeTitle = "五包费用" 83         fiveAssureFee = "¥" + products.product[i].elements()[3] 84         seftFeeTitle = "自提费用" 85         seftFee = "¥" + products.product[i].elements()[4] 86         size = products.product[i].elements()[5] 87         producingArea = products.product[i].elements()[6] 88         material = products.product[i].elements()[7] 89  90         // 存储当前的单位长度,并设置自定义的单位 91         var originalUnit = preferences.rulerUnits 92         preferences.rulerUnits = Units.PIXELS 93  94         // 声明一个文档 95         var docRef = app.documents.add( 886, 561 ,72.0,"tempDoc") 96  97         // 顶部栏,创建选区并上色 98         // “选区”的填充要在定义组之前操作,否则会报出“fill方法在当前版本不可用” 99         docRef.selection.select([[0,0],[0,20],[886,20],[886,0]],SelectionType.EXTEND)100         var selRef = docRef.selection101         selRef.fill( topBarColor, ColorBlendMode.NORMAL, 100, false)102 103         // 定义一个图片组104         var layerSetRef =docRef.layerSets.add()105             layerSetRef.name = "图片组"106 107         //设置logo所在的文档为活动文档108         app.activeDocument = logoImg109         //声明logo图层110         var logoLayer = logoImg.activeLayer111         //复制商品图层到背景文档112         var logoLayerTemp = logoLayer.duplicate(layerSetRef,113         ElementPlacement.PLACEATEND)114         //设置背景文档为活动文档115         app.activeDocument=docRef116         //logo移动至左下角117         logoLayerTemp.translate(-265,225)118 119         //读取当前商品对应的二维码图片120         var qrCodeImg = app.open(File(products.product[i].elements()[9]))121         //设置二维码图片所在的文档为活动文档122         app.activeDocument = qrCodeImg123         //声明二维码图片图层124         var qrCodeImgLayer = qrCodeImg.activeLayer125         //复制二维码图片到背景文档126         var qrCodeImgLayerTemp = qrCodeImgLayer.duplicate(layerSetRef,127         ElementPlacement.PLACEATEND)128         //设置背景文档为活动文档129         app.activeDocument=docRef130         //商品图片移动至中间偏右131         qrCodeImgLayerTemp.translate(320,180)132         //关闭商品图片文档133         qrCodeImg.close(SaveOptions.DONOTSAVECHANGES)134 135         //读取当前价格牌的商品图片136         var productImg = app.open(File(products.product[i].elements()[8]))137         //设置商品图片所在的文档为活动文档138         app.activeDocument = productImg139         //声明商品图片图层140         var productImgLayer = productImg.activeLayer141         //复制商品图层到背景文档142         var productImgLayerTemp = productImgLayer.duplicate(layerSetRef,143         ElementPlacement.PLACEATEND)144         //设置背景文档为活动文档145         app.activeDocument=docRef146         //商品图片移动至中间偏右147         productImgLayerTemp.translate(200,-50)148         //关闭商品图片文档149         productImg.close(SaveOptions.DONOTSAVECHANGES)150 151         /**152         *内容开始153         */154         // 商品名称155         var proNameLayerRef = docRef.artLayers.add()156         proNameLayerRef.kind = LayerKind.TEXT157         var proNameTextItemRef = proNameLayerRef.textItem158         proNameTextItemRef.contents = title159         proNameTextItemRef.position = Array(55, 70)160         proNameTextItemRef.font = tipFont161         proNameTextItemRef.size = 30162 163         //里外编码164         var liwaiCodeLayerRef = docRef.artLayers.add()165         liwaiCodeLayerRef.kind = LayerKind.TEXT166         var liwaiCodeTextItemRef = liwaiCodeLayerRef.textItem167         liwaiCodeTextItemRef.contents = liwaiCode168         liwaiCodeTextItemRef.position = Array(55, 95)169         liwaiCodeTextItemRef.font = valueFont170         liwaiCodeTextItemRef.size = 14171 172         //售价标题173         var liwaiCodeLayerRef = docRef.artLayers.add()174         liwaiCodeLayerRef.kind = LayerKind.TEXT175         var liwaiCodeTextItemRef = liwaiCodeLayerRef.textItem176         liwaiCodeTextItemRef.contents = priceTitle177         liwaiCodeTextItemRef.position = Array(55, 135)178         liwaiCodeTextItemRef.font = tipFont179         liwaiCodeTextItemRef.size = 22180 181         //¥182         var sampleLayerRef = docRef.artLayers.add()183         sampleLayerRef.kind = LayerKind.TEXT184         var sampleTextItemRef = sampleLayerRef.textItem185         sampleTextItemRef.contents = sample186         sampleTextItemRef.position = Array(50, 235)187         sampleTextItemRef.font = tipFont188         sampleTextItemRef.size = 40189         sampleTextItemRef.color = priceColor190 191         //金额192         var liwaiPriceLayerRef = docRef.artLayers.add()193         liwaiPriceLayerRef.kind = LayerKind.TEXT194         var liwaiPriceTextItemRef = liwaiPriceLayerRef.textItem195         liwaiPriceTextItemRef.contents = price196         liwaiPriceTextItemRef.position = Array(105, 235)197         liwaiPriceTextItemRef.font = valueFont198         liwaiPriceTextItemRef.size = 100199         liwaiPriceTextItemRef.color = priceColor200 201         //五包费用202         var liwaiPriceLayerRef = docRef.artLayers.add()203         liwaiPriceLayerRef.kind = LayerKind.TEXT204         var liwaiPriceTextItemRef = liwaiPriceLayerRef.textItem205         liwaiPriceTextItemRef.contents = fiveAssureFeeTitle206         liwaiPriceTextItemRef.position = Array(55, 275)207         liwaiPriceTextItemRef.font = tipFont208         liwaiPriceTextItemRef.size = 20209 210         //五包费用金额211         var liwaiPriceLayerRef = docRef.artLayers.add()212         liwaiPriceLayerRef.kind = LayerKind.TEXT213         var liwaiPriceTextItemRef = liwaiPriceLayerRef.textItem214         liwaiPriceTextItemRef.contents = fiveAssureFee215         liwaiPriceTextItemRef.position = Array(140, 275)216         liwaiPriceTextItemRef.font = valueFont217         liwaiPriceTextItemRef.size = 18218         liwaiPriceTextItemRef.color = priceColor219 220         //自提费用221         var liwaiPriceLayerRef = docRef.artLayers.add()222         liwaiPriceLayerRef.kind = LayerKind.TEXT223         var liwaiPriceTextItemRef = liwaiPriceLayerRef.textItem224         liwaiPriceTextItemRef.contents = seftFeeTitle225         liwaiPriceTextItemRef.position = Array(250, 275)226         liwaiPriceTextItemRef.font = tipFont227         liwaiPriceTextItemRef.size = 20228 229         //自提费用金额230         var liwaiPriceLayerRef = docRef.artLayers.add()231         liwaiPriceLayerRef.kind = LayerKind.TEXT232         var liwaiPriceTextItemRef = liwaiPriceLayerRef.textItem233         liwaiPriceTextItemRef.contents = seftFee234         liwaiPriceTextItemRef.position = Array(335, 275)235         liwaiPriceTextItemRef.font = valueFont236         liwaiPriceTextItemRef.size = 18237         liwaiPriceTextItemRef.color = priceColor238 239         //规格240         var liwaiPriceLayerRef = docRef.artLayers.add()241         liwaiPriceLayerRef.kind = LayerKind.TEXT242         var liwaiPriceTextItemRef = liwaiPriceLayerRef.textItem243         liwaiPriceTextItemRef.contents = "规格:"244         liwaiPriceTextItemRef.position = Array(55, 345)245         liwaiPriceTextItemRef.font = tipFont246         liwaiPriceTextItemRef.size = 20247 248         //规格数值249         var liwaiPriceLayerRef = docRef.artLayers.add()250         liwaiPriceLayerRef.kind = LayerKind.TEXT251         var liwaiPriceTextItemRef = liwaiPriceLayerRef.textItem252         liwaiPriceTextItemRef.contents = size253         liwaiPriceTextItemRef.position = Array(125, 345)254         liwaiPriceTextItemRef.font = valueFont255         liwaiPriceTextItemRef.size = 20256 257         //产地258         var liwaiPriceLayerRef = docRef.artLayers.add()259         liwaiPriceLayerRef.kind = LayerKind.TEXT260         var liwaiPriceTextItemRef = liwaiPriceLayerRef.textItem261         liwaiPriceTextItemRef.contents = "产地:"262         liwaiPriceTextItemRef.position = Array(55, 375)263         liwaiPriceTextItemRef.font = tipFont264         liwaiPriceTextItemRef.size = 20265 266         //产地值267         var liwaiPriceLayerRef = docRef.artLayers.add()268         liwaiPriceLayerRef.kind = LayerKind.TEXT269         var liwaiPriceTextItemRef = liwaiPriceLayerRef.textItem270         liwaiPriceTextItemRef.contents = producingArea271         liwaiPriceTextItemRef.position = Array(125, 375)272         liwaiPriceTextItemRef.font = valueFont273         liwaiPriceTextItemRef.size = 20274 275         //材质276         var liwaiPriceLayerRef = docRef.artLayers.add()277         liwaiPriceLayerRef.kind = LayerKind.TEXT278         var liwaiPriceTextItemRef = liwaiPriceLayerRef.textItem279         liwaiPriceTextItemRef.contents = "材质:"280         liwaiPriceTextItemRef.position = Array(55, 405)281         liwaiPriceTextItemRef.font = tipFont282         liwaiPriceTextItemRef.size = 20283 284         //材质值285         var liwaiPriceLayerRef = docRef.artLayers.add()286         liwaiPriceLayerRef.kind = LayerKind.TEXT287         liwaiPriceLayerRef.textItem.kind = TextType.PARAGRAPHTEXT288         var liwaiPriceTextItemRef = liwaiPriceLayerRef.textItem289         liwaiPriceTextItemRef.contents = material290         liwaiPriceTextItemRef.position = Array(125, 391)291         liwaiPriceTextItemRef.font = valueFont292         liwaiPriceTextItemRef.width = 550293         liwaiPriceTextItemRef.height = 200294         liwaiPriceTextItemRef.size = 20295 296         //保存文件297         new Folder("D:/priceCard/result").create ()298         jpgFile = new File( "D:/priceCard/result/" + products.product[i].elements()[1] + ".jpeg" )299         jpgSaveOptions = new JPEGSaveOptions()300         jpgSaveOptions.embedColorProfile = true301         jpgSaveOptions.formatOptions = FormatOptions.STANDARDBASELINE302         jpgSaveOptions.matte = MatteType.NONE303         jpgSaveOptions.quality = 12304         app.activeDocument.saveAs(jpgFile, jpgSaveOptions, true,305         Extension.LOWERCASE)306 307         //强制关闭308         docRef.close(SaveOptions.DONOTSAVECHANGES)309 310         //恢复默认长度单位311         app.preferences.rulerUnits = originalUnit312     }313     //关闭logo所在的文档314     logoImg.close(SaveOptions.DONOTSAVECHANGES)315     alert("生成" + productCount + "条产品信息,请在以下位置\"D:/priceCard/result/\"查看")316 }

代码里的priceCardData.xml的文档格式是下面这个样子的

<产品名称>
<里外编码>
<售价>
<五包费用>
<自提费用>
<规格大小>
<产地>
<材质>
<产品图片地址>
<产品二维码地址>
<产品名称>
<里外编码>
<售价>
<五包费用>
<自提费用>
<规格大小>
<产地>
<材质>
<产品图片地址>
<产品二维码地址>

看完了这个文档格式,你应该会有以下的疑问:

1:博主逗比吧,XML标签怎么用中文?!

2:写两遍product节点干什么?手抖么?

哎,我知道自己挺逗的,但是这事要从开发之初说起,我最开始不是用XML来存放数据的,我本来幻想着可以使用CVS文件,或者PRN文件来存放数据源,然而都是以失败告终,因为商品的描述里什么都有可能存,一些卖萌的编辑什么都会写的。。。都怪我太年轻,用什么分割数据搞不清啊。。。

好了,回到问题1,我为什么用中文?因为,是为了避免装13,和让非技术人员看懂。为什么这么说呢,因为用Excel打开这个模板文件,Excel会把子节点当字段名来显示,就比如

<产品二维码地址>

这个节点在Excel里的标题就是“产品二维码地址”,这就是用中文的原因,方便理解。不过呢,这里提一个有趣的现象,使用中文去取节点里的内容竟然是可以的,很是让我惊喜哎

代码里可以看到,我是通过

title = products.product[i].elements()[0]

去取商品名称的值的,但是实际上

title = products.product[i].产品名称

也能取得商品名称的值,感觉帅帅哒!

不过呢,我怕出问题,还是没有用中文去取。。。

再看问题2,为什么写两遍,这个就要问Excel了,因为只写一个子节点的话,Excel里是没有表头的, 写两个才有带表头的表格,如下

产品名称 里外编码 售价 五包费用 自提费用 规格大小 产地 材质 产品图片地址 产品二维码地址
                   

 

好了,使用Excel填写产品信息,再保存为XMl数据文件,准备工作就算完成了,接下来就是见证奇迹的时刻了

怎么运行?在页面里运行?看着不像啊。。app是个啥?浏览器认识么。。

其实是在photoShop里运行的,将写好的脚本放置于Adobe Photoshop CS5\Presets\Scripts下,打开PS,已经打开的就重启一下PS,之后你会在PS->文件->脚本下发现放入的脚本文件,默认是支持.jsx结尾的脚本文件,记得文档里说.js结尾的文件也支持来着。点击运行之后,你就会发现,图层啊,文字啊,刷刷的生成,刷刷的关闭,自动化的感觉很好啊,代码中的图片生成速度是10s左右一张,最高画质的,还可以接受。

好了,洋洋洒洒写了这么多,一是为了记录一下自己的心得,二是希望能给那些深陷在重复性设计工作中的人们一些帮助,只要稍微懂得一些脚本知识,能看懂英文文档就可以写啦,很炫酷的。PS脚本对我来说是一个新鲜的东西,或许我写的这些小玩意早就有大神在我之前写过,而且效率更高,或许有现成的软件可以直接生成,或许我做了很多无用功,但是都没关系啦,因为有时候是不是坑,你只有跳进去再爬出来才能知道它是不是,这样以后才好绕着走。博文至此,希望技术大神,和设计大师不用过分重视,毕竟这篇小小的博文只能是一个针对初学者的小例子,就比如说我,我作为一个程序员,两天前都不知道PS可以运行脚本,而对于那些和我一样的小伙伴们,如果你们感兴趣,自己可以先去写个脚本,alert一下自己的helloworld!哈哈~

 

 

转载于:https://www.cnblogs.com/1-1-0/p/3932999.html

你可能感兴趣的文章
{面试题7: 使用两个队列实现一个栈}
查看>>
【练习】使用事务和锁定语句
查看>>
centos7升级firefox的flash插件
查看>>
Apache Common-IO 使用
查看>>
评价意见整合
查看>>
二、create-react-app自定义配置
查看>>
Android PullToRefreshExpandableListView的点击事件
查看>>
系统的横向结构(AOP)
查看>>
linux常用命令
查看>>
NHibernate.3.0.Cookbook第四章第6节的翻译
查看>>
使用shared memory 计算矩阵乘法 (其实并没有加速多少)
查看>>
Django 相关
查看>>
git init
查看>>
训练记录
查看>>
IList和DataSet性能差别 转自 http://blog.csdn.net/ilovemsdn/article/details/2954335
查看>>
Hive教程(1)
查看>>
第16周总结
查看>>
C#编程时应注意的性能处理
查看>>
Fragment
查看>>
比较安全的获取站点更目录
查看>>