如何在网页设计中使用扭曲的图像

它开始于2017年，当时设计师开始玩毛刺效果。随处可见：视频，动画，当然还有图像。这种效果完美地融入了一股怀旧风潮中，既暴风雨也带来了虚拟世界。

但是，时间已经过去了。即使电视连续剧以80年代和90年代为中心，如Young Sheldon或Stranger Things仍处于领先地位，2019年也向我们提出了一些新的趋势和痴迷。

如今，故障效应正在降低。然而，它已经成功地为另一种时尚解决方案赋予生命：图像显示失真。它每天都在设计师中越来越受欢迎。

这种方法非常普遍。虽然起初看起来它可能是丰富幻灯片之间转换的另一个聪明的想法，但它也可以与界面的各种细节配对。即使是简单的静态图像块也可以从中受益。

让我们来看一些显示这一新趋势的例子。

袁烨

虽然它在我们的理解中没有传统的失真效果，但是在这里图像仍然变形。艺术家能够在你向下滚动时拉出逼真的幕布效果，迫使图片在风中飞舞。

在如此适度的环境和最小的设计中，效果简直闪耀。它使整个网站看起来精致而且非常出色。

Dallara Stradale

没人能说Dallara Stradale的官方宣传网站很无聊。该网站是一个真正的杰作，就像意大利团队创建的汽车。它具有创新功能，以满足产品本身的意识形态。

因此，毫不奇怪，每个细节都很重要。每个方面都是现代和时尚。主页上主要部分之间的每次转换伴随的梦幻般的图像失真效果就像手套一样。

它将简单的滚动转换为表演，为每个区域提供了戏剧性的入口。更重要的是，由于它的模糊性，它自然地模仿了速度感，这也是Dallara Stradale的特征。

行星

虽然在前面的例子中，速度的感觉在于过渡效果的核心，​​这里时髦的液体效果试图以其流动的本质赢得读者。通常情况下，这里在主屏幕旋转木马中使用图像失真效果。

而不是恼人的滑动效果，我们可以享受一个平滑的自然和魅力的可爱过渡，使每个场景变化扭曲。更重要的是，效果也与该机构的铭牌相对应 – 加强了外星高科技氛围。

马克斯柯尔特

世界公认的视觉效果制作人Max Colt的个人作品集也具有失真效果。就像Planetary的情况一样，它改善了旋转木马中幻灯片之间的转换，描绘了艺术家最令人印象深刻的作品。它具有相同的魅力，由于其水灵性，但与Planetary的解决方案相比，它看起来有点不同。

Bizmates

由于其基于几何的扭曲效果，该网站与我们系列中的其他网站形成鲜明对比。其他示例以扭曲图像的涟漪效应为中心。这里，相对宽的垂直面板和菱形使场景表面变形。

解决方案非常适合整体的四四方方的氛围，做出了重要贡献。

1MD

1MD是我们综述中的第一个例子，其中失真效应不伴随任何移位。它只是在主页上显示的部分中使用，以使其与其他部分区分开来。

它不仅是动画背景的一部分，而且它也是一种将标语放在中间的媒介。因此，该部分鼓舞人心，而导致“关于我们”页面的号召性用语看起来既可点击又诱人。

精确运行

Precision Run背后的团队也采用了类似的方法。然而这一次，他们使用这个时髦的解决方案，使一个简单的静态图片成为引人注目的。

这里的主页包括复古风格的元素，如双色调着色。与双重曝光巧妙配对的失真效果为整个界面增添了一种美妙的旧时感。它完美地与网站上的其他内容一起使用，有效地将图像置于聚光灯下。

SassCafé

SassCafé背后的团队展示了一种从扭曲效果中获益的不同方式。他们将效果与遮蔽和鼠标互动结合起来，将英雄区域转变为游乐场。

一个带有两个粗体标语的干净黑色画布首先迎合在线观众。如果你开始移动光标，你会发现内部隐藏着一些东西。有两个背景图像。当您将鼠标悬停在标语上时，每一个都会聚焦。其余时间，图片严重变形。

解决方案从一开始就鼓起了兴趣。这只是一个绝妙的主意。

阿达索科尔

Ada Sokol的个人投资组合也标志着图像显示的混乱趋势。这是我们收藏中的另一个例子，它与通常的旧路径不同，并与鼠标光标串联使用。

正如您可能已经注意到的那样，英雄区域可以容纳几个代表艺术家作品的标题。将鼠标光标悬停在其上时出现的图片支持每个标题。

在这种情况下，当您移动光标时，图片会留下一些扭曲的图形。它提醒了当显卡缺少必要的带宽并且无法跟上用户的动作时的情况。这个原创的解决方案自然会鼓励我们玩网站，从而让我们待在一起。

添加意外扭曲

标准的图像效果仍然受到青睐，但你不得不承认它们已经失去了理想的“哇”因素。借助于陈旧的滑动或弹跳吸引注意力变得越来越具有挑战性。

因此，开发人员总是试图提出新的东西来保持他们的网站引人注目并不奇怪。而过去曾经避免的臭名昭着的失真效应现在可以挽救这一天。

即使解决方案意味着变形和扭曲的外观，它仍然是非常普遍的。它与各种细节很好地配合。但它不仅仅是受益于滑块的滑块。

实践表明，该技术与基于鼠标光标交互和常规滚动的解决方案完美协作。这种效果使普通的东西看起来令人耳目一新。