設(shè)計(jì)教程

輕質(zhì)感的創(chuàng)意磨砂玻璃效果的圖標(biāo)設(shè)計(jì)教程

今天為大家?guī)硪粋€(gè)小教程，最近一套磨砂玻璃的圖標(biāo)受到很多設(shè)計(jì)師的追捧，最早在一些設(shè)計(jì)平臺出現(xiàn)，后來國內(nèi)一些產(chǎn)品也都有應(yīng)用，比如自如、騰訊視頻等。

7956

感謝大家一直以來的關(guān)注，今天為大家?guī)硪粋€(gè)小教程，最近一套磨砂玻璃的圖標(biāo)受到很多設(shè)計(jì)師的追捧，最早在一些設(shè)計(jì)平臺出現(xiàn)，后來國內(nèi)一些產(chǎn)品也都有應(yīng)用，比如自如、騰訊視頻等。

在準(zhǔn)備教程時(shí)特意繪制了幾個(gè)嘗試一下，先來看看一組四個(gè)圖標(biāo)吧！

這種類似于特殊材質(zhì)的運(yùn)用也是最近很多設(shè)計(jì)趨勢所表露出來的，介于扁平和寫實(shí)之間的微質(zhì)感，帶給用戶一種輕質(zhì)感的體驗(yàn)。

下面黑馬哥挑選四個(gè)案例中的第一個(gè)來給大家實(shí)戰(zhàn)一下，讓你掌握這種磨砂玻璃的圖標(biāo)繪制技巧。

先拆解再動手

在開始實(shí)戰(zhàn)前我們先來拆解一下制作文件，一枚小小的圖標(biāo)也是多層打磨的結(jié)果。

為了帶來更強(qiáng)的質(zhì)感和在白色背景的運(yùn)用，在原本的基礎(chǔ)上添加了 1px 的描邊來強(qiáng)化質(zhì)感。

第一步

首先繪制出本案例需要的圖形，這個(gè)就是基本的矩形工具配合圓角設(shè)置即可完成，無論是 PS、AI、Sketch 等均可繪制完成。（以下參數(shù)為 Sketch ）

第二步

繪制好需要的圖形之后，進(jìn)行如圖組合。按照圖中將三個(gè)元素分為前層、中層、背景層三層，加號為前層采用白色（色值：#FFFFFF ）；中層色值：#FFF0F4；背景層采用的是左上角到右下角的斜角漸變，色值為：#FE7F9F 到 #FF4070 進(jìn)行漸變。

第三步

然后我們將背景層的元素復(fù)制一個(gè)出來，進(jìn)行高斯模糊，模糊半徑值定為 12px （這里根據(jù)元素大小不同酌情考慮）。然后給一個(gè) 50% 左右的不透明度，這些具體數(shù)值大家可以根據(jù)最終的呈現(xiàn)效果微調(diào)，方法不是唯一的，要靈活運(yùn)用。