大艾设计:
先来看几个网站实例:
3.lanu.fm
**模糊背景的优势: **
1.简单又不失美观
2.突出和衬托主题内容
3.不夺取用户的目光焦点模糊背景的图的尺寸:
考虑到现在主流浏览器的分辨率最高为2880×1800(Mac的Retina屏);
但本博主不建议使用如此高清的图片作为网页背景,因为一张2880×1800分辨率的图片,大小在1Mb以上;
大多数用户的显示器分辨率不会超过1920×1200,所以这个1900×1200分辨率的图片作为模糊背景图,完全合适;
如果仅仅考虑到中国用户的显示器分辨率,今天1680×1050的图片也足矣;模糊背景的制作:
如果您是一位大师级别的人物,那么就可以忽略掉这段文字,因为这个地球上有那么些人,可以完全用一种叫单反的设备,拍摄出这种效果;
而玩不起设备的屌丝们,就可以通过万能的Photoshop实现了;
下面我就用一张QQ会员空间的Windows壁纸来做示范;
原图在这里:博主空间下载 QQ原址下载
我们要做的,只需一步:
调整一下半径值(数值越高,模糊度越高);
确认→导出jpg→选择70%的品质
保存后发觉,模糊后的图片文件的大小(112k),比原图(224k)缩小了50%;
这也是使用模糊背景图片的另一个优势吧,图片文件小了,用户浏览体验好了;注意事项:
模糊背景图的选择上,不宜选择颜色色相过多的图片;
模糊背景图的选择,需要和页面做展现的内容信息相关,而不是随意取一张图片做模糊处理后使用;最后,互联网上有篇文《模糊背景在网站中的经典应用案例》,原文出处在这里:http://vandelaydesign.com/blog/galleries/blurred-backgrounds/
博客内还有很多资源和好文章,不过前提是,需要一定的E文基础;最后,再放几个模糊背景网页,PS:和网上的那篇文章例举的网站不同哟~