0.更新历史
2017/02/14 ver 1.04 插件在 Sketch 41/42上的无法输出 bug,已经修正,
ver 1.03 除了Android/iOS 图标外,现在已经支持Mac 桌面应用的icns 输出,
如果觉得好用,请给我加入star https://github.com/work4blue/sketch-app-asset-export
另外几个需求比较复杂,一是Apple watch图标输出,二.是Window标准 ico输出,
三.微信小程序,圆形图标生成.
如果真有觉得这个需求有必要,或有其它需求,请在评论中通知,或在github.com上发issue
一.问题背景
UI设计师生成App各种尺寸要求的图标一直是很繁琐的事情,iOS 和Android对于各种分辨率下的尺寸要严格要求.而且数量很多.
而且新的XCode的引入image.xcasset格式.又增加额外要求,即指定规格图标必须拖入精确的尺寸的图标,否则就会编译报警甚至报错.
设计师和开发者都为这个低技术含量又必须做的事情头大.
因此我们找一些插件来解决这个常见问题
一种方案有人提到是 使用 icon stamper 插件
http://www.zcool.com.cn/article/ZMTA5NDky.html
很不幸,这个插件在3.6的版本无法正常工作,关键是对于辅助文件Content.json,以及Android的版的支持都没有,换句话,这一些麻烦事还得开发工程师自己做.
当然还有一个更麻烦办法是用 PS的脚本(估计已经在新版无法运行了)
http://www.ui.cn/detail/40848.html
最终我们决定自己开发一个插件来实现这一些功能.最终这个插件开发出来,它有如下优点:
-
Icon设计师只需要设计一份1024x1024图标,本插件会自动按App的要求生成各个标准尺寸图标.
-
可以同时导出辅助文件到App的开发环境当中直接编译.这也极大减轻开发者的工作量
-
也能按要求生成各大应用市场要求各种尺寸图标.
二.插件使用
首先可以直接在 Sketch Tool 中搜索"App Asset Export" 这个插件直接安装
Paste_Image.png
或者到源码主页下载双击安装 https://github.com/work4blue/sketch-app-asset-export
使用方法
- 建一个1024x1024大小图层进行Icon设计
Paste_Image.png
2.打开Plugins-->App Asset Export-->Perferences 配置各个平台输出路径(只需要一次)
Paste_Image.png
- 打开Plugins-->App Asset Export-->Export App Icons 输出,bingo!
Paste_Image.png
输出结果
+. iOS 输出
除了各种图标,还直接生成 AppIcon.xcassets 在XCode 直接编译
(可以看到每一种尺寸,包括最新的iPadPro的图标尺寸均能生成)
Paste_Image.png
+. Android 输出
除了精确尺寸,还能按要求生成相应目录,直接拷入res目录即可使用
Paste_Image.png
- App Store发布版本
各个应用市场对于尺寸要求不一样,本插件同样可以直接生成. 本插件能生成 Google play ,iTune,QQ,小米市场等各种尺寸
Paste_Image.png
这个插件扩展
Apple Watch对于Content.json的格式更加复杂,因此我在考虑是否要加入这个支持,如果你们觉得有必要请通知我.
或者有其它尺寸和格式要求要输出,也可以支持我们
如果有用,请捐款支持我们,这样我们有动手开发更多App Asset 输出功能
Paste_Image.png
网友评论