Sketch完美生成多尺寸App图标插件

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

使用方法

1. 建一个1024x1024大小图层进行Icon设计

Paste_Image.png

2.打开Plugins-->App Asset Export-->Perferences 配置各个平台输出路径(只需要一次)

Paste_Image.png

3. 打开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