含半透明像素的PNG如何转换ico格式文件

2,362 阅读4分钟

进入6月就一直忙,专栏的文章也迟迟未更新,这篇拖拖拉拉的1个月才写完。是实际工作中遇到的问题,总结下来,万一其他的UI设计师遇到了,就可以少走弯路。

ico文件是图标文件格式,UI设计师一般都做过这种图标文件(纯移动端的UI除外),但即使做,通常也数量很少。这次项目中,遇到了批量制作这种图标格式的文件作为toolbar的图标(不要问我是什么平台开发的,(⊙_⊙)?不懂)。因为日常除了自己的本职工作,还兼任给其他UI答惑解疑,不是我的设计水平多么高,而是跨界多年,也算掉坑无数,各种奇奇怪怪的现象遇到过不少。总之开发人员需要一堆扁平化的图标,替换掉原来的图标,但PNG转化成ico之后边缘锯齿化的非常厉害,负责这项工作的UI实在搞不定,来咨询我解决方法,这是背景。
随便拿几个图标举例一下


如上这张图,上面是原始图标,下面是我们需要替换的图标。单纯从图片上来看,显而易见,原始图标边缘粗糙无比,反而是新做图标更加圆润。但实际使用时,恰恰相反,原始图标因为是一套成熟产品一直使用的,不会有什么问题,反而新做的这些图标,虚化的非常厉害,惨不忍睹。效果是下面这种(开发人员放到产品界面上的效果忘记截图,不过和浏览器下载转换后的ico格式显示的差不多):

出了问题自然要解决,那么先来分析一下原因,首先,是透明度的问题,做过ico图标的设计师小伙伴们都知道,ico格式支持透明度是毋庸置疑的,好了,再来参照原图标,尤其是表示时间的圆形,周围何以呈现出这个样子?当当当,灵机一动,问题应该出现在半透明像素上。


实践出真知,看一下是否如此。那如何才能让半透明像素变成不透明像素且依旧保持原来的效果呢?方法很简单,因为我们使用ico的背景色是白色,所以当我把原来的图标放置到白色背景上,此时重新吸取的色值与原半透明色值在此白色背景下呈现的效果是一致的。


根据开发人员的需要,透明像素是要保留的,那实际操作呢?总不能一个像素一个像素的去替换所有的半透明像素吧?设计师小伙伴应该立刻想到的方法是魔棒,合并图层后,把容差改成0,然后选取白色,删除。
此时的原带有半透明像素的PNG已经变成了下面这个样子。


似乎边缘很多锯齿,但转成ico之后,应用起来,效果堪称完美!


(这里白色边缘的原因就不用解释了,因为浏览器下载栏是灰色背景)
飘飘然一下,又成功解决了一个工作中的问题。

好了,可以整理一下具体的解决思路了。再遇到此类问题,处理方法如下:

1.和开发人员确认使用该图标的背景色
2.把做好的图标添加该背景色,合并图层,使用ps的魔棒(容差0)或者选择色彩范围功能,精确的删除背景色。
3.通过上面流程处理过的PNG格式的图标,已经没有了半透明像素,但保留了透明像素,此时再使用在线转换,转成ico格式,妥妥的。

以下为一点心路历程:
前段时间感慨自从步入高龄,学习效率6666的下滑,不似年轻时学东西触类旁通,通过这件事发现,优势还是有的,那就是融会贯通。各种工具都会用一点,各种功能都了解一点,才能真正的把工具转换成工作中的战斗力。