谁说排版一定很无聊？设计师使用有趣的类型选项带来了很多乐趣，包括采用带有有趣的背景，动画和图像的透明文本元素分层的超级时髦方法。
有很多方法可以将此网站设计趋势整合到项目中（或将您的个人想法也应用到印刷项目中）。
以下是一些想法和启发，可帮助您开始在粗体背景上使用透明文本。
图标切出
网站建设
透明文本的微妙显示可以增加图标或形状的视觉趣味。
当我们谈论透明度和文本元素时，可以将其与传统的单色文本（深色背景上的浅色或浅色背景上的深色）以外的任何其他东西一起考虑。
在上面的示例中，彩色图标内的透明文本元素允许背景中的视频卷轴显示出来。有趣的是，它提供了一种颜色提示，以帮助吸引眼球运动，而动画元素则吸引人们关注不断变化的内容。
图像滑块
透明文本可以为带有图像或视频的背景层提供有趣的预览。这项技术最适用于一些大（甚至超大）的字母，因此您可以看到足够多的背景以使其有趣。
Ultima Capital（上图）在深色背景上的透明文本元素后面使用了全屏图像背景层，几乎就像一个窗口切口。您可以看到完整的图像，将其滑入到位，而其余的视觉预览则具有质感和趣味性，同时保持屏幕上两个大字的可读性。
暗影元素
网站建设
由于缺乏更好的描述，我们将这种技术称为在透明字体后面使用阴影元素。
在深色背景上看起来像什么的文本实际上是透明的，背景中漂浮着蓝色到绿色的渐变气泡。细微的动作引起了人们的注意，并且还与前景中的细微气泡相连。
效果很好，因为它有助于为长文本块和页面设计创建视觉焦点，而没有很多其他视觉效果。
躲猫猫图片
透视图像处理可能是透明文本趋势的最旧版本。信件看起来它们已从前景中切出，以在背景中显示图像。
很简单，对吧？
您可以在此概念上添加一个简单的技巧，以使其发挥更大的作用。在这里，当鼠标悬停在字母上方时，背景似乎有些反弹。
大纲文字
使用透明文本的最简单，最简单的方法是使用轮廓字体。寻找轮廓笔划较粗的文本选项，并确保与背景有足够的对比度。
轮廓字体的用法也很受欢迎，这本身就是一种趋势。
关于使用大纲选项的最好的部分是它不需要任何技巧即可完成。只需选择一个您喜欢的轮廓字体，即可开始使用！
动画背景
如果您喜欢轮廓字体的想法，但感觉简单的背景不足以帮助您美观，请将轮廓字体与动画背景配对可以产生更大的影响。
上面Lyst的示例的巧妙之处在于，运动的背景也是基于文本的，您可以通过概述的文本看到运动和颜色变化。该设计很好地完成了将许多相似但不同的设计元素分层的工作，从而在没有大量视觉元素的情况下创造了很多视觉兴趣。
如果您要启动一个新站点或新设计并且没有太多工作需要，这种类型的设计可能会很棒。
视频和图层
通常透明文本与静态照片配对，但也可以与视频层配合使用。
DAFI在两个平面（纯色背景和视频）上使用透明编号，为用户提供导航信息。这种处理方式特别令人愉悦的是数字的微妙本质，它们使用轮廓和透明度，因此不会妨碍其余内容。
文字动画
网站建设
是的，“牛仔裤让难民”的类型处理正在进行很多工作。文本元素是透明的-您可以看到其中的移动背景-每个字母都充满了动画纸屑。
如果要使用这种技术，请谨慎操作。在这里，它起作用是因为一切都很简单。文本确实是屏幕上唯一发生的事情。
它吸引了人们的眼球，使您有时间思考和理解字母，因为可读性在这里更具挑战性。
动画色彩填充
对于上面的示例，您可以通过两种方式来考虑字体：充满彩色动画的字母或在动画背景上透明的字母。（您可以争论如何自己做到最好的原则。）
无论您喜欢哪种技术，对于短单词或短语来说，结果都是一样的，而且非常惊人。
这里的“设计”一词具有惊人的设计，您几乎可以相信任何创意需要的背后团队。
超大的Peek-a-Boo
网站建设
采取另一种印刷趋势并使其真正变大，然后添加透明度和凉爽的背景图像。
这就是您在此处得到的带有过大字体的文字，该文字被剪裁（或透明），以使背景图像能够显示出来。
该技术的优点在于，每个图像都很有趣并且适合超大尺寸的字母。（想想这与瘦字体看起来有何不同。）
在规划这样的设计时，字体的选择至关重要。将每个图像与正确的字母配对也是如此，以便显示适当的内容。
透明层
网站建设
透明层在这里几乎是相反的。背景层是带有渐变颜色叠加的图像。前景层会使大部分图像变白，但透明类型会带来色彩和图像。
这种设计的最好之处可能是，尽管它使您可以仔细查看图像，但消息和文字却非常易于阅读。
结论
所有这些示例的共同点是，它们使用具有这种效果的简单字体。原因是简单的字体可确保将文本用作艺术性和可读性元素。
共同点也不止于此。这些字体大多数也都是无衬线字体，笔触较宽，较粗。这为文本后面的任何设计元素提供了足够的空间，以便清晰地显示出来。（还有助于提高可读性。）
这是一个有趣的趋势，可以通过许多不同的方式起作用。祝你好运！
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/courses/262284.html