解决好图片上的文本,可以*的解决好图片上的文本的方法比较有限,下边出示五个比较好的方法。
假如你要变成一个出色的 UI 设计师,你也就务必学好如何把文本和睦地融进照片。这一关键点反映出了一个出色的 UI 室内设计师和一个槽糕的 UI 室内设计师中间的差别,坚信在看完这一部分以后,你将会出现非常大的提升 !
方法一:立即将文本置入照片
在决策是不是将这一方式添加这些的情况下,我迟疑了。但是将文本立即置入在技术上而言是能够的,并且看上去也非常好。
应用这一方式的情况下*须留意好多个地区:
照片看上去应当发暗,而且沒有很多比照显著的界限,以防与文本掺杂。
文本务必是乳白色——尽管说只需比照显著就可以了,可是你能发觉难以寻找比照显著而且简约美观大方的计划方案了,严格意义上来说,只有仅用这类。
务必从不一样的屏幕大小开展检测,以确保各种各样状况下都清楚最易读。
假如明确考虑之上全部标准得话,就可以应用这一方式了。
我在沒有在一切技术专业的新项目上应用这类方式,由于得用好这一方式*须非常好地操纵。所以说,这一方式作出好的实际效果是能够的——但一定要当心应用。
方法二:在照片上遮盖一层深灰色
在一整张照片上遮盖一层深灰色——或许是非常简单的解决方式了。就是假如初始照片不足黑,你能将一张透明色的灰色图片遮盖在初始照片上。
假如你应用火狐浏览器得到初始照片,便会发觉初始照片太会亮,并且有很多比照显著的界限,不可以插进文本。可是遮盖一层透明色灰色图以后,再插进文本就完全没问题了!
这类方式一样适用小图片和缩列图。
遮盖一层深灰色是非常简单并且最时兴的方式,自然,你也能够试一下用其他色调。
方法三:将文本放到有背景颜色的框里
这一方式比较简单,并且又十分好用。*做一个适当全透明的灰黑色矩形框,随后在里面再加上乳白色的文本。假如文本底不透明度适度得话,你能将这一矩形框字块加上到一切照片上,可读性都很高。
还可以将其加到其他背景色中——可是,一定要分辨好。
方法四:模糊图片
这一方式碉堡了——将文本下的照片一部分开展模糊不清解决。
IOS7中也是用了模糊不清的方式,Vista 系统软件中也用模糊不清解决的非常好。
针对照片的聚焦点以外的地区还可以模糊不清解决,可是要留意——这一实际效果并并不是动态性的,假如照片有变化,一定要*文本处于图片模糊的地区。
方法五:底端退色
当照片下边趋向退色或是发暗的情况下能够应用这一方式,在底端立即再加上乳白色的文本。这一方式很才华横溢,不清楚在 Medium 以前到底是谁先应用的,我*一次发觉这一方式便是在 Medium。
简易一看,上边的 Medium 展示柜仅仅将乳白色的文本放到照片上,但我要说——沒有那么简易!这儿有一个很恰当的解决,从正中间到底端有一个衔接,正中间灰黑色的不透明度是 0%,而**端的不透明度是20%。
这个地方难以发觉,可是不容置疑提升 了阅读文章性。
另外因为我发觉,Medium 的缩列图展示柜应用文本黑影来提高文本的可读性。 这一实际效果能够功效于 Medium 整站,全部在照片上的文本可读性都获得了提升。
这些,为何要在底端开展暗解决呢?这个问题可以用提议一来回应——阳光照射要从上向下。那样就和大家双眼见到的大部分景色一样,底端看上去要暗一些。不大自然的事儿本末倒置。
更为高級的方式:将模糊不清和底端发暗融合在一起——底端模糊不清。