msmkmm2012 发表于 2025-7-30 23:25:29

数据显示:那些好看的渐变色是如何出来的

在过去的十年间,外卖图库战胜了很多的竞争对手,在摸爬滚打中奋勇前行,为客户打磨出很多的好产品。http://ps.kkdou.vip/https://waimai-image-editor-qiniucs.kkdou.vip/static/photos/img/yQRGO2QotqTUPwhi4X.jpg



前言:渐变是处不的在。师们倾向于在现代简约的UI中使用渐变,包括背景、按钮、开关、卡片、甚至是阴影!你所有能够想到的地方都有渐变的存在,这些渐变已经横扫了数码产品和DribbbleBehance这样的平台。


所以,什么是渐变呢


渐变是从一种颜色过渡到另一种颜色,是由很多种颜色组成的混合(一个渐变可以有限多的阴影)。我们可以在很多方面使用渐变。例如在背景和前景的渐变元素,可以做出微妙或者是极端大胆的颜色组合。


因为渐变是通用的,我们可以用他们来传达独特的或者品牌理念。在这篇文章中,给大家分享一些用的技巧,让你的渐变脱颖而出。


一、找到正确的灵感

首先,我们需要找到渐变的源头。


渐变比较好的灵感来源就是大自然。因此,比较开始的过程就是花时间去观察现世界。寻找风景、环境或者植物的照片作为你的颜色来源,并且和你的项目建立起联系。




二、创造自己的调色板

使用颜色选择器找到合适的部分。从一张照片图片中选择2-3种醒目的原色来构建你的调色板。




建议一开始只选择少量的几种颜色。因为RNG颜色模型只有个变量,这意味着你可以混合红(R)、绿(G)、蓝(B)来构建出任何的渐变。RGB的值通常是在0-255之间。


此外,为了使得构建出来的渐变看起来比较柔和平滑,在构建调色板的时候考虑值的变化在50-150之间。


、混合调色板的颜色

在选好的调色板上创建一个新的图层,并通过添加背景模糊的效果来现平滑的过渡。




创建一个新的图层,用获得的模糊的路径重新创建线性渐变。


四、在线性渐变中使用径向渐变以增加深度

径向渐变用于模拟光照,而光照并不总是线性的。你可以将径向渐变应用到预先好的线性渐变上,并配置光源的方向,使它看起来效果更好。




五、使用有意义的渐变方向

在有需要的地方使用渐变方向。例如,使用发光源以突出特定的元素,通过将文本放置在彩色区域使其更具可读性,或者通过具有平滑的渐变路径的UI引导用户。




六、增加颗粒噪点使其具有冲击力

在Figma或Sketch中,可以在渐变上添加一层纹理,使其看起来有复古风。在页端你可以通过在渐变上放置图片来应用颗粒噪点效果。


在这里你可以学到如何用CSS添加噪点。注意:你通常只需要01%到05%的噪点图像透明度。




七、将渐变和抽象形状结合起来

为了使你的渐变效果更酷炫,甚至可以使用抽象的半透明形状。使用蒙版工具在渐变层之外或之上嵌套斑点或波浪形状。




感谢阅读!


页: [1]
查看完整版本: 数据显示:那些好看的渐变色是如何出来的