優雅的毛玻璃圖標設計教程

Sponsor

前言：毛玻璃圖標相信大家并不陌生，也是流行了一段時間了，相信大家也在各大網站看到了一些相關的設計，其實我在2019年的時候就預測過這一趨勢。

可能你在別打公眾號中也看到過類似的一些繪制教程，今天我想借這個機會跟大家分享下，我是如何用sketch進行繪制的，整體的過程大概分為6個步驟，看完這6個步驟，你會發現其實并不難。

第一步：確定圖標形體

使用最簡單的線型來確定你想繪制的圖形，整體的設計盡量按照統一的規范，包括圓角、角度、層次等等這些都盡量保持統一的規則。

第二步：拆分圖層

這一步是進入上色之前的比較關鍵的一步，需要我們明確哪一層或者哪個圖形的組建來進行高斯模糊，因此對于圖形的層次要求比較高，需要我們在第一步繪制的時候就確定好。

第三步：確定圖標的基本色調

先通過最簡單的方式把大概的效果做出來，主顏色不是很重要，重點放在高斯模糊的效果上。這里我設定一個透明度為50%、模糊度為25的數值，這組數值不是絕對的，我們在自己繪制的時候可以隨時調整達到最優的效果。

第四步：增加顏色層次

當我們設定好高斯模糊之后，我們可以對圖標的顏色進行一些效果疊加，例如漸變。

第五步：調整高斯模糊質感

下面我們可以繼續深化高斯模糊的質感，給毛玻璃圖層增加一個內陰影，適當降低整體的透明度，整體的話也需要我們進行細調。

第六步：增加顏色層次

這里我習慣給毛玻璃圖層疊加一個主色調的對比色來進行襯托，通過顏色疊加之后，整體會更具有層次感，除了對比色，我們也可以考慮使用鄰近色之類的來進行疊加。

第七步：刻畫細節

給高斯模糊的圖層增加一個描邊、投影來強化分割感，這一步看自己的需求，在我看來如果少了這一步，整體的質感會稍微欠缺，導致高斯模糊的邊緣不夠清晰。

最后，黑白背景效果對比

感謝閱讀！

作者 | ID設計站
來源 | ID設計站（id:IDfor_all)

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。