像素图标绘制技巧.pdfVIP

像素图标绘制技巧 图标是网页中的常见元素，主要功能是表意，也包含装饰及品牌传递的作用。存储为 gif 、png 等位 图格式的图标，称为像素图标，大小通常为 16px 、24px 、32px 等。当然像素图标也可以理解为像 素风格的图标，不一定是位图格式存在，本文中我们按格式去理解。与像素图标相对的是矢量图标 ，通常以 svg 格式及字体格式存在，大小可以随意调整。这篇文章主要介绍个人的一些像素图标绘 制经验，不足之处还请各位高手多多指教。 1. 图片格式与透明 全透明、 alpha 透明、图片格式及兼容性 全透明是指图片的格式只支持完全透明和不透明两种状态， alpha 透明是指图片格式可以支持不同 的透明程度。 各种图片格式对透明的支持程度以及浏览器兼容性见下表 全透明和 alpha 透明对图标有什么影响 那么这些东西对我们做像素图标有什么影响呢？看下图 可以看到，全透明的图标需要根据应用场景的背景色进行优化，背景色变化了就要重新优化，如果 不想优化并且要通用的话，就必须限制设计的表现手法，这样通常会让图标边缘锯齿感增强。而半 透明的图标不用优化，也可以多处通用。 我们看一个没有针对不同背景优化的例子 可以看到，