如何繪製邊緣清晰又圓潤的小尺寸圖標？

12-13

曾今痴迷小像素上的 pixel perfection，有別於嚴格意義上的像素畫，不追求像素完全對齊，只追求小尺寸上的清晰，平滑，準確，概括，堆細節，當然最重要的還是，小，一個像素也不浪費。
見我頭像

32 像素，便可以表現出陶花盆的質感，泥土中得碎石，葉片的肉感，葉脈和水滴。並在有限範圍內做到盡量概括。
不過在國內幾乎沒見過的同好，隨著屏幕分 ppi 的上升，我們像素黨已經基本沒有活路了。

好了，不扯了，下面答題。
要達到題主的要求，基本上只有小尺寸對齊像素重鉤路徑，然後用路徑微調來做視覺修正。
幾個小技巧：
一個是圓形描邊時擴大線寬盡量擴內不擴外，保持外輪廓清爽
在次像素模糊程度可以接受的情況下去盡量還原造型，眯著眼看會比較管用
多線交界處可以適當減小交界處的線寬，避免筆畫粘滯

左數第一個是我優化的

附上 psd
https://dl.dropboxusercontent.com/u/1654596/untitled.psd
http://pan.baidu.com/s/1dD9vGfZ
^ ^

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

更新加幾句話

看到很多人提到對齊像素的問題。

我個人的理解是，和 Mac 和 Windows 的字體渲染取向是一樣的。
是一個你更注重形態還是更注重清晰度取捨，但是還不止這些。

當然同時完成這兩點是可能的，但在大多數情況下的既有圖形本身包含了很多的視覺修正和空間調整，很難完全滿足既保證形狀又保證正好對齊像素，通常至少會有一方面需要犧牲一些，這個時候微調的作用在於找一個平衡點，準確表達和清晰度之間的平衡，優化下去的空間也是無限的，只要花時間花心思（這個很有趣的）。

粗暴的認為只要對齊像素了，形狀比比例跟原來差一些沒關係，或認為只有對齊像素是最優解，沒有優化空間的，都是很片面的想法。

雖然像素優化已經變得越來越過時了，但類似的優化思路是有歷史延續性的。

挺喜歡鼓搗這種極小尺寸圖標的，因為這個尺度下，我自己美術功底不足的缺陷不那麼明顯（形和透視這種往往被處理成最簡單的狀態），而同時我相對比較有耐心喜歡反覆調整的優勢可以得到發揮。這個尺度下追求各方面都完美的解基本不存在，所以只能按照我自己的一些心得說一說：

1. 不必老老實實畫各種基本形狀
很多小圖標尺寸是 16x16 這樣的（當然現在屏幕解析度越來越高，小圖標用到場合會越來越少），可以想見，裡面的有些基本形狀的尺寸完全可能小至 4x4 這樣的大小。如果要去雕琢，基本就有些類似像素畫了。而像素畫里的很多技巧就是用一些規則的、容易實現的、並且看起來更清晰的方法去擬合各種基本形狀。方不是方或者圓不是圓，這些都不是事兒，眼睛是很容易欺騙的，最後 1:1 的情況下效果好就 OK 了。比如就跟字體設計里會在很多筆畫集中看起來特別重的地方去嘗試削細某些筆畫，這背後應該是一個道理。

2. 雖然尺寸已經很小了，但有時候可以考慮再小一點
畫小圖標的時候很多慣性動作就是把整個圖標的外框去貼近邊框，但有時候可以反過來嘗試一下，略微縮小一個或兩個像素。這樣會有兩個好處：有時候一個軸對稱或者中心對稱的圖形在 16x16 尺寸下怎麼調整都無法同時滿足「像素對齊」和「絕對的對稱」，這個時候就可以考慮把他修改成一個 15x16 或者 15x15。另外一點就是把規則圖標統一縮小一點處理之後可以保證整套圖標里如果有特別不飽滿的就可以稍微拉大，使整套的尺寸更統一。

3. 就算我不會畫，刪我還不會嗎？
打開所有的圖標繪製教程，都會告訴你在同一個圖標不同尺寸下，去掉多餘的元素、減少透視並且盡量簡化小尺寸的細節。所以遇到畫出來效果不理想的元素，大膽嘗試把它去掉，實在不行就用其他的代替。

4. 世界上除了處女座，還有其他十一個星座
以前，當做皮膚還需要使用 #FF00FF 作為掩碼色來實現非常低端的透明的時候，我會花上好久好久去琢磨怎麼保證邊緣盡量不生硬，但後來打開了 TSF 的那些已經做到極致的皮膚，我發現其實最好的做法就是直接用 PS 在邊緣取個色，定好容錯值，直接填上 #FF00FF 就行了，不必多糾結。有些斜邊的模糊這本來就是一件見仁見智的事情，沒有絕對的對錯，比起這些調整，寧願多花點時間在前期確定好圖標的隱喻，讓大家看得懂圖標是神馬，而非讓大家來找錯是不是小圖標里每根斜線或者圓弧都已經在「鋸齒最少化」的狀態下。

總覺得還有，但是一下子木有想出來，讓我喝一杯東西慢慢想想……

&
&
&
&
&
&
&
&

A5,5, 0,0,0, -9.0586665785882266822114593168417, -33.807403920117390036241011990511
z" fill="white" stroke="white" stroke-w="0" /&>
&
&

&
&

&
&
&

就是你不能再用矢量的思維來考慮問題了，你得用像素的思維來考慮了。這就是所謂的做72dpi的設計。

像素畫中，每一個角度的直線，都是由像素點不同數量的排列重複組成。每一個弧線也是。

你去搜索：像素畫教程入個門即可。我幫你先搜一個：
http://site.douban.com/163509/widget/notes/8695193/note/218854596/

另外，我這裡的回答也不是正確的方法，稍後補。

題主你沒對齊像素。

看到第一個AI上面那些灰色的方格線了嗎？那個就是像素參考線，很顯然你的圖標兩個內圓都在半個像素的位置，放大了看不覺得，縮小之後就會糊成一團了。把每一個圓的邊緣都對齊格子，如果對不齊，微調外圓尺寸，這樣就能得到你需要的邊緣圓潤清晰的圖標了。

前面已經很多大神回答了這個問題，我也來現個丑，補充一下我的方法，個人感覺會比較直觀，容易操作一些。與前面的大神不同，我沒有經歷過細扣像素的那個年代，所以就以正常 icon 繪製過程中像素對齊的角度來嘗試一下：

我是用 Ai 繪製的，首先，保證像素對齊，在 Ai 中設置好網格並顯示網格，然後打開視圖下面的對齊像素

然後按照傳統意義上的像素對齊繪製這個 icon，由於分布不是很均勻，所以有以下三種形式：

圖 1 和圖 2 的區別就是開口的地方，圖 1 是嚴格按照了像素對齊繪製的，圖 2 開口的部分則多了半個像素，具體表現如何還得看實際尺寸輸出：

貌似效果都不是非常理想，開口部點陣圖 1 明顯要清晰一些。橫向比較，第一個中間部分有點糊，第二個整體很糊，沒法看，第三個外圍部分比較糊。其中第一個的外圍和第三個的內部是比較清晰的，能不能取個折中的方法呢：

這次我們把網格中的次分隔線設為 16，也就是說現在網格的一小格代表 0.5 像素，在視圖中關閉對齊像素，打開對齊網格，這樣錨點才能夠對齊到網格上去，看一下實際效果：

哎喲，感覺不錯喲。其實這個方法在 Google 的 MD 設計規範里（地址：Icons - Style - Material Design）是有出現過的：

對於比較複雜的 icon 可以對齊半個像素，它們的原理應該是類似的，讓出更多的空間，像素對齊並不是說一定要嚴格的對齊，有時候可以做出一些靈活調整。再把上面繪製的各種情況放在一起對比一下：

前三個 icon 是圖 1 里的實際表現，最後一個是圖 3 中利用了半像素對齊的實際表現。

把源文件分享出來，感興趣的朋友可以自己下載了研究一下：

鏈接: https://pan.baidu.com/s/1gfq1zmb 密碼: qad4

最後，補充一個小技巧：

開口這裡我們如果先平切然後想拉圓角的時候，會發現圓角構件怎麼也不出來，其實這個是 Ai 的精度問題，當構成角的其中一條邊的尺寸過小（這個極限大概是 1.5px）或者這個角的角度太小或太大，就無法使用圓角構件去拉圓角，當然在風格化圓角裡面是可以的，但是這裡會變的非常畸形，感興趣的朋友可以試一下。所以，這裡解決的辦法就是把整個 icon 先整體放大幾倍，然後用白箭頭去選中這幾個錨點，就會有圓角構件出現了，做完圓角之後再把 icon 整體縮小回原來的大小。對於角度過小或過大而無法使用圓角構件的情況，這個我暫時也沒想到什麼好辦法，有解決的朋友可以在評論中交流一下。

最最最後，求一波關注，我會不定期分享一些乾貨，很乾的那種

我直接上乾貨吧。愛死ai畫圖標了。
Pixel Perfection When Rotating, Pasting And Nudging In Photoshop

不想看的就幾句話：
1.在ai裡面畫圖標配合像素預覽，alt ctrl k,設置1像素網格
2.畫圖標的時候注意對齊像素
3.原大複製粘貼到ps，如果出現局部問題，ctrl t調整

十多年前畫的兩個圖標，源文件是ico的這裡不讓上傳改成png了
就是一個一個像素去點出來的

用滑鼠一個像素一個像素地點

很明顯大圖裡就沒對齊……