如何畫一個(gè)優(yōu)雅的毛玻璃圖標(biāo)

毛玻璃圖標(biāo)相信大家并不陌生，也是流行了一段時(shí)間了，相信大家也在各大網(wǎng)站看到了一些相關(guān)的設(shè)計(jì)，其實(shí)我在2019年的時(shí)候就預(yù)測(cè)過這一趨勢(shì)，大家可以看看我之前寫的一篇圖標(biāo)設(shè)計(jì)的文章-圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

可能你在別打公眾號(hào)中也看到過類似的一些繪制教程，今天我想借這個(gè)機(jī)會(huì)跟大家分享下，我是如何用sketch進(jìn)行繪制的，整體的過程大概分為6個(gè)步驟，看完這6個(gè)步驟，你會(huì)發(fā)現(xiàn)其實(shí)并不難。

第一步：確定圖標(biāo)形體

使用最簡(jiǎn)單的線型來確定你想繪制的圖形，整體的設(shè)計(jì)盡量按照統(tǒng)一的規(guī)范，包括圓角、角度、層次等等這些都盡量保持統(tǒng)一的規(guī)則。

第二步：拆分圖層

這一步是進(jìn)入上色之前的比較關(guān)鍵的一步，需要我們明確哪一層或者哪個(gè)圖形的組建來進(jìn)行高斯模糊，因此對(duì)于圖形的層次要求比較高，需要我們?cè)诘谝徊嚼L制的時(shí)候就確定好。

第三步：確定圖標(biāo)的基本色調(diào)

先通過最簡(jiǎn)單的方式把大概的效果做出來，主顏色不是很重要，重點(diǎn)放在高斯模糊的效果上。這里我設(shè)定一個(gè)透明度為50%、模糊度為25的數(shù)值，這組數(shù)值不是絕對(duì)的，我們?cè)谧约豪L制的時(shí)候可以隨時(shí)調(diào)整達(dá)到最優(yōu)的效果。

第四步：增加顏色層次

當(dāng)我們?cè)O(shè)定好高斯模糊之后，我們可以對(duì)圖標(biāo)的顏色進(jìn)行一些效果疊加，例如漸變。

第五步：調(diào)整高斯模糊質(zhì)感

下面我們可以繼續(xù)深化高斯模糊的質(zhì)感，給毛玻璃圖層增加一個(gè)內(nèi)陰影，適當(dāng)降低整體的透明度，整體的話也需要我們進(jìn)行細(xì)調(diào)。

第六步：增加顏色層次

這里我習(xí)慣給毛玻璃圖層疊加一個(gè)主色調(diào)的對(duì)比色來進(jìn)行襯托，通過顏色疊加之后，整體會(huì)更具有層次感，除了對(duì)比色，我們也可以考慮使用鄰近色之類的來進(jìn)行疊加。

第七步：刻畫細(xì)節(jié)

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

最后，黑白背景效果對(duì)比

更多延展閱讀

動(dòng)效不知如何落地？看完這個(gè)就明白了

ID設(shè)計(jì)站 I 中文LOGO發(fā)布

推薦關(guān)注 騰訊設(shè)計(jì)師的公眾號(hào)

五點(diǎn)總結(jié) I 做個(gè)更好的設(shè)計(jì)師

分享幾個(gè)互聯(lián)網(wǎng)的常見設(shè)計(jì)專業(yè)

3D圖標(biāo)教程來啦

寫給年輕設(shè)計(jì)師的一些建議

2020UI設(shè)計(jì)趨勢(shì)-細(xì)節(jié)分析

淺談卡片式設(shè)計(jì)

Tab Bar 圖標(biāo)動(dòng)畫設(shè)計(jì)

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考