1. 主页 > 行业资讯 > 设计文章 >

如何用渐变颜色绘制高风格渐变背景+球体-渐变中

热门的渐变系列教程终于更新了!这一系列文章的强大之处在于,大部分初学者都认为配色靠灵感,而且都是科学系统的总结阐述,让你的配色不再是随机选取,案例丰富易懂。今天的主题是教你画出带有渐变颜色的高格调背景球体,强烈推荐!

上篇:一份全面系统的渐变色自学指南中篇:如何用渐变色绘制高格调的渐层背景 球体下篇:写给非科班设计师的渐变色学习指南

作者Angela Tsou推特:@ mini _ cu高玉玺的脸书:www.facebook.com

部分(中间)将主要介绍以下三个主题:

基础复习/练习球型(放射状)渐层变化金属渐层变化(延至下一篇xD)

强烈建议没有读过第一章的人,先建立起循序渐进应用的基础知识,有了第一章的基础后,下一章(下一章)一定会给你带来更多的帮助。小哥哥,我会尽力为你提供更多有用的好东西。

第一,基础复习/练习

前面说→最后一部分,有读者不知道1/5音程是什么,那么如何从测色仪打开来参考?不不,1/5的间隔其实是一种感觉→小弟在选色的时候会在脑子里把颜色检测器切成25块,如下图:

以上图为例,当选择渐变颜色变化时,会在下面1/5的红色帧间隔中选择:

蛤(不一句话),一定只有这么少吧?其实设计上没必要做什么,只要你酷一点,然后业主买单,但是小弟建议你最多保持2/5的间隔。如果再进一步调整→你一定已经开始发现色差在增大,甚至因为灰度的影响,渐变变脏了。我们后面会看到这样的例子。

练习一

首先我们从一个结合相似颜色和颜色渐变变化的练习开始→这个练习只是一个比较常见的波浪渐变图案(广泛应用于UI/视觉设计):不同的渐变块配合透明度的变化和正确的颜色选择,做出一个干净(前一部分的重点)看似强大(各部分的重点)的图像视觉。

练习1

选择一种颜色

选择颜色是制作干净渐变最重要的一步。下图显示了我在(练习1)中使用的五种渐变组合。每个组合都有微调色调,让颜色变化更细致→记得尽量不要用和我一样的颜色做练习!

(1)-(5)都适用于上一篇文章中提到的类似颜色渐变的变化→高亮度颜色渐变。复习“保证明度和彩度的调整保持在比色器高1/5以内”的基本规则。我们先来看看组(1)中的渐变颜色,看看是否完全符合这个调整区间。在稍微调整色度/明度的情况下,色调左右移动,最后选择与蓝色(#7BD2F8)相当接近的青色(#72E8CE)作为渐变开始/结束点:

让我们来看看组(3)中的渐变颜色。根本不调整色相,我把色度的变化向左调整了大概1/5的间隔作为这个组的渐变颜色选择。

在这一点上,许多人可能会想,我们为什么要限制选择的范围。色度差多点不好吗?个人觉得没有什么绝对的设计。让我们简单看看如果色度提高会发生什么:

其实除了底部最大色度差的匹配,其他两个都在可以接受的范围内,在我看来甚至可以说是相当不错的选择,看你对以上要求的使用→但是,因为这个练习的目标是结合一个干净/透明且不与其他颜色冲突的渐变图像,所以我还是会在这里保证色度/明度差在颜色检测器的1/5范围内,避免颜色重叠时灰度继续。

步子

选色完成后,会一个一个叠加!

使用(2)的颜色制作透明度为30%的第一层。

用(3)的颜色做第二层,透明度40%。

用(4)的颜色做第三层,透明度40%。

使用(5)的颜色制作透明度为40%的第四层。

用(1)的颜色做第五层,透明度30%。这一层的渐变角度之所以差别很大,是因为我想尽量多做融合感,非常建议各位伙伴尽量用不同的渐变角度来玩,看效果。

要做到这一点,每个人都应该弄清楚颜色看起来是如何融合在一起的,又是如何分不清的。好像和上面的例子不一样→这最后一步是很重要的一步。为了让重叠的相似颜色渐变更加明显,我在每个渐变块上添加了内部阴影,以第一层和第二层的应用为例:

没有内心的阴影

带着内心阴影

虽然变化不大,但并不能发现有内阴影的版本其实更有立体感,同时也能打开与同色系渐变块的差距。内阴影的颜色选择其实很简单,用的是同样的招数→选择自己的颜色在右下角(1/5以内)稍微加深,作为自己使用的内阴影颜色。

附上两个使用相同原理上色的Demo→所以不要根据他们上色,自己配一个。

邓愣了!!练习1就完成了。

练习2

接下来我们来看看如何制定上一篇文章的学习目标。

注意:这只会带你到右边的练习。参考第(1)章后,请用你的想象力产生左边的部分。

第一步。选择颜色

选色是做干净渐变最重要的一步←复制粘贴。同色选择模式(下)将色度和明度保持在颜色检测器的一定区间内进行调整,利用这样的限制有效抑制了大幅度调整色相的不协调性,使图层呈现出强烈的渐变感作为背景。

第二步。制作底部底座

使用浅顶灰底的渐变,配合底部阴影,很容易做出立体弧形底的底座。(如果忘记请复习前一章)

小贴士。大多数人使用阴影的时候,请不要傻傻的选择一个有透明度的黑色。这样的阴影一般会!非常!脏!除非想刻意强调阴影的对比效果,尽量选择背景较暗的颜色(向右下方移动,移动)作为阴影颜色。(ex。在制作纸质雕塑的三维模型时,可以使用纯黑色或深灰色作为阴影,以强调阴影)。

第三步。制作凹面区域

利用上灰下浅的渐变,配合内阴影,可以很容易的做出凹陷区域。(如果忘记请复习前一章)

小贴士。小细节补充→一般在制作下沉块的时候,我一般会在块底加一个白色阴影(fuzzy =0),让整体更加细致。

第四步。点亮并填充文本

在下图红色包围的圆圈中,我使用了白色→灰色和黑色的渐变,并使用了叠加混色模式(叠加混色模式会使图层的白色部分突出背景色,而图层的深色部分添加深色背景色),在透明的效果下,使光线从右上方照射。最后搭配符合整体色调的Helvetica Neue-Thin文字(#36D9E7)(如果我在这部作品中使用新的细体或者康华少女体,我一定会打败你)。

邓愣了!!练习2结束。

第二,球形(径向)渐变

相信很多像我这样的新手,每次再看到这么多渐变类型都会有些疑惑。上一篇文章已经完成了很多基本的应用方法,相信大家不要那么害怕各种渐变类型。然后让我们开始看看球面(径向)渐变能做什么。

一般来说,小弟,我最常用的是径向渐变来处理三种情况→补光,球体,光晕。之前小弟设计的图标,可以算是用了径向渐变xD的概念。

然后我们将依次讲述它们的应用场景:

补光

补光的手法通常应用于真实感较强的物体→这里我们用上一篇文章末尾的蛋黄Demo进行教学。

第一步。底部底座

相信以你到现在的练习能力,应该很容易做出这样一个图标,由纯色(#FEA740)和基本白色→灰色渐变基底组成。!如果不行,请回去复习前面的内容。

第二步。本质

一切的本质都在这神奇的一步。让我们来看看相对于荷包蛋,想象中的光源应该是什么样的:

从上图可以看出,荷包蛋的另一端(右侧)应该比左侧(光源直接照射)要暗。利用径向梯度→光源聚焦点(最亮点)发出的模拟光,然后逐渐变暗并向外发散的效果,可以做出最重要的补光特性。

第三步。增强视觉效果

添加外部阴影(#D3CBB7透明度:50%),在这里选择更接近蛋黄颜色的颜色作为阴影→可以认为是蛋黄映射在蛋白质上的反射结合阴影产生的颜色。

第四步。突出显示光源点

最后→为了突出光源的焦点,我加了一个橙白色的块(左)来增强高斯模糊的光源效果,结果是对的。

第一种

球面可以说是径向梯度最常见的应用→简单如下图:

温馨提示:为了让这里的球体效果更强→可以加一点内阴影(稍微提亮一点模拟底层产生的反射)突出球体本身的立体效果。(os。为什么看起来都是一样的XD)

类型2

让我们前进一点,开始尝试看到不同的球感→首先拉出背景颜色渐变,如下图:

接下来,我们尝试使用径向渐变(#F8EFDD,中心透明度100% →最外层透明度0%)来填充左上角的光线:

最后,我们使用高斯模糊来解决边界过于清晰的问题:

在这一点上,相信读者也应该发现→径向梯度其实非常适合模拟“弧度”光源。毕竟自然界中几乎没有只是垂直的线性梯度,大多数物体都有弧度或形状变化。

光晕

第一种

举个最简单的例子→有一个太阳在照耀,它的光会随着距离变得越来越弱...xD?所以在画一个简单的有散射光的太阳时,理论上要用径向梯度拉出以下效果。(渐变的开始和结束用#FFCF0A填充,但是头部的透明度是80%,尾部的透明度是0% →从而模拟光线向外发散。)

同样的原理也可用于以下示例:

示例中的背景模拟了夕阳从左上角落入图片的感觉:

加上上一章用的渐变效果和上面提到的渐变练习,要达到这张图的效果应该不会太难。

注意:这张图最难的其实是细节的调整,而不是渐变的应用。

△效应练习

类型2

放射状渐变其实挺适合做UI背景的,可以根据下面的颜色选择,轻松尝试拉出层次感丰富的渐变变化。(看到这句话我应该觉得很可笑。每次看文章最怕看到的就是这种和不说话一样的解释xD。)

既然很烦,当然还是要说明上图的颜色怎么选。我在这里做的其实很简单。在橙紫色区间,根据色相表顺序,从左到右选择任意颜色,在区间的1/5内调整亮度/色度,就可以匹配Demo的和谐不冲突的渐变效果。

使用径向梯度→

背景效果制作→

类型3

在上一篇我弟弟复制的图标时钟中,背景中也使用了径向渐变来达到对焦效果。当然,和原著还是有差距的。

补充1:(上)、(中)、(下)渐变配色的文章,比较适合需要设计师姐妹们的眼睛崇拜的工程师(勉强同意)。至于效果,请告诉我效果如何(重要!!),是否能有效提升你在他们心目中的地位。

预览:金属渐变/更多渐变应用

莫名其妙的是,这篇文章的篇幅已经够长了,我们就把金属色的层次留给下一篇,继续给大家介绍。如果你喜欢这一系列文章,请帮忙分享/推荐,给弟弟一点鼓励。

金属渐变的练习结束后,也可以开始制作如下图所示的效果→

在这一系列的“致非设计师”之后,我弟弟有望为演示字体懒人包写一篇(很多朋友都在问xD),然后他会开始为设计师写一些“致非工程师”的文章,希望能帮助刚进入职场的UI设计师更快地与工程师合作。感兴趣的合作伙伴欢迎交朋友和/或继续关注:。

作者:Samuel

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/334.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息