idl将文本转换为图像_帮助您正确地将文本与图像混合的提示

idl将文本转换为图像

在背景图像之上使用文本的模式已经流行了多年。 图片早在网页设计之前就产生了，图像上的文本可以提供更具情感吸引力和上下文相关的丰富体验。 在今天之前，图像必须小得多，以允许显着降低带宽。 随着连接速度和屏幕密度的Swift提高，我们开始在设计中使用更大的图像。

与该技术相关的设计决策是非常重要的考虑因素，开发最佳实践来管理该实践对于保持高质量设计势在必行。 人们不能简单地将文本放在任何图像上并期望它看起来正确。

在本文中，我们将讨论在图像上放置文本的五个不同方面，这将帮助您正确地混合复印和图像。

注意 ：在整篇文章中，选择视频和文本组合时都适用相同的原则。

1.通过颜色和亮度对比

必须使用与文字有明显对比的图像。 特别是，使用较暗的图像和较浅的文本，或使用带有滤镜或覆盖元素的较暗图像，可以确保您使用足够的对比度，这是一种有效的方法。

获得正确的颜色和亮度对比度的一些技巧：

• 如果您无法立即看到字母，则对比度会关闭。
• 对比度并不总是意味着黑暗与光明。 互补色还可以提供自然的对比度。
• 如果图像复杂且完全对焦，则使用覆盖或编辑图像可能是最有效的选择。

在此示例中 ，我们使用WebKit过滤器来操纵图像的对比度和亮度，并使用额外的<div>对其进行放置和操纵。 未添加前缀的滤镜如下所示： filter: brightness(40%) contrast(70%);

查看演示 。

更多例子

2.通过大小和位置进行对比

颜色不是改善图像相对于叠加文字的对比度的唯一方法。 选择与图像的聚焦元素相关的文本大小和位置至关重要，因为这与文本本身的可读性有关。

在此示例中 ，我们选择了具有较大的相对均匀天空区域的图像。 这是放置文本的理想区域。 相反，文本的可读性要差得多，直接位于出现天际线的图像中心。

查看演示 。

进一步的例子

3.深度可读性

选择利用景深的图像。 这样可以使背景更平滑，从而提高可读性。 将您的文本放在图像的离焦部分，并确保文本颜色与离焦区域的原色充分形成对比。

如本例所示 ，我们可以通过将文本放置在焦点较低的区域来轻松实现此目的 。

查看演示 。

进一步的例子

4.图像主题选择

图像上方的文字仅与组合中的推断会议有效。 例如，如果更具体的图像可以更充分地进行交流，则不要选择通用图像。 选择图像时，请考虑图像的情感唤动和文字上下文，特别是因为它与副本要传达的消息的语气有关。

一些技巧：

• 选择显示完整句子的图像； 用户应清楚地看到图像的主题，并了解图像中正在采取的操作（如果有）。
• 不要选择聚焦点较弱的图像。
• 请记住，图像清晰的重要性。 如果图像或多或少地引起人的感觉而对细节的关注较少，则可以应用沉重的覆盖层或滤镜，而不会失去图像的效果。

例子

5.三维意识

考虑文本相对于图像中各个元素的聚焦级别出现的位置。 文字似乎位于图像的后部，还是出现在前景中？ 文本是否会融合或在z空间中保持其独特位置？ 文字与图像的重点元素之间的关系如何，最具体地讲？

经验法则：文本越小，文本在z空间中的显示就越远。

在此示例中 ，我们使用的前景文本看起来比背景的灌木丛离我们更近。 尽管背景中的细节很丰富，但我们的眼睛自然可以识别出较长的线条和较大的形状，比不良示例更容易解释文本。 在不好的例子中，字符的形状似乎将文本与背景中的叶子放置在大约相同的z位置。

查看演示 。

更多例子

快来了

好吧，这结束了我们对美学的讨论。 在下一篇文章中，我们将介绍将这些技术与悬停交互和动画相结合的不同方法。

翻译自: https://webdesign.tutsplus.com/articles/tips-to-help-you-properly-mix-text-with-imagery--cms-21575

idl将文本转换为图像