這個圖標怎麼畫的？

五星上將傑克下士 邀請你回答此問題

多圖，注意。

這是使用 Sketch 來進行臨摹的結果，其他軟體可觸類旁通。剛剛找到了原圖標出處：Dribbble - Droplet + air bubbles SMS icon [PSD available] by Stanley Yang，其中附帶有 PSD 文件，對於慣用 Photoshop 者，可以直接到 Dribbble 的頁面上下載 PSD 來參考參數。

以下是大體的製作步驟，基本上只描述思路，默認閱讀者已經擁有對設計軟體的基本操作技能（e.g. 用鋼筆等工具繪製形狀、使用布爾運算功能、添加效果等）。詳細參數，參考提供的 Sketch 文件：Chat Bubble.sketch.zip_免費高速下載

* * * * * *

1. 建立基底的圓角矩形。方法十分基礎，不再贅述。因為我使用的 Sketch 2 版本似乎在內描邊方面有點 bug, 所以使用了兩層來實現邊緣的倒角效果。然後，畫上一個對話氣泡，加上漸變和一個輕微的內部陰影，以塑造體積感。

2. 要營造「水泡」的形狀，用普通的內部陰影不太夠。於是，將對話氣泡複製了一份來疊加多一層內部陰影，並使用了一個不透明度蒙版（Alpha Mask [1]. 在後面會多次用到這個功能，對應 AI 的 Opacity Mask, 以及 Photoshop 的蒙版）來將不需要的部分隱藏掉。同時，增加了使用高斯模糊處理過的深色橢圓來塑造陰影。現在，基本上有凹下去一個曲面的感覺了。需要注意的是，陰影不宜使用半透明的黑色，而是應該有一定的色彩傾向（在這裡，是偏冷的深綠色）。

3. 畫高光。這樣子的高光的畫法很基礎，十多年前的 Aqua UI 出現後就被使用過無數次了。不再贅述。

4. 畫陰影。這是營造這個圖標質感的比較重要的部分。對於一滴透明液體的投影，因為透射光被液體吸收 / 折射 / 全反射的緣故，因此邊緣顏色較重；而靠近液滴中心的部分反而會較亮，這在日常生活中亦很容易觀察到。所以，這裡不使用軟體的陰影功能，而是畫了 2 px 的深色輪廓——顏色同樣不是黑色，而是帶有色彩傾向的。因為原圖的液滴的邊緣有翹起，所以稍微修改陰影的輪廓以製造「脫離」的感覺。然後，加高斯模糊，並用一個 Alpha Mask 來遮去上半部分。

5. 可以看到，原圖標中液滴的投影因為透射光的緣故而被分為了濃淡兩層。於是，現在畫多一層陰影，並用 Alpha Mask 遮去部分位置。下圖右邊是第二層陰影使用的 Alpha Mask, 不透明度越高（越黑）的地方，越「能看見」——如果了解 Photoshop 中蒙版的概念，應該很好理解。

6. 畫液滴內部因為折射（呃，可能還有全反射？）而造成的亮部。這個部分對於液體的質感來說同樣相當重要。使用基礎的對話氣泡形狀，加一個內部陰影（其實是內發光了——只是 Sketch 沒有專門的內發光功能而已）。顏色同樣不應是白色，而是有色彩傾向——這裡用偏黃的顏色好一些。最後同樣用 Alpha Mask 來處理。

7. 這是做完上面幾步之後的狀態。除了中間的幾個小氣泡外，還有一些細節需要補上。

8. 液滴下的陰影，會被液滴的透射光照亮。所以，放一個亮色的、加高斯模糊的橢圓在陰影層之上。同時，液滴的邊緣也需要加一些亮邊來強調質感。我直接在基礎的對話氣泡上用了一個帶漸變的 2px 亮色描邊來實現斷缺，AI 也可以類似處理。Photoshop 就更方便了，直接拿硬度為 0 的橡皮來擦就好。

9. 畫中間的小氣泡。各種參數描述起來有點麻煩，大致看看吧。這裡我畫得不好，不像是液滴中的氣泡，而像是被封果凍在內部的豌豆了。

* * * * * *

要畫這類寫實圖標，最好是要對素描知識有一點了解，否則光影和質感的塑造可能就會遇到障礙。觀察力也頗為重要，如果不是看著原圖標來畫，我想有很多細部我都會漏掉。

這個圖標用 Photoshop 來畫也更便利——很多需要用 Alpha Mask 來一點一點 「hack」 的地方，用畫筆和橡皮就能輕鬆實現了。更何況，Sketch 2 中一個對象最多只能有四個漸變，局限性比較大；Illustrator 倒是可以用漸變網格來較為輕鬆地處理這樣的情況。

[1] 關於在 Sketch 中如何使用 Alpha Mask, 可以參考：Bohemian Coding. Adobe Illustrator 中的類似功能：使用不透明蒙版來創建透明度