赞助商
立即赞助

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

平面设计3年前 (2021)发布 流光
3K 0 0

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

对于设计配色而言,系统的理论学习固然重要,但是对于初学者或者对色彩理论提不起兴趣学习的人来说,难道就没有可以快速完成配色的方法么?当然有,那就是本期教程我要推荐给大家的这款配色工具:Adobe Color。当然这个工具大家都不陌生,因为它出自 Adobe 之手,而之所以要将它做成一期教程,一方面是因为虽然很多人知道这个配色网站,但是往往都是收藏起来作为摆设;另一方面即使有的人会用到它,但使用的方法不对,没有将这个配色网站的价值发挥到最大。所以这期教程就让大家彻底了解它的用法,以便在你的配色能力还没有达到游刃有余之前,能够帮助你快速创作出优秀的配色。

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

这是 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」

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

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

相关文章

在上一篇《甲方竟敢说你的配色丑! 我来教你怼回去(一)》中,我们了解了色彩的性质以及色彩的分类之后,我们再通过色彩之间...
色彩基础
@飞屋睿UIdesign :渐变这一视觉趋势,在最近几年里可谓如日中天。很多平平淡淡的设计,将平涂改为渐变,立刻就能增加醒目感...
对比色
Tubik Studio :配色是每个设计师的必修课。无论是插画师,UI 设计师还是网页设计师,配色是设计中绕不开的环节。随着Materia...
ui设计
不知道大家有没有听过这么一个故事:某家餐厅销量一直不太好,老板究其原因也没有查明白到底是为啥,明明选址在闹市区,价格...
色彩搭配
当我们讨论色彩的时候,聊的更多的是色彩的搭配。虽然有些设计师认为有些色彩是一些纯粹的美学上的选择,但是实际上,色彩对...
经验分享
本文总结了配色过程中需要牢记的9个设计要点。 欢迎关注「优秀网页设计」公众号: 图片素材作者:Magg...
色彩搭配
@研习设K先生 :配色是很多人都比较关心的一个问题,之前的教程我也给大家讲解过一些配色思路和配色方法,而今天我就教大家一...
入门
在上期文章我们知道了配色的步骤通常是从确定主色开始,再选择与之搭配的副色,最后根据造型、排版等方面调整增加多个点缀色...
点缀色