添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 设计分享 >

熊氏切图法--一键导出App icon

时间:2014-11-06      来源:ui.cn     

  还在为切不同大小的app icon感到苦恼嘛?看完本文,你也许能找到答案,熊式切图法,你值得拥有!
 

  做App设计的小伙伴有没有遇到这种情况呢,同一个icon要输出N种尺寸,用传统的方法批处理调整图片大小比较繁琐,不方便同时整体预览,如果后续修改了设计,又要重复一次这个批处理的过程,有没有一键输出所有尺寸的方法呢?本熊这就给大家推荐一种强大的技巧:智能对象+生成图像资源,是的,本熊不要脸的将其命名为“熊氏切图法”

  总的思路就是设计好最大的尺寸(1024px*1024px)后,将对应的所有层转换为智能对象,再缩放至各种不同的小尺寸,然后重命名图层,最后通过

  文件 > 生成 > 图像资源,自动生成不同尺寸的icon文件。
 

熊氏切图法--一键导出App icon
 

  智能对象已经诞生很久啦,想必大家都不陌生,我就不废话了,相关的资料早就有酷友分享过,另外这个“生成图像资源”是从adobe cc后才有的新功能,它的横空出世让UI设计师们终于脱离了手动切图的苦海,这个功能默认是关闭状态,每次都需要手动开启(文件 > 生成 > 图像资源),它的原理是识别图层名称中有无“.jpg”".png"之类的扩展名,将拥有扩展名的图层或组自动保存为单独的对应格式的图片(保存的时机是在你保存psd文件的同时),存放在psd同级目录的“-assets”文件夹中;当你需要修改icon或者导出其他项目的icon时,只需要打开任意一个智能对象,将新设计替换进去,保存智能对象和psd后,所有小尺寸的icon也更新为修改后的版本,assets文件夹中的文件也会更新。更多UI设计网页设计资源www.internetke.com
 

熊氏切图法
 

  原理明白了,实际操作中会遇到一些具体的问题,以下就是本熊根据上述方法发展出的三种方案he和一些心得体会,与大家分享,希望能抛砖引玉

  psb智能对象

  转换为智能对象的图层,实际上是被转换成了“psb”格式的文件保存在“psd”文件中(很拗口有木有?)双击智能对象图层的缩略图即可编辑,我称之为psb智能对象(说句题外话,将图层转换为智能对象默认是没有快捷键的,而“转换色彩模式”这么不常用的功能居然有快捷键,而且还是ctrl+Y,ctrl+T自由变换的时候很容易误操作有木有?饿逗比太反人类了,所以建议把ctrl+Y改成转换为智能对象~)

  优点:所有效果都在ps中实现,无需切换软件,像素级精细

  缺点:智能对象如果是psb图层的话,缩小后最边缘的一圈1px的范围会发虚,变成半透明的状态(这个无法避免,跟缩放的算法有关),我的解决方案是:在智能对象下建立一个大小一致的矢量图层,放在同一文件夹之下,文件夹名称改为“生成图像”的命名规则(如image@2x.png),如下图:
 

一键导出App icon
 

  关闭边缘填充图层的小眼睛,放大看看icon边缘有啥不同?

web前端视频教程
相关文章
web前端视频教程


最新更新

网页特效

web前端视频教程