网页、移动端页面设计上，这些合理搭配图片和文字的小技巧你都知道吗？

在背景图上添加文字，已经变成了网页、移动端页面设计中一种很流行的表现手法，文字在背景图片上的排版组合，可以让图片变得更加有表现力，也可以使文字变得更加生动，可是如何更好的让两者的优点最大化呢？123标志网就用这篇文章告诉你答案。

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

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

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

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

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

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

• 第一看不出字形，说明对比度偏低了；

• 对比不只是深浅之间，互补色也可提供自然对比；

• 如果图片复杂全焦，利用叠加或编辑图像应该是最有效的选择。

本例中，通过WebKtit滤镜巧妙的放置以及使用额外的

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

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

更多实例

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

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

失败案例：差的对比度和错误的位置。

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

查看 the demo.

更多实例

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

文本置于低聚焦区很容易，如下例：

查看 the demo.

更多实例

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

小建议:

• 选择图片只有一句话：用户能清晰的看到图片的主题，如有必要，了解本图中运用的表现技巧。

• 不要选择有聚焦缺陷的图片

• 牢记图像净度的重要性。如果图片中或多或少有引发触觉或有较少关于此时，在不失去图片成效的情况下，采用多重图层或者滤镜处理。

实例

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

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

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

更多实例

 更多精彩、有趣、实用的内容，点击我上123标志网的博客查看更多吧！