返回  

网页设计中的模糊图像:如何使它们工作

2017/4/17 15:27:13 来源:深圳网站建设Clh

一个不可否认的事实:2015年间,使用模糊风格的图像几乎是网页设计一种流行的趋势技术。就好像你在任何地方都能看到一些模糊图像的元素。

不过,这对于一些其他图像问题来说并不是唯一的解决方案。这是一个独特的技术,需要实践来完善和尽可能的关注细节,使其能够正确发挥作用。所以在你对这个趋势跃跃欲试之前,想想如何使用模糊图像来提升你的网页设计整体视觉,以及如何在你的设计项目中最大限度地利用这项技术。


1.模糊图像是一项时尚的趋势

几乎任何网站类型的所有网页设计都可以使用模糊图像作为它们的一项设计手法。就目前来说,这个趋势的流行程度已经超乎设计师们的预料。

如果你正打算在你的网站设计中使用到这项技巧的话,这里有几个问题需要再你开始之前认真的考虑清楚:

· 你真的想成为这个趋势的一部分吗?

· 你可以用一种与其他网站设计有所不同的方式来使用这种趋势吗?

· 这种风格刚好是你需要的还是对于你的“品味”有点太“重口味”了?

· 当你在实际的实际项目中运用这项技巧后,你的网站设计可以如预期的发挥效果吗?还是需要重新设计?

任何创造时尚的设计绝对没有错,但是,在开始任何一个决定之前你就应该就整个项目考虑清楚。设计创造一个具有模糊图像元素的网站可能是一个很耗时的工作,如果你没有过编辑照片的经验,你很可能需要一些额外的培训来提高。


2.模糊是一种运用优质图像的技术

这可能是你在思考如何使用模糊图像时会阅读到的最重要的一句话。只有在你有优质的图像的情况下,模糊元素才能开始工作。而且模糊并不是“修复”一个糟糕图像的方法。

换一种说法,如果你使用一个原本就是模糊的图像,并将它运用到你的网站设计中,那么这并不等同于你运用了模糊图像这个技巧,这只能说明这是一张糟糕的图片。如果这就是你目前的情况的话,那么这不是你的技术。

但是,如果你有一个优质的(高清、符合主题...)图像的话,不管你是想要创造一种视觉远离的效果或以任何新的方式使用,模糊技术可以是其中的一种可能。有多种方法来思考模糊(我们将重点关注下面的每一个),但第一步是了解如何在你的实际网站设计中创建模糊。Adobe有一个非常好的教程让你轻松开始在Photoshop中使用这项技巧。


3.模糊整个图像

模糊图像技巧之所以兴起的其中一个事由就是:它在主视觉图像中的使用。设计师通过合理的布局和规划,将技术结合在一起,创建全屏风格,通过使用模糊的图像作为网站主页最主要的视觉效果。

Trellis Farm的网站设计使用农场的标志性形象图片,为其网站提供了一种真实的农场感觉。为了增加兴趣,这张照片在颜色上只保留了黑白色(以传达那种古老的感觉),并在图片上方叠加了一个文字内容的分层,以吸引你的注意。通过滚动,可以让你感觉到颜色在视觉上的不断加入。在这个案例中,模糊的概念就使用的很好,因为你已经知道图片中的内容,它有助于用户将注意力聚焦在文字和下一步的操作上。

它的工作原理在于:

· 模糊的背景可以将焦点集中到图像上方的图层,如文本。只需确保选择有影响力的字体。

· 它可以为你已经形成习惯的图像样式(例如标准品牌照片)创造新的兴趣和视觉。

· 它在几乎任何类型的内容以及几乎任何配色的方案上都可以使用,以实现普遍吸引力。


4.背景和分层图像

模糊并不一定是使用在整张图像上的技术。图像的特定部分也可以使用模糊影响。虽然看起来模糊的背景与前景焦点相比较普遍,但是一些设计师采用相反的方法可以获得一个新鲜的风格,这个选项具有焦点背景的前景模糊。

你可以在Anchour机构的网页设计中,在主页的照片背景中使用了模糊。图像中使用的模糊技术可以是在实际的摄影工作中特意为之的,也可以在照片编辑软件中创建相同的效果。当你创造这种模糊的风格时,诀窍是,你不能告诉用户它是“创造”而得来的,它应该看起来像是以这种方式拍摄的照片。

它的工作原理在于:

· 模糊创建视觉对比度,可以降低图像内部杂乱的感觉。

· 它改变了图像的视角和用户对视觉的看法。

· 它增加了一个图像的维度,否则这些图像可能会在3D渲染中感觉几乎是在一个平面上的。


5.抽象艺术风格的戏剧性模糊

当你的网站设计需要使用一张背景图片时,一个具有戏剧性模糊的照片可以是完美的方案。考虑到戏剧性的模糊是使照片中的一切内容不可察觉,它可以使照片完全无法识别。

对于那些产品推广类(尤其是拍照App)的网站设计项目来说,这是一个很受欢迎的选择,在显示该产品的手机背后带有抽象的模糊照片背景,如上述案例中的Piction,它在其网页设计中的背景和手机中使用相同的图像,但是具有不同级别的缩放和模糊,这是一个非常引人注目的设计。

它的工作原理在于:

· 可以将重点放在特色产品上。

· 创建完全属于自己的背景,而不是可能在其他网站上使用的模式。

· 当涉及到抽象模糊如何从锐度到柔和的颜色和形状再背景图像的可读性问题时,设计师完全可以对颜色还有整体的感觉进行控制。


6.任何图像的微妙模糊

局部模糊在许多其他类型的照片中同样适用,而不必仅仅只能用于全屏图像。设计人员可以为需要一些前景焦点的图像添加一丝模糊,以帮助引导用户查看图像的正确部分,对标志进行风格化或创建更复杂的视觉效果。

Zeo的标志设计在圆形设计中使用了微妙但很好的模糊效果。模糊的力量使得你比以往更加注意标识,因为标志的一面与另一边的锐度相比有一些有趣的形状和边缘,通过该技术色使用被进一步强调。网站设计作为一个整体,在其他地方同样也使用了模糊,例如在主页面上的主视觉图像中的背景。

它的工作原理在于:

· 局部小模糊可能会造成惊喜。

· 它将焦点集中在照片的特定部分,以视觉为焦点。

· 它可以为你提供适当的对比度来对图像的一部分(例如文本)上的其他元素进行分层,以同样的方式,全屏模糊可以与主标题一起搭配使用。


7.在视频中同样也可以使用

你可以将模糊趋势与另一个热门设计元素或者视频搭配使用。你可以像使用任何其他图像技术一样使用它。它以相同的方式工作(尽管编辑工具和过程有所不同)。

Level 2 Design使用蓝色和屏幕效果来增加全屏视频的趣味性。使得网站设计的视频效果是有趣和新鲜的,它适用于表现那些具有古典感觉的视频。


总结

网页设计项目中,有很多方法可以有效地使用模糊。技巧在于,创造一个模糊的效果,需要能够无缝地融合到设计的其余部分。你可以通过思考极端的模糊来做到这一点。

对于那些需要高度强调或重点影响的内容和抽象感觉的设计可以使用大量的模糊处理(当然,凡是都不能太过了)。 使用局部的模糊来创建微妙的对比度和设置焦点。与任何设计一样,在正式决定使用之前先对几个用户进行测试,看看他们的想法,是否他们注意到模糊(大多数非设计师不会真的考虑它)?




----图文来自:design shack 

----由深圳网站建设公司-Clh翻译编辑整理,为您提供更多有关深圳网站建设网站设计网页设计及其他互联网应用服务