Sketch 多層陰影插件 Better Shadow

來自專欄圖月志83 人贊了文章

我寫這個插件的想法源起於上一期 Anyway.FM 節目，當時跟 Leon 聊起了「高斯模糊」和陰影，之後老高同學去了新公司，「被迫」每天都用 Sketch。這些日子裡「他問我 Sketch 問題，我無奈回答道『不行』，他繼而大罵 **」的節奏幾乎每天都要上演。

Sketch 的確有做的不夠完善的地方，沒法設置非線性衰減陰影的問題他一直以來都有吐槽也從沒改善，所以節目播完我來了靈感，想要嘗試去做一個智能地用多層陰影去「模擬」非線性衰減的插件，至於為啥是要用多層陰影模擬，這個問題好像以前在我台參考鏈接里也貼了很多遍 @方遲的回答了，也不差多貼這一遍：如何理解 Material Design 中卡片的兩層陰影？如果不高興點鏈接，也可以看下面這動圖模擬，理論上來說當然是陰影層數越多，結果就越擬真：

其實之前自己在做設計的時候也會用多層陰影來模擬，尤其是 CSS 里的 box-shadow 也支持多層陰影，但一般參數設置都是純粹憑感覺，而上期節目錄完之後我自己也開始好奇如果真的完全按照數學公式來模擬的話，那陰影的參數到底應該怎麼設置，於是拿起了筆，生疏地開始列各種二元一次方程。按照我粗糙的計算，這些參數其實有一些是打破我之前的思維定勢的，比如說如果用三層陰影來模擬，那這三層的 opacity 並不是從外到內遞增，反而應該用「小-大-小」才比較精確，詳細的計算就不貼了，有興趣的朋友可以去我的 GitHub 翻源代碼。

總之，在簡單手動計算之後我開始嘗試用比較熟悉的軟體包括 Sketch 和網頁里的 CSS 來真實地用我的計算值來顯示陰影並且和簡單的單層陰影來做對比，比如下圖是在網頁里嘗試的效果：

和 Leon 一起對著 demo 研究了一會兒發現結果是喜憂參半，好的地方在於多層陰影某些情況下確實可以模擬出非線性衰減的感覺，但缺點是多層帶透明度的陰影疊加之後，尤其是層數比較多的情況下，色階會比較明顯。CSS 里的 box-shadow 可能是為了性能犧牲了一定的模糊質量（從參數的名字來看是應該是沒有用高斯分布的模糊演算法了），所以色階會尤其突出，很多情況下基本層數超過 4 就沒法看了。

因為 Sketch 里其實稍微還是可以看看，而且這個插件實現方法也不難，很多我 Demo 里用的 JS 都可以直接復用，所以還是把插件寫出來了，雖然目前非常簡陋，但還是可以推薦大家試試看，記得多給我發反饋哈~

# 下載安裝

1. 下載這個安裝包，並且解壓。
2. 直接雙擊解壓得到的「Better-Shadow.sketchplugin」文件完成安裝。

# 使用方法

• 選中想要加陰影的圖層，然後點擊「插件」菜單欄里的「Better Shadow」，然後設置參數即可。
• 只要能加陰影的對象都可使用，包括形狀、圖片和文本（文本的陰影和原生一樣，不支持 spread 參數）
• 因為人懶，所以還有很多功能沒加上，比如陰影的顏色目前只支持 6 位的 HEX 顏色代碼。

源代碼在 GitHub 上：JJYing/Sketch-Better-Shadow

回到家發現噴子大叔 Eli Schiff也轉推了我的插件了哈哈哈哈，可能也就他這種對設計觀點比較傳統的人才會對傳統的路子感興趣吧~