单页网站技巧分享——模糊背景

共计 896 个字符,预计需要花费 3 分钟才能阅读完成。

大艾设计:

先来看几个网站实例:

1.bakkenbaeck.no

2.greatcoffeeapp.com

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:和网上的那篇文章例举的网站不同哟~

4.goborrow.it

5.www.labwork.com.au

6.www.rylographic.com

正文完
 
zhaopeng
版权声明:本站原创文章,由 zhaopeng 2012-11-20发表,共计896字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)