项目背景

项目背景

开发移动端的小伙伴在处理各种 Icon 各有心得,Photoshop 用的得心应手,现在有个自动化脚本处理各种尺寸 Icon.

本文以处理 iOS Icon 为参考,关于 Android 以及 iPad 自己修改下参数即可!OK,找美工GG要一张 1024x1024 图片,然后按照步骤操作!

1. 确定文件尺寸

首先参考苹果官方文档,确定自己需要的尺寸 App Icons on iPad and iPhone

2.创建.jsx脚本

根据自己的需求修改相应参数,程序员小伙伴应该能看的懂,只需要根据需要修改 icons 数组即可,保存文件名为 .jsx 结尾

脚本代码

//调用[File]的[openDialog]命令,弹出文件选择窗口,提示用户选择1024*1024尺寸的图标,并将文件存储在变量[bigIcon]中。
var bigIcon = File.openDialog("请选择一张1024x1024大小的图片:", "*.png", false);

//打开用户选择的图标文件,并将打开后的文档,赋予变量[pngDoc]。
var pngDoc = open(bigIcon, OpenDocumentType.PNG);

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

//定义一个数组,这个数组由各种js对象组成,每个对象都有一个[name]属性和[size]属性,分别表示图标的名称的尺寸。
var icons = 
[
  {"name": "Icon-29@2x",           "size":58},
  {"name": "Icon-40@2x",           "size":80},
  {"name": "Icon-60@2x",           "size":120},
  {"name": "Icon-60@3x",           "size":180}
];

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

//保存当前的历史状态,以方便缩放图片后,再返回至最初状态的尺寸。
option.PNG8 = false;
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],表示要导出的图标的名称。
    var destFileName = icon.name + ".png";

    if (icon.name == "iTunesArtwork")
        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);

3.使用脚本

打开 Photoshop , 选择文件->脚本->浏览,选择刚才保存的脚本,打开后选择一张 1024x1024 的图片,然后选择保存文件夹即可!详细操作过程可以参考文章底部本文参考!