如何制作像素毛玻璃效果？网页大图呈像素毛玻璃效果PS教程

如下图所示，在网页制作中，如果让背景图呈现像素级的条纹，会让背景图更有质感，网页整体也会增色不少。

最初在网上看到有人这样设计的时候，我尝试找了一些有没有类似教程，可能是我搜索的方式不对，找到的并不是我要的效果，所以就自己思考，最后也做了出来，在这里分享给大家。

一、搜索背景图

基于商业需求，特别是公司在制作类似图片时，作为设计者一定要慎重选择图片来源，要么是自己拍摄，要么选择可商用的图，否则后期说不定会来带什么麻烦。

我个人喜欢在pixabay.com搜索素材图，大家不妨试试。

二、制作像素背景

我们并不是在下载的图片上直接操作，需要另外制作一张通用的背景图用于融合。

打开photoshop

新建一个文档，长款均设置为1000像素，分辨率72，点击创建。

点开顶部菜单的滤镜，选择滤镜库，找到纹理中的拼缀图，对其参数进行定义，方形大小设置为2，凸显设置为2，点击确定后得到下方中的图案。

找到菜单中的编辑，定义图案，将这张图进行图案定义，为方便记忆及寻找，这里可以自定义一个名字并点击确定。

三，图片融合

打开我们需要处理的大图，我们可以看到，处理之前，这张大图作为网页背景还不错，但是总感觉差个意思。

我们需要将刚才创建的“像素”图案融合进来，并进行处理得到我们最终想要的网页背景图。

在此之前，为了保证这个方法的通用性，需要先将要处理的大图调整一下大小，宽度设置为6000。

在图层窗口，新建一个图层

按键盘中的Shift+F5，弹出填充窗口，在内容处选择图案，选项中的定义图案，找到刚才我们定义的这个名为“像素”的图案，通常在最底部，随后点击确定。

得到下面的这张图

在图层窗口，点击这个新建的图层，将混合方式的正常，修改为颜色加深或者线性加深，我个人更喜欢线性加深带来的质感。

我们会得到下面这张质感更好的图

对比刚才的图，这张更适合作为我们的网页背景。

四、导出

刚才我们已经将图片的大小修改为宽度6000，在网页开发中所用的背景图肯定不是这样，请不要直接保存为jpg，这样要么很大，要么效果不是很好。

点击菜单中的文件，导出，导出为，格式设置为jpg，品质设置为85%，注意将图片的宽度设置为1920即可，进行对比。

我们可以看到，左侧为我们设置了参数的导出结果，大小为958.4k，右侧为6000宽度的原图，大小为16.4M。

这里我们可以对比一下老版本的储存为Web所用格式，看看新版的导出和旧版的有什么区别。

可以看到旧版的导出，85%品质下的大小为775.6K，比新版更好

当然这并不是说新版的导出不好，因为实测下来，有时候新版的导出在同品质下又比旧版要好得多，这个问题我暂时不清楚是为什么，建议使用旧版的储存为Web所用格式。

至此，图片修改完成，下面给出原图和图案下载，方便大家探讨学习。