进入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的下滑,不似年轻时学东西触类旁通,通过这件事发现,优势还是有的,那就是融会贯通。各种工具都会用一点,各种功能都了解一点,才能真正的把工具转换成工作中的战斗力。

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

  1. Aveiconifier是一个非常实用方便的制作ico格式文件的小工具~

    本文地址:http://www.jb51.net/article/8314.htm Aveiconifier是一个非常实用方便的制作ico格式文件的小工具~ 也许有一些对网页知识不是很了解的网友并不清 ...

  2. unity向服务器发送xml文件格式,Unity读取Excel文件转换XML格式文件的方法

    Unity读取Excel文件转换XML格式文件的方法 发布时间:2020-06-23 09:34:33 来源:亿速云 阅读:107 作者:清晨 不懂Unity读取Excel文件转换XML格式文件的方法 ...

  3. qlv格式的视频转换MP4格式文件,不需要任何软件,一个插件搞定

    qlv格式的视频转换MP4格式文件,不需要任何软件,一个插件搞定 插件法,此法对于网页视频有奇效 亲测:QQ浏览器,应用中心,搜索 猫抓,安装此应用插件,就可以直接下载腾讯视频,而且下载是MP4格式

  4. html5图标用什么格式转换,.ico格式图标制作转换教程及DIY桌面图标的方法

    Win7之家( www.win7china.com):.ico格式图标制作转换教程及DIY桌面图标的方法 本文教程就是借助魔方电脑大师,DIY一套极具个性风格的桌面图标.(我们以软媒旗下闪游浏览器图标 ...

  5. 文件流能转换格式吗_amr转换mp3格式文件

    MP3是非常标准的音频数字编码格式.区别于其他格式的优势在于,它可以在不降低音质的前提下,大幅的降低文件的大小.因此MP3格式应用范围极广,我们日常生活中用到的歌曲格式也多为MP3.今天要给大家说的是 ...

  6. kgtemp文件转换mp3_amr转换mp3格式文件

    MP3是非常标准的音频数字编码格式.区别于其他格式的优势在于,它可以在不降低音质的前提下,大幅的降低文件的大小.因此MP3格式应用范围极广,我们日常生活中用到的歌曲格式也多为MP3.今天要给大家说的是 ...

  7. 怎么转换html格式文件怎么打开,html格式怎么转换

    大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 以PDF格式为例,html格式转换的方法如下: 1.打开PDF转换器,进入主页面. 2.点击选择PDF文件转换器,会发现分为几个小 ...

  8. visio的.vsd格式文件转换.eps格式文件的方法+Gsview裁剪EPS文件

    **************************************************************************************************** ...

  9. ps保存的图片找不到ico格式怎么办?

    (欢迎光临差–点先生的博客) ps保存的图片找不到ico格式的解决方法 第一种情况: 第二种情况: 第一种情况: 图片像素太大,导致无法保存为ico文件格式. 因为ico文件最大像素为64x64,也就 ...

最新文章

  1. debug 没有错,release出错
  2. ajax后台重定向会返回什么_第三十五天JavaScript中的ajax
  3. JSON数据表示格式简介(JavaScript对象表示法)
  4. css阻止换行_CSS中,如何处理短内容和长内容?
  5. IM即时通讯服务将成联结谷歌、雅虎纽带(图)
  6. python fromhex_Python hexstring-list-str之间的转换方法
  7. python训练聊天机器人_一个可以进行训练的聊天机器人,一次chat的源码
  8. werkzeug create_environ
  9. Java反射修改返回值_java反射调用时如果返回值是整型数组怎么处理?
  10. python 自定义向量化(vectorized)操作函数
  11. [转载] 整理总结 python 中时间日期类数据处理与类型转换(含 pandas)
  12. MVC学习一:MVC简单流程
  13. 爬虫实例九 豆瓣电影详情信息
  14. 51nod1264线段相交
  15. 凤凰系统基于android x x86,凤凰系统(Phoenix OS)x86版1.0 beta官方版
  16. 前端页面崩溃现象处理
  17. 硬件设计基础——电阻、电容、电感、磁珠
  18. Linux 文件系统与日志分析
  19. cai课件 计算机辅助创新,浅谈cai课件制作的几个问题
  20. 协同办公系统(OA系统)选型对比参考

热门文章

  1. 计算机不能联网怎么设置吗,电脑不能联网怎么设置
  2. 一个SAP开发人员的双截棍之路 1
  3. C语言课程设计:图书信息管理系统
  4. JavaScript -Rhino 使用
  5. Infortrend横向扩展NAS又添新功能!DNS 负载均衡让CS飞起来
  6. iOS高仿百度传课,版本号2.4.1.2
  7. unity超级马里奥2d游戏开发课程-01课程介绍
  8. python图片批量重命名_python实现大量图片重命名
  9. (简单易学DNS反向解析
  10. 【CC3200AI 实验教程12】疯壳·AI语音人脸识别(会议记录仪/人脸打卡机)-语音采集