火星網校
圖標的磨砂玻璃質感如何製作？
最近一套磨砂玻璃的圖標受到很多設計師的追捧，最早在一些設計平台出現，後來國內一些產品也都有應用，比如自如、騰訊視頻等。
在準備教程時特意繪製了幾個嚐試一下，先來看看一組四個圖標吧！
這種類似於特殊材質的運用也是最近很多設計趨勢所表露出來的，介於扁平和寫實之間的微質感，帶給用戶一種輕質感的體驗。
下麵黑馬哥挑選四個案例中的第一個來給大家實戰一下，讓你掌握這種磨砂玻璃的圖標繪製技巧。
先拆解再動手
在開始實戰前我們先來拆解一下製作文件，一枚小小的圖標也是多層打磨的結果。
為了帶來更強的質感和在白色背景的運用，在原本的基礎上添加了 1px 的描邊來強化質感。
第 01 步
首先繪製出本案例需要的圖形，這個就是基本的矩形工具配合圓角設置即可完成，無論是 PS、AI、Sketch 等均可繪製完成。（ 以下參數為 Sketch ）
第 02 步
繪製好需要的圖形之後，進行如圖組合。按照圖中將三個元素分為前層、中層、背景層三層，加號為前層采用白色（ 色值：#FFFFFF ）；中層色值：#FFF0F4；背景層采用的是左上角到右下角的斜角漸變，色值為：#FE7F9F 到 #FF4070 進行漸變。
第 03 步
然後我們將背景層的元素複製一個出來，進行高斯模糊，模糊半徑值定為 12px （這裏根據元素大小不同酌情考慮）。然後給一個 50% 左右的不透明度，這些具體數值大家可以根據最終的呈現效果微調，方法不是唯一的，要靈活運用。
第 04 步
選擇剛剛高斯模糊之後的背景層（複製出來單獨做的）與中層元素創建剪切蒙版即可得到下圖示意圖。
和背景元素組合之後得出下圖效果。
為了讓這種磨砂玻璃效果更加明顯，我們特意進行了錯位。將高斯模糊的元素向下和左位移了 6px 左右（這個值可以根據圖標大小自定義）。
第 05 步
最後為了強化質感對中層元素和背景層元素添加了 1px 的漸變描邊，頂層描邊色值由 #FFE0E8 到 #FECBD8 進行漸變，背景層描邊色值由 #FF5983 到 #FF265D 進行漸變。
第 06 步
最後添加加號元素完成本案例，加號的位置會適當靠上一點滿足視覺平衡。
接下來大家采用同樣的技巧和方法進行延展，即可繪製出更多磨砂玻璃效果的圖標作品。
（本文來源於微信公眾號@黑馬家族，作者：黑馬青年）
上一篇 平麵設計必備字體大揭秘！
-
2101期學員李思庭作品
-
2104期學員林雪茹作品
-
2107期學員趙淩作品
-
2107期學員趙燃作品
-
2106期學員徐正浩作品
-
2106期學員弓莉作品
-
2105期學員白羽新作品
-
2107期學員王佳蕊作品
熱門課程
專業講師指導 快速擺脫技能困惑
相關文章
多種教程 總有一個適合自己專業問題谘詢
你擔心的問題，火星幫你解答-
為給新片造勢，迪士尼這次豁出去了，拿出壓箱底的一眾經典IP，開啟了夢幻聯動朱迪和尼克奉命潛入偏遠地帶臥底調查 截至11月24日......
-
此前Q2問答環節，鄒濤曾將《解限機》首發失利歸結於“商業化保守”和“灰產猖獗”，導致預想設計與實際遊玩效果偏差大，且表示該遊戲......
-
2025 Google Play年度遊戲頒獎：洞察移動遊戲新趨勢
玩家無需四處收集實體卡，輕點屏幕就能開啟驚喜開包之旅，享受收集與對戰樂趣庫洛遊戲的《鳴潮》斬獲“最佳持續運營遊戲”大獎，這不僅......
-
說明：文中所有的配圖均來源於網絡 在人們的常規認知裏，遊戲引擎領域的兩大巨頭似乎更傾向於在各自賽道上激烈競爭，然而，隻要時間足......
-
在行政服務優化層麵，辦法提出壓縮國產網絡遊戲審核周期，在朝陽、海澱等重點區將審批納入綜合窗口；完善版權服務機製，將遊戲素材著作......
-
未畢業先就業、組團入職、紮堆拿offer...這種好事，再多來一打！
眾所周知，火星有完善的就業推薦服務圖為火星校園招聘會現場對火星同學們來說，金三銀四、金九銀十並不是找工作的唯一良機火星時代教育......
