1. 蓝洛水深首页
  2. 教程
  3. 摄影后期

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

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

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

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

一、搜索背景图

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

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

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

二、制作像素背景

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

打开photoshop

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

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

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

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

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

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

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

三,图片融合

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

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

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

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

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

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

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

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

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

得到下面的这张图

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

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

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

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

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

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

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

四、导出

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

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

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

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

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

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

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

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

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

下载背景图 下载图案PSD

原创文章,作者:蓝洛水深,如若转载,请注明出处:https://www.ilanluo.com/8231

发表评论

登录后才能评论

联系我们

455922333

在线咨询:
点击这里给我发消息
邮件:me@llss.us

工作时间:大部分和你一样