在背景图上添加文字,已经变成了网页、移动端页面设计中一种很流行的表现手法,文字在背景图片上的排版组合,可以让图片变得更加有表现力,也可以使文字变得更加生动,可是如何更好的让两者的优点最大化呢?123标志网就用这篇文章告诉你答案。
考虑到与技巧相关的标志设计决策非常重要,掌握此法的最佳方式是通过实践练习,这对保证高品质的设计很有必要,不要期许文本随意的至于图片之上会有好的效果。
考虑到与技巧相关的标志设计决策非常重要,掌握此法的最佳方式是通过实践练习,这对保证高品质的设计很有必要,不要期许文本随意的至于图片之上会有好的效果。
考虑到与技巧相关的设计决策非常重要,掌握此法的最佳方式是通过实践练习,这对保证高品质的设计很有必要,不要期许文本随意的至于图片之上会有好的效果。
本文中,我们将从5种不同的方面讨论文本在图片上的放置,这有助于你更好的融合图片与副本。
注:本文所讲原理同样适用在选择视频与文本的组合。
1. 色彩与亮度的对比技巧
使用与文本有鲜明对比的图片很有重要,尤其是深色背景搭配亮色文本,或者深色背景使用滤镜或叠加元素处理,是确保使用足够对比度的有效方式。
获取合理色彩与明亮对比的小技巧:
- 第一看不出字形,说明对比度偏低了;
- 对比不只是深浅之间,互补色也可提供自然对比;
- 如果图片复杂全焦,利用叠加或编辑图像应该是最有效的选择。
本例中,通过WebKtit滤镜巧妙的放置以及使用额外的
. 来处理图像的明亮对比,请看下例:亮度(40%)对比度(70%);
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文24.jpg)
辨识度差,文本与图像均无焦点。
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文25.jpg)
使用CCS滤镜后,易于辨识。
更多实例
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文26.jpg)
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文27.jpg)
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文28.jpg)
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文29.jpg)
2. 图片尺寸与位置的对比技巧
色彩不是唯一增强图片与上置文本对比度的方法。选择与图片聚焦元素有关的文本的尺寸与恰当位置不容置疑,如同文本本身的可读性一般。
本例中,选取一个相对均匀,开阔的天空区域,这是放置文本的极佳位置。相反,将文本直接放置在图片中间,有地平线的位置,致使文本的辨识度差。
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文30.jpg)
失败案例:差的对比度和错误的位置。
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文31.jpg)
优秀案例:对比度明显且位置更加合适。
查看 the demo.
更多实例
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文32.jpg)
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文33.jpg)
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文34.jpg)
3. 页面深度的可读性的小技巧
可利用景深的图片是增强文本可读性的平滑背景。方法:将文本置于图片的散焦部分,并确保文本色彩与散焦位置的初色有合适的对比度。
文本置于低聚焦区很容易,如下例:
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文35.jpg)
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文36.jpg)
查看 the demo.
更多实例
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文37.jpg)
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文38.jpg)
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文39.jpg)
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文40.jpg)
4. 图片主题的选择的技巧
图像上的文本信息等效于图文组合里推断出来的内容。比如,如果有更特别图片适合沟通就不要选择一般性的图片,特别是当它涉及到的旨在传达语气信息的副本。
小建议:
- 选择图片只有一句话:用户能清晰的看到图片的主题,如有必要,了解本图中运用的表现技巧。
- 不要选择有聚焦缺陷的图片
- 牢记图像净度的重要性。如果图片中或多或少有引发触觉或有较少关于此时,在不失去图片成效的情况下,采用多重图层或者滤镜处理。
实例
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文41.jpg)
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文42.jpg)
5. 图片与文字3D空间意识的技巧
分析出现的文本相对于图像中的各种元素的聚焦程度。文本是在图像之后,还是图像之前?文本是融入其中,还是在远近空间有自己独特的位置?进一步分析,如何将文本关联到图像的聚焦元素?
经验法则:文本越小,在远近空间上显得越远。
本例中,利用的前景文本似乎比背景中的灌木更接近我们,除去背景中的高层次的细节,我们的眼睛能很容易的辨别长线与大尺寸文本,诠释这种文本比错误例子中容易,例如,在错误例子中,人物的形状好像放置了文本并与背景中的叶子大约相同的远近位置。
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文43.jpg)
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文44.jpg)
更多实例
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文45.jpg)
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文46.jpg)
![网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗? 网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?](http://blog.logo123.com/wp-content/uploads/2016/04/网页、移动端页面设计上,这些合理搭配图片和文47.jpg)
更多精彩、有趣、实用的内容,点击我上123标志网的博客查看更多吧!
“网页、移动端页面设计上,这些合理搭配图片和文字的小技巧你都知道吗?”上的2条回复
小编,让他和那个鸡脸妹去死吧
在电气领域 ABB就像 手机业里的诺基亚,光看ABB的耐高温外壳都比施耐德 西门子的强。。。。。。卖得死贵,和国内的比,人家就是牛啊,技术的差距,小型断路器是用得最多的,每个家庭都需要用到,如何控制成本,又达到技术标准和几万次的可靠性,听你这口气很厉害的