加入收藏 | 设为首页 | 会员中心 | 我要投稿 源码网 (https://www.900php.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 空间 > 正文

最适合零基础设计师的渐变色自学指南教程

发布时间:2020-03-20 10:00:47 所属栏目:空间 来源:站长网
导读:副标题#e# 一直学不会渐变色的同学有福了,这篇是我见过最适合零基础也是最实用的渐变色教程,从最简单的灰阶渐变到晋级的类似色/对比色渐变,教学非常详细而且通俗易懂,还插播了大量渐变技巧和实例教程(如何拉渐变才不脏/用渐变绘制锤子时钟图标等等),良

这边只补充一个小重点,同色系的渐层选色请记得往检色器的右下角移动,右下角移动,右下角移动,很重要所以说三次。这样子的移动方式主要是为了避免调整色阶的同时灰调的增加过快,渐层也比较不容易脏掉或是造成颜色差异过大喔。除此之外,对于初学者在渐层的角度配置调整上面,当所有物体处于相同平面时应该尽量让整体角度效果一致(毕竟光主要会从同一个地方来麻?)。

接下来我们来看看稍微进阶一点点的 → 选配渐层对于跟我一样的初学者而言遇到的几个问题不外乎是 1.搭配的渐层色感觉不对(不自然) 2.搭配的渐层色好像有点暗沉(脏)。那该怎么样避免这些问题来做出漂亮的渐层呢?

配出上图这样的渐层其实非常容易,除了前面所提到的一些小技巧之外只要注意两个基本原则就可以啰,对于浅色系的渐层,如同浅色系渐层范例,明度的调整区间不宜太大(1/10)。在检色器上面我们可以改变彩度,色相来配出喜爱的渐层变化,但是上下移动的幅度就要保守一点,否则配出来的渐层就很容易产生脏脏的视觉效果。

△ 浅色系渐层范例

至于暗色系的渐层,明度的变化就可以大一点,但记得除非渐层一开始的选色就是相当深的暗色系,否则调整的幅度也请尽可能确保在明度的变化在1/4–1/5的区间来避免过脏或是颜色落差过大的问题。

△ 暗色系渐层范例

补上一个类似色搭配图形(透明度)变化的范例,蓝绿,绿色渐层的使用相当的普遍,当这类型颜色的明度及彩度较高时往往可以带给使用者一种活泼明亮的视觉印象。

高明度色系渐层

上面几组渐层的搭配彩度较高,现在我们来看一下该如何处理明度较高的渐层配色模式。基础的高明度渐层处理起来相对容易,确保选择的颜色都保持在检色器的上方1/5内,同时不要让彩度变化过大都可以情松达到如下图的效果。

莫名其妙好像写了一堆东西,我们利用一个范例来练习一下这些渐层的变化,这个范例是由设计师Adrian Fernandez运用渐层做出来的瀑布效果。

Step1.首先,我们将工作区块分割成三个区块,运用类似色选择相近的颜色填满色块,这边选择的蓝 → 蓝绿色跟作者使用的相同,练习时建议尝试不同的颜色。搭配白色透明度色块就可以快速的做出简单的渐层以及三维效果,注意喔,这边还没有使用到任何的渐层。

Step2.分别在三个区块中运用上浅下深的概念由上往下来做出渐层,拉出画面的层次感。

Step3.使用不同宽度的矩形(颜色选择高明度低彩度的蓝 → 蓝绿色,搭配透明度50%-100%不等的透明度)模拟出瀑布的水流。

Step4.为瀑度水流加上透明度渐层(<除了明度彩度的变化之外再加上透明度的调整),让画面整体更具质感。

(编辑:源码网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

推荐文章
    热点阅读