Dribbble 用戶 Isaac Grant 關於繪製銳利圓環的建議是何原理？

當畫一些較小的形狀時，銳度非常重要，怎樣讓圖像沒有鋸齒感呢？有時候圓角和圓形的繪製過程中，經常會出現這種問題。Isaac Grant的這條建議能幫助你解決這個問題，非常簡單但有效的辦法！

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

對解決方案還是不太明白，知乎設計師們，能幫圖文解答下嗎？

---

/* 這不是和 gamma 相關的問題。*/

矢量圖形柵格化抗鋸齒時，柵格化引擎根據圖形覆蓋像素網格的情況來決定各個像素的色彩強弱。大體來說，一個像素被矢量圖形覆蓋得越多，色彩就越強——這樣減弱了鋸齒，但帶來了矢量圖形邊緣的模糊。

這樣自動處理大尺寸圖像時不會有什麼問題，比如一個半徑 100 px 的圓環，因柵格化而產生的邊緣模糊只是 1 px 左右的過渡區域而已，對整體效果影響不大。但如果是題中這樣內 1.5 px 外 2.5 px 的圓環，圓環本身就只有 1 px 寬，再遭遇內外各 1 px 的抗鋸齒模糊邊緣，圖形的信噪比就很低了，繪圖者想要表達的圖形被淹沒在模糊之中，整體效果甚至有點變形。

所以，小尺寸圖形的柵格化都常常需要特別優化。

那麼你或者直接手動選擇每一個像素點的顏色，直接繪製柵格圖像；或者就利用柵格化引擎的原理，調整矢量圖形的形狀來間接調整柵格化後每一像素的強度——因為畢竟你的目標是優質的柵格圖像，底層的矢量圖形是什麼樣沒人關心。

問題補充說明的右圖中，調整了內環的輪廓，將錨點放置在像素網格上，於是將圓孔上下左右的四個像素上空清理乾淨了，清除了模糊區域，完全露出底色，並使得左上、右上、右下、左下的四個像素也減淡，於是將柵格化結果中的圓孔效果擴大並銳化了。當然你也可以直接把內環放大一些呀（如果你是用描邊做的，直接調整描邊寬度就好了），但那樣容易影響到圓環主體上下左右的那四個像素。直接調整矢量圖形的輪廓會更靈活一些，你可以任意調整輪廓來控制各個像素的強度。

這一切都是在和「矢量圖形柵格化」與「人眼對柵格圖像的視覺感知」二者鬥爭。

字體渲染流程中的 hint 也是類似的事情。

題圖中是 Illustrator 的效果。

眾所周知，Illustrator 的抗鋸齒質量較低。它的各種抗鋸齒小問題在小尺寸圖像上會很顯著，常常會有不符合預期的糟糕效果。

看起來還湊合？那是因為 Isaac Grant 用了很淺的灰色。同樣的圖形如果用黑色，就是這樣的（右圖最右邊的錨點向左移動了 0.005 px 以規避左圖中可見的那多餘的一像素；兩對小圖，左邊是「存儲為 Web 所用格式」面板中的「優化文字」選項，右邊是「優化圖稿」）：

請直接看無損的 PNG: http://d.pr/i/gkWV

Illustrator 的抗鋸齒太糟糕，所以下面用 Photoshop 好了。

中央的小圖為 100% 尺寸（外環半徑 2.5 px），大圖為 2000%。

PNG: http://d.pr/i/Cr6d從左到右、從上到下，依次為：

1. 輪廓同題中左圖

2. 輪廓同題中右圖

3. 向圖2內環的四段斜線添加中點，外撤，成十二邊形

4. 同題中左圖，但內環擴大，圓環寬 0.9 px
5. 同上，圓環寬 0.8 px
6. 同上，圓環寬 0.7 px

---

我用 Phosothop 想辦法去重現此人左圖的結果，誰想到死活復現不出來（看下圖第五行，完全照著左圖畫的輪廓），後來發現是 Illustrator……虧我寫了倆小時程序去做數值分析……

原作者左圖和一些質量不好的程序中 Gamma 不正確導致的反鋸齒顏色過深非常相似。這種問題調整 Gamma 就能修復，右圖的做法實際上就很類似 Gamma 調整，通過拉輪廓降低過渡部分的佔比。

刪答案。下面這張圖是殘跡，

---

這個很簡單，調整首項裡面的網格相聚大小變成小一些的距離比如10像素，然後放大很多倍認真用形狀的路徑選項畫個圓。OK非常圓

---

推薦閱讀：