时间:2019-08-01
编辑:网站制作公司
949
0
我仍然生动地记得我最早的一个艺术课程,作为一个小小的,渴望的孩子,我被提供了一系列明亮的彩色涂料。我记得第一次看到原色混合成二次色的喜悦,我推断如果两种颜色可以制作出一种美丽的新颜色,那么所有的颜色必须使一些东西变得更好!完全失望的是,无论我怎么做,如果我使用了所有的颜色,我不可避免地会得到一种只能被称为“BLECH”的古怪颜色。
长沙做网站多年以后,作为一个初出茅庐的网页设计师,我再次经历了同样的过程。在我学习的过程中,我陷入了使用太多颜色的不可避免的陷阱,或者以错误的方式将它们组合在一起,最终只能得到一些“BLECH”。
我着手尝试学习如何为网络创建配色方案,我发现了许多关于色彩理论的迷人信息。我读到了关于色调,色调,色调,色调,饱和度和亮度,以及类似的,单色,三元组,互补和复合配色方案。
然而,如果没有一个实用的框架来插入这些信息,我发现起初并没有让我更接近创建色彩鲜艳的网站设计。事实上,只有在我开始通过纯粹的反复试验创建纯色方案之后,我所阅读的所有色彩理论才开始变得有意义。
在这个过程中,我为网站配色方案选择了一些“安全指南”,我希望我在开始时就已经知道了。当你第一次开始时,全彩色理论不一定是你需要的。通常你需要用一些不太理论化的东西来滚动球,并且需要更多的“按数字绘画”。
长沙做网站在本教程中,我将与您分享六个肯定的火,“不能出错”的指导方针,您可以遵循这些指导方针,以便在网页设计中掌握使用颜色的基础。这些不是规则,因为您将在职业生涯中创建许多颜色方案,这将完全不同的方向。相反,它们是一个起点,一个安全指南,用于如何在网页设计世界中第一次出游,而不会遇到“BLECH”。
网页设计中最基本的原则之一是,无论你花多少时间创造一个光荣的设计,它的最终作用是扮演节目的真正明星的第二小提琴; 内容。您的配色方案不应该使网站设计比它呈现的内容“更响亮”。您的设计应该在后台,有助于将网站的内容推向前台。
网页设计中一个非常常见的过程是相对隔离地创建设计本身,通常在Photoshop或Sketch等软件中。如果您没有任何示例内容,那么最终可能很容易找到一个可能看起来很棒的设计,并且客户可能会喜欢以模型形式出现,但这对于实际中的网站访问者来说太过分散注意力。实际上,网页设计过程与内容紧密相关,许多高质量的网页设计似乎都是空的,没有内容。
这是一个好主意,首先列出您希望在网站中出现的内容类型的样本,无论是在设计软件中还是直接代码,然后围绕它进行设计。如果涉及特定风格的照片或图像,尤其如此,这样您就可以确保您的设计与它们和谐地流动。想象一下,该网站的内容是一个独特的个人,你必须为他们量身定制一套完美合身的西装。
您可以为主背景和文本库选择无数种颜色组合。但是,我的建议是从掌握最简单的一个开始,背景中的白色和/或浅灰色以及深灰色文本。
如果你看看任何流行的网站,模板或主题的选择,有一个很好的选择,他们中的大多数将在白色或浅灰色上具有这种完全相同的深灰色文本基础,这是有充分理由的。通过这种组合,您几乎可以保证为访问者提供可读性,并允许基于文本和图像的内容进入前台。
使用一些示例内容绘制基本灰度布局,例如:
一般来说,你应该避免使用黑色文字,因为深灰色更容易阅读。舒适的范围从#333333到#666666。
对于您的背景颜色,全白#FFFFFF 是最安全的背景,背后紧靠任何主体文本。对于其他背景元素,您可以从#FFFFFF下到下进行 任何操作#CCCCCC。
同样,这些不是您必须使用的颜色规则 ,只是您知道可以安全使用的指南。
最常见的地方颜色方案出错是在争论几种不同的颜色时。你使用的颜色越多,它们就越难以控制它们。首先,只需在灰度基础上添加一个额外的颜色,用于突出显示链接,某些标题,菜单,按钮等内容。您的高光颜色可以是蓝色,绿色,红色或任何您喜欢的颜色。
首先在底座上放置一个方框,选择您的高光颜色,这样您就可以衡量颜色与所有元素的关系。然后打开颜色选择器并单击颜色映射右上角四分之一的中心。
上下移动滑块并选择您认为适合您设计的颜色。
此时你正在使用三种基本颜色; 你的背景,文字和亮点。您可以而且应该在将来使用多种高亮颜色,但现在可以将其视为杂耍。你已经使用了三个杂耍的针脚,所以只需要这三个就可以了,然后在你自信的时候加入更多的旋转。
你刚学会了如何选择“ 色调 ”。简而言之,色调是基色。当您上下移动滑块时,您会在颜色选择器更改中看到“ H ”值。
“H”代表色调,一旦你选择了高光颜色,那个框中的数字就是它的色调。
如果您对使用哪种高亮颜色有任何疑问,请选择蓝色。认真。蓝色通常是最灵活的颜色,适合最多的网站类型。紫色和黄色等颜色可以非常令人愉悦,但如果以错误的方式使用,也会很快变得花哨。
另一方面,你可以用蓝色作为高亮颜色做任何事情,你不能走得太远。如果你不确定从哪里开始学习或在项目中使用什么颜色,那就回到蓝色。您选择的特定蓝色可以是从深蓝色(色调235)到浅绿色(色调190)的任何地方,并且您处于非常安全的区域。
对于我的示例布局,我选择了一个色调 205。当您确定了高亮颜色时,请将其添加到您认为需要的设计中。如果您在按钮或其上方带有文本的任何区域使用高亮颜色,请同时更改文本颜色。在这种情况下,我将突出显示区域的文本更改为白色。
一旦选择了高亮颜色,请将滑块(色调)栏从该点开始。你的设计需要额外的颜色,但它们都是你已经选择的一种高亮颜色的变体,以保持简单。
要创建颜色变化,请在颜色选择器的地图区域上拖动。
使用以下类型的颜色变化:
彩色地图的右上角是高辛烷值的土地。右上角的颜色就像一级方程式赛车; 它们可以表现惊人并具有极高的吸引力,但通常需要很多经验才能很好地使用它们。如果没有这种经验,它们可能会导致事故,因此最好将牙齿切割成更加柔和的颜色。
这就是为什么在本教程的第三部分中,我要求您在选择高亮颜色之前单击右上角中间的颜色贴图,以确保以相对柔和的颜色开始。
为了说明,看看如果我到目前为止只更改设计的色调而不触及颜色贴图会发生什么。
它看起来还不错,对吗?但是,如果我将颜色贴图拖到右上角,突然间它就不那么好了。
哎我的眼睛!如果您想确保不烧焦访客的视网膜,请遵循颜色地图右上角的一般指导方针。
在最后两节中,您实际学会了应用颜色理论的几个不同方面。您学会了如何使用:
当您在颜色选择器区域的地图区域中拖动时,您将看到“S”和“B”值的变化,分别代表“ 饱和度 ”和“ 亮度 ”。您还会看到色调编号保持不变。因此,您可以通过改变原始色调的饱和度和亮度来创建颜色变化。
饱和度是你的色彩表达的生动。例如,想想“我的衬衫已经被溢出的红酒浸透了”。在典型的颜色选择器上,饱和度取决于白色与基色调混合的程度。白色越少,饱和度越高。
在颜色贴图上向右拖动时,减少白色量,从而增加饱和度,使“S”值上升。当你向左边的那个白色角落拖动时,你正在降低饱和度,所以“S”值会下降。
白色与原始色调的混合也称为“ 色调 ”。该术语来自油漆混合,其中白色油漆与彩色油漆混合。
亮度是指你的颜色混合了多少黑色。黑色越少,亮度越高。
在地图上向上拖动时,减少黑色量,增加亮度,颜色选择器上的“B”值增加。向下拖动时增加黑色,“B”值增加。
将黑色与原始色调混合也称为“ 阴影 ”。这也来自油漆混合,其中黑色油漆与彩色油漆混合。
当您将灰色混合到您的颜色时,这称为创建“ 色调 ”。当你从我们上面的位置移出右上角时,你会降低饱和度和亮度,这会增加白色和黑色(灰色),从而产生一种色调。因此,基本上任何时候你的饱和度和亮度都低于100%,这就是基调。
同样,这个术语来自油漆混合,其中产生灰色油漆,然后与彩色油漆混合。这也是“降低音调 ” 这句话的来源。好吧?
“ 单色 ”配色方案是您采用基色调并使用色调,色调和色调进行扩展的颜色。您刚刚在实际环境中了解了所有这些术语的含义。因此,通过选择一种高亮颜色并在其上创建变体,您实际上创建了一种单色配色方案。
长沙做网站继续在灰度基础上练习您的单色配色方案,直到您感到非常自信。尝试使用不同色调创建它们作为突出显示颜色,尝试查看它如何更改您可以使用的饱和度和亮度设置。
当您感觉舒适时,继续添加一个额外的高亮颜色。我建议你在第一次出游时尝试橙色和蓝色,因为它们往往是最容易使用的二人组合。然后尝试绿色和蓝色,根据我的经验,这是第二个最简单的。这两种组合往往受到客户和客户的欢迎。
你可以做的绝对最好的事情是推动你对网络色彩方案的理解,就是抓住像Colorzilla这样的色彩采样器浏览器扩展,并用它来开始研究经验丰富的设计师如何做到这一点。当您在互联网上浏览时,当您看到一个看起来很棒的配色方案时,会突破颜色取样器并查看页面上使用的颜色。对于您采样的每种色调,请查看饱和度和亮度级别最适合的色调。还要注意哪些颜色与其他颜色结合使用。
3
s后返回登录3
s后返回登录