超赞!合理搭配图片与文字的小技巧

分享到:更多 ()

近年来,背景图上添加文本的图片变得越来越流行,该起源来自早期的网页设计,文本的融入使图片中能渗透更多情感以及上下文段的丰富感受。在早期,图像不得不做得很小以适应明显低速的带宽,随着连接速度和屏幕像素的快速提升,我们可以在自己设计中自由使用更多图片。

考虑到与技巧相关的设计决策非常重要,掌握此法的最佳方式是通过实践练习,这对保证高品质的设计很有必要,不要期许文本随意的至于图片之上会有好的效果。

本文中,我们将从5种不同的方面讨论文本在图片上的放置,这有助于你更好的融合图片与副本。

注:本文所讲原理同样适用在选择视频与文本的组合。

1. 色彩与亮度的对比

使用与文本有鲜明对比的图片很有重要,尤其是深色背景搭配亮色文本,或者深色背景使用滤镜或叠加元素处理,是确保使用足够对比度的有效方式。

获取合理色彩与明亮对比的小技巧:

  • 第一看不出字形,说明对比度偏低了;
  • 对比不只是深浅之间,互补色也可提供自然对比;
  • 如果图片复杂全焦,利用叠加或编辑图像应该是最有效的选择。

本例中,通过WebKtit滤镜巧妙的放置以及使用额外的<div>. 来处理图像的明亮对比,请看下例:亮度(40%)对比度(70%);bacon3

辨识度差,文本与图像均无焦点。

baco344n4

使用CCS滤镜后,易于辨识。

 

更多实例

fwefgwwfhttps://ayr.com/

darkrrrr-2https://www.geckoboard.com/

darkertt -3http://anodpixels.com/

fwtgwghwhhttps://obakkifoundation.org/

2. 尺寸与位置的对比

色彩不是唯一增强图片与上置文本对比度的方法。选择与图片聚焦元素有关的文本的尺寸与恰当位置不容置疑,如同文本本身的可读性一般。

本例中,选取一个相对均匀,开阔的天空区域,这是放置文本的极佳位置。相反,将文本直接放置在图片中间,有地平线的位置,致使文本的辨识度差。

2dg323失败案例:差的对比度和错误的位置。

eqrff优秀案例:对比度明显且位置更加合适。

查看 the demo.

更多实例

norther4444-1http://www.themostnorthernplace.com/

vw4444http://eup.volkswagen.no/

mix-text-with-imageryhttp://www.dtelepathy.com/

3. 深度的可读性

可利用景深的图片是增强文本可读性的平滑背景。方法:将文本置于图片的散焦部分,并确保文本色彩与散焦位置的初色有合适的对比度。

文本置于低聚焦区很容易,如下例:

ffgwgwg

ffsafsavf

查看 the demo.

更多实例

ewgtaghhttp://une.ch/creation/home

siz333333333zhttp://www.gloriasrestaurants.com/

ffffffffffhttp://www.atelier-serge-thoraval.com/en/

whyhttp://purplerockscissors.com/

 4. 图片主题的选择

图像上的文本信息等效于图文组合里推断出来的内容。比如,如果有更特别图片适合沟通就不要选择一般性的图片,特别是当它涉及到的旨在传达语气信息的副本。

小建议

  • 选择图片只有一句话:用户能清晰的看到图片的主题,如有必要,了解本图中运用的表现技巧。
  • 不要选择有聚焦缺陷的图片
  • 牢记图像净度的重要性。如果图片中或多或少有引发触觉或有较少关于此时,在不失去图片成效的情况下,采用多重图层或者滤镜处理。

实例

wtgwgtwghwhhttp://blood-and-water.animalplanet.com/

recipe44shttp://pixelgrade.com/demos/rosa/

canad44444ahttp://formula1data.com/

  5. 3D意识

分析出现的文本相对于图像中的各种元素的聚焦程度。文本是在图像之后,还是图像之前?文本是融入其中,还是在远近空间有自己独特的位置?进一步分析,如何将文本关联到图像的聚焦元素?

经验法则:文本越小,在远近空间上显得越远。

本例中,利用的前景文本似乎比背景中的灌木更接近我们,除去背景中的高层次的细节,我们的眼睛能很容易的辨别长线与大尺寸文本,诠释这种文本比错误例子中容易,例如,在错误例子中,人物的形状好像放置了文本并与背景中的叶子大约相同的远近位置。

grgrwyhwyh

wgwghwhwe

更多实例

fdefawhttp://danielladraper.com/

3rrf4444whttp://www.lobagola.com/

gerhgehehhttp://vivaco.com/demo/ventcamp/index-photo.html

即将推出

好了,以上就是美图处理的小技巧,在下一篇文章中,我们将讨论把这些技巧与动画融合的不同方法。

 

翻译:设计派-alvin

 

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » 超赞!合理搭配图片与文字的小技巧

0
分享到:更多 ()