下载

1下载券

加入VIP
  • 专属下载特权
  • 现金文档折扣购买
  • VIP免费专区
  • 千万文档免费下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 Web平面设计颜色基础理论

Web平面设计颜色基础理论.ppt

Web平面设计颜色基础理论

热血校联
2013-05-06 0人阅读 举报 0 0 暂无简介

简介:本文档为《Web平面设计颜色基础理论ppt》,可适用于高等教育领域

Web平面设计颜色基础理论Web平面设计颜色基础理论内容提纲内容提纲色彩基本知识色彩搭配:十种基本的配色设计网页中色彩的分析各类网站的色彩应用常见配色工具使用如何成为一个色彩达人色彩基本知识色彩基本知识什么是色彩色彩的形成色彩的要素三原色、间色、复色、补色HSB、RGB、CMYK色彩的对比色彩的情感联想什么是色彩色彩基本知识()什么是色彩色彩基本知识()色彩是人根据物体遇到并分解可见光所产生的知觉。光是产色原因色光波被感知的结果。只要有光色彩就会存在即色是光的赐予。色彩是光刺激眼睛所产生的感觉也可以说是人的视觉对光反应的产物这种光包括自然光和人造光。什么是色彩色彩基本知识()什么是色彩色彩基本知识()白炽灯日光灯自然光色彩的形成色彩基本知识()色彩的形成色彩基本知识()物体表面色彩的形成取决与三个方面:光源的照射、物体本身反射一定的色光、环境与空间对物体色彩的影响。光源色:由各种光源发出的光光波的长短、强弱、比例性质的不同形成了不同的色光称为光源色。物体色:物体色本身不发光它是光源色经过物体的吸收反射反映到视觉中的光色感觉我们把这些本身不发光的色彩统称为物体色。色彩的形成色彩基本知识()色彩的形成色彩基本知识()物体固有色色彩的形成色彩基本知识()色彩的形成色彩基本知识()红光照耀下的苹果呈黑色色彩的形成色彩基本知识()色彩的形成色彩基本知识()色彩色产生是光照射物体物体对光产生吸收或反射反射的光刺激人眼并通过视觉神经传递到大脑最终对色彩产生感受的过程。视觉形成的四要素色彩的要素色彩基本知识()色彩的要素色彩基本知识()自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色而其他所有颜色均属于彩色。任何一种彩色具有三个属性:色相、明度、纯度三个方面的性质又称色彩的三要素。色相(Hue):也叫色泽是颜色的基本特征反映颜色的基本面貌。饱和度(Saturation):也叫纯度指颜色的纯洁程度。明度(Brightness或Lightness或Luminousity):也叫亮度体现颜色的深浅。  色彩的要素色彩基本知识()色彩的要素色彩基本知识()非彩色只有明度特征没有色相和饱和度的区别。当色彩间发生作用时除以上三种基本条件外各种色彩彼此间形成色调并显现出自己的特性因此色相、明度、纯度、色调及色性等五项构成了色彩的要素。色调:指是一幅画中画面色彩的总体倾向是大的色彩效果。在大自然中我们经常见到这样一种现象:不同颜色的物体或被笼罩在一片金色的阳光之中或被统一在冬季银白色的世界之中。这种在不同颜色的物体上笼罩着某一种色彩使不同颜色的物体都带有同一色彩倾向这样的色彩现象就是色调。色性:即色彩的冷暖分别。色彩学上根据心理感受把颜色分为暖色调(红、橙、黄)、冷色调(青、蓝)和中性色调(紫、绿、黄、黑、灰、白)。色相(Hue)色彩的要素色彩基本知识()明度亮度(BrightnessLightness)BrightnessLightness色彩的要素色彩基本知识()纯度(Saturation)色彩的要素色彩基本知识()色彩的要素色彩基本知识()色彩的要素色彩基本知识()色性:颜色的冷暖之分色彩的要素色彩基本知识()色性:颜色的冷暖之分三原色、间色、复色、补色色彩基本知识()三原色、间色、复色、补色色彩基本知识()三原色:又称为一次色。包括:红、黄、蓝三种颜色。三原色的主要特征:色彩不能再分解不能用其他颜色调配出来是最纯正、鲜明、强烈的基本色。可调配出其他各种色相的色彩。间色:又称为二次色。红+黄=橙黄+蓝=绿红+蓝=紫包含了二原色的成分即二原色相混合复色:又称为三次色。将两个间色(橙与绿、绿与橙)或原色和相对应的间色(如:红与绿、黄与紫…)相混合。复色包含了三原色的成分成为色纯度较低的色彩。补色:原色与相对应的间色。红与绿、黄与紫、蓝与橙互称补色三原色、间色、复色、补色色彩基本知识()三原色、间色、复色、补色色彩基本知识()色环:或称为色相环。实质上就是在彩色光谱中所见的长条形的色彩序列只是将首尾连接在一起使红色连接到另一端的紫色。HSB、RGB、CMYKHSB、RGB、CMYKHSB、RGB、CMYK指的是三种不同的色彩模式:在HSB模式中H(hues)表示色相S(saturation)表示饱和度B(brightness)表示亮度。HSB模式对应的媒介是人眼。RGB色彩模式是工业界的一种颜色标准是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的这个标准几乎包括了人类视力所能感知的所有颜色是目前运用最广的颜色系统之一。CMYK也称作印刷色彩模式是一种依靠反光的色彩模式和RGB类似CMY是种印刷油墨名称的首字母:青色Cyan、品红色Magenta、黄色Yellow。而K取的是black最后一个字母之所以不取首字母是为了避免与蓝色(Blue)混淆。从理论上来说只需要CMY三种油墨就足够了它们三个加在一起就应该得到黑色。但是由于目前制造工艺还不能造出高纯度的油墨CMY相加的结果实际是一种暗红色。关于三原色(红、黄、蓝)与RGB的问题:光的三原色:红、黄、蓝印刷三原色:红、绿、蓝(RGB)色彩的对比与调和色彩基本知识()色彩的对比与调和色彩基本知识()两种以上的色彩以空间或时间关系相比较能比较出明显的差别并产生比较作用被称为色彩对比。色相对比:因色相之间的差别形成的对比。当主色相确定后必须考虑其他色彩与主色相是什么关系要表现什么内容及效果等这样才能增强其表现力。明度对比:因明度之间的差别形成的对比。(柠檬黄明度高蓝紫色的明度低橙色和绿色属中明度红色与蓝色属中低明度)。纯度对比:一种颜色与另一种更鲜艳的颜色相比时会感觉不太鲜明但与不鲜艳的颜色相比时则显得鲜明这种色彩的对比便称为纯度对比。补色对比:将红与绿、黄与紫、蓝与橙等具有补色关系的色彩彼此并置使色彩感觉更为鲜明纯度增加称为补色对比。(视觉的残像现象明显)。冷暖对比:由于色彩感觉的冷暖差别而形成的色彩对比称为冷暖对比。(红、橙、黄使人感觉温暖蓝、蓝绿、蓝紫使人感觉寒冷绿与紫介与其间)另外色彩的冷暖对比还受明度与纯度的影响白光反射高而感觉冷黑色吸收率高而感觉暖。色彩的对比与调和色彩基本知识()色彩的对比与调和色彩基本知识()色彩调和两种或两种以上的色彩合理搭配产生统一和谐的效果称为色彩调和。同种色的调和:相同色相不同明度和纯度的色彩调和。方法为:使之产生循序的渐进在明度、纯度的变化上形成强弱、高低的对比以弥补同色调和的单调感。类似色的调和:以色相接近的某类色彩如红与橙、蓝与紫等的调和称为类似色的调和。类似色的调和主要*类似色之间的共同色来产生作用。对比色的调和:以色相相对或色性相对的某类色彩如红与绿、黄与紫、蓝与橙的调和。调和方法有:选用一种对比色将其纯度提高或降低另一种对比色的纯度在对比色之间插入分割色(金、银、黑、白、灰等)采用双方面积大小不同的处理方法以达到对比中的和谐是对比色之间具有类似色的关系也可起到调和的作用色彩的对比与调和色彩基本知识()色彩的对比与调和色彩基本知识()色彩的对比与调和色彩基本知识()色彩的对比与调和色彩基本知识()对比强的色有:黄黑、白黑、黄紫、蓝白、绿白、黄蓝……对比弱的色有:黄白、绿青、黑紫、灰绿……色彩的对比与调和色彩基本知识()色彩的对比与调和色彩基本知识()日本左藤亘宏认为:黑色底可见度的强弱次序:白→黄→黄橙→黄绿→橙白色底可见度的强弱次序:黑→红→紫→紫红→蓝蓝色底可见度的强弱次序:白→黄→黄橙→橙色彩的对比与调和色彩基本知识()色彩的对比与调和色彩基本知识()黄色底可见度的强弱次序:黑→红→蓝→蓝紫→绿绿色底可见度的强弱次序:白→黄→红→黑→黄橙红色底可见度的强弱次序:白→黄→黄绿→橙→黄橙灰色底可见度的强弱次序:黄→黄绿→橙→紫→蓝紫色彩的情感联想色彩基本知识()色彩的情感联想色彩基本知识()色彩的情感联想色彩基本知识()色彩的情感联想色彩基本知识()色彩的情感联想色彩基本知识()色彩的情感联想色彩基本知识()色彩的情感联想色彩基本知识()色彩的情感联想色彩基本知识()古典现代宁静热烈色彩的情感联想色彩基本知识()色彩的情感联想色彩基本知识()色彩的情感联想色彩基本知识()素雅神秘古朴华丽色彩的情感联想色彩基本知识()色彩的情感联想色彩基本知识()色彩的情感联想色彩基本知识()色彩搭配:十种基本的配色设计()色彩搭配:十种基本的配色设计()无色设计(achromatic)类比设计(analogous)冲突设计(clash)互补设计(complement)单色设计(monochromatic)中性设计(neutral)分裂补色设计(splitcomplement)原色设计(primary)二次色设计(secondary)三次色三色设计(tertiary)色彩搭配:十种基本的配色设计()色彩搭配:十种基本的配色设计()色彩搭配:十种基本的配色设计()色彩搭配:十种基本的配色设计()色彩搭配:十种基本的配色设计()色彩搭配:十种基本的配色设计()网页中色彩的分析()网页中色彩的分析()网页中关于色彩的几个名词:主色调:网页内容主体部分的主要颜色。一般可以根据需求及色彩象征意义确定。辅助色:网页内容主体部分的次要颜色。一般可以在主色调的同一色系中选择同类色、相邻色点睛色:网页内容主体部分中突出的颜色。一般可以为主色调的对比色或互补色。背景色:网页主体外的背景颜色一般要求能衬托出其他颜色返回返回返回返回返回各类网站的色彩应用()各类网站的色彩应用()网站的类型很多按照分类其各自的目的和侧重点不同对用户的情感诉求心理也会不同。下面主要从网站的类型层面上来简单探讨色彩在网页上的应用:各类网站的色彩应用()各类网站的色彩应用()门户类:其主要需求是如何方便用户在堆砌的信息中有效、快速进行目标选择而页面色彩可倾向于清爽简洁。腾讯网雅虎网易等门户采用清爽简洁的浅色调来降低信息快速获取时的视觉干扰。同性质的同类网站主要是沿用自己公司主色系或logo来做区分便于用户对品牌的识别。各类网站的色彩应用()各类网站的色彩应用()各类网站的色彩应用()各类网站的色彩应用()产品类:主要目的需求展示产品的特性促进浏览者消费欲望页面色彩可根据具体产品定位做多样化设计。细化产品具体定位如apple韩国手机iriver高科技电子产品其简洁灰白色调给网站带来科技感和现代感。各类网站的色彩应用()各类网站的色彩应用()各类网站的色彩应用()各类网站的色彩应用()各类网站的色彩应用()各类网站的色彩应用()社区类:其需求是操作简单易用长时间使用的舒适度页面色彩也倾向清爽简洁。主要以分享、交流信息为主的社区网有如上面门户网信息获取性质所以配色上比较简洁清爽。但各社区网又各自有自己的核心目标用户群所以在配色方面带有各自的特点。如校友核心用户是在校学生页面顶端上的banner运用活泼的绿色调来渲染青春朝气的氛围各类网站的色彩应用()各类网站的色彩应用()各类网站的色彩应用()各类网站的色彩应用()公司、企业类:展示企业形象加深提高品牌印象可应用logo的主色系设计达到品牌统一。各类网站的色彩应用()各类网站的色彩应用()电子商务类:其目的在满足方便快捷地查看商品和进行交易同时运暖色调渲染气氛让用户感受到网站整体的活跃氛围和愉悦感。各类网站的色彩应用()各类网站的色彩应用()各类网站的色彩应用()各类网站的色彩应用()各类网站的色彩应用()各类网站的色彩应用()当然黑色调的电子商务网站同样给让人时尚、炫酷的潮流感各类网站的色彩应用()各类网站的色彩应用()各类网站的色彩应用()各类网站的色彩应用()美国前大网站的Logo主要使用种颜色。其中采用蓝色的网站最多红色排在第二种黄色排在第三种。各类网站的色彩应用()各类网站的色彩应用()各类网站的色彩应用()各类网站的色彩应用()常见配色工具使用常见配色工具使用在设计中我们不仅仅要学习基本的色彩知识以及色彩的分析使用技巧。我们还需要掌握一些常见的调色工具来辅助我们完成设计中的配色工具。非常牛的调色工具有两个:ColorImpactColorSchemer如何成为一个色彩达人如何成为一个色彩达人深入学习色彩的知识储备色彩的理论。经常去逛一些设计类、欣赏类的网站记录色彩的灵感。建立自己的色彩库储备色彩资源:收集有色彩感觉的图片、网页截图等使用调色工具进行色彩分析找到色彩方案将图片、对应的色彩方案、描述进行合理的存储以方便以后进行查找有理论、有灵感、有资源是成为色彩达人的告诉公路理论实践作业理论实践作业安装ColorImpact、ColorSchemer不熟悉其使用方法制定自己的颜色库规划尝试收集几个颜色资源。阅读《色彩是门学问网页色彩大攻略doc》进一步学习网页中色彩的运用构思自己要设计的网站的主题根据本课知识确定其主色调、辅色调、点睛色等。

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

文档小程序码

使用微信“扫一扫”扫码寻找文档

1

打开微信

2

扫描小程序码

3

发布寻找信息

4

等待寻找结果

我知道了
评分:

/69

Web平面设计颜色基础理论

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利