实例教学!10个用好模糊效果的超实用设计技巧 - 优设网 - UISDC

实例教学!10个用好模糊效果的超实用设计技巧

2016/04/03 28740评论区

blur-effect-design-skills-1

编者按:模糊效果最近这两年特别流行,不过它的作用可不仅仅是模糊个背景这么简单,今天@喪心病狂十六夜貓 这篇好文,总结了10个能帮你用好模糊背景的设计技巧,绝对让你大开眼界!最后附上一个快速模糊的神器,建议收藏!

模糊的(英: Blurred)照片图像:虽然在摄影中是犯了错误的照片,但也可以成为一个有用的设计工具。

这次的话题是,不是因为有了品质差的照片而在中加上模糊效果,试图设计出好的作品。而是与之相对的,特意去选择他们,利用不同类型的模糊图像,使设计技巧变得突出的这些手法来介绍给大家。

在网页设计中提高警惕,您可能已经注意到,模糊效果在过去数年间,已经成为一种流行趋势。这种英雄形象(拉伸铺满整张网页宽度的巨大图像照片)时而在网页设计中作为网页背景被利用,时而被用作诸如平面设计的背景排版。

这种设计的流行,在很长一段时间内所看到的设计风格,在具备普通功能的同时,美观也是它具有人气的理由。不仅仅是一种很多人都在利用的新的设计风格,你也会发现,这些设计都是有目的的。

这一次介绍的就是,利用模糊效果,将设计凸显(强调)出来的十个效果。

详细内容从以下开始。

01 让背景变得流畅的设计方法

这是一种典型的模糊效果的使用方法,作为背景设计的设置规范。通常,你可以使用照片来表达直观有趣的背景,这样模糊效果也会更有效的完成吧。

将细小的字体部分,特殊的字体效果和其他一些设计要素乱七八糟的堆放在一起,将会变得难以阅读。因此,通过添加模糊效果,您可以创建一个内容不会被干扰的背景进行设计。

下面的这个设计案例,就是应用了特点是模糊的很厉害的图像作为背景。在平滑干净的背景上,让单一的颜色变得更加有魅力,也让白色细小的字体变得更加容易阅读。

此外,在这个案例中,典型的两个模糊效果的表现方法“模糊全部图像”和“只模糊一部分”中,这两个里面只能选择一种方法来描绘他。在这里,虽然我们模糊了整张照片(原文是イメージ写真,直译是图像照片,翻了好几次了,总觉得像机翻,所以下面都简称为照片),作为另一种选择,为了让大家将视线集中在照片上,你也只能模糊一部分。

这种概念在摄影中被称作景深(英文:Depth of Filed),就算你不知道专业术语的意思,你也可以顾名思义。在景深中,对被拍照的物体进行对焦,让被摄像的对象变得清晰而后面的背景变得模糊的一种状态,叫做浅景深。

举个例子,也就是在肖像照中,将焦点全部都聚集在脸上,而周围的景色全部都变得模糊。与之相反的,从前到后所有的对象都能看的很清楚,表现为深景深,常用于风景照等摄影中。

下面的这个设计案例中,利用摄影图片来作为背景图像,将视线的焦点全部聚集在前面的范围,也就是拍摄主题的景深很浅。

根据拍摄的景深浅,通过在图像中使用这个功能,可以有效的突出焦点(英文:Focal Point)。接下来,让我们来看看部分模糊在实例中所应用的技巧吧。

02 让焦点聚集在重要的东西上

在图像照片上运用模糊效果时,如果你想表现出特别的效果概念,你可以删除照片的一部分,将设计限制在一定的范围内。将焦点放置在引人注意的东西上,这也是确认能力的理由之一。将视线集中在图像照片的一部分上(出售的商品等),除去妨碍视线的不必要的东西。

下面的这个设计案例,利用的就是部分模糊效果,开动脑筋将广告设计中的商品被放置在聚光灯下。另外,非商品的一部分也占用了不必要的空间。适合使用浅景深的效果,可以从中看出一定程度的设计。(将软饮料不同的风味同时表现出来了。)

下面这是另外一种设计案例,他利用了不同的景深效果(将跟前儿的花瓣和背景进行了模糊),将视线聚集在整齐的构图上。这个结婚仪式的邀请函,能让人感到这是一对幸福的情侣。

03 尝试利用照片来传递信息

我们是什么出于原因要对照片进行设计?一般来说,对于设计的信息强调,表现的都不是很多。就算你一张清晰的照片都没有也没关系,模糊的图像可以帮助我们更温和的传递消息。

在下面的这个设计案例中我们可以看到,适合健身类的参与形式是,利用半透明的背景设计,将奔跑的女性的姿态在后面展现出来。这张照片,设计的主题和目的作为视觉线索(英:Visual Cue)很好的传递出来了,不会让用户感到迷惑。

当你在使用这种技术时,应该注意,选择一张与主题相称的,设计性强的照片,这一点尤为重要。

04. 灵活使用具有活版印刷风格魅力的背景

在LOGO和社交媒体上的素材,运用的是手绘素材等,在版式设计中成为焦点(英文:Focal Point)利用这样的设计背景可以让他变得更有魅力。当然像黑或者白这样的单色,也可以作为不错的背景色。你也可以使用一些纹理。但使用模糊效果,可以突出更多的设计效果。

那么,怎么利用才算好的么?特别是在整洁的背景下,是最适合传递出设计的信息的。以下的这个设计案例是,运用了模糊效果的标志设计。如果只有LOGO是很难单独传达出他所想表达出的意思的,通过照片来进行信息的补充,你可以很好的看出他是一个家具设计公司。

这种技术体现了利落的,简化之后的设计在传递信息上是十分有效的,无需在LOGO上添加任何说明性的文字,就可以将信息传递出来。

另一种设计是,利用美丽优雅的活版印刷的设计主题,将模糊的图像背景变为令人满意的技术支持。

06  使用戏剧性的模糊效果

利用的目的不同,根据情况所实现的模糊效果也就不同。作为一种极端的手法,在照片中加入了很多的模糊效果,让人不知道拍摄的是什么,从而实现柔和的模糊印象的背景。相对的,作为单一颜色的背景的代替,你可以利用这种照片,展现出更多的设计魅力。

但是这种设计,虽然看起来很酷炫,但还是不要轻易地去采用他。下面让我们来看看很好的利用了这种设计方法的案例。这个设计案例,内容是面相喜欢园艺的人的。如果你去看一下背景,虽然模糊的效果让你什么都看不清,但你却能从中感受到一花一草,乃至阳光的印象。

这种极简的手法,可以说是更具有无意识的代表性。就算不去认真思考,脑海中也会呈现出和园艺有关的联想,所以可以说这个案例就是完美的。如果你不将背景图像进行虚化,那么页面上的文字将几乎都看不见。

同样的下面的这个案例,使用强大的模糊,创造出一种抽象的氛围,体现出优雅的黑白色调,是一种出色的名片设计。但是如果你仔细的去观察(特别是右下角部分),你可以看到时钟被显示出来了。

07. 将不必要的部分变得柔和

紧凑的模糊可以适用于图像的全部,以相同的方式和先前的技术,在这里给图像的部分区域添加一个柔和的模糊效果,可以减去照片中不必要的部分。这是在人物肖像照中常用的一种手法,在平面设计中,可以很好的展现出人物肌肤光滑细腻的魅力。

下面的这个设计案例中,不是以肖像,而是以人物模特为中心,使用复数的模糊效果。首先通过调整景深,将视线集中到戴眼镜的女性身上。然后将女性的眼睛和太阳镜以外的部分都加上柔和的虚化效果,从而将商品变得更加引人注意。另外通过这种高级时装展现出图像全部的魅力,将品牌的形象成功的融入其中。

08. 传递出场景的氛围

模糊的图像是,不管是去过很多次的场所,还是介绍已经成为典型的图像,都可以很好的传递出与旅行有关的设计技术之一。

例如下面的这个设计案例,美国的犹他州的度假村的网页,通透的空气感,将丰富多彩的度假设施给表现出来了。通过大量的单色山地的景观,将主题滑雪度假村很好的展现出来。另外,通过从前到后的添加模糊效果,将酒店的名称和由来等这类重要的信息,配置在页首。

同样的下面这个设计案例,通过背景里模糊的棕榈树让人联想到一个美好的夏天,这样很好的与夏季促销的主题相匹配。

09  在设计里加上运动感

在照片中表现出动感,是特定的模糊效果(英: Motion Blur),将物体持续运动的样子表现出来。这种技术通常情况下,在运动的物体的焦点和后面,添加上一个水平的运动模糊。通过这样做,可以给你的照片添加一种速度感或者是运动感。

下面的这个设计案例,将视线集中在作为商品的汽车上,通过利用模糊效果,将品牌形象中的乐趣和速度感表现出来。通过另一个相同的设计案例我们可以看到,模糊效果可以将排版的空间感给彰显出来。

在另一个设计案例中,利用了动感模糊效果,将【不夜之城纽约(”The City That Never Sleeps”)】这一概念,在杂志的封面上表现出来。

10  表现出氛围

在表现出特定的气氛和意境时,没有哪种照片是可以胜任的。高解析度的照片当然可以传递出氛围,同时也需要色彩的明暗,以及构图的配合。

下面的这个设计案例,将夏令营的氛围通过视觉传递出来了。首先以橙色为中心,通过使用暖色来联想到夏天,将照片添加上模糊的效果,将夏天美好的回忆给引出来,将主题The Sumer of A Lifetime很好的表现了出来。

作为另一种方法,在婚纱照结婚仪式照上添加上模糊效果,将柔软的,梦幻般的氛围给渲染了出来。

让我们来使用模糊效果吧。

在实践的样本中试试看,将学到的这些技术,运用到自己的设计之中吧。利用Canva ,要先注册才能使用,如果嫌麻烦可以试试PS里的模糊效果,也很不错呢。这个网络工具,可以十分简单的给你的照片添加上模糊效果。首先,让我们来选择照片吧。(上传你自己喜欢的照片,或者从网站中选择免费的照片。)

模糊效果添加前:

选择你的照片,然后选择「过滤器(英: Filter)」。然后点击下面的「Advanced Options」、之后调整你的模糊效果就可以了。

添加模糊效果后:

为了让设计变得更加简单上手,下面的一些素材已经预先被添加到Canva中了,大家可以自由地免费使用。那么,一起来享受设计的乐趣吧!

「优设2月份优秀教程合集」

地图图标教程:
《PS教程!手把手教你打造一个配色小清新的地图图标》

卡通动物肖像:
《AI教程!教你绘制六个扁平化风格的卡通小动物肖像》

卡通人物肖像:
《AI教程!教你绘制扁平化风格的卡通人物肖像(四人组合篇)》

原文地址: 10 Expert Tips For Designing With a Blurred Background [Case Studies] – Canva Design School
优设译者:@喪心病狂十六夜貓

yestone-uisdc-1

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量112万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/blur-effect-design-skills

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 界面设计 版式设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 web前端开发 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 动效设计 平面设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里