网页设计中采用“渐变”的手法,已经有一段时间了。如今渐变又以传统的方式在背景和图像中卷土重来。Spotify应用在活动和网站使用“双色调渐变”的特征元素使照片再次流行。在这里我们将为您展示如何使用Photoshop创建“双色调渐变”方法。

Spotify微型2015年,双色调图像与变化率图。

今年,我们看到了各种各样的五彩渐变,有鲜明的调色板和不规则的形状,也有模糊和扭曲的效果。目前渐变在许多方面都有使用,但就趋势而言,最具特色的是渐变的使用精化到了网页中的次要元素上,例如悬停,标题,3D元素,图标等等。

当下,iPhone X代表了2018流行趋势的范例。在它的登陆页面、广告,以及它的促销活动中的许多要素,各种色调的渐变都被用到了各种标题、文本甚至图形文字上。但是,在iPhone X的主屏幕背景中,尤其是在设计中,渐变不像传统的线性渐变或径向渐变那样均匀,而是与不规则的多种颜色混合在一起。

主屏幕中的多色渐变,iPhone X

3D中的渐变?顶点颜色和颜色映射样式

在3D中谈论渐变似乎很普遍,那是因为场景的照明会在物体的表面上产生光的渐变。但是这种趋势所固有的特征就是,精确的使用对象的渐变纹理,有时会模仿顶点颜色和色彩映射渐变技术。这两种技术不仅仅是一种纯粹的装饰功能,因为它们用于表示数据或映射3D对象。

渐变类型

我们可以以多种方式混合颜色,最常见的是具有不同参数的线性或径向渐变(如半径,方向,不透明度或颜色点)。正如我们在iPhoneX中看到的,现在流行的是使用梯度网格或其他技术的非均匀混合渐变;使用渐变网格,我们通过扭曲渐变的表面以产生自由形状。我们可以找到许多类型的渐变,如单色,双色调,多色,渐变斜坡等,如下图所示。

CSS渐变的有用工具

为了在CSS中重新创建这些效果,有很多可用的工具允许它们通过可视化编辑器创建,只需复制和粘贴CSS代码,如您可以看到的: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients in CSS.

文字责编:张玲    编辑:栾京霖    翻译:谢铮

译文来自:网页设计中的时髦渐变

发表评论

电子邮件地址不会被公开。 必填项已用*标注