如何绘制边缘清晰又圆润的小尺寸图标?

关注者
496
被浏览
21261
曾今痴迷小像素上的 pixel perfection,有别于严格意义上的像素画,不追求像素完全对齐,只追求小尺寸上的清晰,平滑,准确,概括,堆细节,当然最重要的还是,小,一个像素也不浪费。
见我头像

32 像素,便可以表现出陶花盆的质感,泥土中得碎石,叶片的肉感,叶脉和水滴。并在有限范围内做到尽量概括。
不过在国内几乎没见过的同好,随着屏幕分 ppi 的上升, 我们像素党已经基本没有活路了。

好了, 不扯了,下面答题。
要达到题主的要求,基本上只有小尺寸对齐像素重钩路径, 然后用路径微调来做视觉修正。
几个小技巧:
一个是圆形描边时扩大线宽尽量扩内不扩外, 保持外轮廓清爽
在次像素模糊程度可以接受的情况下去尽量还原造型, 眯着眼看会比较管用
多线交界处可以适当减小交界处的线宽,避免笔画粘滞

左数第一个是我优化的
附上 psd
dl.dropboxusercontent.com
pan.baidu.com/s/1dD9vGf
^ ^

-----------------------------------------------------------------------------------------------------------

更新加几句话

看到很多人提到对齐像素的问题。

我个人的理解是,和 Mac 和 Windows 的字体渲染取向是一样的。
是一个你更注重形态还是更注重清晰度取舍,但是还不止这些。

当然同时完成这两点是可能的,但在大多数情况下的既有图形本身包含了很多的视觉修正和空间调整,很难完全满足既保证形状又保证正好对齐像素,通常至少会有一方面需要牺牲一些, 这个时候微调的作用在于找一个平衡点,准确表达和清晰度之间的平衡,优化下去的空间也是无限的,只要花时间花心思(这个很有趣的)。

粗暴的认为只要对齐像素了,形状比比例跟原来差一些没关系,或认为只有对齐像素是最优解,没有优化空间的,都是很片面的想法。

虽然像素优化已经变得越来越过时了,但类似的优化思路是有历史延续性的。