美文网首页用Sketch做UISketchUI各种尺寸 命名 规范
Sketch完美生成多尺寸App图标插件

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

作者: 蓝点工坊 | 来源:发表于2016-10-18 21:49 被阅读7979次

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

相关文章

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

    0.更新历史 2017/02/14 ver 1.04 插件在 Sketch 41/42上的无法输出 bug,已经修...

  • 一键生成App图标所有尺寸的三个酷站分享

    目前很多app设计新手不懂如何去生成各种APP图标尺寸,其实很简单的。 目前网上有很多一键生成App图标所有尺寸酷...

  • 一键生成App图标所有尺寸

    很多app设计新手不懂如何快捷的生成各种APP图标尺寸,其实使用工具很简单的,网上有很多一键生成App图标所有尺寸...

  • 网页快速生成AppIcon

    生成APP常见的图标尺寸的办法有2种: 第一种:自己根据设计出来的APP图标尺寸自己调整图标icon尺寸大小。 第...

  • 网页快速生成AppIcon

    生成APP常见的图标尺寸的办法有2种: 第一种:自己根据设计出来的APP图标尺寸自己调整图标icon尺寸大小。 第...

  • 网页快速生成AppIcon

    生成APP常见的图标尺寸的办法有2种: 第一种:自己根据设计出来的APP图标尺寸自己调整图标icon尺寸大小。 第...

  • miss Jiang

    To miss Jiang sketch插件 微信设计团队Sketch的工具集一键多尺寸切图假数据填充sketch...

  • iOS app图标的生成,设置与更改 包会~

    xcode版本:9.3.1 iOS app图标理解: icon图标的设置很简单,需要生成不同尺寸大小的图标,对应不...

  • 一键生成iOS各个尺寸的App图标

    一键生成iOS各个尺寸的App图标(附脚本代码) 前言 之前生成App图标都是用封工具软件,最近发现我的那个工具用...

  • 产品开发用到的几个工具

    产品设计:铅笔+白纸,sketch,pixateorigami, 尺寸导出:zeplin, 或sketch插件me...

网友评论

  • 27d86a6855bc:倒出来的不全 还差好多
    蓝点工坊:@阿姣_79c7 你用的Sketch 是哪一个版本,新版OS 下这个插件输出不了
  • d98ce2984f47:没有看到输出的文件呀
    蓝点工坊:@好好小大小姐 操作系统升级后,接口不行了
  • 橙汁_4c74:没反应是怎么回事 ,输出的文件在哪?
    蓝点工坊:@橙汁_4c74 新的版本导致输出不正常
  • Lorax:现在用的是sketch49 啥也没倒出来 找不到文件夹:joy:
    蓝点工坊:@Lorax 操作系统或者Sketch api变了,一大票插件都不能用, 太折腾人.
  • 瓶子君:XODE9中那个APP STORE的图标没导入进去,而且少了几个图标
  • 懂我说话:想试试,结果什么反应都没有
  • b35c281ca5a5:配置文件怎么填写 我按照默认的啥也没导出来
    蓝点工坊:@jinxi_xia 不需要写配置文件啊
  • 7d3e949c2e0a:好用。工作效率提高不止一点点。必须支持!:+1:
    懂我说话:我咋用不了
  • 4e5e2bfecd2e:整体不错!但是iOS输出的尺寸不够,然后我改了下export.js里面的配置,增加了几个conten.json的配置(我是产品经理啊啊啊啊啊)
    蓝点工坊:@sox神教朝阳分舵舵主 是哪个几个尺寸,你提交一下,我加入新版本
  • wheelsMaker:sketch 42用不了,生成了文件夹,但是文件夹里没有文件
    蓝点工坊:@wheelsMaker Sublime Text神器,调试直接在系统log 看输出,没法单步调试,所以大改前一直用 git 备份
    wheelsMaker:@蓝点工坊 真不错,已经可以成功导出了,加了个星,而且会推荐给同事使用。有个问题还想请教一下,你写插件的时候用的什么编辑器,怎么调试的?
    蓝点工坊:这是插件在 Sketch 41/42上的 bug,已经修正, 更新安装1.04版本, 如果可用,请帮我在https://github.com/work4blue/sketch-app-asset-export 加一个星
  • 放纵的野马:您好,我发现shi'y使用Sketch最新版本,使用该插件并且已经选择了一个层,但是仍然无法导出。望更新!
    蓝点工坊:这是插件在 Sketch 41/42上的 bug,已经修正, 更新安装1.04版本, 如果可用,请帮我在https://github.com/work4blue/sketch-app-asset-export 加一个星
    蓝点工坊:你的版本号是?我在4.0.3 是正常输出的.你可以发一个导不出icon 到 bluedrum@qq.com我试试
  • MH杭:并不会导出啊 什么也没提示
    蓝点工坊:@酷炫杭 我测试在4.0 可以输出,输出前提你先要选中一个1024x1024的layer,不选中是无法输出的.
    MH杭:是4.0
    蓝点工坊:@酷炫杭 首先要选一个层,版本是4.0上吗?
  • bubblels:不知道为什么,我安装了使用不了,可以设置,但是导出后什么也没有。
    蓝点工坊:这是插件在 Sketch 41/42上的 bug,已经修正, 更新安装1.04版本, 如果可用,请帮我在https://github.com/work4blue/sketch-app-asset-export 加一个星
    蓝点工坊:@bubblels 首先要选一个层,版本是4.0上吗?
    蓝点工坊:@bubblels 提示什么?你可以把源文件发我 bluedrum@qq.com

本文标题:Sketch完美生成多尺寸App图标插件

本文链接:https://www.haomeiwen.com/subject/ihjtuttx.html