赞助商
立即赞助

我删除了所有配色网站,只留下这一个

设计神器3年前 (2021)发布 流光
2.1K 0 0

于设计配色而言,系统的理论学习固重要,但是对初学者或者对彩理论提不兴趣学习的人来说,难道就没有以快速完成的方法么?当有,就是期教程我要推荐给大家的款工具:Adobe Color。当个工具大家不陌生,因为它出自 Adobe 之手,而之所以要将它做成一期教程,一方面是因为虽很人道个网站,但是往往是收藏来为摆设;另一方面即使有的人用到它,但使用的方法不对,没有将个网站的价值挥到最大。所以期教程就让大家彻底它的用法,以便在你的能力还没有达到游刃有余之前,能够帮助你快速创出优的。

https://color.adobe.com/zh/create

我删除了所有配色网站,只留下这一个

这是 Adobe 官网于 Adobe Color 概括介绍,它是个基于网络应用程序和创意社区,提供免费色主题,全世界设计师都可以在这里创和共享颜色与灵感,并在 Adobe 相应软件也提供了扩展程序,比如我们常用 Photoshop 和 Illustrator。是,想要了解这个工具看这些文说明是不够,是需要过实操作去了解。

我删除了所有配色网站,只留下这一个

进入 Adobe Color 网站,显示是这个页,然这个页提供颜色是随,所以大家进入这个网站时候首页显示未必是这组颜色。

我删除了所有配色网站,只留下这一个

我们先来看右上这部分,为我们并不是单纯去介绍这个网站,所以我会挑去讲,些不要功能带而过。第个按钮我们后会讲,我们先来看第个按钮是干什么。

我删除了所有配色网站,只留下这一个

我们鼠标留在相应位上时会弹出文提示,这个按钮功能是「切换主题」,我操作下大家明白是什么意思了。

我删除了所有配色网站,只留下这一个

也是很多软件都会有个功能:日模和夜模,简单讲是在白色背景和黑色背景切换,至于选择哪个完全看个喜好。

我删除了所有配色网站,只留下这一个

然后我们再来看它右侧这个问号图标,它是「说明」。

我删除了所有配色网站,只留下这一个

击后会进入官提供说明页,感兴趣学可以自己看下,不过这里都是简明扼要文,如你看完了这期教程话,不去看它也是可以。

我删除了所有配色网站,只留下这一个

返回首页,我们看右上文,这里说明了两件事:第件事是告诉我们如想要储存这些颜色,首先需要有个账号;第件事是说,在 Photoshop 或 Illustrator 等软件也是可以使用 Adobe Color ,而本期教程我们主要是以网页版来进讲解,为使用法都是样,而网页版功能更多。所以想充分利用好这个网站,首先需要创个账号,击「登入」或「储存」都会跳转到立账户页。

我删除了所有配色网站,只留下这一个

立账户有个细节很关键,是不便在这里讲,我会放在课后练习文件,大家下载练习文件时候可以留意下。

我删除了所有配色网站,只留下这一个

创完账户后可以登陆上去了,这时右上界已经发生了变化。

我删除了所有配色网站,只留下这一个

首先是储存位问题,画这些是我账号创过名称,可以过最下「立新资料库」来命名,这个是很自由没有什么标准,可以按照自己来分类和命名。

我删除了所有配色网站,只留下这一个

然后是为你想储存这组色卡命名,这里我随便填了个「演示」。

我删除了所有配色网站,只留下这一个

可以为你色卡添加「标签」,添加标签是为了便过关键词查找,可以接选择系统提供,也可以自己填写,这里我选择了个系统提供「Green」和自己添加「蓝绿」,标签用英文和都是可以。

我删除了所有配色网站,只留下这一个

然后我们看下有个「发布至 Color」,现在是亮状态,选择亮状态发布你这组颜色进入到了全局色库,也是共享状态,是可以看到,如想自己能看到,那把它关掉。

我删除了所有配色网站,只留下这一个

然后击储存,储存好了后右下会弹出个提示窗口,如想查看你储存这个颜色可以击「检视」,会进入到这组颜色界。

我删除了所有配色网站,只留下这一个

如想查看你储存所有颜色,可以击顶部「我资料库」,这时可以查看你储存所有颜色了。

我删除了所有配色网站,只留下这一个

大家可以看到,这些都是我前储存些颜色分组,这里可以选择资料库排序,现在是默认按照「上改时」来排序,你也可以选择按「名称」来排序。

我删除了所有配色网站,只留下这一个

刚才那组颜色我们储存在了类色这里,我们打开类色,大家可以看到,第个是我刚刚储存那组颜色,后是我前储存些。

我删除了所有配色网站,只留下这一个

我们击刚刚储存这个色卡,会跳转到这个色卡页,我们鼠标移动到相应颜色上时,会出现复制样,单击下已经复制这个颜色了。

我删除了所有配色网站,只留下这一个

这时我们回到设计软件,打开色板,「Ctrl+V」粘贴进来了,是刚刚我复制那个绿色。

我删除了所有配色网站,只留下这一个

如想时复制这五个颜色话,我们看右侧这里,提供了很多下载或复制选项,其于设计师前两个是比较常用,后些涉及到代码和计算语言,如你工作会用到也可以使用,如是平时作为设计取色话,用前两个可以了。

我删除了所有配色网站,只留下这一个

我们先来看第个,「ASE」是色文件格,主要针于 Photoshop 或 Illustrator 这类设计软件。

我删除了所有配色网站,只留下这一个

我们打开 Photoshop,击色板右上,会弹出个下菜单,击「载入色板」,选择刚刚下载这个文件,这时我们会发现这五个颜色进入到色板了。虽然这是个比较好,是我个平时不太用,是大家提供个选择。

我删除了所有配色网站,只留下这一个

而我个平时是比较喜欢接,「下载为 JPEG」,然后拖到软件接用吸管吸取。

我删除了所有配色网站,只留下这一个

下载下来后是个图片,打开后是这个样子,为图片质量是很高,所以接吸话也不用担心会出现色。

我删除了所有配色网站,只留下这一个

吸取后可以应用了,比如这里我们用这组颜色来填充这个插画图形。然了,针这个插画图形这组配色是可以,比如树用绿色,房子用蓝色,是大家平时在工作时候要考虑设计内容,尽量在前期挑选符合色组合,而不是盲目填充。

我删除了所有配色网站,只留下这一个

刚才我在储存这组色卡时候没有选择发布,进入到色卡界也是可以随时选择发布、编辑、删除。

我删除了所有配色网站,只留下这一个

样,「名称」和「标签」也可以随时更改。

我删除了所有配色网站,只留下这一个

然后我们会看到下有两个可以击地,我们先来看「潘配色」。

我删除了所有配色网站,只留下这一个

击后会出现和这组颜色最接近潘色,样也提供下载。

我删除了所有配色网站,只留下这一个

最后是「色模和代码」,击后会出现这组颜色色值,共有四组,也是我们平时常用四色模。以上是我们在 Adobe Color 上储存颜色个流程,操作上很简单没什么难度,是大家要知不是为了教大家这个法,而是大家学会了这个法后,立属于自己色库。

我删除了所有配色网站,只留下这一个

下我们回到主界,这部分可以算是这个工具个应用核心了,大家可以看到最上有个色轮,色轮下有五个颜色。

我删除了所有配色网站,只留下这一个

其这个颜色上有个三形符号,这代表了这个颜色是作为主色和基色,你调时候,其他颜色是围绕它来变化。

我删除了所有配色网站,只留下这一个

色块下是色模,也是四个:RGB、CMYK、HSV、 LAB。

我删除了所有配色网站,只留下这一个

现在是「RGB」模,右侧应是可以调节滑杆,不过跟我们软件不是,这里多了个亮度选项,便调节。

我删除了所有配色网站,只留下这一个

我个平时喜欢使用是「HSV」模,也是 「HSB」,如看过我前教程学应该知,我是极力荐使用「HSB」模,为它最符合眼视觉感受,色相、纯度、明度目了然,所见即所。

我删除了所有配色网站,只留下这一个

大家可以看到这里现在选择是「自订」,相于自定义模,在这个模下,你是可以随意更改调颜色。

我删除了所有配色网站,只留下这一个

调颜色可以接在色轮上拖动调,也可以拖动下滑杆,或者是手动输入色值都可以。

我删除了所有配色网站,只留下这一个

除了自订这里提供了很多色彩搭配组合,官方的说明是根据设定的基来得到确彩和谐平衡的搭,换句说,也就是里提供的颜原则上搭来是不有太大问题的。

我删除了所有配色网站,只留下这一个

我们先来看「类比」,也就是我们平时讲的「同类」,里提供的是个颜, 当你选择相应的彩搭模式之,无论是改变哪个颜,它是在个规则下变动的。

我删除了所有配色网站,只留下这一个

得到颜之我们就以应用,里我们就用个报来进行演示,是类比的效果。

我删除了所有配色网站,只留下这一个

是「单」,当我们选择单模式的时,大家现无论果改变相,得到的是个相的单模式,也就是在基的基础上进行纯度和明度的变化。和类比不同的是,单没有相上的变化,类比是相左右的微弱变化。

我删除了所有配色网站,只留下这一个

同样我们提取组卡对个报进行填充,效果是样的。

我删除了所有配色网站,只留下这一个

是「三元群」,也就是三个对比,因为相是 360 度,所以平分成三份每一份 120 度。大家看到里不仅以改变相,也以改变纯度明度,最外圈是纯,往内收就降低纯度和明度。我们在看相关系的时是不需要考虑纯度和明度的,只看它们的相位置,比个三元群,无论你收缩到么靠内,它的彩关系仍是三元群的关系。

我删除了所有配色网站,只留下这一个

我们填充组颜看看,三元群因为对比的关系,所以通常效果在相的对比上是很强的。

我删除了所有配色网站,只留下这一个

是「补」,个就很理,也就是「互补」,虽里提供的是个颜,但是整相上就是互补两,其他三个颜是两个补在纯度和明度上的变化。

我删除了所有配色网站,只留下这一个

同样用组颜填充试试,以看到补的对比效果是最强烈的。

我删除了所有配色网站,只留下这一个

是「分割补」,我们平时也叫做「分裂补」,也就是一个颜和它的互补两的颜的搭,大家看相就明白。虽里以整角度幅度,但是整大的,其原则上已经不能做是分割补,所以果大家想用分割补的,建议还是使用它提供的默认角度比。

我删除了所有配色网站,只留下这一个

将组分割补提取出来进行填充,得到的就是样一个效果。

我删除了所有配色网站,只留下这一个

除分割补还有「双分割补」,也就是在分割补的基础上增加基两的两个颜,其效果和分割补差不,只不更适合你需要相的情况,比说果你需要三个颜,就直接使用分割补就行,果三个颜不够,而你又不想改变的效果,就使用双分割补,因为新增加的两个颜距离基很近,所以相相差并不大,不对整的效果造成太大的改变。

我删除了所有配色网站,只留下这一个

我们试一下个双分割补,个纯的搭,视效果还是很强烈、很刺激的。

我删除了所有配色网站,只留下这一个

接着是「正方形」,个也很理,从字面含义上就能够明白是什么意思,也就是在相上选择正方形四个端点的颜,也以理为是字形。种形式的处是对比适中,颜富的同时又不太乱,因为彼此距离相等,所以让效果显得很平衡。

我删除了所有配色网站,只留下这一个

我们填充试试,效果也是以的。

我删除了所有配色网站,只留下这一个

是「复合」型,也就是在相上先选择一对补,在补附近选择其他颜,而之的颜要在同一半球,种形式大效果接近补,但是因为同半球类比的加,一变化,富彩次,但是又不产生强烈的冲突。

我删除了所有配色网站,只留下这一个

我们填充一下看看,就是样一个效果。

我删除了所有配色网站,只留下这一个

最是「浓度」,也就是同一相的不同纯度变化,里它规定明度,我们改变的只是相和纯度的变化。跟单模式不同的是,单是纯度明度在变化,而浓度模式下明度是不生变化的。

我删除了所有配色网站,只留下这一个

刚刚我们尝试的效果并不是所有的方案是的,因为是直接使用 Adobe Color 提供的颜进行填充的,并没有进行任何的手动整和的理论考量,目的就是为给大家展示用个工具的效果,因为工具的最大用途就是提供种方案,所以大家在使用的时不需要考虑太,大胆地去尝试一,最根据视效果来选择最符合设计内容并且最美观的方案就以。

我删除了所有配色网站,只留下这一个

整个关轮的部分就给大家介绍完 ,下面我们来看看「撷取主题」。

我删除了所有配色网站,只留下这一个

进「撷取主题」页面,上面写的是从影像中抽取颜,并将其另存为盘,也就是以上传图,它自动提取图中的主要颜形成一个卡,个卡我们以直接使用也以储存下来。

我删除了所有配色网站,只留下这一个

里我们就用个报为例,点击上传就以。

我删除了所有配色网站,只留下这一个

果得操烦也以直接拖进来,拖进来之我们看到里已经提取出卡。

我删除了所有配色网站,只留下这一个

左上方是以选择模式的,模式是根据黑的量以及彩强度来区分的。

我删除了所有配色网站,只留下这一个

分别有彩模式、亮模式、柔和模式、深模式、暗模式、无,提取出的效果是和图身的彩有关系的,具想提取哪种模式以根据自己的需求来定。

我删除了所有配色网站,只留下这一个

当果有想吸取的颜,也以手动整,想吸哪里吸哪里。

我删除了所有配色网站,只留下这一个

提取完图颜之,我们以返回到轮里,时轮界面显示的就是刚刚我们提取的组卡,同样也以存到资料库中。

我删除了所有配色网站,只留下这一个

「撷取主题」的右是「撷取渐」,同样也是上传图提取颜,只不是渐变的形式,默认是三个颜,下方有相应的值信息。

我删除了所有配色网站,只留下这一个

左上角里以改变渐变的数量,也以手动去整每一个颜的位置。其看到里大家现,款工具是非常人化的,它虽为我们提供很搭方案,但同时又留给我们整的空间。同样渐变也是以储存到我们的资料库中的。

我删除了所有配色网站,只留下这一个

「撷取渐」右是「协助工具」,是 Adobe Color 新增的一个功能,它是用来检测颜的,主要是针对盲人群。

我删除了所有配色网站,只留下这一个

比现在组颜。我们看它里出现红感叹号,提示我们 A、C、D 生冲突。

我删除了所有配色网站,只留下这一个

我们正常情况下看组颜是能区分出微妙差异的,但是我们看下方里它模拟在不同盲眼中看到组颜的样子,在盲人群眼里 A、C、D 之间有的颜是一样的。

我删除了所有配色网站,只留下这一个

所以为对盲人群表示,我们就需要整组颜,直到出现绿的对号,时我们看即使在盲眼中,颜也是能够区分出来的,个协助工具就是么用的。

我删除了所有配色网站,只留下这一个

「协助工具」右是「彩游戏」,也是整个「建立」部分中最一个,里提供一个彩游戏。

我删除了所有配色网站,只留下这一个

开始之有彩闪烁,结束之按出现的顺序点击你刚才看到的颜,一关一个,二关两个,以此类推,里我简单的玩一下,大家看一下就明白。

我删除了所有配色网站,只留下这一个

下面我们来看看「搜索」,进到搜索页面我们看到里为我们提供很提取的颜和图,里的图很富,有的是摄影品,有的是设计品,上方的轮播图提供的一外的内容,比潘通流行、Adobe 区、Adobe 手机端的 APP 等等。

我删除了所有配色网站,只留下这一个

以看到里提供非常的彩搭,而且里我给大家展示的只是其中一页。

我删除了所有配色网站,只留下这一个

左上角里提供关键词搜索功能,以通具颜进行搜索,也以输具象或抽象的词汇来搜索,最关键的是以直接输汉字。

我删除了所有配色网站,只留下这一个

比里我搜索「粉」,就出现大量和粉相关的图和卡。

我删除了所有配色网站,只留下这一个

个是搜索「水」得到的一结果。

我删除了所有配色网站,只留下这一个

也以是抽象或感的词汇,比「喜」,它就出现一以红和黄为主的相关图。

我删除了所有配色网站,只留下这一个

当里也是以筛选的,不通常情况下选择「所有来源」就以。

我删除了所有配色网站,只留下这一个

果你看中某一个图或卡,当我们鼠标移动到它上方的时,就弹出一选项,我们以储存到资料库,也以直接进行下载。

我删除了所有配色网站,只留下这一个

单击就进到板界面,果你想进行其他操,就和我们最开始讲的是一样的,只不里一个图,而个图也是以点击的,点击之就进到它的原始地址。

我删除了所有配色网站,只留下这一个

通搜索功能得到的图是以进到它的原地址的。

我删除了所有配色网站,只留下这一个

我们回到之前的界面,里有一个非常不眼的地方,就是个「相机」图标,虽不眼,但是它的功能也是非常重要的,也就是我们以通上传图来搜寻类似的彩主题。

我删除了所有配色网站,只留下这一个

里我们就以个图为例。

我删除了所有配色网站,只留下这一个

上传之就出现和个图内容相近的图,它里就自动识别电动车,所以出现的基上是自行车或电动车、摩托车,有的和彩有关,有的和彩无关,个功能果使用也是非常方便工的。

我删除了所有配色网站,只留下这一个

最就是「趋势」,个和「搜索」其质上差不,也是为我们提供很图和彩,不同的是它里为我们提供一分类。

我删除了所有配色网站,只留下这一个

比时尚、图形设计、插图、互、建筑、游戏设计、荒野、风味、旅行等等,而里的图库主要来源 Behance 和 Adobe Stock。

我删除了所有配色网站,只留下这一个

同样,每一组是以存和下载的。

我删除了所有配色网站,只留下这一个

点进去之也进到具的页面,同样图也是以点进去的。

我删除了所有配色网站,只留下这一个

比个点进去之,就进到它的 Behance 界面,其通 Adobe Color 个一个网站,就以延伸到很地方。

我删除了所有配色网站,只留下这一个

最我又为大家尝试几个方案,同样也是从 Adobe Color 上得到的颜进行填充的,大家以看一下。

我删除了所有配色网站,只留下这一个

△ 下载链接:https://pan.baidu.com/s/1UsHPekAEDk6NFljW33EMGw  提取码:roni

本期教程案例,我会为大家提供下载链接,大家下载下来后可以作个配色练习,时这里有我前提到过关于注册账户个注意事项,请大家多多留意。

本期程到这里就结束了,我们为大介绍了一款非好的配色工具 Adobe Color,很简单并没有么难,相信大一定都得会。当然,工具只是为我们供方的,而是导我们的,在使配色工具的时候最好是要有一定的论基础,有一定的论作为支撑会你在配色的过程中更游刃有余并且有可依。如果是作为手使的话,我的建议还是多尝试,根据效果的好坏来择最终的方案。今天的容就先到这里,希望对大有帮助,我是无我,我们期再见。

欢迎关注研习的公众号:「Yanxishe2017」

我删除了所有配色网站,只留下这一个

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

本文要介绍的「Palettable」是一个线上配色工具,Palettable 通过互动方式协助使用者找出最合适的色彩组合,开启网站后会先随...
神器推荐
今天将要分享的是一个我们在设计中经常会用到的「配色」。 很多设计师工作几年后还是对配色摸不着头脑,每次做设计依旧没有...
入门
@WOOD短腿木 、@LXYFLASH :如今,配色工具已经铺天盖地多到数都数不过来,但每次选好配色拖进软件里一吸,发现实际效果总是...
Paletton
如果你的网页中只能着重使用一种色彩,怎么做才好?跟着设计师 Kulik Oleg 来学学用色吧 ~
优秀网页设计
在上期文章我们知道了配色的步骤通常是从确定主色开始,再选择与之搭配的副色,最后根据造型、排版等方面调整增加多个点缀色...
点缀色
@研习设K先生 :在我们设计配色的过程中容易忽视一点就是通过色彩来强调主角,主角的刻画可以对版面的优劣起到决定性作用,所...
主色
对于设计配色而言,系统的理论学习固然重要,但是对于初学者或者对色彩理论提不起兴趣学习的人来说,难道就没有可以快速完成...
Adobe color
在上一篇《甲方竟敢说你的配色丑! 我来教你怼回去(一)》中,我们了解了色彩的性质以及色彩的分类之后,我们再通过色彩之间...
色彩基础