ps基础知识色彩与.ppt

色彩基本认识,2,位图与矢量图,矢量图可自由的放大、缩小或改变其中某个区段的颜色而不会失真线条简单的图案AdobeIllustrator、CorelDraw、Freehand、Flash位图记录没一点的颜色与一些格式的辨识资料连续色调的图形，如人物、风景等照片Photoshop,3,比較,位图与矢量图,4,分辨率,分辨率是图像的一个重要概念，用来衡量图像的细节表现力和技术参数，一般有：图像分辨率，显示器分辨率、扫描仪分辨率，打印机分辨率。图像分辨率是指每英寸图像所含的点或者像素。图像文件的大小和分辨率成正比。像素是构成图像的最基本单位，是一个虚拟的单位，只存在与电脑中。不管是位图还是矢量图，在屏幕上都会显示为像素，一个像素只有一种颜色。,5,色彩基本认识,6,光与色彩,1666年，牛顿用三棱镜分解太阳光，发现看似无色的光线，经过三棱镜时，会依其波长和折射关系，依序分为紅、橙、黃、绿、蓝、靛、紫七色光,7,光与色彩,色光三原色RGB紅Red綠Green藍Blue0255(256階)0最暗，255最強(亮)加色法越加越亮白,三种色光都加到最強時，白色,量化,8,光与色彩,色料三原色(印刷工业色CMYK)天青Cyan洋紅Magenta黃Yellow黑Black0%100%100%最浓减色法越加越暗黑,三種色料都加到最浓時，黑色,四色印刷,黑？,量化,9,练习图(1),1_cmy.psd图层面板打开眼睛,1_RGB.psd图层面板打开眼睛,10,练习图(2),0_cmy.psd移动工具、选取图层,0_rgb.psd,11,光与色彩,RGB,CMYK,注意到沒？互为补色！,12,光与色彩,光的物理特性：波长：产生色相的区別波长短的偏藍，波长长的偏紅振幅：产生明暗的区別振幅大的偏亮，振幅小的偏暗,13,【练习】光与色彩,【问】哪一個波的光較偏藍？哪一個較亮？,14,光与色彩,人类的视觉机能：眼睛的杆状細胞：对光线的明暗有感应眼睛的錐狀細胞：含有感受紅、綠、藍光三原色的細胞色盲？,15,光与色彩,一般人眼中的草莓,紅綠色盲者眼中的草莓,你能拍出一部從色盲者眼中看世界的電影嗎？,16,色彩三属性,色相Hue色彩的相貌，不同的相貌各有其名称，如：红色，黄色等，黑白无色相，要着色必须先变成灰度值明度Value、Brightness即色彩的明暗程度，光线反射率多时明度较高彩度Chroma、Saturation色彩的飽和程度或純度,(有時英文用字不太一樣),17,色彩三属性,色相、明度、彩度三種不同的称呼HVC：Hue、Value、ChromaHSV：Hue、Saturation、ValueHSB：Hue、Saturation、BrightnessHSB是基于人眼的一种颜色模式，每一种颜色都对应一种媒介。打开PS中的拾色器就是以HSB的方式在提取颜色,(有時英文用字不太一樣),18,色彩三屬性-明度,在無彩度中，明度最高是白色，最低是黑色，其間為各種深淺的灰色,低明度,高明度,19,色彩三屬性-彩度,純色彩度最高，混色（不論白、灰、黑或有彩色）越多越降低其彩度,低彩度,高彩度,20,練習：色彩三屬性,【问】以下哪一色的明度較高？哪一色的彩度較高？A.40%純紅60%白B.60%純紅40%黑,21,色彩三要素,处理結果：改变像素的色彩值色彩三要素：H色相、S彩度、B明度,22,改变像素的色彩值：明度,色彩三要素：H色相、S彩度、B明度,原图,B明度(Brightness)：很暗很亮,23,改變像素的色彩值：彩度,色彩三要素：H色相、S彩度、B明度,原图,S飽和度：灰度鲜艳,24,改變像素的色彩值：色相,色彩三要素：H色相、S彩度、B明度,原图,H色相Hue,好奇妙的色相變化喔！,25,練習：色彩三屬性,【問】灰度的图含有色彩資訊嗎？,CS3,26,色彩三属性-色相,色相環之一例,27,色彩模型之一例-色立体,將色彩的三属性，予以系統的排列，組成一個三度空間的立体形狀色彩分类结构图：以明度為垂直軸，愈上方明度越高以彩度為水平軸，愈接近明度軸彩度越低色相环,28,色彩種類,无彩色黑、灰、白有彩色即色相上所列之色彩，如紅、黃、藍等独立色即印刷上所謂的特別色如金、銀、螢光色等,29,色彩三屬性,調來調去，都是在調這三屬性,尤其是明暗對比(色階)！,就好像一白遮三醜，明暗對比適當了，影像品質也就差不多了！,30,日常照片的常見處理：調整明暗對比,雖然拍得不好但萬一還是要用，也可以處理看看喔！,明暗階調真的很重要,31,練習：色彩三屬性,Photoshop影像調整色相飽和度,32,通道(Channel)和色彩模式(Mode),通道是儲存不同类型资讯的灰阶图像：当你打开新的图像时，会自动建立色彩资讯通道。图像的色彩模式(Mode)決定了建立的彩色通道数目。例如，RGB图像有四個預設通道：其中三個分別用于紅色、綠色和藍色，再加上一個编辑图像的复合通道。,灰階=程度！,第一段再看一次,33,视图通道(Channel),RGB模式時：3色版,CMYK模式時：4色版,給我3MB空間,那給我4MB,34,图像的色彩深度,也就是說,有展現多少色的能耐！,嗚我只有12色的,我有36色的雄獅蠟筆！,我有水彩隨便我要調什麼顏色！,35,色彩深度(位元),1位元黑白黑白2色變化8位元灰階256色灰階變化16位元高彩65,536種色彩變化24位元全彩16,777,216種色彩變化-8位元索引色最多256種變化,同樣長寬時,在不壓縮情況下檔案大小的比較,就看位元的倍數,36,色彩深度-1位元(bit),21=2黑白2色變化,雖然只有2色，竟然沒有想像中單調也能有典雅的感覺,37,色彩深度-2位元(bits),22=4黑灰白4阶变化,色阶还很明显的不连续,38,色彩深度-8位元(bits),28=256如为灰度,有256阶变化,當您的眼睛已分辨不出一阶阶時連續色調和觀看距離之遠近有關,39,28=256,請複誦三次！,40,PhotoshopCS版16位元(Bits/Channel),28=256216=65,536,232=65,536x65,536=?,CS3,41,【問】灰階與黑白樣嗎？,42,色彩深度-24位元(bits),28x28x28=16,777,216(1千6百多萬),RGB,大自然色彩遠超過這個，不過在螢幕上，諒你的眼睛也沒厲害到都分辨的出來,色光三原色各用256階表示其強度,43,【問】色彩深度-16位元(bits)通道,28=256216=65,536,216x216x216=(224x224)=16,777,216x16,777,216(快算不出了),RGB,如果每個通道不只256階，而是更細緻的65,536階呢？,44,【问】不压缩的位图有多大？,长x宽x色彩深度例：1024x768x3Bytes=2.25MB那一張300dpi全开的研讨会或电影海报呢？,還真大,45,【问】这么多色彩，該如何精确表达？,色名色彩的表达茶花紅海棠紅枸杞紅滿江紅潤紅緋紅,雞血石紅猩猩紅曙色芙蓉紅落霞紅朱紅,看了古時候這些色名，你能想像那到底是什麼色嗎?,46,【問】这么多色彩，該如何精确表达？,几种主要的色彩值表示方式,10進位式：0255,H:360度式,百分比式,16进位式：00FF,47,中场练习,顏色的設定Photoshop,48,色彩深度-索引色indexcolor,最多256色,网页上常用的GIF图就是属于这种。因为顏色少，所以图像可以压缩到很小。,从2色到最多256色,49,色彩深度-索引色,4色(10K),8色(14K),顏色虽然少，但也許會有特別的風格喔,可以從1千6百多萬色中，任意挑選出所要顏色,50,色彩深度-索引色,你的4色,我的4色,(Windows和Mac的色盤也未必相同)但，同樣挑四個顏色，我挑的和你挑的未必相同,51,既然每個人挑的顏色都不見得相同,网页安全色彩（216色）,全彩,网页安全色彩,顏色少多了，而且色阶明显地不连续,大家都一樣從這216種顏色裡挑吧,52,网页安全色彩（216色）,网页的色彩表示用“RRGGBB”16进制，每色由“00”（最暗）至“FF”（最亮）网页的安全色彩為R、G、B值各为以下6种值之一：“00”、“33”、“66”、“99”、“CC”、“FF”共666216,53,【联系】以16进制表示以下色彩,网页的色彩表示“RRGGBB”16进制表示法(0F),000000,666666,cccccc,FFFFFF,0000FF,00FF00,FF0000,54,色域(gamut),你扫描后的图片，萤幕上的色彩，和原來的图片樣嗎？你萤幕上的档案，印出來後，色彩和螢幕上的樣嗎？同樣這个图片，你从这台CRT螢幕上看，和拿到另台液晶螢幕上看，色彩樣嗎？.，色彩樣嗎？,樣嗎？,不同种类的设备，有不同的“色域”！,為什麼不樣？,55,色域(gamut),重要概念,色光类的设备，为RGB色域色料类(要印出來的)的设备，为CMY色域Lab被視為一种与装置无关的色彩模型，包含所有的可见色彩,不同种类的设备，有不同的色域！,56,色域(gamut),不同种类的设备，有不同的“色域”！螢幕掃描器數位相机印表机印刷机,各种装置和文件的色域范围A.Lab色域(整個可见光谱)B.文件(使用中色域)C.裝置,57,色彩管理,色彩管理的缘起尽量维持从輸入到輸出色彩之一致性色彩不一致的原因色域色彩空間不一设备呈色性質不一设备元件良窳不一,別奢望你那便宜的印表机印出來的顏色，會和螢幕上看的一樣了,58,注意：逝者难追,舍弃的资讯、細节再也回不來例：彩色灰階or黑白彩色？RGBCMYKRGB？大張小張大張？,网页上的图像，通常已舍弃大量資訊！,嗄那不就好不了,59,图像格式大比拼,存成什麼格式好呢,我!我!,選我!,我啦!,60,三大网页图像格式的火拼,GIF,JPG,PNG,既然不壓縮的檔很大，那就壓縮吧,61,你的图像性质是,照片通常是JPG全彩(色调连续，肤色自然),美工(卡通)图案通常是GIF檔最多256色(色块明显),62,三大网页图像格式,GIF圖形交替格式(GraphicsInterchangeFormat)是全球資訊網和其他線上服務上，在超文字標記語言(HTML)文件中顯示索引色圖像和影像常用的檔案格式。GIF是一種LZW壓縮的格式，可以最小化檔案大小和電子傳輸的時間。GIF格式可以保留索引色影像中的透明，但卻不能支援Alpha色版。,本段直接摘自Photoshop7說明,少講一個很重要的：最多256色！,63,三大網頁圖檔格式,JPEG靜態影像壓縮標準(JointPhotographicExpertsGroup)是全球資訊網和其他線上服務上，在超文字標記語言(HTML)文件中顯示照片和其他連續色調影像常用的格式。BMP格式支援CMYK、RGB和灰階色彩模式，且不支援Alpha色版。與GIF格式不同的是，JPEG會保留RGB影像中所有的顏色資訊，但會選擇性地放棄資料以壓縮檔案大小。JPEG影像會在開啟時自動地解除壓縮。較高的壓縮層級會導致影像的品質較低，而較低的壓縮層級會導致影像品質較佳。在多數的情況下，最大的品質選項製造的結果，與原始影像幾乎沒有差別。,本段直接摘自Photoshop7說明,64,三大网页图像格式,PNG可携式网络图像(PortableNetworkGraphics)是研發出來的另一種無專利的格式(除GIF外的另一種格式)，可以用來進行無減色壓縮和在全球資訊網上顯示影像。與GIF不同的是：PNG支援24位元影像，並且可以製造沒有锯齿边缘的背景透明。但是，有些網頁瀏覽器不支援PNG影像。PNG格式支援沒有Alpha色版的RGB、索引色、灰階和點陣圖模式影像。PN