设计干货 | 这个渐变色也太性感了吧?

设计干货 | 这个渐变色也太性感了吧?


本文授权转载自:花火设计(ID:huahuoyuanzhuo)

作者:Alexander Rådahl


设计干货 | 这个渐变色也太性感了吧?



前言

渐变无处不在。这不再是90年代的一种趋势,设计师们倾向于在现代简约的UI中使用渐变。背景、按钮、开关、卡片、甚至是阴影,你所有能够想到的地方都有渐变的存在。渐变已经横扫了数码产品和Dribbble/Behance这样的设计平台。

所以,什么是渐变呢?

渐变是从一种颜色过渡到另一种颜色,是由很多种颜色组成的混合(一个渐变可以有无限多的阴影)。

我们可以在很多方面使用渐变。例如在背景和前景的渐变元素,可以做出微妙或者是极端大胆的颜色组合。

因为渐变是通用的,我们可以用他们来传达独特的设计或者品牌理念。

在这篇文章中,我想要分享一些实用的技巧,让你的渐变设计脱颖而出。


1. 找到正确的灵感

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

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

设计干货 | 这个渐变色也太性感了吧?


2. 创造自己的调色板

使用“颜色选择器”找到合适的部分。从一张照片/图片中选择2-3种醒目的原色来构建你的调色板。
设计干货 | 这个渐变色也太性感了吧?

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

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


3. 混合调色板的颜色

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

设计干货 | 这个渐变色也太性感了吧?

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


4. 在线性渐变中使用径向渐变以增加深度

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

设计干货 | 这个渐变色也太性感了吧?


5. 使用有意义的渐变方向

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

设计干货 | 这个渐变色也太性感了吧?


6. 增加颗粒噪点使其具有冲击力

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

在这里你可以学到如何用CSS添加噪点。

注意:你通常只需要0.1%到0.5%的噪点图像透明度。

设计干货 | 这个渐变色也太性感了吧?


7. 将渐变和抽象形状结合起来

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

设计干货 | 这个渐变色也太性感了吧?


文章来源:花火设计,版权归原作者所有
原文链接:
https://mp.weixin.qq.com/s/4BwBevjclN3MeanFXMwXZA
版权声明:“IXDC”所推送的文章,除非确实无法确认,我们都会注明作者和来源,本公众号对转载、分享的内容、陈述、观点判断保持中立,不对所包含内容的准确性、可靠性或完善性提供任何明示或暗示的保证,仅供读者参考。部分文章推送时未能与原作者取得联系,若涉及内容或作品等版权问题,烦请原作者联系我们,给出内容所在的网址并提供相关证明资料,我们会核查后立即更正或者删除有关内容!本公众号不承担任何责任,并拥有对此声明的最终解释权。
联系微信:Meia_11
联系电话:18102296160
联系邮箱:service@meia.me

编排 | 桃子
初审 | 小七
终审 | 苏菁



 IXDC·2022 


 IXDC2022年大会报名开始啦!
设计干货 | 这个渐变色也太性感了吧?全新的会期 
6月·北京见噢!

早鸟优惠7折再次来袭

最低折扣截止2022年1月28日

设计干货 | 这个渐变色也太性感了吧?快来报名吧!

设计干货 | 这个渐变色也太性感了吧?

想要了解更多设计知识

点击下方阅读原文进入

IXDC · 2022国际体验设计大会!

设计干货 | 这个渐变色也太性感了吧?



设计干货 | 这个渐变色也太性感了吧?
设计干货 | 这个渐变色也太性感了吧?
设计干货 | 这个渐变色也太性感了吧?
设计干货 | 这个渐变色也太性感了吧?


设计干货 | 这个渐变色也太性感了吧?设计干货 | 这个渐变色也太性感了吧?


设计干货 | 这个渐变色也太性感了吧?
设计干货 | 这个渐变色也太性感了吧?

点这里,一键进入IXDC2022国际体验设计大会
?

本篇文章来源于微信公众号: IXDC

UI/UX

2022年度报告超强盘点

2022-1-10 18:09:55

UI/UX

没时间弄了!早鸟快没了

2022-1-11 8:38:07

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索