每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
熊氏切图法--一键导出App ico...
- 经验类型经验/观点原作者：原作者
- 经验属性原创文章
- 经验版权署名-非商业性使用-相同方式共享
68964
23
120
2014-11-06
还在为切不同大小的app icon感到苦恼嘛？看完本文，你也许能找到答案，熊式切图法，你值得拥有
2017年2月21日更新
感谢伟大的Sketch，为我们提供了更便捷的icon导出方法，原理差不多，用一个公用组件来实现同步修改，不同尺寸的用途都标注在导出的名称内，见附件
11月30日更新
附件中提供的模板使用方法：
双击图层缩略图，将你的1024x1024的icon放入智能对象中，保存后模板中就会全部更新为你的新icon了，其实用本文提到的方法只用一个图层就可以导出各种尺寸的文件了，做成这样是为了方便大家预览所有尺寸的效果，尤其是小尺寸的icon
另外新做了一版用二次线性算法缩放的psb智能对象，这样就不用垫底色了，边缘是完美的硬边~
更新还包括了iphone6+专用的60x60@3x.png（180x180）
更新补充：
感谢@tichan 提醒，其实还有有一种十分简单残暴的方法可以将一个图层导出成为若干个不同尺寸的文件（无需转换为智能对象），只需要用到生成器：将图层或组命名为“1024.jpg,50% 512.png,200% 2048.jpg”，这样就可以生成1024.jpg、 512.png、2048.jpg三张图片，图层名中的逗号用来分割文件名，百分比表示在当前图层或组的基础上缩放的比值，真正做到“一键生成”多种尺寸，当然这个方法也有缺点，跟第一种方式一样，被缩小的图像会因为算法的问题导致边缘虚掉，且无法用添加底层的方法弥补，如果输出的图像多的话，图层名称会非常的长...感受一下4个图像时的效果：
--------------------------更新的分割线--------------------------
做App设计的小伙伴有没有遇到这种情况呢，同一个icon要输出N种尺寸，用传统的方法批处理调整图片大小比较繁琐，不方便同时整体预览，如果后续修改了设计，又要重复一次这个批处理的过程，有没有一键输出所有尺寸的方法呢？本熊这就给大家推荐一种强大的技巧：智能对象+生成图像资源，是的，本熊不要脸的将其命名为“熊氏切图法”
总的思路就是设计好最大的尺寸（1024px*1024px）后，将对应的所有层转换为智能对象，再缩放至各种不同的小尺寸，然后重命名图层，最后通过
文件 > 生成 > 图像资源，自动生成不同尺寸的icon文件。
智能对象已经诞生很久啦，想必大家都不陌生，我就不废话了，相关的资料早就有酷友分享过，另外这个“生成图像资源”是从adobe cc后才有的新功能，它的横空出世让UI设计师们终于脱离了手动切图的苦海，这个功能默认是关闭状态，每次都需要手动开启（文件 > 生成 > 图像资源），它的原理是识别图层名称中有无“.jpg”".png"之类的扩展名，将拥有扩展名的图层或组自动保存为单独的对应格式的图片（保存的时机是在你保存psd文件的同时），存放在psd同级目录的“-assets”文件夹中；当你需要修改icon或者导出其他项目的icon时，只需要打开任意一个智能对象，将新设计替换进去，保存智能对象和psd后，所有小尺寸的icon也更新为修改后的版本，assets文件夹中的文件也会更新。
原理明白了，实际操作中会遇到一些具体的问题，以下就是本熊根据上述方法发展出的三种方案he和一些心得体会，与大家分享，希望能抛砖引玉
方案1：psb智能对象
转换为智能对象的图层，实际上是被转换成了“psb”格式的文件保存在“psd”文件中（很拗口有木有？）双击智能对象图层的缩略图即可编辑，我称之为psb智能对象（说句题外话，将图层转换为智能对象默认是没有快捷键的，而“转换色彩模式”这么不常用的功能居然有快捷键，而且还是ctrl+Y，ctrl+T自由变换的时候很容易误操作有木有？饿逗比太反人类了，所以建议把ctrl+Y改成转换为智能对象~）
优点：所有效果都在ps中实现，无需切换软件，像素级精细
缺点：智能对象如果是psb图层的话，缩小后最边缘的一圈1px的范围会发虚，变成半透明的状态（这个无法避免，跟缩放的算法有关），我的解决方案是：在智能对象下建立一个大小一致的矢量图层，放在同一文件夹之下，文件夹名称改为“生成图像”的命名规则（如image@2x.png），如下图：
关闭边缘填充图层的小眼睛，放大看看icon边缘有啥不同？
方案2：ai智能对象
在ai中复制的对象，粘贴到ps中时会询问粘贴为：
如选择智能对象，那么之后双击缩略图就会在ai中打开，我称之为ai智能对象
优点：在ai中利用尺规作图绘制复杂的曲线十分便捷（再说句题外话，顺手推荐神器：SubScribe，请自行谷歌），缩放后不会出现上边psb智能对象的边缘透明问题，所以文件层级结构简单，给智能对象改名即可
缺点：元素不要超出1024x1024这个画布的范围，否则保存后回到ps里边缘可能会虚（把超出的图层隐藏掉也没用）；除非开启像素预览+像素对齐，否则ai中的锚点和曲线坐标可能出现小数点导致边缘发虚
对比下psb的版本，不需要填补边缘的透明色，层级简单多了
方案3：纯ai文件
其实ai本身有2个很强大的特性：符号和画板，可以方便的实现同一个元素的不同尺寸输出：将任意图形拖动到符号面板里即可转换为“符号”，
这个符号就等于是一个智能对象啦，然后将它复制若干份调整为不同的大小，再用“画板工具”
点击每个符号生成多个画板，记得重命名画板
最后用“导出”命令，勾选“使用画板”，就能生成一系列不同尺寸的图片，文件名是ai文件名+画板名。
举个栗子：把画板的名称修改为image@2x，ai文件名是App icon，那么导出的png图片就是App icon_image@2x.png，如觉得ai文件名多余，可用批量重命名工具去掉“_”之前的ai文件名
以上就是全部三种方法啦，其实这个方法不止限于App icon，同样适用于生成手机壁纸等需要输出各种尺寸的场合，大家可以发挥一下想象~
顺手附上：Adobe官网的“生成器命名规则”
好啦，最后是福利，附件中是我制作的三种方法对应的源文件，大家可以下载下来研究下（使用mac打包的，win系统的话请用最新版winRAR解压，否则文件名可能会有乱码）本熊比较懒，附件里没有做retina HD 的@3x尺寸，需要的朋友可以自己动手做做看，另外附上App Icon Template [4.0] 文件太大所以只提供链接，里边包含了iphone6 plus对应的icon尺寸。
全部评论：23条
-
-
-
-
-
xiedandan.com
2015-01-30 11:51妈蛋。。。
照着楼主的说法。。把图片缩小，转换好，一个个放在文件夹~~然后
我的CC 版本14.0 X32 怎么没有 文件-生成-图像资源.................存为WEB格式下面直接就是 恢复。。。 -
-
-
-
Youngxkk
2014-11-22 20:16我一直有一个问题没有解决？
假如我的PSD 里图标的大小是40x40，自动切出来的也是40x40，但是我需要预留空白区域，也就是我希望切出来的是50x50（图标大小还是40x40），可是我不能用前缀名加20%的缩放的方式。
用蒙版的方法没有成功。楼主有啥办法没？ -
-
熊三次方
2014-11-19 14:06@ashung: 感谢回复的这么详尽哈~看来遇到同时技术流的朋友啦
其实我用的就是cc2014，缩放发虚的问题已经确认是由于算法的问题导致的，默认的二次立方是产生虚边问题的元凶，同样的智能对象，二次线性缩小后不会虚边；你提到的方法很实用，在没有背景色的情况下我也是这样做的，不过由于app icon的特殊性，必须有背景色，所以有完美主义的设计师（比如我）更倾向于像素边缘清晰，所以我做的这个模板中的方案1主要是为了解决这个问题，你可以下载看看，方案1导出的图标由于底色边缘用了矢量形状垫底，至少可以保证不会虚边（半透明），至于颜色是否能和icon本身对的上，这个得分情况；这个模板是方便大家修改一个文件后可以预览不同大小时的效果（图层命名法做不到这点对吧？实操中图层重命名的选字操作还挺别扭，一不留神就变成全选，如果要导出十几种尺寸，这个长度想想都...）对于方案一我又有个想法，或许用二次线性缩放做出来的模板可以一劳永逸的解决虚边问题，不过不知道具体效果如何 -
-
ashung
2014-11-15 13:47@熊二次方:
从你的截图来看，Ps的版本可能是CC(14.1或者14.2)这个版本的Generator在智能对象缩放上有问题（假设智能对象本身的图像是100px，在文档中被缩小成50px，这时如果文档放大200%，智能对象就会恢复原来的尺寸，但是这个版本上不会恢复原尺寸所以会模糊，这个Bug在之后的CC2014有修复），并且不支持缩放带有小数点的百分比值。你后面说的12.5%在这个版本是不行的（CC2014已修复）。
你所用的方法一，你使用原始的设计尺寸为最大的1024px图标，然后缩小到其他各种尺寸。如果你接受这个做法输出的效果，内容的边缘模糊的几率很大（不是图标轮廓的边缘模糊，这个模糊完全是技术问题导致），这样并不需要将1024px的图层转成智能对象。使用Generator的做法就是改图层命名，保证1024的矩形区域外没有其他内容，并且这个矩形是对齐的，然后就是写很长的图层。也可以用图层嵌套的方式。完全不需要像你这样复杂很多图层，不要将图层转成智能对象。
长图层名方式：
已经确定尺寸的经历写尺寸，不要写百分比. 长图层虽然很繁琐但是可以保存下来，其他图标文件也能用。
1024x1024px iTunesArtWorks@2x.png, 512x512px iTunesArtWorks.png, ....................
图层嵌套的方式
图标名看起来简洁，如果要其他图标文件就是把图层组复制到新的图标文件内。
1024x1024px iTunesArtWorks@2x.png
512x512px iTunesArtWorks.png
120x120px Appicon60x60@2x.png
60x60px Appicon60x60.png
新的CC2014上可以结合默认设置图层，大部分图标都是Appicon开头的然后根据尺寸加不同后缀
default iTunesArtWork@2x, 50% iTunesArtWork, 120x120px 60x60@2x, 60x60px 60x60, 50x50px 50x50, 40x40px 50x50
Appicon.png
iTunesArtWork的文件名特殊，也被加了Appicon前缀，最后记得修改 AppiconiTunesArtWork.png和AppiconiTunesArtWork@2x.png的文件名。
AI的方法也不需要新建很画布，如果你想人工输出的话可以直接在1024的图标上画个切片，Ai的切片在导出时可以修改尺寸不会模糊。这样很耗时间，最好找个脚本工具。 -
-
-
-
-
-
-
Zxming
2014-11-06 14:06以前也这么搞，不过对于形状类型的图标虚边问题还是没法解决，所以这么生成的也就对精细程度要求不高的资源还行，要求高的还是的老实调成目标尺寸然后挪锚点==
图片倒是可以这么弄的 -
tahr
2014-11-06 14:03我有个问题，不知道有没有解决方法。
其实用智能对象缩放至不同小尺寸那个方法有个问题，因为使用ctrl+T缩放时，ps默认使用的是两次立方的插值算法。这个方法在缩小时会长生一些额外的类似锐化的额外像素噪点，从而使这种方法所出来的各个小尺寸图标不干净清晰。
我一般是打开大图，使用ctrl+alt+I，在重采样那儿选择两次线性的算法，然后缩小图标至需要的小尺寸，保存。两次线性的采样算法不会产生类似锐化的失真像素噪点。但是如果使用熊同学你的这种方法，用智能对象，ctrl+T自由变换时，我一直没有找到那个地方能把默认的两次立方改为两次线性（设置—常规—图像插值处可以修改，但是这样每次都要修改实在不方便）。 -
-
更多作品
发表评论