配色知识,适合新手的零基础配色方案

2022-12-26 18:34:22 来源/作者: / 己有:11人学习过

这种方法直接使用高版本的Photoshop配色插件即可,默认都自带,CS6至以上的版本都默认自带了其中一种。

a)比如我要设计一个圣诞节的网站,圣诞节有糖果,有圣诞树,那我就需要定义一个『核心色』,绿色或者红色,圣诞树或者圣诞帽的颜色。

然后我就可以直接使用软件大胆建立配色方案啦。

这里我选择『绿色』,我不用在意我的绿色的饱和度明度是怎样选择的,我只要根据自己的感觉,先选择一个绿色就行。

好,就它了,选择了很亮的绿色,也不算自然绿。

配色知识,适合新手的零基础配色方案

b)然后把工具栏的背景色设置成这个色,方便我们直接在插件中调用。

配色知识,适合新手的零基础配色方案

c)打开插件,把我们的背景色应用到插件的『基础色 base color』中, 点击箭头所示按钮即可

配色知识,适合新手的零基础配色方案

选择色彩的搭配方式,依次是:相似色、单色、二次色(三位一体色组合)、互补色(对比色)、复合色、暗色(阴影色)、自定义。

配色知识,适合新手的零基础配色方案

选择后,你可以拖动色彩的控制点变换,确定后点击如图的按钮即可添加到色板中使用

配色知识,适合新手的零基础配色方案

配色知识,适合新手的零基础配色方案

色板如下:

配色知识,适合新手的零基础配色方案

好啦,配色方案已出,如果你需要,可以增加对比色,我自己常用的3种色彩搭配模式是:相似色,单色,对比色(适当)

在你正式设计web或者APP的界面的时候,你就要控制好颜色的比例,这个需要长期积累,但是大家只要记住,对比色适当,特殊的一些风格可以用到1/2,但是大部分时候对比色都占少数,单色铺大色。

第三阶段,色彩记忆感

熟悉web设计中的常用配色,甚至可以多记忆,培养一种下意识的色彩感觉,记忆常用的色彩的英文名称和中文名称。

(下图是引用了美国网页设计规范中的视觉某部分,由于Web规范颜色有上百种,我们不可能一一记住,我们只需要熟悉这几种常用的色彩,有一个感觉,背景色和文字色,那我们在配色的时候也可以直接引用,我们只要记住了这些常用色在色板中的位置,它的明度和饱和度的差异,那我们很容易直接调用它们。)

常用背景颜色

配色知识,适合新手的零基础配色方案

常用文字颜色

配色知识,适合新手的零基础配色方案

第四阶段,高质量色彩资源探索学习

学习譬如Google design中的Color,Material design等新玩意儿,学习新的色彩思维和创意方法。

Google.com/design

(下图是网站截图)

配色知识,适合新手的零基础配色方案

配色知识,适合新手的零基础配色方案

好啦,通过以上4各阶段的学习,或者一般情况学习到第二个阶段,你就可以运用软件安全的创造一套配色方案。不需要太深的色彩基础。

如果你确实很懒,没关系,只要掌握了第二阶段的软件配色方法,就OK,当然色彩的比例要自己多练习多把控了,并不是说你创造了配色方案就能做出漂亮的作品。这就需要我们掌握以下色彩比例控制!!

未来还会做一篇文章,专门讲解色彩比例控制的技巧和方法,希望这篇分享对大家有用哦!:)本文章由没位道博主@Chuckie-Chang 分享整理, 欢迎大家交流。