photoshop圖形圖像設(shè)計(jì)與項(xiàng)目實(shí)踐ppt課件

單擊此處編輯母版標(biāo)題樣式,單擊此處編輯母版文本樣式,第二級(jí),第三級(jí),第四級(jí),第五級(jí),*,第,12,章,Web,圖形和動(dòng)畫,12.1,關(guān)于,Web,圖像,12.2,切片,12.3,制作翻轉(zhuǎn)圖像或按鈕,12.4,制作動(dòng)畫,12.5,優(yōu)化并輸出,Web,圖像,12.6,應(yīng)用實(shí)例,12.7,習(xí)題與實(shí)驗(yàn)指導(dǎo),主目錄,第12章 Web圖形和動(dòng)畫 12.1 關(guān)于Web圖像,12.1,關(guān)于,Web,圖像,12.1.1,常用的,Web,圖像格式,Web,圖像主要有三種圖像文件格式，分別為,JPEG,、,GIF,、,PNG,格式。,GIF,格式：,通過(guò)減少圖像中的顏色數(shù)目來(lái)壓縮文件，因此適合顏色比較少的圖像，如圖標(biāo)、符號(hào)、邊框等。另外,GIF,格式還可以保存透明圖像和動(dòng)畫圖像。,JPEG,格式：,通過(guò)刪除圖像中的數(shù)據(jù)信息來(lái)壓縮文件，雖然也是有損壓縮，但是不會(huì)改變圖像的顏色數(shù)目，因此適合色彩豐富，文件較大的圖像，但是不支持透明圖像。,PNG,格式：,采用無(wú)損壓縮方式來(lái)減少文件的大小，兼有,GIF,和,JPG,的色彩模式，不但能把圖像文件壓縮到極限又能保留所有與圖像品質(zhì)有關(guān)的信息，支持透明圖像，不支持動(dòng)畫圖像。,12.1 關(guān)于Web圖像12.1.1 常用的Web圖像格,12.1.2,設(shè)計(jì),Web,圖像,Web,圖像通常是低分辨率的，一般設(shè)置為,72,像素,/,英寸，而且通常采用,RGB,色彩模式。一個(gè),Web,頁(yè)面是各種圖像，文字和符號(hào)等信息內(nèi)容的綜合體，如何合理編排優(yōu)化各種內(nèi)容是,Web,圖像設(shè)計(jì)的關(guān)鍵。,Web,圖像設(shè)計(jì)包括如下內(nèi)容：,背景設(shè)計(jì),文本設(shè)計(jì),圖片設(shè)計(jì),圖標(biāo)設(shè)計(jì),動(dòng)畫設(shè)計(jì),本章目錄,12.1.2 設(shè)計(jì)Web圖像 Web圖像通常是低分辨率,12.2,切片,使用“切片工具”可以將一幅圖像切割成若干個(gè)小圖像，每個(gè)圖像切片都包含獨(dú)立的調(diào)色板、,URL,鏈接對(duì)象和優(yōu)化設(shè)置，可以提高圖像的上傳下載速度。一般應(yīng)用于網(wǎng)絡(luò)的大圖或設(shè)計(jì)網(wǎng)頁(yè)以及制作各種圖標(biāo)、圖像，用戶還可以利用切分制作翻轉(zhuǎn)使用的圖片組。,12.2 切片使用“切片工具”可以將一幅圖像切割成若,12.2.1,創(chuàng)建切片,1,用戶自定義切片,使用“切片工具”繪制切片的基本步驟如下：,（,1,）從工具箱中選擇“切片工具”工具。,（,2,）單擊選項(xiàng)欄中的切片列表，從中選擇一項(xiàng)：正常、約束長(zhǎng)寬比、固定大小。,（,3,）移動(dòng)切片工具到圖像上，并在要?jiǎng)?chuàng)建切片的區(qū)域上拖動(dòng)。按住,Shift,鍵可產(chǎn)生正方形切片，按住,Alt,Shift,鍵可以單擊點(diǎn)為中心向外擴(kuò)展正方形，如下圖所示。,用戶自定義切片,12.2.1 創(chuàng)建切片 1用戶自定義切片用戶自定義切,2,基于圖層的切片,使用“新建基于圖層的切片”菜單命令創(chuàng)建基于圖層的切片的基本步驟如下：,（,1,）在“圖層調(diào)板”新建一個(gè)“圖層,1”,。,（,2,）在該圖層里，使用“矩形”工具 繪制一矩形。,（,3,）選擇“圖層,新建基于圖層的切片”命令，自動(dòng)創(chuàng)建切片，如下圖所示。,基于圖層的切片,2基于圖層的切片基于圖層的切片,3,基于參考線的切片,創(chuàng)建基于參考線的切片的基本步驟如下：,（,1,）向圖像中添加參考線。,（,2,）選擇“切片工具”，然后在選項(xiàng)欄中單擊“基于參考線的切片”，如下圖所示。,基于參考線的切片,3基于參考線的切片 基于參考線的切片,4,自動(dòng)切片提升到用戶切片,在創(chuàng)建新的用戶切片或基于圖層的切片時(shí)，將會(huì)生成附加自動(dòng)切片來(lái)占據(jù)圖像的其余區(qū)域。換句話說(shuō)，自動(dòng)切片填充圖像中用戶切片或基于圖層的切片未定義的空間。每次添加或編輯用戶切片或基于圖層的切片時(shí)，都會(huì)重新生成自動(dòng)切片?？梢詫⒆詣?dòng)切片轉(zhuǎn)換為用戶切片。,4自動(dòng)切片提升到用戶切片,12.2.2,修改切片,移動(dòng)切片：,用“切片選擇”工具選擇要移動(dòng)的用戶切片，然后按住鼠標(biāo)左鍵不放，拖動(dòng)“切片”即可改變用戶切片的位置，如右圖所示。,改變切片大小,：,拖動(dòng)“用戶切片”四周的手柄則可以改變大小，如右圖所示。,如果要修改切片，首先要選擇切片。通過(guò)“切片選擇”工具單擊圖片可選則切片，按住,Shift,鍵可以選擇多個(gè)切片。,移動(dòng)切片,改變切片大小,12.2.2 修改切片 移動(dòng)切片：如果要修改切,復(fù)制切片：,選定一個(gè)或多個(gè)“用戶切片”，按,Ctrl,鍵不放，拖動(dòng)切片，即可復(fù)制切片，如右圖所示。,刪除切片：,選定一個(gè)或多個(gè)“用戶切片”，單擊右鍵，在彈出的菜單中選擇“刪除切片”選項(xiàng)，或者按,Del,鍵也可以刪除切片。,組合切片：,對(duì)于選定的多個(gè)“用戶切片”，可執(zhí)行“組合切片”命令，如右圖所示。,復(fù)制切片,選擇兩個(gè)切片圖,組合切片,復(fù)制切片：復(fù)制切片 選擇兩個(gè)切片圖 組合切片,12.2.3,劃分切片,對(duì)要切分的切片單擊“右鍵”，在彈出菜單中選擇“劃分切片”命令。在彈出的劃分切片對(duì)話框中輸入水平劃分垂直劃分的參數(shù)，如圖所示。,水平劃分 垂直劃分 水平劃分 垂直劃分,12.2.3 劃分切片 對(duì)要切分的切片單擊“右鍵”，在,12.2.4,切片屬性,切片類型：,默認(rèn)情況下，切片類型為“圖像”，切片包含圖像數(shù)據(jù)；若選擇無(wú)圖像，切片包含純色或,HTML,文本。,名稱：,定義切片的名稱,URL,：,在,URL,文本框中輸入鏈接地址，創(chuàng)建超級(jí)鏈接。,目標(biāo)：,設(shè)置打開(kāi)鏈接位置的窗口狀態(tài)。,信息文本：,切片選項(xiàng)調(diào)板會(huì)提示輸入一段文本，在網(wǎng)頁(yè)上使用這段文本代替切片。,Alt,標(biāo)記：,如果在該輸入框輸入內(nèi)容，則當(dāng)光標(biāo)接觸到切片時(shí)，這些內(nèi)容就會(huì)在光標(biāo)旁的提示信息中顯示出來(lái)。,尺寸：,設(shè)置切片的尺寸。,切片背景類型：,設(shè)置空白切片的背景。,切片選項(xiàng)對(duì)話框,用戶可以使用切片選項(xiàng)來(lái)指定切片數(shù)據(jù)顯示在,Web,瀏覽器中的方式，右鍵單擊切片，在快捷菜單中選擇“編輯切片選項(xiàng)”命令，就會(huì)彈出切片選項(xiàng)對(duì)話框，如下圖所示。,本章目錄,12.2.4 切片屬性 切片類型：默認(rèn)情況下，切片類型,12.3,制作翻轉(zhuǎn)圖像或按鈕,翻轉(zhuǎn)是網(wǎng)頁(yè)上的一個(gè)按鈕或圖像，當(dāng)鼠標(biāo)移動(dòng)到它上方時(shí)會(huì)發(fā)生變化。要?jiǎng)?chuàng)建翻轉(zhuǎn)，至少需要兩個(gè)圖像：主圖像表示處于正常狀態(tài)的圖像，而次圖像表示處于更改狀態(tài)的圖像。,目前,Photoshop CS3,雖然沒(méi)有提供翻轉(zhuǎn)功能，但用戶可以通過(guò),Photoshop CS3,的繪制工具和切片工具來(lái)制作用于翻轉(zhuǎn)圖像或按鈕的圖像組，最后使用,Dreamweaver CS3,將這些圖像置入網(wǎng)頁(yè)中并添加,Javascript,代碼制作翻轉(zhuǎn)，具體方法如下：,1,使用圖層創(chuàng)建主圖像和次圖像。,2,將每個(gè)圖層存儲(chǔ)為單獨(dú)的圖像以創(chuàng)建完成的翻轉(zhuǎn)按鈕組。,本章目錄,12.3 制作翻轉(zhuǎn)圖像或按鈕翻轉(zhuǎn)是網(wǎng)頁(yè)上的一個(gè)按鈕或,12.4,制作動(dòng)畫,Photoshop CS3,能夠制作出網(wǎng)頁(yè),GIF,動(dòng)畫。,GIF,動(dòng)畫就是設(shè)置好一系列,圖像或幀的順序、裝載時(shí)間和播放次數(shù)等，類似于電影膠片的原理。制作,動(dòng)畫需要結(jié)合應(yīng)用“圖層”和動(dòng)畫調(diào)板，且處理圖層是創(chuàng)建動(dòng)畫的關(guān)鍵，如,下圖所示。,動(dòng)畫調(diào)板,幀延遲時(shí)間,刪除,所選幀,復(fù)制所選幀,過(guò)渡動(dòng)畫,幀,選擇下一,幀,播放動(dòng)畫,選擇上一,幀,選擇第一,幀,12.4 制作動(dòng)畫 Photoshop CS3能夠制作,12.4.1,幀動(dòng)畫,本節(jié)通過(guò)制作一個(gè)簡(jiǎn)單的打字動(dòng)畫來(lái)詳細(xì)了解制作幀動(dòng)畫的基本方法，如下圖所示。,打字動(dòng)畫,12.4.1 幀動(dòng)畫 本節(jié)通過(guò)制作一個(gè)簡(jiǎn)單的打字動(dòng)畫來(lái),12.4.2,過(guò)渡動(dòng)畫,本節(jié)通過(guò)制作一個(gè)“跳動(dòng)的球”動(dòng)畫來(lái)詳細(xì)了解制作過(guò)渡動(dòng)畫的基本方法，如下圖所示。,跳動(dòng)的球動(dòng)畫,本章目錄,12.4.2 過(guò)渡動(dòng)畫 本節(jié)通過(guò)制作一個(gè)“跳動(dòng)的球”動(dòng),12.5,優(yōu)化并輸出,Web,圖像,優(yōu)化網(wǎng)頁(yè)圖像是在保證圖像質(zhì)量的前提下盡量使文件體積減小，以便于在網(wǎng)上傳輸。而在制作網(wǎng)頁(yè)時(shí)要用到很多圖片，如果這些圖片教大，就會(huì)影響網(wǎng)頁(yè)的瀏覽速度。,Photoshop CS3,提供了強(qiáng)大的優(yōu)化輸出工具，用戶能夠在壓縮圖像文件大小的同時(shí)又能優(yōu)化在線顯示圖像的品質(zhì)。,12.5 優(yōu)化并輸出Web圖像 優(yōu)化網(wǎng)頁(yè)圖像是在保證圖,12.5.1,優(yōu)化并輸出圖像,選擇“文件”,“,存儲(chǔ)為,Web,和設(shè)備所用格式”命令，即可彈出“存儲(chǔ)為,Web,和設(shè)備所用格式”對(duì)話框，如右圖所示。在對(duì)話框中可以選擇輸出,JPEG,、,GIF,、,PNG,等一般常用的網(wǎng)頁(yè)圖像的格式，設(shè)置相應(yīng)的優(yōu)化參數(shù)。,視圖的顯示方式可以有優(yōu)化、雙聯(lián)、四聯(lián)，如在四聯(lián)視圖模式下，用戶可以看到原始圖像，也可以看到其他,3,種不同壓縮方式的預(yù)覽圖，每個(gè)預(yù)覽都顯示了文件的大小和下載時(shí)間，也可以用工具箱里的工具對(duì)預(yù)覽圖進(jìn)行移動(dòng)、縮放及顏色取樣等操作。,“,存儲(chǔ)為,Web,和設(shè)備所用格式”對(duì)話框,12.5.1 優(yōu)化并輸出圖像選擇“文件”“存儲(chǔ)為We,12.5.2 Web,圖像文件的格式的選擇及其優(yōu)化,1.JPEG,。,擅長(zhǎng)壓縮圖片，可提供完全的,32,位顏色，但不允許使圖像的部分透明，如果用了過(guò)高的壓縮值，,JPEG,會(huì)導(dǎo)致嚴(yán)重的圖像失真，如右圖所示。,預(yù)設(shè)：已存儲(chǔ)的優(yōu)化設(shè)置,文件格式：,JPEG,壓縮品質(zhì)：下拉列表有低、中、高、非常高、最佳,5,個(gè)選項(xiàng)可以選擇。,連續(xù)：在,Web,瀏覽器中以漸進(jìn)方式顯示圖像。,IOC,配置文件：隨文件一起保留圖片的,ICC,配置文件。,優(yōu)化：創(chuàng)建文件大小稍小的增強(qiáng),JPEG,。,品質(zhì)：微調(diào)壓縮品質(zhì)。,模糊：指定應(yīng)用于圖像的模糊量。,雜邊：為在原始圖像中透明的像素指定一個(gè)填充顏色。,優(yōu)化,JPEG,12.5.2 Web圖像文件的格式的選擇及其優(yōu)化 1.,2.GIF,格式。,適合單調(diào)顏色的圖片和較小的文件，支持有限的透明度，支持動(dòng)畫，但其壓縮方法是對(duì)顏色單調(diào),區(qū)域,優(yōu)化的，因此對(duì)較大的圖片效果比較差。優(yōu)化設(shè)置對(duì)話框如右圖所示。,優(yōu)化,GIF,預(yù)設(shè)：已存儲(chǔ)的優(yōu)化設(shè)置,文件格式：,GIF,減低顏色深度算法：指定用于生成顏色查找表的方法，以及想要在顏色查找表中使用的顏色數(shù)量。,仿色算法和仿色：確定應(yīng)用程序仿色的方法和數(shù)量。,透明度：選擇則啟用透明度的相關(guān)設(shè)置。,透明度設(shè)置：確定如何優(yōu)化圖像中的透明像素。,交錯(cuò)：當(dāng)完整圖像文件正在下載時(shí)，在瀏覽器中顯示圖像的低分辨率版本。,損耗：通過(guò)有選擇地扔掉數(shù)據(jù)來(lái)減小文件大小。,顏色：設(shè)置顏色的數(shù)量。,雜邊：為在原始圖像中透明的像素指定一個(gè)填充顏色。,Web,靠色：指定將顏色轉(zhuǎn)換為最接近的,Web,調(diào)板等效顏色的容差級(jí)別（并防止顏色在瀏覽器中進(jìn)行仿色）。,2.GIF格式。優(yōu)化GIF 預(yù)設(shè)：已存儲(chǔ)的優(yōu)化設(shè)置,3.PNG-8,能精確控制透明度，壓縮效果很好，但一些較老的瀏覽器不支持,PNG,所有的選項(xiàng)，常用于,FLASH,動(dòng)畫的圖片制作。優(yōu)化設(shè)置對(duì)話框如右圖所示，其具體的設(shè)置可參考,GIF,格式。,4.PNG-24,PNG-24,適合于壓縮連續(xù)色調(diào)圖像；但它所生成的文件比,JPEG,格式生成的文件要大得多。使用,PNG-24,的優(yōu)點(diǎn)在于可在圖像中保留多達(dá),256,個(gè)透明度級(jí)別。優(yōu)化設(shè)置對(duì)話框如右圖所示，其具體的設(shè)置可參考,GIF,格式。,優(yōu)化,PNG-8,優(yōu)化,PNG-24,3.PNG-8優(yōu)化PNG-8 優(yōu)化PNG-24,無(wú)仿色：根本不應(yīng)用仿色，同時(shí)用純黑和純白像素渲染圖像。,擴(kuò)散：應(yīng)用與“圖案”仿色相比通常不太明顯的隨機(jī)圖案。仿色效果在相鄰像素間擴(kuò)散。如果選擇此算法，請(qǐng)指定“仿色”百分比以控制應(yīng)用于圖像的仿色量。,圖案：應(yīng)用類似半調(diào)的方塊圖案來(lái)確定像素值。,雜色：應(yīng)用與“擴(kuò)散”仿色相似的隨機(jī)圖案，但不在相鄰像素間擴(kuò)散圖案。使用“雜色”算法時(shí)不會(huì)出現(xiàn)接縫。,5.WBMP,WBMP,格式是用于優(yōu)化移動(dòng)設(shè)備（如移動(dòng)電話）圖像的標(biāo)準(zhǔn)格式。,WBMP,支持,1,位顏色，意即,WBMP,圖像只包含黑色和白色像素。其優(yōu)化設(shè)置對(duì)話框如下圖所示。,仿色算法和“仿色”選項(xiàng)確定應(yīng)用程序仿色的方法和數(shù)量。為了獲得最佳壓縮比，請(qǐng)使用可提供所需細(xì)節(jié)的最低百分比的仿色?？梢赃x擇以下幾種仿色方法之一：,優(yōu)化,WBMP,無(wú)仿色：根本不應(yīng)用仿色，同時(shí)用純黑和純白像素渲染圖像,12.5.3,優(yōu)化切片圖像,（,1,）選擇“文件”,“,存儲(chǔ)為,Web,和設(shè)備所用格式”菜單命令，在彈出的對(duì)話框中進(jìn)行優(yōu)化設(shè)置，選擇“雙聯(lián)”，