PhotoShop: 对一张图片进行 不同尺寸 批量裁剪_activehistorystate-程序员宅基地

技术标签: photoshop  iOS  Android  

身为一个APP开发者,对一张图片批量裁剪是刚需,尤其对于iOS APP来讲,如果美工不给力,那你就得嗝屁。而且现在我们只用PS 单张处理图片,很费时间。既然UI/前端/后端都是难兄难弟 ,那么就要我们祭出法宝了。。。

在此提供 JS脚本(脚本真是个好东西),可以对单张JPG 和PNG 图片批量处理,快速裁剪出不同尺寸,有Windows 版本和OS X版本(对网上的一些代码做了修改,确保切实可用,参考链接如下:http://coolketang.com/psscript/menu8lesson12.php,吐槽一下,既然公布了代码最好保证能用,不然很浪费别人的时间的,这些提供代码的童鞋虽然是好心,但是责任心却不敢恭维)。

(按链接中的代码生成的图片质量大小会超过Photoshop 要求的4G,其实是因为提供的换算关系比例不准确)

步骤:

一:下载本文下方提供的  .jsx文件,放到桌面就行;或者新建一个空白文档,把代码考进去,然后把后缀改为 .jsx;

二:打开Photoshop

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

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

五:点击选择一张1024*1024尺寸的图标作为原始图

六:选择一个 所有尺寸图标导出后存放的文件夹。然后点击[确定]按钮,确认文件夹的选择

七:这时 Photoshop开始批量生成各尺寸的图标,该文件夹下如下图所示:

 

八:修改尺寸:

*双击打开.jsx 文件(打开工具能用就行,不必纠结于那个)

*注意:

{“name":"这里是图片名称"  ,  "size":0.987654320987654320/28* 你想要的尺寸 }

如下图所示:

 

*这里 以iOS 开发的iPhone  icon 尺寸为例:

倍数     :   2x              3x

20pt     :  40pt       60pt

29pt   :    58pt       87pt

40pt :    80pt        120pt

60pt :    120pt     180pt

一共有:(40、58、60、80、87、120、180 )   7种尺寸

.jsx 代码修改如下:

生成文件如下:

//-------------------------脚本文件和代码---------------------------------

1:生成 批量JPEG 图片   脚本代码

//调用[File]的[openDialog]命令,弹出文件选择窗口,提示用户选择1024*1024尺寸的图标,并将文件存储在变量[bigIcon]中。

var bigIcon = File.openDialog("请选择一张大小合适的图片:", "*.jpg", false);

//打开用户选择的图标文件,并将打开后的文档,赋予变量[pngDoc]。

var pngDoc = open(bigIcon, OpenDocumentType.PNG);

//调用[Folder]的[selectDialog]命令,弹出文件夹选择窗口,提示用户选择输出iOS图标的文件夹。
//并将文件夹存储在变量[destFolder]中。
var destFolder = Folder.selectDialog( "请选择一个输出的文件夹:");

//定义一个数组,这个数组由各种js对象组成,每个对象都有一个[name]属性和[size]属性,分别表示图标的名称的尺寸。
var icons =
[
        {"name": "28",               "size":0.987654320987654320},//size(精度为) 0.987654320987654320 显示图片大小为28 ;精度为1 显示也是28 ,不过不准确
         {"name": "1",               "size":0.987654320987654320/28},
        {"name": "Icon-Small-28",              "size":0.987654320987654320},

       {"name": "Icon",                      "size":0.987654320987654320/28*57},
       {"name": "Icon@2x",                  "size":0.987654320987654320/28*114},
        
        {"name": "Icon-72",                  "size":0.987654320987654320/28*72},
        {"name": "Icon-72@2x",               "size":0.987654320987654320/28*144},
        
        {"name": "Icon-Small-50",           "size":0.987654320987654320/28*50},
        {"name": "Icon-Small-50@2x",        "size":0.987654320987654320/28*100},

        {"name": "Icon-40",                  "size":0.987654320987654320/28*40},
        {"name": "logo-76",                  "size":0.987654320987654320/28*76},
        {"name": "logo-80",                  "size":0.987654320987654320/28*80},
        {"name": "logo-100",                "size":0.987654320987654320/28*100},
        {"name": "logo-120",                "size":0.987654320987654320/28*120},
        {"name": "logo-152",                "size":0.987654320987654320/28*152},
        {"name": "1024",                    "size":0.987654320987654320/28*1024}
        
];

//(1)定义一个变量[option],表示iOS输出的格式为PNG。并设置输出PNG时不执行PNG8压缩,以保证图标质量。
//var option = new PNGSaveOptions();
//option.PNG8 = false;

//(2)输出 JPEG 格式
var option = new JPEGSaveOptions();
//保存当前的历史状态,以方便缩放图片后,再返回至最初状态的尺寸。
var startState = pngDoc.historyStates[0];

//添加一个循环语句,用来遍历所有图标对象的数组。
for (var i = 0; i < icons.length; i++)
{
        //定义一个变量[icon],表示当前遍历到的图标对象。
        var icon = icons[i];

        //调用[pngDoc]对象的[resizeImage]方法,将原图标,缩小到当前遍历到的图标对象定义的尺寸。???
        pngDoc.resizeImage(icon.size, icon.size);//宽高
        //定义一个变量[destFileName],表示要导出的图标的名称。
          //(1.1)
      //  var destFileName = icon.name + ".png";
          //(1.2)
          var destFileName = icon.name + ".jpg";
        //if (icon.name == "iTunesArtwork")
       // if (icon.name == "Icon-Small")
       // {
        //    destFileName = icon.name;
       // }
        
        //定义一个变量[file],表示图标输出的路径。
        var file = new File(destFolder + "/" + destFileName);

        //调用[pngDoc]的[saveAs]方法,将缩小尺寸后的图标导出到指定路径。
        pngDoc.saveAs(file, option, true, Extension.LOWERCASE);

        //将[doc]对象的历史状态,恢复到尺寸缩放之前的状态,即恢复到1024*1024尺寸,为下次缩小尺寸做准备。
        pngDoc.activeHistoryState = startState;
}

//操作完成后,关闭文档。
pngDoc.close(SaveOptions.DONOTSAVECHANGES);

 

2:生成 批量PNG 图片 脚本代码

 

//调用[File]的[openDialog]命令,弹出文件选择窗口,提示用户选择1024*1024尺寸的图标,并将文件存储在变量[bigIcon]中。

var bigIcon = File.openDialog("请选择一张大小合适的图片:", "*.png", false);

//打开用户选择的图标文件,并将打开后的文档,赋予变量[pngDoc]。

var pngDoc = open(bigIcon, OpenDocumentType.PNG);

//调用[Folder]的[selectDialog]命令,弹出文件夹选择窗口,提示用户选择输出iOS图标的文件夹。
//并将文件夹存储在变量[destFolder]中。
var destFolder = Folder.selectDialog( "请选择一个输出的文件夹:");

//定义一个数组,这个数组由各种js对象组成,每个对象都有一个[name]属性和[size]属性,分别表示图标的名称的尺寸。
var icons =
[
       {"name": "28",               "size":0.987654320987654320},//size(精度为) 0.987654320987654320 显示图片大小为28 ;精度为1 显示也是28 ,不过不准确
        {"name": "1",               "size":0.987654320987654320/28},
        {"name": "Icon-Small-28",              "size":0.987654320987654320},

       {"name": "Icon",                      "size":0.987654320987654320/28*57},// 28* 后面的数字即为你要的尺寸,0.98765432098765432为楼主辛苦算出的精度,可满足一般工作制图的任意精度要求。

       {"name": "Icon@2x",                  "size":0.987654320987654320/28*114},
        
        {"name": "Icon-72",                  "size":0.987654320987654320/28*72},
        {"name": "Icon-72@2x",               "size":0.987654320987654320/28*144},
        
        {"name": "Icon-Small-50",           "size":0.987654320987654320/28*50},
        {"name": "Icon-Small-50@2x",        "size":0.987654320987654320/28*100},

        {"name": "Icon-40",                  "size":0.987654320987654320/28*40},
        {"name": "logo-76",                  "size":0.987654320987654320/28*76},
        {"name": "logo-80",                  "size":0.987654320987654320/28*80},
        {"name": "logo-100",                "size":0.987654320987654320/28*100},
        {"name": "logo-120",                "size":0.987654320987654320/28*120},
        {"name": "logo-152",                "size":0.987654320987654320/28*152},
        {"name": "1024",                    "size":0.987654320987654320/28*1024}
        
           
];

//(1)定义一个变量[option],表示iOS输出的格式为PNG。并设置输出PNG时不执行PNG8压缩,以保证图标质量。
var option = new PNGSaveOptions();
//option.PNG8 = false;
//option.PNG8 = true;//有的图片 反而大了 默认是true
option.PNG24 = true;//质量压缩格式
//(2)输出 JPEG 格式
//var option = new JPEGSaveOptions();


//保存当前的历史状态,以方便缩放图片后,再返回至最初状态的尺寸。
var startState = pngDoc.historyStates[0];

//添加一个循环语句,用来遍历所有图标对象的数组。
for (var i = 0; i < icons.length; i++)
{
        //定义一个变量[icon],表示当前遍历到的图标对象。
        var icon = icons[i];

        //调用[pngDoc]对象的[resizeImage]方法,将原图标,缩小到当前遍历到的图标对象定义的尺寸。???
        pngDoc.resizeImage(icon.size, icon.size);//宽高
        //定义一个变量[destFileName],表示要导出的图标的名称。
          //(1.1)
        var destFileName = icon.name + ".png";
          //(1.2)
      //  var destFileName = icon.name + ".jpg";
       // if (icon.name == "28")
        //{
          //  destFileName = icon.name;
        //}
        
        //定义一个变量[file],表示图标输出的路径。
        var file = new File(destFolder + "/" + destFileName);

        //调用[pngDoc]的[saveAs]方法,将缩小尺寸后的图标导出到指定路径。
        pngDoc.saveAs(file, option, true, Extension.LOWERCASE);

        //将[doc]对象的历史状态,恢复到尺寸缩放之前的状态,即恢复到1024*1024尺寸,为下次缩小尺寸做准备。
        pngDoc.activeHistoryState = startState;
}

//操作完成后,关闭文档。
pngDoc.close(SaveOptions.DONOTSAVECHANGES);0.98765432098765432为楼主辛苦算出的精度,可满足一般工作制图的任意精度要求。

       {"name": "Icon@2x",                  "size":0.987654320987654320/28*114},
        
        {"name": "Icon-72",                  "size":0.987654320987654320/28*72},
        {"name": "Icon-72@2x",               "size":0.987654320987654320/28*144},
        
        {"name": "Icon-Small-50",           "size":0.987654320987654320/28*50},
        {"name": "Icon-Small-50@2x",        "size":0.987654320987654320/28*100},

        {"name": "Icon-40",                  "size":0.987654320987654320/28*40},
        {"name": "logo-76",                  "size":0.987654320987654320/28*76},
        {"name": "logo-80",                  "size":0.987654320987654320/28*80},
        {"name": "logo-100",                "size":0.987654320987654320/28*100},
        {"name": "logo-120",                "size":0.987654320987654320/28*120},
        {"name": "logo-152",                "size":0.987654320987654320/28*152},
        {"name": "1024",                    "size":0.987654320987654320/28*1024}
        
           
];

//(1)定义一个变量[option],表示iOS输出的格式为PNG。并设置输出PNG时不执行PNG8压缩,以保证图标质量。
var option = new PNGSaveOptions();
//option.PNG8 = false;
//option.PNG8 = true;//有的图片 反而大了 默认是true
option.PNG24 = true;//质量压缩格式
//(2)输出 JPEG 格式
//var option = new JPEGSaveOptions();


//保存当前的历史状态,以方便缩放图片后,再返回至最初状态的尺寸。
var startState = pngDoc.historyStates[0];

//添加一个循环语句,用来遍历所有图标对象的数组。
for (var i = 0; i < icons.length; i++)
{
        //定义一个变量[icon],表示当前遍历到的图标对象。
        var icon = icons[i];

        //调用[pngDoc]对象的[resizeImage]方法,将原图标,缩小到当前遍历到的图标对象定义的尺寸。???
        pngDoc.resizeImage(icon.size, icon.size);//宽高
        //定义一个变量[destFileName],表示要导出的图标的名称。
          //(1.1)
        var destFileName = icon.name + ".png";
          //(1.2)
      //  var destFileName = icon.name + ".jpg";
       // if (icon.name == "28")
        //{
          //  destFileName = icon.name;
        //}
        
        //定义一个变量[file],表示图标输出的路径。
        var file = new File(destFolder + "/" + destFileName);

        //调用[pngDoc]的[saveAs]方法,将缩小尺寸后的图标导出到指定路径。
        pngDoc.saveAs(file, option, true, Extension.LOWERCASE);

        //将[doc]对象的历史状态,恢复到尺寸缩放之前的状态,即恢复到1024*1024尺寸,为下次缩小尺寸做准备。
        pngDoc.activeHistoryState = startState;
}

//操作完成后,关闭文档。
pngDoc.close(SaveOptions.DONOTSAVECHANGES);


两段代码基本一样,只是修改了 选择的图片的后缀。

 

注意:

1.在苹果电脑的OS X 系统下,两段代码可以串用,即 生成PNG 图片的代码:可以选择JPEG图片生成PNG格式,也可以选PNG 生成PNG;生成JPEG(或JPG) 图片的代码:可以选择JPEG图片生成JPEG格式,也可以选PNG 生成JPEG。 在选择图片的时候会有两种格式的图片供你选择。

2.在Windows系统下,代码不可串用,选择JPEG 的JS脚本,只会有JPEG的图片供你选择,PNG格式同理。你可以把:

var bigIcon = File.openDialog("请选择一张大小合适的图片:", "*.png", false);

改为

var bigIcon = File.openDialog("请选择一张大小合适的图片:", "", false);

 

这样就可以出现多种格式图片了。

脚本文件下载地址,(CSDN上传资源必须选择资源分,不能免费,下次我传百度网盘)

PNG :

http://download.csdn.net/download/ws1836300/10047497

JPEG:

http://download.csdn.net/download/ws1836300/10047497

如有不懂,请留言。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ws1836300/article/details/78408039

智能推荐

TCP/UDP客户端服务器实现通信_可以用udp客户端与tcp服务器连接吗-程序员宅基地

文章浏览阅读2.3k次,点赞5次,收藏11次。TCP/UDP实现编程TCP服务器与客户端的连接过程:客户端与服务器三次握手是在accept和connect之后建立的。三次握手的过程:A-->B 发送SYNB->A 确认发一个ACK,再发一个SYNA->B 确认发一个ACK四次挥手过程:A---->B 发FINB----->A 发ACK(注意:此时,A--->B_可以用udp客户端与tcp服务器连接吗

手把手教你完成Android期末大作业(多功能应用型APP)_安卓大作业-程序员宅基地

文章浏览阅读7.6w次,点赞137次,收藏1.4k次。前言Android期末作业,估摸着也花了整整5天。里面可能会缺少某些细节,如果跟着做有不会的评论就行,每天都会看,尽力解答。功能待办专注计时音乐天气实现步骤一、底部菜单栏切换页1.添加依赖dependencies { implementation 'com.google.android.material:material:1.2.1'}2.在res资源文件夹下新建一个menu文件夹,创建底部导航的菜单布局文件创建对应数量的item,为每个菜单栏选项给每个item定_安卓大作业

GPIO驱动写错,导致内存出现问题,系统死掉_xgpiops_writepin处死机-程序员宅基地

文章浏览阅读1.3k次。解决方法:请教了别人,噶偶我让我用nfs挂载,但搞了半天,只是把PC上的文件挂载到了开发板上,比较郁闷后来在系统快起的时候kill掉自启动的QT程序,卸载自己装载的驱动,然后用FLASHFXP进入系统文件目录(原来不进行上面的操作进入不来了),然后打开rcs文件修改开机启动项,搞定了。需要加强的:NFS文件系统的挂载_xgpiops_writepin处死机

三种方法给Vmware虚拟机占用空间清理瘦身-程序员宅基地

文章浏览阅读1.2w次,点赞3次,收藏33次。随着VMware虚拟机使用时间的增长,其所占用的空间也越来越大,本文来说说怎么给VMware虚拟机占用的空间进行瘦身。方法一:VMware自带的清理磁盘这个方法是VMware自带,具有普适性,对快照等文件不造成影响。步骤如下:1、将要清理的虚拟机关机。2、右键该虚拟机——>管理——>清理磁盘,VMware会自动提示可清理的磁盘大小,点击确定等待清理完毕即可。方法二..._vmware占用磁盘空间太大怎么办

MyCloud 升级最新固件_wdmycloud固件更新-程序员宅基地

文章浏览阅读1.1k次。Mycloud 版本太低无法支持远程访问,需要升级固件到OS5_wdmycloud固件更新

大型语言模型如何助力推荐系统:综述研究-程序员宅基地

文章浏览阅读842次,点赞21次,收藏27次。大型语言模型如何助力推荐系统:综述研究

随便推点

linux设置双屏拼接_单屏 VS 双屏:谁才是完美的显示器解决方案?-程序员宅基地

文章浏览阅读1.1k次。双屏显示器是目前很多朋友组建显示器的方案,相比单个显示器来说,双屏显示器可以呈现更多的内容,进而带来工作效率或者视觉体验的大幅提升,相信凡是用过双屏显示器的朋友都会有所感触。尽管双屏显示器有着诸多好处,但是如果双屏显示器选择、搭配不当反而会适得其反,带来不必要的麻烦,比如下面这几个问题:1、色彩差异突出双屏显示器无法保证色彩统一多屏显示器拼接时首当其冲的就是色差问题,即使是同型号的显示器,也会因为..._linux x-display 多屏

CentOS下Redis6.x安装教程_centos安装redis6-程序员宅基地

文章浏览阅读714次。Redis6.x安装详细说明_centos安装redis6

Audio CODEC 基本知识及应用_audio 中的codec-程序员宅基地

文章浏览阅读5.8k次。一、Codec字面上的意思就是编解码器,是bai编码器encoder与解码器decoder的混合体,软件层面来说,音频编解码器就是根据特定的音频文件格式或流媒体格式、对数字音频数据实现压缩/解压缩的计算机程序.在硬件层面,音频编解码器指一个能编码模拟音频到数字音频和解码数字音频到模拟音频的独立设备。换种说法,它包含运行在同样时钟的模数转换器(ADC)和数模转换器(DAC)。这在声卡中被使用以支持音频输入和输出。Codec里面包含了I2S接口、D/A、A/D、Mixer、PA(功放),通常包含多种输入_audio 中的codec

${pageContext.request.contextPath}-程序员宅基地

文章浏览阅读72次。这表示的是一个全路径,在我们的Dynamic Web Project中,我们的java文件和jsp文件不在同一个目录下,在jsp向servlet跳转时,会报404错误。当在/servlet前加上${pageContext.request.contextPath}这个全路径时,就会很好的解决这个问题。希望对大家有帮助。转载于:https://www.cnblogs.com/zgybk/..._${pagecontext.request.contextpath}/servlet

WebView 加载失败(net::ERR_CLEARTEXT_NOT_PERMITTED)/ 网络图片无法加载_wpf webview加载失败状态-程序员宅基地

文章浏览阅读616次。问题:WebView 加载失败(net::ERR_CLEARTEXT_NOT_PERMITTED)原因:从Android 9.0(API级别28)开始,默认情况下限制了明文流量的网络请求,对未加密流量不再信任,直接放弃请求,因此http的url均无法在webview中加载,https 不受影响。解决方案:// AndroidManifest.xml 声明网络权限<uses-per..._wpf webview加载失败状态

cf的游戏服务器在哪些位置,cf游戏服务器架构-程序员宅基地

文章浏览阅读1.4k次。cf游戏服务器架构 内容精选换一换查询云服务器组详情。GET /v2.1/{project_id}/os-server-groups/{server_group_id}参数说明请参见表1。参数说明参数是否必选描述project_id是项目ID。获取方法请参见获取项目ID。server_group_id是弹性云服务器组UUID。无响应参数如表2所示。请参考通用请求返回值。服务器安装上架、服务器基础参..._cf服务器