搜索
免费下载
设计灵感
设计规范
👑
充值会员
流体渐变
渐变配色
色彩搭配
注册
登录
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
APP设计
原型demo
GUI
小程序界面
网页UI
网页设计
原型demo
软件设计
字体下载
衬线字体
非衬线字体
圆角字体
手写字体
网页字体
图标字体
书法字体
交互动效
加载loading
转场动效
ICON图标
面性图标
线性图标
拟物图标
2.5D图标
卡通图标
像素图标
按钮图标
多色图标
活动图标
插图/插画
扁平化插画
多彩渐变插画
2.5D插画
样机贴图
手机样机
名片样机
动画样机
电脑样机
笔记本样机
穿戴设备样机
UI作品样机
设计导航
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
网页UI
字体下载
交互动效
ICON图标
插图/插画
样机贴图
设计导航
5大渐变趋势以及如何有效地使用它们
搜UI
>
文章/作品
>
设计教程
>
设计规范
© 共享素材,请勿商用
举报
[db:内容描述]
渐变
趋势
有效
UI教程
发布时间:2020-05-26
关注
1548239629122536706.jpg
(246.08 KB, 下载次数: 0, 售价: 2 U点)
你可能已经注意到,在2017/2018年,渐变在印刷和web设计中的使用有所增加。看起来设计社区已经接受了这种趋势,这种渐变过渡在形状和颜色上只会越来越动态。如果你不知道如何将彩色的形状和背景应用到你想要通过设计传达的信息中去,那么使用彩色的形状和背景是一件棘手的事情。五大渐变趋势是什么,如何在你的工作中有效地使用它们?
1、 双色版的渐变
1548239630204544009.jpg
(153.3 KB, 下载次数: 0, 售价: 2 U点)
双色调渐变是两种颜色,它们之间有平滑过渡。没有更多,没有更少。使用Illustrator中的渐变工具创建这些类型的颜色过渡非常简单。当为Duotone渐变组合颜色时,没有规则。当你混合3种颜色或更多颜色时,规则就会出现......但是两个......你可以做任何你想做的事情。这一切都取决于你对设计本身的意图。如果你需要强大而大胆的信息,那么你可能需要考虑使用更鲜明,更高对比度的颜色组合。另一方面,如果你希望采用柔和,更安静的方法,则使用较少饱和的颜色。
如何使用它们?你可以像Duotone Gradients一样有创意。这种类型的渐变最广泛使用是照片叠加。它们主要用作内容的简单背景。以下示例是由JessicaH?gg和Stink Studios为Spotify创建的此类用例之一。
1548239630163649281.png
(369.94 KB, 下载次数: 0, 售价: 3 U点)
Duotone Gradient的另一个例子是由Barthelemy Chalvet为AgenceMe创建的家庭导航设计。在这里,我们再次将Duotone视为内容的背景。内容包括文本和插图。但是,图中使用的颜色非常谨慎。插图主要是浅色调,只是一些色彩鲜艳的细节,与背景双色调(温暖)相反(冷)。
154823963021512345.png
(213.47 KB, 下载次数: 0, 售价: 1 U点)
总而言之,使用双色调渐变趋势的最安全方法是将它们与黑白照片混合,或将它们作为照片叠加层应用。如果你将它们与其他颜色混合,请确保不要过分。多种颜色在设计中可能非常出色,但如果匹配不当,它们也会引入混乱和混乱。如有疑问,请使用较少的颜色。在大多数情况下,少即是多。
154823963164609109.jpg
(462.11 KB, 下载次数: 0, 售价: 6 U点)
2、半透明渐变
前五大渐变趋势包括半透明渐变。这些类型的渐变在它们中具有褪色效果,它们在一端具有全色调,而在另一端具有0%颜色不透明度。
1548239631148603200.jpg
(220.92 KB, 下载次数: 0, 售价: 4 U点)
这些半透明渐变可以是双色调甚至是三色调渐变,但它们总是以透明度结束或开始。
如何使用它们?
使用半透明渐变的一种方法是将它们与其他渐变形状和背景重叠,或者作为照片上的叠加层。下面的示例显示了Studio-JQ制作的艺术作品
1548239631161321759.jpg
(188.31 KB, 下载次数: 0, 售价: 1 U点)
在这里,我们可以看到在三色渐变圆上使用一个半透明形状。微妙的半透明形状在渐变圆形前形成雾气氛,就像褪色的月亮,简单而有效地使用透明效果。在Magdiel Lopez制作的海报艺术品中可以看到混合了摄影和纹理的半透明渐变的另一种奇妙用法。
154823963180900281.jpg
(45.54 KB, 下载次数: 0, 售价: 6 U点)
海报艺术品由Magdiel Lopez
三、网格渐变
网格渐变是在Illustrator中使用网格工具制作的渐变,因此是标题。这种类型的渐变需要更多的技巧来制作。通常它们将多种颜色混合在一起,这应该小心生产,因为某些颜色不能很好地匹配。除了将多种颜色混合在一起外,它们还形成一种类似于液体的纹理图案,使其具有更加动感的外观。
154823963117835381.jpg
(443.28 KB, 下载次数: 0, 售价: 1 U点)
到目前为止,您可能已经注意到所有渐变如何与黑白照片完美配合,为他们提供增强色彩强度所需的对比度。它还消除了设计中“过多”的混乱和感觉。
如何使用它们?
网格渐变可以用作独立模式。由于它们通常具有动态外观,因此可以作为简约模式应用,并辅以创意印刷术。
154823963154441518.jpg
(295.03 KB, 下载次数: 0, 售价: 6 U点)
使用网格渐变进行品牌推广也越来越受欢迎。这种类型的使用可以在下面由Focus Lab制作的简约品牌项目中看到。
1548239632107490871.jpg
(281.06 KB, 下载次数: 0, 售价: 1 U点)
4.渐变模糊
这是事情变得有趣的地方......。介绍渐变模糊!我相信你已经看到了这些有趣的外观,有一种强烈的“艺术”感觉。它们现在是Top 5 Gradient Trends的一部分。
154823963252594987.jpg
(206.57 KB, 下载次数: 0, 售价: 6 U点)
如何使用它们?它们似乎经常被用作海报设计的一部分。抽象的伟大之处在于它可以用来描述各种情感和抽象概念。它可以说明声音,光线,宇宙,幸福或悲伤。我们根本不知道如何描述这些单词中的许多单词,但精心挑选的模糊彩色形状可以帮助我们。
让我们看一些使用渐变模糊的示例:
1548239632193155893.jpg
(27.21 KB, 下载次数: 0, 售价: 2 U点)
1548239632169473431.jpg
(18.52 KB, 下载次数: 0, 售价: 2 U点)
5.渐变球体最后的渐变趋势是渐变球体,具有强烈三维形状的网状圆圈,提醒我们在行星和气泡上。
154823963230637658.jpg
(167.09 KB, 下载次数: 0, 售价: 6 U点)
如何使用它们?Gradient Spheres在应用程序和网页设计中占据了一席之地。由于它们与行星类似物体相似,因此它们通常用于技术未来类型的项目中。例如,Jiyoon Kim使用Gradient Spheres设计一个具有轻盈未来感的创意手表UI。
154823963268258262.jpg
(27.78 KB, 下载次数: 0, 售价: 4 U点)
Mirtho Prepont为Asana制作的海报设计中使用的Gradient Sphere的另一个创意示例:
1548239633164006161.jpg
(140.96 KB, 下载次数: 0, 售价: 3 U点)
写在最后如果你使用渐变的照片,第一步应该是选择正确的照片。最好的选择是具有清晰焦点的照片,如果可能的话,焦点周围没有其他任何东西。值得花时间的第二件事是照片的颜色。如果颜色与你的渐变无任何关系,最安全的做法是将照片切换为黑白模式。但是,有时可以通过在Photoshop中使用“颜色饱和度”工具或“颜色平衡”来调整颜色。这正是我在这个例子中所做的。第三是选择渐变形状和背景。选择正确的渐变对象时,请确保它们都具有相似的色调。在我的例子中,我使用蓝色/紫色物体与粉红色/黄色物体形成鲜明对比。这些都是我需要的颜色。任何更多的东西,组成会感到混乱。虽然很容易穿过线,所以如果你不确定,只需要减少颜色和减少形状。如果你感觉某些东西仍然缺失,请添加中性几何形状,如果背景为浅色,则为白色;如果背景为暗,则为黑色。
1548239633133097386.jpg
(434.25 KB, 下载次数: 0, 售价: 1 U点)
作者:Diana Hlevnjak(作者已授权)地址:https://polavctors.com/top-5-grdint-treds-and-how-to-use-them-effectivel本文由Tzw_n翻译发布于公众号「小阿田的设计笔记」,未经许可,禁止转载。
UI教程作品
5大渐变趋势以及如何有效地使用它们相关作品
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
插画/插图
收藏
Banner
收藏
Banner
收藏
Banner
其他设计规范
最新素材
其他设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
Load More
最新素材
收藏
面性图标
收藏
像素图标
收藏
线性图标
收藏
线性图标
收藏
多色图标
收藏
面性图标
收藏
书法字体
收藏
书法字体
Load More