Web圖形基礎及photoshop基本工具一

1、Web圖形制作聯(lián)系方式：計算中心123辦公室Mphone:mail：參考書目： Photoshop CS 平面設計 Photoshop CS 從入門到精通 美 Stephen Romaniello 著 魏海萍 于曉菲等譯 電子工業(yè)出版社Photoshop CS 3以假亂真的藝術英 Steve Caplin著 楊志鋒 楊昕立 等譯 電子工業(yè)出版社答疑安排日期周次時間地點每周五1-1614:30-15:00200機房/123辦公室第一課一、Web圖形基礎知識二、Photoshop基本操作三、 Photoshop基本工具（一）1、選擇工具一、WEB圖形基礎（一）什么是WEB

2、圖形Web圖形是指在網(wǎng)頁上使用的數(shù)字圖形。 網(wǎng)頁包含的信息豐富多彩，有聲音、圖像、視頻等多媒體信息。多媒體信息在網(wǎng)上傳輸，必須考慮文件大小、網(wǎng)絡速度等因素。因此，網(wǎng)頁上的圖片一般采用相應的處理方法,具有合適的格式。本課程目標: 使用Photoshop CS制作適合于網(wǎng)頁上使用的圖片和GIF動畫。 （二）數(shù)字圖像存儲方法1、光柵(位圖)圖像(1)特點: 由一個個像素網(wǎng)格點組成,文件中記錄每個像素點的顯示特征；圖像品質(zhì)取決于該圖像所含有的像素數(shù)量，或者說它的分辨率（圖像分辨率）；分辨率越高，文件容量越大?？s放圖像會發(fā)生邊緣變形現(xiàn)象。 一般由數(shù)碼相機、掃描儀、繪圖程序（corelphoto pain

3、t）、圖像處理程序（Photoshop）生成，常用格式有BMP、GIF、JPEG、TIF等。一、WEB圖形基礎（二）數(shù)字圖像存儲方法(2)與位圖有關的分辨率:分辨率：單位長度所包含的像素點數(shù)量，單位：像素/英寸。圖像分辨率：每英寸圖像中所含有的像素點個數(shù), 決定圖像品質(zhì)。用于屏幕顯示：72ppi；用于打?。?50ppi；用于印刷=300ppi。屏幕分辨率：顯示器單位長度顯示的像素點個數(shù), 決定顯示品質(zhì)。輸出分辨率：打印圖像時單位長度產(chǎn)生的油墨點數(shù),決定打印品質(zhì)。位分辨率：存儲每個像素點顏色信息的二進制位數(shù), 決定圖像色彩豐富程度, 又稱位深度。有1、8、16、32位。（二）數(shù)字圖像存儲方法2、

4、矢量圖形 用矢量線段描繪圖像,用數(shù)學公式記錄圖像，圖像內(nèi)容以線條和色塊為主。圖像質(zhì)量與分辨率無關，放大、縮小不會出現(xiàn)鋸齒狀邊緣變形現(xiàn)象。在任何分辨率下顯示或打印都不會損失細節(jié)，都能產(chǎn)生規(guī)則的清晰線條和邊緣。 多用于標志設計、插圖設計和工程制圖上。一般由Coreldraw、Flash、Autocad、3Dmax、fireworks等生成，常用文件格式有CDR、SWF、DWG、3DS、WMF等。（三）常用圖像文件格式1、JPEG：靜態(tài)圖像有損壓縮格式。可設置壓縮比率，壓縮比率的高低直接影響圖像品質(zhì)的高低。JPEG格式與其它圖像格式相比數(shù)據(jù)量小、色彩損失少，能真實反映原圖片，是網(wǎng)頁中廣泛使用的圖像格

5、式。2、GIF：可交換圖形格式。最多支持8位256色。主要用于保存帶有純色區(qū)域或清晰邊緣的圖像?？杀Ａ敉该鲄^(qū)域，有靜態(tài)和動態(tài)兩種方式。與其它格式相比文件小巧，適于網(wǎng)上傳輸、網(wǎng)頁設計等，網(wǎng)上動畫一般有GIF動畫或FLASH動畫。 （三）常用圖像文件格式3、PNG：一種無損壓縮格式，PNG-8：類似于8位GIF格式，使用256種顏色，支持透明區(qū)域，但不支持動畫。PNG-24：支持24位彩色，支持透明區(qū)域和雜邊顏色，適于保存照片。PNG-32：能支持32位顏色被認為是未來WEB圖形的主要格式。4、PSD：PHOTOSHOP專用文件格式。可以存儲圖像中所有的圖層、通道和輔助線等信息。5、BMP：Mic

6、rosoft公司開發(fā)的一種Windows系統(tǒng)下的標準圖像文件格式。支持RGB、索引顏色、灰度和位圖顏色模式，不支持Alpha通道和CMYK顏色模式。6、TIFF：一種無損壓縮格式。多用于桌面排版和圖形藝術，可以在多種圖像軟件之間轉(zhuǎn)換，是應用非常廣泛的一種圖像格式。二、Photoshop基本操作工作界面：菜單欄、選項欄、工具箱、各種面板、圖像編輯窗口Photoshop 層的解釋：一幅圖片可由多個圖層組成每個圖層可以是：透明的（畫布上無任何顏色）完全不透明（畫布有底色）部分透明（畫布上有些部分著色了）圖像的顯示效果是各層疊加之后的總體效果。上層遮蓋下層的程度由上層的透明度和混合模式?jīng)Q定三、Phot

7、oshop基本工具（一）（一）選取工具及選區(qū)變換1、幾何選取工具2、自由套索工具3、魔棒/快速選擇工具4、選擇菜單5、變換選區(qū)（二）移動工具選取的基本概念：圖像建立選區(qū)后，對圖像所執(zhí)行的任何操作只能影響選區(qū)中的圖像范圍，而選區(qū)外的圖像將會受到保護，不受執(zhí)行命令或操作的任何影響。切換選取工具：右擊矩形選取工具進行切換。選區(qū)的追加(shift)、削減(alt)和交集消除鋸齒：圖像中選區(qū)的弧邊或斜邊部分會產(chǎn)生鋸齒狀，可消除。羽化選區(qū)邊緣：進行羽化后，會以選取范圍的虛線框為效果中線，所設定的羽化半徑為效果的寬度，將選區(qū)范圍的邊緣區(qū)域做霧化處理。該區(qū)域又叫半選取區(qū)域。（一）選取工具1、幾何選取工具組 :

8、單擊并拖動鼠標創(chuàng)建形狀規(guī)則的選區(qū) 。（一）選取工具Shift+拖動創(chuàng)建正方形或圓形選區(qū)Alt+拖動從中心點開始創(chuàng)建選區(qū)Shift+Alt+拖動從中心點開始創(chuàng)建正方形或圓形選區(qū)在選區(qū)內(nèi)拖動鼠標繪制后重新定位選區(qū)2、套索工具組 :選取顏色復雜、邊緣不規(guī)則的區(qū)域 一般套索工具：單擊并拖動鼠標，用選框圍住待選區(qū)域。 多邊形套索工具：單擊并拖動鼠標創(chuàng)建直邊選框的各邊。 Shift+單擊：繪制水平、垂直或45度的線段 磁性套索工具 ：依據(jù)圖像中像素的對比度值“直覺地”建立選區(qū)。當單擊并拖動鼠標時，此工具放置一條路徑，這條路徑被吸引到兩個反差區(qū)域的邊界上。當松開鼠標時，這條路徑就變成一個選區(qū)。 （一）選取工

9、具3、魔棒工具 : 根據(jù)像素顏色與亮度的相似性建立“自動”選區(qū),一般用于選取一定顏色范圍內(nèi)的圖像區(qū)域。方法：在要選取的區(qū)域上單擊鼠標，與單擊點像素顏色和亮度相似的區(qū)域被選中。容差：0255，系統(tǒng)默認32。用來設置與單擊點像素顏色值的差別范圍?？焖龠x擇工具 : 以涂抹方式“畫出”不規(guī)則選區(qū),能快速選擇多個顏色相近的區(qū)域。方法：在要選取的區(qū)域上拖動鼠標，顏色和亮度相似的區(qū)域被選中。（一）選取工具4、選擇菜單: 創(chuàng)建或改變選區(qū)全選（CTRL+A）取消選擇（CTRL+D）反選（CTRL+SHIFT+I）羽化（CTRL+ALT+D）修改變換載入色彩范圍（一）選取工具5、變換選區(qū):CTRL+T：自由變換C

10、TRL+拖動邊框中點：斜切CTRL+拖動角點：透視扭曲SHIFT+拖動角點：縮放CTRL+SHIFT+T：再次應用前一個變換CTRL+SHIFT+ALT+T：再次應用并復制前一個變換（一）選取工具（二）移動工具Shift+拖動沿45度方向移動方向鍵：每次移動1個像素點的距離shift+方向鍵 每次移動10個像素點的距離拖動選區(qū)到另一個圖像文件復制選區(qū)到另一個圖像文件中形成一個新層shift+拖動選區(qū)到另一個圖像文件復制選區(qū)到另一個圖像文件中形成一個新層，并放置在圖層中心位置。移動工具使用技巧 任務一：瀏覽圖片練習1: 打開圖片“瀑布.jpg” 練習內(nèi)容: 縮放工具, 抓手工具, 顯示模式按鈕練

11、習2: 打開圖片“太陽.psd”瀏覽多層圖片“練習內(nèi)容: 注意當前圖層標記, 圖層縮略圖, 顯示狀態(tài)標記上機實踐任務以下各題效果參照“第一課各題效果.HTML”任務二：新建圖片文件練習1: 新建圖片文件“自己姓名.jpg”要求: 400300像素,72像素/英寸,RGB8位,白色背景 操作提示: 設置前/背景色為藍#0000FF/白#FFFFFF,使用云彩濾鏡,輸入文字,移動文字到合適位置練習2: 新建圖片文件“自己姓名1. psd” 要求：300200像素、 72像素/英寸、RGB8位，綠色背景#006633練習3：新建圖片文件“自己姓名2. psd” 要求：300200像素、 72像素/英

12、寸、RGB8位，透明背景；文字顏色#FF0033、華文行楷、72點。任務三：幾何選取工具練習1：對“童年.jpg”制作模糊邊界效果操作提示: 創(chuàng)建矩形羽化20選區(qū), 反選, del清除選區(qū)練習2： 將圖片“大熊貓.jpg”制作橢圓模糊邊界效果操作提示: 創(chuàng)建橢圓羽化20選區(qū)、反選、del清除選區(qū)練習3：打開圖片 “車輪.jpg” 制作樣張效果操作提示: 創(chuàng)建橢圓選區(qū), 變換選區(qū), 復制選區(qū), 移動圖層任務四：套索工具練習1 : 打開“view.psd”使用套索工具制作樣張效果操作提示: 創(chuàng)建多邊形選區(qū), DEL清除選區(qū)練習2: 打開“柵欄.jpg”使用套索工具制作樣張效果操作提示: 創(chuàng)建多邊形

13、選區(qū), 復制選區(qū), 移動圖層練習3 : 打開“人物1.psd”使用套索工具制作樣張效果操作提示: 創(chuàng)建多邊形選區(qū), 復制選區(qū), 移動圖層任務五：魔棒/快速選擇工具練習1：打開“人物2.jpg, 街景.jpg”制作樣張效果操作提示:用魔棒/快速選擇工具選取人物背景同色區(qū)域，反選選中人物，再用套索加/減選以精確選區(qū)復制/粘貼選區(qū), 生成新圖層自由變換新圖層，移動新圖層到合適位置練習2：打開“模特.jpg, 櫻花.jpg”制作樣張效果操作提示:快速選擇工具選取人物背景同色區(qū)域，加/減選以精確選區(qū)使用“調(diào)整邊緣”選項柔化選區(qū)邊緣。復制/粘貼選區(qū)到櫻花圖像中合適位置任務六：選擇菜單練習1： 打開圖片”26.jpg”, 修整邊緣，效果參照樣張操作提示：選擇背景，反選手選區(qū)，復制粘貼到新建的白色背景圖像中；選擇/ 載入選區(qū)，選擇/修改/收縮 (2個像素)，再用選擇/修改/羽化 (2個像素)柔化邊緣；反選后清除邊緣藍色像素點。練習2：打開圖片”32.psd” ，制作樣張效果操作提示：用”選擇/色彩范圍”菜單命令創(chuàng)建選區(qū), 清除選區(qū)內(nèi)容。任務七：自由變換工具練習1： 打開圖片”314.psd”制作打開的門 ，效果參照樣張操作提示：創(chuàng)建門選區(qū), 自由變換選區(qū)(ctrl+拖角點)，將門打開; 復制原門左邊長條區(qū)域,自由變換后移動到門把手左邊，制作門厚度.練習2： 打開圖片”bike.p