有关背景图设计的终极指南

作者&投稿:正炊 (若有异议请与网页底部的电邮联系)
~

设计是对各种元素进行有序排列以达到特定的目的。做设计的时候,首先得从某一个方面入手。而背景图正是我们设计的基础。

设计是对各种元素进行有序排列以达到特定的目的。做设计的时候,首先得从某一个方面入手。而背景图正是我们设计的基础。

纹理和颜色帮助我们塑造质感、层次感和对比度,让我们的设计在众多设计中脱颖而出。合适的图片拼接可以为我们创造出空间来添加文本,这样能利用视觉的表现传递信息。

使用背景图片可以丰富你的设计,也在视觉上与文本的内容相呼应。

使用不同的背景图会让你的设计相比之前有很大的改变,也让设计更加完整。

颜色可以用来吸引观众,同样图片也不单单是个摆设。在背景上正确的使用图片,也可以打造出很好的效果。

这次我们将向你展示如何正确的使用纹理、颜色、渐变等各种图像处理技巧,来打造完美的背景图片。

1、纯色背景

回归最基本纯色元素应用到背景图中。使用单色背景对打造朴素的背景图十分有效。使用这种方式时,要注意最重要的是:你要记住你想要表达的氛围。

深色和浅色的组合,或者对比色的运用可以令人印象深刻;浅色的结合则会营造出更平和的效果。

用更浅的颜色作为背景图并不意味着会牺牲文字的清晰度。为了能充分利用浅色背景的美感,字体上通常会选择比较深的颜色,如深灰色,这样来增强对比度。

提示:可以使用同一种色系中的两个不同颜色(这里我们使用了两个粉色调的颜色)以保证背景图视觉上的和谐感。这样既能对必要内容做区分(如葡萄酒的名称和产地),又能保持视觉上的统一。

2、纯色背景,强反差

使用一些反差较大的颜色会突出你想表达的信息。对比色的运用就可以使你的设计更加引人注目。这种技巧非常适合基于Web创建的内容(扁平化设计),比如广告的横图或社交媒体中的图形。

选择深色的背景底色,图标可以用亮色或霓虹色。这是吸引注意力的不错搭配。设计成亮色的按钮或行为召唤的选项,会刺激读者想去点击它们。

除此之外,你还可以使用两种抢眼的颜色打造出一种现代化风格的设计。可以选择一组相反色以形成强烈的对比。

提示:不要选择过多的颜色。试着使用两种以内的颜色或将这两种颜色互相叠加以获得最佳效果,避免破坏整体的视觉和谐感。

3、纹理

可以使用图片自有的纹理图,也可以利用小形状或小图案,制作一种纹理效果图。

使用纹理的关键是不宜用过多的颜色或复杂的组合。因为你肯定不希望让背景中的纹理“喧宾夺主”,所以选择纹理时,要用尽量小一些的图案,这样使受众注意力放在前背景内容中来。

纹理可以做出纸张或毛坯的效果,就像上图中的背景,就是再生纸的纹理效果。

这种特效非常适合制作电子邀请函(在邮件或社交媒体中使用),纹理可以增强图片的质感,就像真的一样,可以摸到的感觉。

提示:如果你使用的是侵蚀纹理或其他自然纹理,不妨尝试手写字体或像用刷子写出的字体。纹理的作用是形成一种立体维度,拉开背景与文字之间的层级,在页面中使文字处于第一层次。

4、渐变

渐变很适合应用在数字产品或是打印成品上。渐变的美妙之处在于,它可以结合中性的或是鲜艳的几乎所有的颜色。渐变永远都是一个很好的选择。

使用渐变是一种比纯色背景更微妙的方法。可以采用两种方式:放射性渐变和线性渐变,这两种会有不同的设计效果。渐变的方向将直接影响观众的点。

设计的主要目的之一,是利用色彩、文字和其他元素传递信息,产生交流。

上图中背景图应用的渐变效果,是非常绝妙的。在渐变的背景图上只使用一种颜色,可以牢牢地抓住观众的眼球,同时为设计留下了很多的空间。

5、使用图像

把设计内容的上下文联系起来的的最佳方式是,为其配上一个图像图。带有图像的背景图可以快速地吸引观众的注意力,并直观地将背景图中的图像与文字的信息联系起来。在放置文字和图像时,要时刻记得对图片进行细节处理。

图片上的空白位置可以用来放置文字。请记住,所有设计都是经过思考的,文字的摆放不是随意的。对图片进行适当地剪裁,直至留出合适的空间来放置文本。

提示:上图中的鞋子要与字母相协调,强调整体设计的效果。

6、使用形状

选用具象的、细节图越丰富的图片,你在图片上面放置的设计元素就要越简洁,不要有太多装饰性的元素。如果你把背景图和你的前景做得一样丰富、一样的细节化,那会导致视觉层次混乱,最终使设计作品不会有效地传达给浏览者。

为了避免文字在背景图上被细节图所淹没,可以使用形状,将形状放置在文字后面以确保易于阅读。对于那些不太有信心将文本直接应用于图像的人来说,这是最受青睐的技术。

提示:选择与背景图像的颜色或色调偏离或者相反的颜色,这样你的文字信息就会非常突显,并且这些形状会创建功能性和合成的效果。

7、透明度

在图形设计中,我们可以有很多方法可以使用,不过有的时候最好的解决办法恰恰是最简单的那一个。增加背景图的透明度,减少背景图的细节的展现,使前景中的文字更易于阅读。人们在使用透明度时最容易出现的错误,就是使用过度。

调整透明度使文字更便于阅读,但同时保证不能把背景图像做得太稀薄了。因为那样,只会导致背景图缺乏光彩、变成了不厚重的一个外观设计效果。

提示:通过应用蒙太奇效果,进一步提高你的设计。将你在背景图中使用的相同图像层叠起来,并增加透明度。

要实现蒙太奇效果,你需要在网格中裁剪和缩小顶部图像,以制作独特而有趣的编队。这项技术相当先进,所以一如既往,通过使用亮度和透明度来增加对比度,确保文本易于阅读。

8、虚化

在使用图片作为背景图时,经常会出现图片细节过于丰富致使无处放置文字的情况。有两种常见的方法你可以使用:一是在图片上再覆盖一个图层,二是应用滤镜为背景图做模糊效果。这要根据具体情况来使用这两种方法。

模糊处理图片,是强调文本信息的一个很好的方法。模糊处理的关键是保留原有的纹理和细节,所以尽量选择有趣的背景图片。如上图中的叶子,就是选择一个有趣的背景图片。将背景模糊处理后,还可能需要对图片进行裁剪处理,以便文字覆盖背景的是更多实心区域,以获得最佳对比度。

9、应用颜色图层

另一个降低背景细节图的方法,就是添加图层。你可以使用很多方法加入一个新图层——加入一个简单的黑色或是白色的图层或者透明度,使文本看起来有立体效果,像是脱离开背景图,同时可以创建对比度。或是加入一个彩色的图层,这个方法可以很好地融合品牌的颜色。当选择图像时,确保有足够的色调细微差异来给背景更多的力量感。

记得看看你的背景图像的组成,找到最佳的裁剪区域。确保文字在正确的图像位置(如海洋和陆地)上放置,如在较暗的区域,以较浅的文字放置图像,反之亦然,以便于阅读。

10、文本空间

构图是设计中经常被忽视和也是最基本的元素之一。设计中所有元素的放置方式,都会影响你的读者吸收到内容的方式。因此你可以使用背景图像作为工具,来利用此空间。

文本空间是指图像中的空白区域或是负空间。

平面或图像的表面具有如上所示的平面透视图,这是使用文本空间的一个很好的例子。空白空间周围的物体,使视觉焦点放在文字和炭灰色的对比色调上,增强了文本可读性。

11、图案

图案非常适合在背景图中使用。但就像很多技巧一样,你必须小心地选择,放置在合适的位置上。确保图案不会减损或淹没你的文字内容设计。

图案可以带着文字,也可以将文字和图案拼出形状。几何图案可以塑造线条,使文字的排版更加简单。

12、插图

插图为读者提供了交互式体验。插图的另一个优点是它可以更好地与文字匹配。对于更年轻的受众来说,插画的设计更具趣味性,与其他设计方法相比也更清晰。

使用插图时,很容易导致文本被淹没在插图中、不突显。为了避免这种情况的发生,在放置图形和其他元素时,可以利用三分法,但层次和平衡感也至关重要。

下图中的文字放置在了很协调的位置,使信息能够更好地传递,尽管图片中插画占了了更多的空间。

13、留白

永远不要破坏空白的简单性。如果你的设计元素太多,或者有点杂乱,你需要简化它。

通常为了填充表面区域,可以在此添加图像和设计元素。要注意:将白色背景看作是增强感官的工具,并让你专注于设计中的重要元素。

最小化的设计意味着,你需要为页面上的其他功能付出更多精力。

14、使用网格

使用网格可以形成一个良好的布局,将它们根据不同的内容分割成不同的展示部分。这是一个非常直观的应用程序,使图像得到了很好的应用。

利用图像中的颜色和用平坦色板,填充空白单元格,是创建色调和谐的网格一种方式。在彩色单元格上放置对比文本,或者使用相交线作为一种有趣的方式来形成独特的构图。

上图使用了柔和的配色,配上浅灰色填满空格子。通过这种方式,放置网格的文字就会更加突出。为了视觉和谐,权衡图像和文字之间的平衡,确保它们不会相互抵消。

网格设计时,可以先不用考虑文字,就可制作精美的图案。利用相似的图像的网格来打造一个创意设计,剪裁图像以形成有趣的构图效果,同时考虑小网格在大网格中的组合方式。

图像的美妙之处在于它可以帮助设置整个设计。你不只是在页面上放置图像,而是通过战略性地应用文字和图像,利用图像为你提供的空间、形式和构图。

总结

无论是应用纯色调、虚化、增加透明度还是其他的一些技巧,这些都只是一个概念。你还需在设计中实际应用它们,并针对不同的情况进行适当的调整。

我们希望这些背景图设计技巧,能激发你的创意提升到一个新的水平,祝君设计愉快!

本文由海空设计(北京海空影视文化咨询有限公司)翻译整理,版权归本公司所有,如需转载到其他平台,请联系作者(微信ID:haikongdesign)

UI中国

作者:海空设计




有关背景图设计的终极指南
上图中背景图应用的渐变效果,是非常绝妙的。在渐变的背景图上只使用一种颜色,可以牢牢地抓住观众的眼球,同时为设计留下了很多的空间。5、使用图像 把设计内容的上下文联系起来的的最佳方式是,为其配上一个图像图。带有图像的背景图可以快速地吸引观众的注意力,并直观地将背景图中的图像与文字的信息联系起来。在放...

10个技巧让你的PPT图片看起来逼格十足
下面这幅图,因为整体色调偏暗,如果再加上黑色文字,会出现文字看不清的状况,而运用底纹型可以有效解决这个问题。底纹型的关键在于如何让底纹更好的融合进画面而不显突兀,主要的方法有一:让底纹本身具有设计感。二:调整不透明度。三:将部分文字置于底纹之外以加强底纹与画面的联系。二、图文混合型 ...

制作PPT时值得参考的12个终极构图小窍门
07、无处不在的三分法三分法看起来在众多的图片制作领域都有着不可预计的价值。当构图时,我们也常常倾向于从前景,中景以及背景来三个层级去安排构图。为了增强这三者之间的景深关系,我试图限制黑白灰在一个明度的范围。例如,你可以让背景占据大多数的白色调,中景则是灰度居多,前景则为黑色调。当然,这三者的明度...

4种百元方案省钱打造电视背景墙
省钱电视背景墙方案一:大面积地使用墙贴 效果点评:墙贴是成本低效果又好的电视墙打造最有效的方法之一,当电视背景墙面积较大时,可以等比例选择大面积的墙贴,墙贴的颜色更多样也有利于增加墙面的丰富感。推荐用品:绿色鸟笼客厅装饰贴画,29.90元 这个背景墙的设计十分简单,同时也有一丝小清新的特点,...

广告背景插画-如何设计好Banner广告图
Honda的这个广告图设计并不复杂,它的特色在于背景上黄色的线条笔触。原本仿佛悬浮于空中的汽车在线条的衬托下仿佛落在地面之上。并不需要太过复杂的设计,就可以为广告图制造视觉深度,让人留下印象。 31、使用独特的字体 在广告Banner图当中使用个性化十足的字体也同样可以有效地吸引用户的注意力。百事的这个广告所用的...

办公室书柜背景墙图片
办公室书柜背景墙图片:解决你办公室空间难题的终极利器!在现代办公环境中,办公室书柜背景墙图片成为了一种流行的设计趋势。它不仅能够提供储存和展示空间,还能为办公室带来独特的美感和个性化的氛围。然而,许多办公室在选择和使用书柜背景墙图片时都面临着一些问题。本文将通过问题-解决的框架,详细探讨...

2021最流行的壁纸图片,哪位大佬有这两张图的高清图?最好是手机壁纸_百...
我发到你的邮箱,你可以参考一下。一看就舒心的图片。好看的手机壁纸分享网站:酷 网站地址:2021最火朋友圈封面。独一无二唯美的图片。这个网站有很多很好看的手机图片,而且还有很多是原创的。提供多种分辨率的手机墙纸、手机图片 ,可以看看有没有你想要的抖音最火2021背景图。最流行的壁纸图片:最新...

标志设计终极指南!
为你的客户设计一个超棒的logo,第一步是要有一个好的设计理念,你需要客户提供给你有关公司的背景信息,包括他们之前用过的logo。整合这些客户给你的信息和你自己总结的信息并且进行提炼是很重要的。 向你的客户确认那些你不是百分百确定的设计细节,比起花费大量的时间在修改上,不如清楚地问一下客户的期待以及初衷...

多学科背景对设计师的价值
这就是多学科背景的价值,我们在一个特定的学科的成长可以同时增加我们对于设计普遍的直觉。 你的多学科背景是如何影响你的设计技能储备的? 就美学来说,设计和艺术有着密切的联系。然而设计的终极目标是在一定的限制内为用户提供可用性(更具体的图形设计、用户界面等)。设计将情感转化为一种体验。 值得注意的是,...

插画banner图片-盘点banner设计组成要素\/类型\/风格\/设计步骤大全_百度...
使用特定色彩的半透明层来遮盖背景图,可以让前景的文字内容信息脱颖而出。这种设计手法现在并不鲜见,它让背景信息从遮盖中透出,同时让文本内容可读性更强,整体层次感增强。 18、设置场景 Tiffany&Co珠宝的广告图的设计,称得上是有趣好玩,旋转的鸡尾酒杯和漂亮的珠宝组合暗示出它们经常同时出现在同一场景,营造出高雅...

和平县13271245815: ppt怎么做 -
塞凌复方: 你好!给你一个我认真回答过的答案吧! 你这个问题很宏观! 如果是技术问题和操作问题,可以到网上下载个视频,慢慢学.如果是已经可以做PPT了还没有摸索出门道的话,可以参考以下我的回答! 优秀PPT的定义有很多种,但万变不离其...

和平县13271245815: 怎样制作博客的背景主页的背景画面及音乐怎样做
塞凌复方: 首先感谢新浪对我们网络生活的支持!让我们的生活因为有了BLOG而精彩!你说的... 在图片两侧写文章、在图片上写文章、制作BLOG背景、改变BLOG字体颜色、改变...

和平县13271245815: 怎么制作ppt幻灯片 -
塞凌复方: ppt基础知识及使用技巧 PowerPoint软件是教师制作课件的主要工具之一.下面介绍了ppt的一些基础知识及使用技巧,仅供初学课件制作者参考 . 一、PPT的启动和退出 1、打开方法: 方法一...

和平县13271245815: 怎么在制作的电子表头上打文字,还有怎么把表下拉 -
塞凌复方: Excel表格的35招必学秘技 也许你已经在Excel中完成过上百张财务报表,也许你已利用Excel函数实现过上千次的复杂运算,也许你认为Excel也不过如此,甚至了无新意.但我们平日里无数次重复的得心应手的使用方法只不过是Excel全部技巧...

和平县13271245815: 如何将自己拍的图片设计成power point 的背景 -
塞凌复方: 只要将自己拍摄的图片选作PPT的母版就可以了.幻灯片母版,是存储有关应用的设计模板信息的幻灯片,包括字形、占位符大小或位置、背景设计和配色方案. 设定幻灯片母版:幻灯片母版用于设置幻灯片的样式,可供用户设定各种标题文...

和平县13271245815: 有关电脑背景图片的 高手教教 菜鸟勿进~
塞凌复方: 闪图指动态图片?不行.静态的可以.动态桌面需要flash文件.而且你电脑不高档的话卡死你的小机机.

和平县13271245815: 新人提问,PS技巧,关于背景图片里面斜着的纹理效果怎么做出来的?请说的尽量详细一点,谢谢! -
塞凌复方: 1先新建一个5PX*5px的文件.然后用铅笔100%如下图.2打开编辑自定义图案.3,在你想用的图里新建图层填充黑色,打开下图.出来了!望采纳! (补充,颜色随你选我这选择了红色)

和平县13271245815: 怎样制作ppt文件 -
塞凌复方:PowerPoint软件是教师制作课件的主要工具之一.下面介绍了ppt的一些基础知识及使用技巧,仅供初学课件制作者参考 . 一、PPT的启动和退出 1、打开方法: 方法一 :单击桌面“开始”按钮...

和平县13271245815: 请问qq分组的背景图案怎么弄啊?求高手指导 -
塞凌复方: 选择一张自己喜欢多少图片,点击右键图片另存为,然后点击qq面板的右上角消息盒子旁边的那个正方形,然后按最下面那个大大的加号找到那张图片点击确定.

和平县13271245815: QQ空间怎么弄自定义的全屏背景
塞凌复方: 点击装扮空间 在高级设置里找皮肤(背景) 右侧有自定义上传皮肤,要说明的是需要黄钻3以上才可以上传图片

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网