什么是渐变色？渐变色是一种配色方案，相较于单一的色彩，渐变色具有更强的视觉冲击力，有助于快速抢占视线。渐变是从一种颜色过渡到另一种颜色，是由很多种颜色组成的混合。 如果单纯白色或者纯色画面显得苍白无力，我们只需要加入渐变色作为背景，便可增加界面的细腻感以及品质感。在关键功能上应用渐变色能起到强调作用，同时增加该功能的趣味性。在 ui 设计中，渐变色的运用非常的广泛，比如 图标、 logo、 网页、海报设计等。那么我该如何添加渐变色呢？我们可以使用及时设计这款软件作为演示，我们可以直接填充线性渐变，但是我们会发现自己掉的渐变色 视觉上会感觉不是非常的好看，而且要是慢慢的调色，耽误的时间又会非常的多，那么应该怎么办呢？我们可以使用及时设计你的渐变色插件做 辅助工具，这款插件内置多个渐变色，一键替换渐变色，直到选中自己想要的渐变效果。渐变色运用需要我们长期练习与掌握，当然多欣赏优秀的设计也可以快速提高。
粉丝1.9万获赞16.9万
相关视频
13:03查看AI文稿AI文稿哈喽，大家好，我是蒋浩明，欢迎来到飞哥马的问题答案第一期，做这个视频的原因呢，是因为最近私信问问题的人实在是太多了，所以说呢，我想着以后呢把这个问题收集一下，呃，录个视频统一给大家去解答一遍，会把这个做成一个长期的栏目，希望对大家有所帮助吧。 然后废话不多说，咱们直接开始。首先我们看第一个问题，调整矩形的单个圆角，老师会多个圆角一起动，也是比较基础的一个问题，我们画一个矩形，此时我们会发现，呃，有四个点，对吧？我们可以用来去调整圆角，基础的逻辑就是我们调整一个圆角的时候，其他的圆角会跟着一起动，是不是？ 好？如果这个时候，如果我们单单的只想调整这一个圆角怎么办？我们直接按住 office， 哎，你会发现他就可以调整了，对吧？当我们去按住凹陷去调整一个圆角的时候，如果松开的时候再去调整其他圆角， 他都是单个的逻辑去调整了。此时如果我们想返回原来的原来的一个逻辑的话，我们就是直接就在输入一个统一的圆角，然后我们再去调整圆角的时候，他就会返回去，好吧，第一个问题相对来说比较简单。第二问题，这个图标的界面背景要怎么做出来？ ok， 我们拉长一点， 他指这位同学指的问题应该是这个，这个波纹该怎么做？就是这个这个形状，对吧？ ok， 其实也是应用到一个蒙版的属性跟福瑞姆的一个蒙版的属性，对吧？我们直接用一个福瑞姆，我们给他一个圆角， ok， 再给他一个见面， ok， 此时我们需要知道弗莱姆里面呢，有一个叫做可丽肯探，对吧？还有个蒙蛮的属性，所以说你们的波纹的话，就是外面的这些图形的话，我们可以画的更随意一点，比如我们这样直接拉一个 形状，对吧？然后外面就随便画了， ok， 然后填给他填插个颜色， ok， 然后我们拉个界面出来， 对吧？我们再给他拉个界面，比如这个颜色水西，这个，这个西，这个， ok， 然后我们把这个图形呢去放到这个服用里面，对吧？我们可以移动他，对吧？鼠标移动器他就会移进去， ok， 但是这个颜色可能调整的不太好，给他重新吸一下， ok， 然后此时他就会有一个波纹的形状了，对吧？然后我们再去仔细的去调整一下里面的去渐变就好了，比如给他稍微浅一点， ok， 这种边就出来了，对吧？然后多个的话，我们直接就是在这 复制多层就好了，然后就调整一下角度，对吧？但我画的没有那么精细哈，大家可以自己去撕下去尝试一下。 第三个，使用布尔运算后的形状去怎么去编辑毛点？这是我们平时遇到的跟我们普通的一个，比如盖子，他的逻辑其实不太一样的地方，呃，比如这样 当我们一一般的变音毛点的话，我们直接按回车，对吧？我们直接进入网点模式就可以去调整毛点，但是分分吗？你们的不满于算后呢？我们画一个三角形 给他进入波尔运算，然后我们按住回车的话，他其实是进入不了魔力模式的，如果再一次回车，他还是进入不了，对吧？所以说呢，我们这时候怎么办呢？如果想调整这个点的话，我们直接可以按 ctrl 加一给他转取一下，此时就话 就会变成一个猫脸，我们就可以去进行的去调整了。好，刚刚我们收到了 come on 的加一，对吧，嗯，是一个转曲的一个功能，说到这一点的话，我们可以用它跟这个功能去做对比， ok， 我们给他统一的去给一个秒变，此时如果按 ctrl 加 e 的话，第一个 ctrl 加 e 他其实没有反应，对吧？他还是秒变，对吧？我们还在调，他还是秒变。当如果第二个形状 come on 加一的话，他其实变成了一个形状，哎，不是不是， come on 加一啊，按右键这个奥特奥拉 sjouk， 对吧？此时他就会变成一个形状， 是不是？哎，这两个的一个区别。呃，当然泰尼玛也也有功能重叠的地方，比如打个中文， ok， 非常优美的中文化。如果我们这个时候按科目二加一的时候，你会发现他会把文字变成一个形状，对吧？可以编进去编辑毛点，当然这里面如果按住这个 shift 的 come on 的加一 come on 加欧的话，其实他也是变成了一个转曲形状的一个功能，对吧？所以说他们俩的功能其实有重叠的地方，所以说呢，这块呢需要大家去记一下， ok， 第四个怎么让两个毛点能够被对称的拖动？这个问题应该是实现不了的，他们他指的意思应该是当我进入毛点模式，我 从调整这个毛点的时候，这个毛点也在动啊，一般是不可以的。好吧，这个情况应该是实现不出来的，我可以放，放出来，主要是放出来。让大家去了解一下这个第五个 手模板是为啥颜色显示不出来？嗯，这是新手常见的一个问题吧，比如我们这时候画一个渐变， 对吧？画了个渐变，然后我们再画一个五角星放底下我们而不是加花椒铺好放底下， 然后我们选中这两个图层，给他一个蒙版，谁知有形状有颜色，对吧？好，我们选中这个，我们再点到这个三二一，对吧？这个蒙版的图层的时候，注意我们把填充取消掉，哎，你会发现他这个颜色整整体的这个形状的颜色就没有了，对吧？这个做个蒙版就失效了，是不是？ 当我们去把这个表边加上的时候，你会发现他也会存在，对吧？所以说呢，他的蒙蒙版的逻辑呢，是把这个轮廓下面所有的一个形状的 形状的一个属性的话，都会变成一个蒙版的底层，懂我意思吧？如果加了填充，它里面就会有填充，对吧？如果加了描边，他就会有描边的一个逻计算逻辑在这，比如加了奥拉，对吧？他就会在这 需要注意，如果他没有，大家需要需要检查一下，如果他没有显示颜色出来的话，就是因为你 底部的蒙版其实把 feel 或者是斯洛克去取消掉了， ok， 这跟该子的逻辑其实招有点不太一样， 对吧？ ok。 第六个，创建一个形状之后呢？所有的形状都想要复用这个样式，该怎么办？呃，很简单，其实就是这个情况，当我去比如我们新建一个这个样式，对吧？哎，给他拉长一点，加个投影， 加了描边，并且改了颜色，对吧？我们想把这个，呃图形的样式呢？如果会重复用到的话，我们可以直接点右边这个 点这个按钮，我可以点击一下，然后我们再去画矩形的时候，或者画圆形的时候，你会发现他的样式都是这个样式，包括跟这个一样的，对吧？就是带有 feel， 是红色的，包括色值啊，包括，呃描边，还有投影，他的属性都被记录进去了， 如果想返回去的话，呃，我们可以一样，我们可以直接重复的把这个选中，然后再给他点击一次这个按钮就好了， 好吧，相同的一个逻辑，如果想把这个样式单次的去复制到这这里面来，我们直接按住 oppon 加 come on 的加 c， 然后再 come on 的加微，直接就复制过去了，对吧？这是复制样式啊， 多说一句，呃，第六个啊，第六个说完了，第七个文本框的大小无法和文字的字，无法和文字自动自适应，他们的意思应该是这个就是，呃，这也是新手遇到的一个问题，当我打一个字，比如还是优美的中国话， 对吧？他说的应该是比如我调整这个东西之后呢，然后再去打字的时候，比如频繁复制，哎，你会发现他这个字出去了， 对吧？遇到这种情况，哎，比如一个弗瑞姆，一个规矩的一个，比如页面的话，我们比如剧中我可以想让他的两边宽度，宽度固定的话，然后打字往下，包括这个框头往下移的话，我们直接可以选中这个，对吧？然后再去打的话，他就会跟着跟着 这个自动就是第二个按钮，这个凹凸黑， ok， 相对来说也比较简单。 第八个图形和线之间无法集中，哎，这是大家常常遇到的一个问题，也是容易忽略的一个问题。呃，我习惯画线的话是按批键对吧？钢笔，钢笔工具去画线，这是我个人的一个习惯的问题。 好，一般的情况下呢，呃有的同学呢是按 l 键拉去画一条线对吧？这个拉一段有点粗了啊。好，呃，我们把这个矩形画小一点，这样看清楚一点，我们给他居中。 这个集中了没有集中对吧？调集中， ok， 好，给他集中，其实会发现，哎，这边十五，这边十四啊，我们把这个调成十五， 这样两个就对称了。呃，如果再缩小按住 shift 等比的去缩化，对吧？你会发现其实并没有局中，当我们这时候按局中的话，他还是局中的啊。有时候有同学就会问，是不是没有开这个像素对齐啊？好，我们把像素对齐关掉， ok， 完了之后呢我们再去集中，他还是没有动，对吧？是不是他是为什么呢？是因为他这个线你画的拉，用拉也画的线呢？他的记录点是是这一条对吧？你看了吗？他这个蓝色的点在这，比如说他的真正的厚度呢，是在右边的， 所以说呢，他又他是记录是按这条线记录，但右边他没有被算进去，所以说你从视觉上来看的话其实就是没有对齐，而我们的按 p 键钢笔工具去画的话就不会出现这个问题。钢笔出现的话你看了吗？他的线是在 在这个厚度的中间对吧？在这个描边的中间，而他呢是描边的，是在这个线的右边，所以说呢经常会遇到。呃，这两个明明我按这个对齐了呀，为什么还是不对齐 会遇到这个问题，所以说大家之后呢可以尽量少用这个线去画这些图形，精精准的图形啊，可以用钢笔去画，这样的话就会完美的去记录对吧？五乘五， ok。 字体如何去变形？呃如何变形的话，我经常用到的话，一般的情况如果想调整毛点的话，我们直接按刚刚我们说的方法发芽艺给大家进进行转曲。呃，如果想进行变形的话，目前飞哥吗其实不太支持，所以说呢，我们可以用这种情况， 嗯，除了画下意义然后这样去调整之外，我们可以调整他的斜斜角度的话，我们可以不用改变他的，把它变成一个斜， 把它变成一个形状，我们直接还是呃保留他的字体属性，我们直接就是点用键用一个插件叫做。呃， 这个抖音上呢，我也说过了，哎，你会发现，嗯，他是有两个杆对吧？我们可以去调整他的斜斜角度对吧？当然可以自己去调整了， 哎，还是比较神奇的对吧？呃当我们调整完之后呢，这个很方便去做一些一些特殊样式哈，你看他还是可以去编辑的，所以说这个插件可以向大家推荐一下，叫四个大，好吧，当我们编辑完之后拍蜡就好了，对吧？我们可以复制出来啊，可以编辑，包括改字体也是没问题的。 第十个多毛点图形中能填充不同的 颜色吗？嗯这个情况应该是常用的，应该是画图标或者画一些运营插画之类的，会遇到这种情况，嗯？什么意思呢？比如我们画一个，呃，很多毛领，对吧？我们随便画。 ok， 此时会遇到一个毛领的情况，是什么情况呢？呃，我们给他填充颜色之后呢？他可能想要其中的，呃，某一块，某一块把变成另外一个颜色。我们举个例子哈， 比如我们想要把这一块变成变成其他的红色，就这一块，对吧？我们这一块怎么做呢？ 我们这块呢可直接添加毛点，我们可以这样做，对吧？然后呢我们把这个 花加 c， 然后呢花加微复制出来这样做，然后 再给他换个颜色就好了。呃，如果想在这里面单独换的话，其实是废话，其实不支持的。呃，可能我们并进入毛领模式之后呢，会有这个东西，对吧？那我们可以去给他删掉，当然这是删除跟添加的功能哈。我们给他改颜色的话，其实改不了的，你会发现他统一都会改上， 就是他默认的毛点模式下面只有陌生人的一个，一个颜色一个颜色属性，对吧？所以说你想做单独的话，你只能把毛点复制出来，复出来，然后跟他贴合上去，这么做。 ok， 今天的十个问题就到这，咱们下期再见。
267Figmaist
02:08查看AI文稿AI文稿逼疯程序员的不一定是代码，还可以是设计师，当他新建花板的时候，程序员就生死难料。随后画一个和花板一样大小的矩形，调整亮一点的渐变，随后画出一个类似八层的按钮，并且添加画框。 他居然还给画框添加秒边，并且圆角值给到最大，随后更改矩形颜色。谈小间他就下了一个蛋，修改颜色添加的阴影，机智的他选择了同类色， 随后又下了几个大小不同的蛋，拼合成云彩的形状。调整大小位置后降低不透明度，复制一层，调整位置并置顶 下。不出蛋的他画一个圆形，改为底色备用，随后用星星工具画出星星，一闪一闪亮晶晶，满天都是小星星。 适当放大后，直接透明度改成零，选中按钮画框，勾选裁剪内容，趁你不注意，他就把画好的 ui 复制了进来。给文字添加画框后，分别原位复制颜色改为白，名称改为一，也可以改成零，但我不是，我就不改。 随后白色文字上移，注意文字图层要在画板内，但文字不要在画板内。随后复制画板，改变背景颜色，将白色文字移入画板，黑色文字移出画板。 回到按钮，把云彩吹走，星星透明度改为一百十档缩小。随后调整第一个蛋的颜色，并且调整顶部的圆形颜色和背景色一致。最后给按钮添加胶糊，触发模式为蛋机 智能动画前后晃动，动画时长居然给到一千。最后打开预览，一个简单的按钮，动画就做好了。五星评论家麦克阿泽表示，当我看见十八座设计的时候，我就知道做设计能赚钱，因为被开发档案可以赔！ 跟着十八学设计迟早开上，法拉利大型设计纪录片持续为您播出！
3.9万UIED 十八
01:14查看AI文稿AI文稿当你看到这段 sortfi 音乐页面时，是否感到单调且没有点击的欲望呢？如果我们给他加上渐变色效果，轻松活力感瞬间就上来了。 渐变色在各个行业里都是一种很重要的表达手法，能增强品牌记忆、传播品牌基因以及丰富设计细节。 英文摆放在中间显得平平无奇。如果尝试给他加上渐变，视觉感官一下子就被抓住了。这种渐变手法同样能够用在网页设计当中，给页面增加科技未来。 如果你觉得颜色太多显得花里胡哨，简单的文字也可以给予渐变色。将英文复制开来，然后再给他加上渐变，视觉前后的堆叠感就出来了。在 ui 设计里，渐变色是每个设计师都十分青睐一种表达手法。 单纯的白色以及纯色的渐变给背景添加了细腻感和品质感。可能你觉得这样的渐变变得苍白无力，那我们也可以使用暖色调，给用户营造一种活力的氛围。 在图标里，渐变处理手法也很常见，例如图上的这个普通心形，加上适当的渐变，就能使整个图标变得生动有趣。
66大力设计
00:26查看AI文稿AI文稿平时经常看到的用于作品及包装的抽象背景页面，在飞哥骂中如何实现呢？五秒教会你！我们需要用到 plus 和 usb 两款插件，帮助我们快速实现。 新建画板后，打开 plus 这个插件，随机生成几个图形放入画板中，然后打开原来主人影子，给每个图形赋予不同的渐变色，最后统一给画板所有的图层，加上模糊属性，大大数值即可。
1725Figmaist
00:45查看AI文稿AI文稿首先我们先创建一个八百乘六百画板，然后将其填充为渐变色，然后调整一下渐变的方向，选择矩形工具，画出一个长方形，调整边角大小，然后在矩形上画三个圆圈，依次摆好位置， 然后选择插件工具里的渐变色进行填充， 之后选择矩形，点击上方选择蒙版，然后选择圆圈，依次调整模糊数值， 之后调整圆圈的大小， 最后选择矩形，添加阴影， 一个渐变卡片就完成了。
76大力设计
00:18
00:36查看AI文稿AI文稿哈喽，大家好，这里是九九，今天三十秒教你用飞个马制作渐变动画。首先画一个圆，编辑毛点，随意变形后把颜色填充改为线性渐变，增加模糊效果。接着复制一个改色，旋转到合适的角度，拖进准备好的画板当中，连续复制三个画板， 再按照运动轨迹逐一调整角度。最后我们从设计切换到圆形，点住加号连接画板，细节调整延迟一毫秒，智能动画，呜呼，完美。
175JOJO看设计｜且曼
00:30查看AI文稿AI文稿至于这种渐变怎么还有人说不会做，于是我绞尽脑汁研究了一套最蠢的方法教给大家，就是手动凹造型，然后去加颜色和模糊就好了。 哎，这个时候就会有人问到，之前不是教过这种网格界面的插件吗？对，是教过，叫做 nice bread 点子，有兴趣的可以翻一翻以前的视频。但是今天我为什么要用这种蠢方法呢？因为我可以做。
8119Figmaist
01:46查看AI文稿AI文稿飞个马这款软件大家应该都知道吧，今天就来分享五个能提高你工作效率的飞个马隐藏小技巧。最后一个你可能不知道。 一、快速裁剪当想要将图片进行裁剪时，会发现直接修改图片的尺寸。这种方式过于局限，达不到我们想要效果，所以通常会用蒙版工具来裁剪图片的一个特定区域。虽然可以，但是这种方式很浪费时间， 其实我们只需要按住 alt 键加双击图片即可快速的裁剪出我们图片中的一个指定区域。二、将渐变色平均分布当你在颜色渐变中添加多个颜色之后，你会发现颜色的之间的间距并不同， 其实我们只需要双击其中的一个色块即可快速的将颜色平均分布。三、将多个图层快速命名当你想要将多个相同内容的图 层进行排序和命名时，你还在逐一的去修改图层的命名吗？其实我们只需要选择所有你要重新命名的图层，然后按住 ctrl 加 r 键，即可快速为图层进行标注和排序。四、隐藏操作界面 当你想要最大化的展示你的设计文件时，左右两边的这个操作界面会很占位置，其实我们可以直接按住 ctrl 加顿号键，一键隐藏操作界面，就可以最大化的显示出各位脚踏天的设计稿。最后一个，快速复制文件链接当你想要将文件链接发给同事时，在文件中我们可以直接按住 ctrl 加 l 键，他就会加 文件的这个链接复制到你的剪辑板上。如果文件太多，担心同事找不到的话，我们可以直接选中某个界面框架或者元素，然后发送这个链接，别人打开之后就可以直接跳转到，对， ok， 那么以上就是本次视频的全部内容，如果说你感觉对你还蛮有用的话，可以帮我点赞，双击加个关注，我是吴哥，我们下次再见， see you。
1043胡鸽设计师（上班版）
01:29查看AI文稿AI文稿当我们在做作品集的时候，一定会遇到这种迷算渐变风格的封面，那么今天小师就来大家做一下这种封面。首先第一步，先建一个画板， 然后把画板的颜色改成我们想要的颜色， 在需要米散见面的地方画上圆形， 分别更改他们的颜色， 全选后在效果这里找到图层模糊，更感竖直，这样背景就已经做好啦， 然后再加入相应自己想要的文案， 这样一张作品级封面或者 ppt 封面就做好了，你学会了吗？
155躺平小诗姐
01:22
02:44查看AI文稿AI文稿大家好，当我们在做网站或者是 app 金刚区爱炕的时候，都会遇到这种毛玻璃的，这种爱炕这种图标应该怎么做呢？今天小世界来大家做毛玻璃图标，首先随便找一个，以第二个这个为例吧， 摁住 r 键是句型的一个快捷键，我们首先要拉出来一个句型，然后把它的匀角改成二十， 颜色呢变成我们想要的这个橘色，复制一个出来，缩小他看到他的右下角，同时呢他的颜色我们改成白色，透明度这边改成二十。然后还是在效果这里， 我们找到背景模糊数值十一。然后其实大家看毛玻璃的这个效果基本上就已经出来了，但是大家看一下，其实玻璃呢，它是有一定厚度的，所以我们要给它加一个边框， 那么在描边这里选择添加，添加为白色。呃，正常来讲的话，一个玻璃一面是寿光面，一面是暗面，所以我们直接给它添加成渐变，大家看一下现在 icon 就会有一个厚度玻璃的一个质感， 然后我们找到三角形，按住 shift 键，画一个等笔的三角形，让它翻转过来，在圆角这里画一个二的圆角，放在中间，同时 更改的颜色， 再给他加一个橘色的描边，为了让他有一个浮起的效果，那我们在整体的 ipod 下面，我们把它全选 controje 编组， 给他整体加一个投影， 那投影的颜色我们为了跟主播狗相呼应，所以就选取它本身的这个颜色， 在位移这个地方可以调整一下箱的这个参数， 货色到二十这个时候我们发现他的这个背景颜色会渐变，会非常非常的深，所以我们就 要去更改他的透明度，给他一个二十，大家看一下，这样一个爱抗就做好了，你学会了吗？
85躺平小诗姐
