读书笔记_色彩渐变浅析

最近在做文章转移，全部文字请点击http://fog-li.lofter.com/

渐变是现在许多大图背景的流行手法之一，除了靠良好的色感来做渐变以外，适当补充一点理论基础还是十分必要的。这样能更有效准确的使用配色

1.色彩渐变搭配基础维度：明度和彩度

图片来源于『零基础也能学！一份全面系统的渐变色自学指南』

通俗的说，明度控制颜色的色彩明暗；彩度控制饱和度高低

2.色彩搭配

总则：把彩度和明度分为5份，共25个区域，渐变范围在下图紫色线框内

严格控制色彩区域的好处是：防止色彩变脏，色彩过渡均匀

图片来源于『零基础也能学！一份全面系统的渐变色自学指南』

细则：

1）同色系渐变

a.灰阶渐变

图片来源于『零基础也能学！一份全面系统的渐变色自学指南』

在蓝色区域内调整即可，不要跨度过大，不然容易显脏；

白灰类能表达出清爽感觉，黑灰能表达出沉静感觉

b.同色系渐变

图片来源于『零基础也能学！一份全面系统的渐变色自学指南』

同色系很简单，使用基础原理即可；能表达基本的色彩细节

2）类似色渐变

a.类似色_高明度搭配

图片来源于『零基础也能学！一份全面系统的渐变色自学指南』

相同明度，不同色相，许多少女感的画面多见这种配色

图片来源于『零基础也能学！一份全面系统的渐变色自学指南』

明度较高，不同色相，许多现代感、明亮感或者电商banner的画面多见这种配色

图片来源于『零基础也能学！一份全面系统的渐变色自学指南』

明度较低，不同色相，能很好的衬托前景，表达沉稳神秘感

3）对比色渐变

原则：对比色不用卡死在色环对等的180°内，可以控制在160° ~ 200°之间，但也不要苦跨度太大；色彩面积可以是一主一辅的搭配方式

对比色在背景一般都能很好的突出主体

图片来源于『零基础也能学！一份全面系统的渐变色自学指南』

图片来源于『零基础也能学！一份全面系统的渐变色自学指南』

3.色彩渐变手法

a.垂直渐变法

一般最少有三种色彩做为搭配。

搭配方式：A色饱和度最高、B色饱和度最低，C色饱和度次之

图片来源于『实用教程！教你巧妙运用渐变色快速提升设计格调！』

图片来源于『实用教程！教你巧妙运用渐变色快速提升设计格调！』

b.垂直+球形渐变法

以垂直渐变法为基础，增加球形渐变手法。一般有4种色彩

D色为高斯模糊；E色为透明度80%；照片去色后叠加能显示能更细腻；透明度变化和高斯模糊两种手法能让色彩渐变更细腻。

图片来源于『实用教程！教你巧妙运用渐变色快速提升设计格调！』

c.多角度渐变

以垂直渐变法为基础，球形渐变增加更多色彩；一般来说色彩可以更多，但要注意色彩面积比例

图片来源于『实用教程！教你巧妙运用渐变色快速提升设计格调！』

d.色块渐变

色块渐变要注意H值（色相）和S值（饱和度）的搭配

H值越高，S值要相应下降

图片来源于『实用教程！教你巧妙运用渐变色快速提升设计格调！』

e.案例

典型『垂直+球形』渐变手法

图片来源于『实用教程！教你巧妙运用渐变色快速提升设计格调！』

典型『多角度』渐变

图片来源于『实用教程！教你巧妙运用渐变色快速提升设计格调！』

非典型『垂直』渐变

图片来源于『实用教程！教你巧妙运用渐变色快速提升设计格调！』

通过这几篇色彩渐变文章的总结，大致了解了色彩渐变的基础。

在以明度为变量的渐变中，我们可以营造现代感、少女感、明亮感、沉静神秘感。总体来说色彩氛围比较虚幻

而在以色相饱和度为变量的渐变中，一般我们多见于色彩衬托底色，总体来说色彩氛围比较扎实

---

原文链接

零基础也能学！一份全面系统的渐变色自学指南

实用教程！教你巧妙运用渐变色快速提升设计格调！

人气教程第二弹！如何用渐变色绘制高格调的背景+球体