编者按:模糊效果最近这两年特别流行,不过它的作用可不仅仅是模糊个背景这么简单,今天@喪心病狂十六夜貓 这篇好文,总结了10个能帮你用好模糊背景的设计技巧,绝对让你大开眼界!最后附上一个快速模糊的神器,建议收藏!
模糊的(英: Blurred)照片图像:虽然在摄影中是犯了错误的照片,但也可以成为一个有用的设计工具。
这次的话题是,不是因为有了品质差的照片而在中加上模糊效果,试图设计出好的作品。而是与之相对的,特意去选择他们,利用不同类型的模糊图像,使设计技巧变得突出的这些手法来介绍给大家。
在网页设计中提高警惕,您可能已经注意到,模糊效果在过去数年间,已经成为一种流行趋势。这种英雄形象(拉伸铺满整张网页宽度的巨大图像照片)时而在网页设计中作为网页背景被利用,时而被用作诸如平面设计的背景排版。
这种设计的流行,在很长一段时间内所看到的设计风格,在具备普通功能的同时,美观也是它具有人气的理由。不仅仅是一种很多人都在利用的新的设计风格,你也会发现,这些设计都是有目的的。
这一次介绍的就是,利用模糊效果,将设计凸显(强调)出来的十个效果。
详细内容从以下开始。
01 让背景变得流畅的设计方法
这是一种典型的模糊效果的使用方法,作为背景设计的设置规范。通常,你可以使用照片来表达直观有趣的背景,这样模糊效果也会更有效的完成吧。
将细小的字体部分,特殊的字体效果和其他一些设计要素乱七八糟的堆放在一起,将会变得难以阅读。因此,通过添加模糊效果,您可以创建一个内容不会被干扰的背景进行设计。
下面的这个设计案例,就是应用了特点是模糊的很厉害的图像作为背景。在平滑干净的背景上,让单一的颜色变得更加有魅力,也让白色细小的字体变得更加容易阅读。
![](https://i-blog.csdnimg.cn/blog_migrate/88854d481325ea4f482633c8507c07d4.jpeg)
此外,在这个案例中,典型的两个模糊效果的表现方法“模糊全部图像”和“只模糊一部分”中,这两个里面只能选择一种方法来描绘他。在这里,虽然我们模糊了整张照片(原文是イメージ写真,直译是图像照片,翻了好几次了,总觉得像机翻,所以下面都简称为照片),作为另一种选择,为了让大家将视线集中在照片上,你也只能模糊一部分。
这种概念在摄影中被称作景深(英文:Depth of Filed),就算你不知道专业术语的意思,你也可以顾名思义。在景深中,对被拍照的物体进行对焦,让被摄像的对象变得清晰而后面的背景变得模糊的一种状态,叫做浅景深。
举个例子,也就是在肖像照中,将焦点全部都聚集在脸上,而周围的景色全部都变得模糊。与之相反的,从前到后所有的对象都能看的很清楚,表现为深景深,常用于风景照等摄影中。
下面的这个设计案例中,利用摄影图片来作为背景图像,将视线的焦点全部聚集在前面的范围,也就是拍摄主题的景深很浅。
![](https://i-blog.csdnimg.cn/blog_migrate/5ff5303d76133ccaf2b2bd0d1a1edfdd.jpeg)
根据拍摄的景深浅,通过在图像中使用这个功能,可以有效的突出焦点(英文:Focal Point)。接下来,让我们来看看部分模糊在实例中所应用的技巧吧。
02 让焦点聚集在重要的东西上
在图像照片上运用模糊效果时,如果你想表现出特别的效果概念,你可以删除照片的一部分,将设计限制在一定的范围内。将焦点放置在引人注意的东西上,这也是确认能力的理由之一。将视线集中在图像照片的一部分上(出售的商品等),除去妨碍视线的不必要的东西。
下面的这个设计案例,利用的就是部分模糊效果,开动脑筋将广告设计中的商品被放置在聚光灯下。另外,非商品的一部分也占用了不必要的空间。适合使用浅景深的效果,可以从中看出一定程度的设计。(将软饮料不同的风味同时表现出来了。)
![](https://i-blog.csdnimg.cn/blog_migrate/cb636edb6751b6735408523f94e04858.jpeg)
下面这是另外一种设计案例,他利用了不同的景深效果(将跟前儿的花瓣和背景进行了模糊),将视线聚集在整齐的构图上。这个结婚仪式的邀请函,能让人感到这是一对幸福的情侣。
![](https://i-blog.csdnimg.cn/blog_migrate/77e9e388faa056347336762b2253cd62.jpeg)
03 尝试利用照片来传递信息
我们是什么出于原因要对照片进行设计?一般来说,对于设计的信息强调,表现的都不是很多。就算你一张清晰的照片都没有也没关系,模糊的图像可以帮助我们更温和的传递消息。
在下面的这个设计案例中我们可以看到,适合健身类的参与形式是,利用半透明的背景设计,将奔跑的女性的姿态在后面展现出来。这张照片,设计的主题和目的作为视觉线索(英:Visual Cue)很好的传递出来了,不会让用户感到迷惑。
当你在使用这种技术时,应该注意,选择一张与主题相称的,设计性强的照片,这一点尤为重要。
![](https://i-blog.csdnimg.cn/blog_migrate/bf4bdfba93c9be96f78263dec54552df.jpeg)
04. 灵活使用具有活版印刷风格魅力的背景
在LOGO和社交媒体上的素材,运用的是手绘素材等,在版式设计中成为焦点(英文:Focal Point)利用这样的设计背景可以让他变得更有魅力。当然像黑或者白这样的单色,也可以作为不错的背景色。你也可以使用一些纹理。但使用模糊效果,可以突出更多的设计效果。
那么,怎么利用才算好的么?特别是在整洁的背景下,是最适合传递出设计的信息的。以下的这个设计案例是,运用了模糊效果的标志设计。如果只有LOGO是很难单独传达出他所想表达出的意思的,通过照片来进行信息的补充,你可以很好的看出他是一个家具设计公司。
这种技术体现了利落的,简化之后的设计在传递信息上是十分有效的,无需在LOGO上添加任何说明性的文字,就可以将信息传递出来。
![](https://i-blog.csdnimg.cn/blog_migrate/811c1af20499c62b795b6346f3a106b2.jpeg)
另一种设计是,利用美丽优雅的活版印刷的设计主题,将模糊的图像背景变为令人满意的技术支持。
![](https://i-blog.csdnimg.cn/blog_migrate/e929d4520b1e72d46f27a8d2d0a2b687.jpeg)
06 使用戏剧性的模糊效果
利用的目的不同,根据情况所实现的模糊效果也就不同。作为一种极端的手法,在照片中加入了很多的模糊效果,让人不知道拍摄的是什么,从而实现柔和的模糊印象的背景。相对的,作为单一颜色的背景的代替,你可以利用这种照片,展现出更多的设计魅力。
但是这种设计,虽然看起来很酷炫,但还是不要轻易地去采用他。下面让我们来看看很好的利用了这种设计方法的案例。这个设计案例,内容是面相喜欢园艺的人的。如果你去看一下背景,虽然模糊的效果让你什么都看不清,但你却能从中感受到一花一草,乃至阳光的印象。
![](https://i-blog.csdnimg.cn/blog_migrate/f76f6ab4667acf8662c7642a0fccbe55.jpeg)
这种极简的手法,可以说是更具有无意识的代表性。就算不去认真思考,脑海中也会呈现出和园艺有关的联想,所以可以说这个案例就是完美的。如果你不将背景图像进行虚化,那么页面上的文字将几乎都看不见。
同样的下面的这个案例,使用强大的模糊,创造出一种抽象的氛围,体现出优雅的黑白色调,是一种出色的名片设计。但是如果你仔细的去观察(特别是右下角部分),你可以看到时钟被显示出来了。
![](https://i-blog.csdnimg.cn/blog_migrate/45c4f73fd00f8d7754d316e178045bd4.jpeg)
07. 将不必要的部分变得柔和
紧凑的模糊可以适用于图像的全部,以相同的方式和先前的技术,在这里给图像的部分区域添加一个柔和的模糊效果,可以减去照片中不必要的部分。这是在人物肖像照中常用的一种手法,在平面设计中,可以很好的展现出人物肌肤光滑细腻的魅力。
下面的这个设计案例中,不是以肖像,而是以人物模特为中心,使用复数的模糊效果。首先通过调整景深,将视线集中到戴眼镜的女性身上。然后将女性的眼睛和太阳镜以外的部分都加上柔和的虚化效果,从而将商品变得更加引人注意。另外通过这种高级时装展现出图像全部的魅力,将品牌的形象成功的融入其中。
![](https://i-blog.csdnimg.cn/blog_migrate/8707b2a31fc0f9c482cb5ae77989cdbc.jpeg)
08. 传递出场景的氛围
模糊的图像是,不管是去过很多次的场所,还是介绍已经成为典型的图像,都可以很好的传递出与旅行有关的设计技术之一。
例如下面的这个设计案例,美国的犹他州的度假村的网页,通透的空气感,将丰富多彩的度假设施给表现出来了。通过大量的单色山地的景观,将主题滑雪度假村很好的展现出来。另外,通过从前到后的添加模糊效果,将酒店的名称和由来等这类重要的信息,配置在页首。
![](https://i-blog.csdnimg.cn/blog_migrate/2ed9f2a6bf9c4c09f488627980b64280.jpeg)
同样的下面这个设计案例,通过背景里模糊的棕榈树让人联想到一个美好的夏天,这样很好的与夏季促销的主题相匹配。
![](https://i-blog.csdnimg.cn/blog_migrate/d80c3b42ddb00051091281ca6d8640dc.jpeg)
09 在设计里加上运动感
在照片中表现出动感,是特定的模糊效果(英: Motion Blur),将物体持续运动的样子表现出来。这种技术通常情况下,在运动的物体的焦点和后面,添加上一个水平的运动模糊。通过这样做,可以给你的照片添加一种速度感或者是运动感。
下面的这个设计案例,将视线集中在作为商品的汽车上,通过利用模糊效果,将品牌形象中的乐趣和速度感表现出来。通过另一个相同的设计案例我们可以看到,模糊效果可以将排版的空间感给彰显出来。
![](https://i-blog.csdnimg.cn/blog_migrate/4ad06187785571c2af10dc944e8c1d3c.jpeg)
在另一个设计案例中,利用了动感模糊效果,将【不夜之城纽约(”The City That Never Sleeps”)】这一概念,在杂志的封面上表现出来。
![](https://i-blog.csdnimg.cn/blog_migrate/91fc5779794be481fc104844a6d787a8.jpeg)
10 表现出氛围
在表现出特定的气氛和意境时,没有哪种照片是可以胜任的。高解析度的照片当然可以传递出氛围,同时也需要色彩的明暗,以及构图的配合。
下面的这个设计案例,将夏令营的氛围通过视觉传递出来了。首先以橙色为中心,通过使用暖色来联想到夏天,将照片添加上模糊的效果,将夏天美好的回忆给引出来,将主题The Sumer of A Lifetime很好的表现了出来。
![](https://i-blog.csdnimg.cn/blog_migrate/6d1db444c9e13ce57953bb8e684d27b5.jpeg)
作为另一种方法,在婚纱照结婚仪式照上添加上模糊效果,将柔软的,梦幻般的氛围给渲染了出来。
![](https://i-blog.csdnimg.cn/blog_migrate/9f20c7b2a85e188498b292ef4bd75593.jpeg)
让我们来使用模糊效果吧。
在实践的样本中试试看,将学到的这些技术,运用到自己的设计之中吧。利用Canva ,要先注册才能使用,如果嫌麻烦可以试试PS里的模糊效果,也很不错呢。这个网络工具,可以十分简单的给你的照片添加上模糊效果。首先,让我们来选择照片吧。(上传你自己喜欢的照片,或者从网站中选择免费的照片。)
模糊效果添加前:
![](https://i-blog.csdnimg.cn/blog_migrate/381a023848640ef491028770db65c7fb.jpeg)
选择你的照片,然后选择「过滤器(英: Filter)」。然后点击下面的「Advanced Options」、之后调整你的模糊效果就可以了。
添加模糊效果后:
![](https://i-blog.csdnimg.cn/blog_migrate/3a35d1651c66b85ca709f6009b5329b2.jpeg)
为了让设计变得更加简单上手,下面的一些素材已经预先被添加到Canva中了,大家可以自由地免费使用。那么,一起来享受设计的乐趣吧!
![](https://i-blog.csdnimg.cn/blog_migrate/d14b32012500ab9bd66214a11a2f8d84.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/22197056daad2ed7d68fd364e9af5bdb.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/42b043bf7d7e903015a2064c9e06ea41.jpeg)
「优设2月份优秀教程合集」
地图图标教程:
《PS教程!手把手教你打造一个配色小清新的地图图标》卡通动物肖像:
《AI教程!教你绘制六个扁平化风格的卡通小动物肖像》卡通人物肖像:
《AI教程!教你绘制扁平化风格的卡通人物肖像(四人组合篇)》
原文地址: 10 Expert Tips For Designing With a Blurred Background [Case Studies] – Canva Design School
优设译者:@喪心病狂十六夜貓
转载地址:http://www.uisdc.com/blur-effect-design-skills