浅谈网页设计中Grunge风格的应用

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风格笔刷可供用户免费下载。