第二章网店色彩设计.ppt

在网店制作中，色彩是一个非常重要的元素，只有合理地安排色彩，页面才能够吸引浏览者的眼球，各种信息才能够正确地传达出来。学习运用色彩是一个长期积累的过程，需要在了解各种色彩原理的基础上不断实践和总结才能够运用自如。通过本章的学习，可以掌握最核心的色彩知识和运用方法。本章节学习目标 掌掌握握一一些些色色彩彩的的基基本本常常识识对对于于制制作作网网页页非非常常有有帮帮助助，这这些些常常识识内内容容都都源源自自人人们们对对色色彩彩的的理理解解和和科科学学归归类类。其其中中色色彩彩的的色色相相、明明度度和和饱饱和和度度与与网网页页色色彩彩的的构构成成紧紧密密相相关关，了了解解并并掌掌握握色色彩彩的的相相关关知知识识可可以以让让网网页页设设计计工工作作事半功倍。事半功倍。色彩构成色彩构成色彩构成色彩构成一一二二色彩的三要素色彩的三要素色彩的三要素色彩的三要素色相、明度、色相、明度、色相、明度、色相、明度、纯纯度度度度 色彩是光之子，而光是色之母。色彩是光之子，而光是色之母。瑞士色彩家约翰瑞士色彩家约翰.内斯伊顿内斯伊顿光光色彩色彩视觉视觉光、色彩、视觉光、色彩、视觉无彩色无彩色无彩色无彩色1、色相色相是指色彩的相貌，也就是色彩最显著得特征，又叫色名，色种等。生活中得各种色彩都有自己具体得面貌，因此也就有了不同得名称。色彩的相貌是以红、橙、黄、绿、青、蓝、紫的光谱色为基本色相。基本色相的秩序以色相环形式体现，称为色环。色环分别可作为六色相环，九色相环，十二色相环，二十色相环等多种色彩秩序，如下图为十二色相环。本节主要介绍网店美工技能本节主要介绍网店美工技能色彩搭配技巧知识。对美工而言，色彩搭配技巧知识。对美工而言，PS是最主要的作图工具，在是最主要的作图工具，在PS中有两种色彩模式，分别是中有两种色彩模式，分别是RGB模式和模式和CMYK模式，模式，RGB即、红、绿蓝三基色，即、红、绿蓝三基色，CMYK分别是青、品红、黄、分别是青、品红、黄、黑。一般来说，网页图片采用的都是黑。一般来说，网页图片采用的都是RGB的色彩模式，的色彩模式，如图如图 所示。所示。色相对比是指因色相之间的差别形成的对比。当主色相确定后，必须考虑其他色彩与主色相是什么关系，要表现什么内容及效果等，这样才能增强其表现力。可通过色相对比的强弱决定于色相在色环上的距离。色相对比一般可以分为四种程度的对比：同类色相对比与调和、邻近色相对比与调和、对比色相对比与调和、互补色相对比与调和。同类色给人的感觉是相当协调的。它们通常在同一个色相里，通过明度的黑白灰或者纯度的不同来稍微加以区别的，产生了及其微妙的韵律美。为了不至于让整个页面呈现过于单调平淡，有些页面则是加入极其小的其他颜色做点缀。如图页面使用了同种色的黄色系，淡黄、柠檬黄、中黄、通过明度、纯度的微妙变化产生缓和的节奏美感。在色环中在色环中,色相越靠近越调和。色彩色相越靠近越调和。色彩色相环中色相环中6060以内色相属于邻近色。主以内色相属于邻近色。主要靠邻近色之间的共同色来产生作用。要靠邻近色之间的共同色来产生作用。邻近色相较于同类色色彩之间的可搭配邻近色相较于同类色色彩之间的可搭配度要大些，颜色丰富、富于变化。度要大些，颜色丰富、富于变化。对右图的分析我们可以知道，通过上面的这些色值调配当需要使用这组对比色配色时候该如何达到协调的目的。即不是对比色为主色调的页面就一定会有不舒服的感觉的，主要可以通过调低亮度、降低饱和度、加入少许白色来调和。颜色凌乱可以适当加入同类色或者类似色、白色、黑色、灰色做到统一调配的目的。右图可以说是黄色和蓝色的对比色做网店的主要色调。黄色蓝色组合在网页中显得较为青春活力，色彩跳跃度较大。整个页面运用了白色作为调和，白色是这组对比色里加入的协调色，调低了亮度，使整体降低了纯度，缓和视觉刺激。将红与绿、黄与紫、蓝与橙等具有补色关系的色彩彼此并置，使色彩感觉更为鲜明，纯度增加，称为补色对比。由冷色系的蓝色组成大背景环境，纯度较低。前景主要是突出产品橙色形成补色对比效果，纯度亮度非常高，达到最高值，加之浅蓝色的辅色搭配，使得橙色更为凸显，更易于视觉对信息的迅速捕捉。结论：补色的合理搭配，能拉开前景与背景的空间感，突出页面主体物。尤其是橙色在主体物的运用，能迅速传递视觉的效果。明度色彩搭配技巧是指色彩之间明暗程度的差别而形成的对比，是页面形成恰当的黑、白、灰效果的主要手段。明度对比可分为:彩色差的明度对比及非彩色差的明度对比明度对比在视觉上对色彩层次和空间关系影响较大。例如柠檬黄明度高，蓝紫色的明度低，橙色和绿色属中明度，红色与蓝色属中低明度。如图所示为彩色差的明度对比，黄色的色彩明度变化对比搭配效果。如图所示页面应该是黑白灰色非色彩构成，网店图片黑白灰的色彩搭配，单纯的黑白对比柔和舒适于视觉。能使页面显得更单纯、统一，形成较强的科技感、时代感。纯度度对比是指不同色彩之比是指不同色彩之间纯度的差度的差别而形成的而形成的对比。比。色彩色彩纯度可大致分度可大致分为高高纯度、中度、中纯度、低度、低纯度三种。未度三种。未经调和和过的原色的原色纯度是最高的，而度是最高的，而间色多属中色多属中纯度的色彩，度的色彩，复色其本身复色其本身纯度偏低而属低度偏低而属低纯度的色彩范度的色彩范围。纯度的度的对比比会使色彩的效果更明确肯定。会使色彩的效果更明确肯定。整个页面看起来异常艳丽刺激然而又非常的协调。以上数值主要选取了几种较有代表性的颜色。以上色彩除了粉红色，其他几组颜色都是高饱和度高亮度的颜色，因此充分的发挥出了色彩的艳丽程度。包括粉红色在内的几种灰色阶，在中间起到了和谐作用。白色能拉开相近色阶的空间及明快页面的作用，在这里可以说是功不可没。结论：页面实际上用了不少颜色，配色大胆。抓住颜色主次冷暖的安排，适度再加上和谐的过渡色灰色，实现了作者对该页面的轻松配色。从多种高纯度的搭配协调能力上看，足可见作者对色彩设计搭配不一般的功底。这类网店配色非常能够体现出一个网站页面产品个性，配色难度大。让人过目难忘。主色调的灰色，做了渐变背景色，降低了纯度。辅助色的深灰红色，也是作为低纯度的色彩使得整个页面协调于整体的效果。而上方店招的黄色则通过提高了亮度来降低纯度。一个页面里应有少量纯度较高的颜色而不至于使整个页面过于压抑，纯度亮度较高的点睛色红色、橙色就起到了这个作用。结论：低纯度基调给人感觉为平淡、自然、简朴，耐用、超俗、安静、无争、随和的感觉。如应用不当时会引起肮脏、土气、悲观、伤神等感觉。本章介绍了色彩的基础知识，让读者在网店设计中更好更快地掌握和运用色彩的搭配技巧，提升网店质量和吸引力。