編者按：GRUNGE 原意是搖滾樂的一種風格形式，描述音樂里那種嘈雜而失真的感覺，但在設計行業里，它有特別的含義，表現為不規則”“頹廢”“邋遢”“垃圾”等特殊的視覺效果，而這樣反而會營造出另類的美感。今天@飛屋睿UIdesign?寫了一系列教程，從認識GRUNGE到如何運用在作品設計中，都有教程，趕緊學起來！

一、認識GRUNGE

GRUNGE，從英文單詞的字面意義解釋為：蹩腳的東西、乏味的東西、難看的東西。但在設計行業里，顯然它還有更特別的含義。

設計中的GRUNGE是一種效果，就像音樂里的GRUNGE搖滾被翻譯為垃圾搖滾一樣，它表現為一種“不規則”“頹廢”“邋遢”“垃圾”等特殊的視覺效果，而這樣反而會營造出另類的美感。類似的表達也出現在服裝設計行業，想想大家都熟悉的做舊感的牛仔褲等乞丐服，就不難欣賞GRUNGE風格了。

目前，扁平化設計大行其道的時候，作為擬物效果的GRUNGE風格似乎顯得有些逆反而行，但是作為一種特殊的另類效果，它是值得在設計中作為考量和運用的。尤其是當設計主題為創意、想象或想表達某種另類不羈的時候，無疑，它能創作出非常有代表性的視覺效果。

下面我們首先來認識一下各類GRUNGE效果運用。

二、GRUNGE效果的網頁

GRUNGE效果并不單單是代表著垃圾、邋遢，GRUNGE設計也許只是運用了很少的GRUNGE風格的裝飾，或者在主要內容里表現出這樣的風格。下面是這類風格的網頁設計。

三、GRUNGE風格的字體

當文字本身就作為設計元素的一部分，它的裝飾性作用極強。搭配同樣風格的背景，渲染出的GRUNGE堪稱佳作！

四、GRUNGE風格的圖標

拉伸、扭曲……GRUNGE圖標可以承受這些，它與完美像素無關。

這是一組以黑板為背景的黑白GRUNGE圖標，俗稱黑板報效果，在懷舊課堂等為主題的設計中運用較多。

一組彩色GRUNGE風格圖標，色彩搭配得非常協調，并且運用了紙張感覺圖形作為背景，更加擬物形象。

五、GRUNGE紋理

這類型的紋理優設有很多呦，小技巧：同學們戳開下邊的地址，Ctrl + F 搜索GRUNGE 就可以看到啦！

《史上最華麗！2000組PS殺手級紋理打包下載》，已打包噢

六、GRUNGE筆刷

類似?Brushking?這樣的網站里有大量的GRUNGE風格筆刷可供用戶免費下載。

同樣的方法，來這兒看看，全打包好的：《100套新鮮免費的PS筆刷下載》

結語：

現在相信大家對GRUNGE這種設計效果略有體會，無論這是否是你喜歡的效果，或者它是否正處于炙手可熱的潮流當中，設計不會改變終極審美的初衷。因此，學習GRUNGE目的在于通過對這類效果的學習，認識到這類風格里的各種設計，懂得運用，并在此基礎上有所突破。

說到趨勢，最近很火的Material Design是怎樣的呢？

新手學習必備手冊！
《超全面總結！深聊Material Design引領的設計趨勢》

看看谷歌設計師的實踐心得！
《超贊！谷歌設計師的Material Design實踐心得》

Material Design新鮮資源一大波！
《新鮮熱辣！一組實用的MATERIAL DESIGN風格素材！》

原文地址：jianshu
作者：@飛屋睿UIdesign

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量76萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：