Web圖形基礎(chǔ)及photoshop基本工具一

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

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

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

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

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

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

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

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

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

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

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

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

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