之前的项目都是用一套尺寸的图标做适配,优点就是减少APP的大小,还不用做多套适配图标,缺点就是每次加载图标都要做缩放,影响APP的性能。
公司最近终于招到UI了,发现他的PS工具可以一键生成Android和iOS各种尺寸图标。最近新建一个项目,打算尝试自己生成Android各种尺寸图标。
工具
PS
脚本
这个PS脚本是我参照别人写的,直接共享出来:
try {
// 获取当前的文档
var pngDoc = activeDocument;
// 获取当前的文档名称
var destName = pngDoc.name;
// 有则使用当前文档名称
// 没有则提示用户输入
if (destName == undefined) {
// 弹出对话框,提示输入文件名
destName = prompt("请输入文件名", "icon_");
} else {
// 去掉后缀
var index = destName.indexOf(".");
if (index != -1) {
destName = destName.substring(0, index);
}
}
if (destName == undefined) {
throw SyntaxError();
}
// 弹出文件夹选择窗口,提示选择输出图标的文件夹
var destFolder = Folder.selectDialog( "请选择一个输出的文件夹:");
if (destFolder == undefined) {
throw SyntaxError();
}
// 定义放缩倍数
/**
var icons =
[
{"name": "drawable-hdpi", "size":72},
{"name": "drawable-ldpi", "size":36},
{"name": "drawable-mdpi", "size":48},
{"name": "drawable-xhdpi", "size":96},
{"name": "drawable-xxhdpi", "size":144},
{"name": "drawable-xxxhdpi", "size":192}
];
**/
var icons =
[
{"dir": "drawable-hdpi", "scale":0.5},
{"dir": "drawable-mdpi", "scale":0.334},
{"dir": "drawable-xhdpi", "scale":0.667},
{"dir": "drawable-xxhdpi", "scale":1},
{"dir": "drawable-xxxhdpi", "scale":1.333}
];
// 表示输出的格式为PNG。并设置输出PNG时不执行PNG8压缩,以保证图标质量
var option = new PNGSaveOptions();
// 保存当前的历史状态,以方便缩放图片后,再返回至最初状态的尺寸
option.PNG8 = false;
var startState = pngDoc.historyStates[pngDoc.historyStates.length - 1];
// 遍历所有图标对象的数组
for (var i = 0; i < icons.length; i++)
{
// 当前遍历到的图标对象
var icon = icons[i];
// 将原图标,放缩到当前遍历到的图标对象定义的尺寸
pngDoc.resizeImage(pngDoc.width * icon.scale, pngDoc.height * icon.scale);
// 导出的图标的名称
var destFileName = destName + ".png";
// 创建文件夹
var savePath = destFolder + "/" + destName + "/" + icon.dir;
var saveFolder = Folder(savePath);
if(!saveFolder.exists) {
saveFolder.create();
}
// 图标输出的文件
var file = new File(savePath + "/" + destFileName);
// 将缩小尺寸后的图标导出到指定路径
pngDoc.saveAs(file, option, true, Extension.LOWERCASE);
// 将历史状态,恢复到尺寸缩放之前的状态,即恢复到原来尺寸,为下次缩小尺寸做准备。
pngDoc.activeHistoryState = startState;
}
// 保存PSD格式
option = new PhotoshopSaveOptions();
var destFileName = destName + ".psd";
var savePath = destFolder + "/" + destName;
var file = new File(savePath + "/" + destFileName);
pngDoc.saveAs(file, option, true, Extension.LOWERCASE);
// 关闭
pngDoc.close(SaveOptions.DONOTSAVECHANGES);
} catch (err) {
// 抛异常来退出程序
}
代码复制出来,保存为xxx.jsx格式文件。
操作步骤
- 用PS新建或者打开图标
- 选择菜单【文件】>> 【脚本】>> 【浏览】,选择刚才保存的xxx.jsx脚本文件
- 第一个弹出框输入文件名,第二个弹出框输入保存图片的路径
- 等待脚本执行结束即可
可能遇到的问题
希望对你有帮助!!!