《《基础知识色彩与》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《基础知识色彩与》PPT课件.ppt（73页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、色彩基本认识2008 年年9月月2位图与矢量图矢量图可自由的放大、缩小或改变其中某个区段的颜色而不会失真线条简单的图案AdobeIllustrator、CorelDraw、Freehand、Flash位图记录没一点的颜色与一些格式的辨识资料记录没一点的颜色与一些格式的辨识资料连续色调的图形，如人物、风景等照片Photoshop2008 年年9月月3比較比較位图位图矢量图矢量图特征特征较能表现色彩浓度与层次可展示清晰线条和层次用途用途照片或者复杂图像文字或商标图像缩放图像缩放結果結果易失真不易失真制作制作3D图像图像不可以可以文件文件大小大小較大較小常用的常用的文件文件格式格式bmp、psd、t
2、iff、gif、jpegeps、dxf、ps、wmf位图与矢量图4分辨率分辨率分辨率分辨率是图像的一个重要概念，用来衡量图像的细节表是图像的一个重要概念，用来衡量图像的细节表现力和技术参数，一般有：图像分辨率，显示现力和技术参数，一般有：图像分辨率，显示器器分辨率、分辨率、扫描仪分辨率，打印机分辨率。扫描仪分辨率，打印机分辨率。图像分辨率图像分辨率是指每英寸图像所含的点或者像素。图像文是指每英寸图像所含的点或者像素。图像文件的大小和分辨率成正比。件的大小和分辨率成正比。像素像素是构成图像的最基本单位，是一个虚拟的单位，只是构成图像的最基本单位，是一个虚拟的单位，只存在与电脑中。不管是位图还是矢
3、量图，在屏幕上都会存在与电脑中。不管是位图还是矢量图，在屏幕上都会显示为像素，一个像素只有一种颜色。显示为像素，一个像素只有一种颜色。5色彩基本认识色彩基本认识hfwang6光与色彩n1666年，牛顿用三棱镜分解太阳光，发现看似无色的光线，经过三棱镜时，会依其波波长长和折射关系，依序分为紅、橙、黃、绿、蓝、靛、紫七色光 hfwang7光与色彩n色光三原色RGB紅Red綠Green藍Bluen0255(256階)0最暗，255最強(亮)n加色法越加越亮白三三种种色光都加到最強時色光都加到最強時，白色，白色量化hfwang8光与色彩n色料三原色(印刷工业色 CMY YK)天青Cyan洋紅Magen
4、ta黃YellowYellow黑Blackn0%100%100%最浓n减色法越加越暗黑三種色料都加到最三種色料都加到最浓浓時時，黑色，黑色四色印刷黑？黑？量化hfwang9练习图(1)n 图层面板 打开眼睛图层面板 打开眼睛hfwang10练习图(2)n移动工具、选取图层hfwang11光与色彩RGBCMYK 注意到沒？注意到沒？互互为补色为补色！hfwang12光与色彩光的物理特性：n波长：产生色相的区別波长短的偏藍，波长长的偏紅n振幅：产生明暗的区別振幅大的偏亮，振幅小的偏暗hfwang13【练习】光与色彩AB【问】哪一個波的光較偏藍？哪一個較亮？hfwang14光与色彩人类的视觉机能：眼
5、睛的杆状細胞：对光线的明暗有感应眼睛的錐狀細胞：含有感受紅、綠、藍光三原色的細胞色盲？hfwang15光与色彩一般人眼中的草莓一般人眼中的草莓紅綠色盲者眼中的草莓紅綠色盲者眼中的草莓 你能拍出一部從色盲者眼中看世界的電影嗎？你能拍出一部從色盲者眼中看世界的電影嗎？hfwang16色彩三属性n色相Hue色彩的相貌，不同的相貌各有其名称，如：红色，黄色等，黑白无色相，要着色必须先变成灰度值n明度Value、Brightness即色彩的明暗程度，光线反射率多时明度较高n彩度Chroma、Saturation色彩的飽和程度或純度(有時英文用字不太一樣有時英文用字不太一樣)hfwang17色彩三属性n色
6、相、明度、彩度三種不同的称呼HVC：Hue、Value、ChromaHSV：Hue、Saturation、ValueHSB：Hue、Saturation、BrightnessnHSB是基于人眼的一种颜色模式，每一种颜色都对应一种媒介。n打开PS中的拾色器就是以HSB的方式在提取颜色(有時英文用字不太一樣有時英文用字不太一樣)hfwang18色彩三屬性-明度n在無彩度中，明度最高是白色，最低是黑色，其間為各種深淺的灰色低明度高明度hfwang19色彩三屬性-彩度n純色彩度最高，混色（不論白、灰、黑或有彩色）越多越降低其彩度低彩度高彩度hfwang20練習：色彩三屬性【问】n以下哪一色的明度較高？
7、哪一色的彩度較高？A.40%純紅60%白B.60%純紅40%黑hfwang21色彩三要素n处理結果：改改变变像素的色彩值像素的色彩值色彩三要素：H色相、S彩度、B明度2008 年年9月月22改变像素的色彩值：明度色彩三要素：H色相、S彩度、B明度明度原图B明度(Brightness)：很暗很亮2008 年年9月月23改變像素的色彩值：彩度色彩三要素：H色相、S彩度彩度、B明度原图S飽和度：灰度鲜艳2008 年年9月月24改變像素的色彩值：色相色彩三要素：H色相色相、S彩度、B明度原图H色相Hue好奇妙的色相變化喔！hfwang25練習：色彩三屬性【問】灰度的图含有色彩資訊嗎？CS3hfwang
8、26色彩三属性-色相色相環之一例hfwang27色彩模型之一例-色立体n將色彩的三属性，予以系統的排列，組成一個三度空間的立体形狀色彩分类结构图：以明度為垂直軸，愈上方明度越高以彩度為水平軸，愈接近明度軸彩度越低色相环hfwang28色彩種類n无彩色黑、灰、白n有彩色即色相上所列之色彩，如紅、黃、藍等n独立色即印刷上所謂的特別色如金、銀、螢光色等hfwang29色彩三屬性n調來調去，都是在調這三屬性尤其是明暗對比(色階)！就好像一白遮三醜，明暗對比適當了，影像品質也就差不多了！2008 年年9月月30日常照片的常見處理：調整明暗對比雖然拍得不好但萬一還是要用，也可以處理看看喔！明暗階調明暗階調
9、真的很重要真的很重要hfwang31練習：色彩三屬性nPhotoshop影像調整色相飽和度hfwang32通道(Channel)和色彩模式(Mode)通道通道是儲存不同是儲存不同类型资类型资讯讯的的灰阶图像灰阶图像：n当你打开新的图像时，会自动建立色彩色彩资讯通道资讯通道。图像的色彩模式色彩模式(Mode)決定了建立的彩色通道数目通道数目。例如，例如，RGB图像有四個預設通道：其中三個三個分別用于紅色、綠色和藍色，再加上一個编辑图像的复合通道。灰階灰階=程度！程度！第一段第一段再看一次再看一次hfwang33视图通道(Channel)RGB 模式時模式時：3 色版色版CMYK 模式時模式時：4
10、 色版色版給我給我 3 MB 空間空間那給我那給我 4 MB34图像的色彩深度也就是說,有展現多少色的能耐！嗚我只有12色的我有36色的雄獅蠟筆！我有水彩隨便我要調什麼顏色！hfwang35色彩深度(位元)1位元黑白黑白2色變化8位元灰階256色灰階變化16位元高彩65,536種色彩變化24位元全彩16,777,216種色彩變化-8位元索引色最多256種變化同樣長寬時,在不壓縮情況下檔案大小的比較,就看位元的倍數hfwang36色彩深度-1位元(bit)21=2黑白2色變化雖然只有2色，竟然沒有想像中單調也能有典雅的感覺hfwang37色彩深度-2位元(bits)22=4黑灰白4阶变化色阶还很
11、明显的不连续hfwang38色彩深度-8位元(bits)28=256如为灰度,有256阶变化當您的眼睛已分辨不出一阶阶時連續色調和觀看距離之遠近有關hfwang3928=256請複誦三次！hfwang40PhotoshopCS版16位元(Bits/Channel)28=256216=65,536232=65,536x65,536=?CS3hfwang41【問】灰階與黑白樣嗎？hfwang42色彩深度-24位元(bits)28x28x28=16,777,216(1千6百多萬)RGB大自然色彩遠超過這個，不過在螢幕上，諒你的眼睛也沒厲害到都分辨的出來色光三原色各用各用 256 階階表示其強度hfw
12、ang43【問】色彩深度-16位元(bits)通道28=256216=65,536 216x216x216=(224x224)=16,777,216x16,777,216(快算不出了)RGB如果每個通道不只256階，而是更細緻的65,536階呢？hfwang44【问】不压缩的位图有多大？n长x宽x色彩深度例：1024x768x3Bytes=2.25MB那一張300dpi全开的研讨会或电影海报呢？還真大還真大hfwang45【问】这么多色彩，該如何精确表达？色名色彩的表达n茶花紅n海棠紅n枸杞紅n滿江紅n潤紅n緋紅n雞血石紅n猩猩紅n曙色n芙蓉紅n落霞紅n朱紅看了古時候這些色看了古時候這些色名名
13、，你能想像那到你能想像那到底是什麼色嗎底是什麼色嗎?hfwang46【問】这么多色彩，該如何精确表达？n几种主要的色彩值表示方式10進位式：0255H:360H:360度式度式度式度式百分比式16进位式：00FFhfwang47中场练习n顏色的設定Photoshophfwang48色彩深度-索引色indexcolor最多256色网页上常用的 GIF 图就是属于这种。因为顏色少，所以图像可以压缩到很小。从2色到最多256色hfwang49色彩深度-索引色4色(10K)8色(14K)顏色虽然少，但也許會有特別的風格喔可以從1千6百多萬色中，任任意意挑選出所要顏色hfwang50色彩深度-索引色你的
14、4色我的4色(Windows和Mac的色盤也未必相同)但，同樣挑四個顏色，我挑的和你挑的未必相同hfwang51既然每個人挑的顏色都不見得相同网页安全色彩（216色）全彩全彩网页网页安全色彩安全色彩顏色少多了，而且色阶明显地不连续大家都一樣從這216種顏色裡挑吧hfwang52网页安全色彩（216色）n网页的色彩表示用“RRGGBB”16进制，每色由“00”（最暗）至“FF”（最亮）n网页的安全色彩為R、G、B值各为以下6种值之一：“00”、“33”、“66”、“99”、“CC”、“FF”共666216hfwang53【联系】以16进制表示以下色彩n网页的色彩表示“RRGGBB”16进制表示法
15、(0F)000000666666ccccccFFFFFF0000FF00FF00FF0000hfwang54色域(gamut)你扫描后的图片，萤幕上的色彩，和原來的图片樣嗎？你萤幕上的档案，印出來後，色彩和螢幕上的樣嗎？同樣這个图片，你从这台CRT螢幕上看，和拿到另台液晶螢幕上看，色彩樣嗎？.，色彩樣嗎？樣嗎樣嗎？n不同种类的设备，有不同的“色域”！為什麼不樣為什麼不樣？hfwang55色域(gamut)RGBCMYLab重要重要概念概念n色光类的设备，为RGB色域n色料类(要印出來的)的设备，为CMY色域nLab被視為一种与装置无关的色彩模型，包含所有的可见色彩n不同种类的设备，有不同的色域
16、！hfwang56色域(gamut)不同种类的设备，有不同的“色域”！n螢幕n掃描器n數位相机n印表机n印刷机n各种装置和文件的色域范围nA.Lab色域(整個可见光谱)nB.文件(使用中色域)nC.裝置hfwang57色彩管理n色彩管理的缘起尽量维持从輸入到輸出色彩之一致性n色彩不一致的原因色域色彩空間不一设备呈色性質不一设备元件良窳不一別奢望你那便宜的印表机印出來的顏色，會和螢幕上看的一樣了2008 年年9月月58注意：逝者难追n舍弃的资讯、細节再也回不來再也回不來例：彩色灰階or黑白彩色？RGBCMYKRGB？大張小張大張？网页网页上的上的图像图像，通常已通常已舍弃舍弃大量資訊大量資訊！嗄
17、嗄 那那不不就就好不了好不了hfwang59图像格式大比拼存成什麼存成什麼格式好呢格式好呢 我我!我我!選我選我!我啦我啦!hfwang60三大网页图像格式的火拼GIFJPGPNG既然不壓縮的既然不壓縮的檔很大檔很大，那就，那就壓縮吧壓縮吧 hfwang61你的图像性质是n照片通常是JPG全彩(色调连续，肤色自然)n美工(卡通)图案通常是GIF檔最多256色(色块明显)hfwang62三大网页图像格式nGIF圖形交替格式(Graphics InterchangeFormat)是全球資訊網和其他線上服務上，在超文字標記語言(HTML)文件中顯示索引色索引色圖像和影像常用的檔案格式。GIF是一種L
18、ZW壓縮的格式，可以最小化檔案大小和電子傳輸的時間。GIF格式可以保留索引色影像中的透明透明，但卻不能支援Alpha色版。本段直接摘自本段直接摘自 Photoshop 7 說明說明 少講一個很重要的少講一個很重要的：最多最多 256 色色！hfwang63三大網頁圖檔格式nJPEG靜態影像壓縮標準(JointPhotographicExpertsGroup)是全球資訊網和其他線上服務上，在超文字標記語言(HTML)文件中顯示照片照片和其他連續色調影像連續色調影像常用的格式。BMP格式支援CMYK、RGB和灰階色彩模式，且不支援Alpha色版。與GIF格式不同的是，JPEG會保留RGB影像中所有
19、的顏色資訊，但會選擇性地放棄資料以壓縮檔案大小。JPEG影像會在開啟時自動地解除壓縮。較高的壓縮層級會導致影像的品質較低，而較低的壓縮層級會導致影像品質較佳。在多數的情況下，最大的品質選項製造的結果，與原始影像幾乎沒有差別。本段直接摘自本段直接摘自 Photoshop 7 說明說明hfwang64三大网页图像格式nPNG 可携式网络图像(PortableNetworkGraphics)是研發出來的另一種無專利的格式(除GIF外的另一種格式)，可以用來進行無減色壓縮和在全球資訊網上顯示影像。與GIF不同的是：PNG支援24位元影像，並且可以製造沒有锯齿边缘的背景透明。但是，有些網頁瀏覽器不支援P
20、NG影像。PNG格式支援沒有Alpha色版的RGB、索引色、灰階和點陣圖模式影像。PNG可以保留灰階和RGB影像中的透明。本段直接摘自本段直接摘自 Photoshop 7 說明說明有兩種：有兩種：PNG 8和和PNG 24hfwang65印刷用图像格式TIFPSDEPS檔案不小喔檔案不小喔 66色彩的感覺色彩的感覺与与配色配色hfwang67民俗的色彩n中國宮廟：紅牆綠瓦民間：白牆黑瓦n埃及n阿拉伯n.hfwang68色彩調和對比色系補色系hfwang69色彩調和單一色相同色系類似色系hfwang70色彩調和n多色相三色調和四色調和hfwang71圖片來源：照相館的故事色彩調和对比vs类似hfwang72色彩調和对比vs类似By 游閔州游閔州hfwang73色彩感覺n暖寒n兴奋沉靜n前进後退n輕重n強弱Dior