photoshop圖形圖像設(shè)計與項目實踐ppt課件

《photoshop圖形圖像設(shè)計與項目實踐ppt課件》由會員分享，可在線閱讀，更多相關(guān)《photoshop圖形圖像設(shè)計與項目實踐ppt課件（26頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、單擊此處編輯母版標題樣式,單擊此處編輯母版文本樣式,第二級,第三級,第四級,第五級,*,第,12,章,Web,圖形和動畫,12.1,關(guān)于,Web,圖像,12.2,切片,12.3,制作翻轉(zhuǎn)圖像或按鈕,12.4,制作動畫,12.5,優(yōu)化并輸出,Web,圖像,12.6,應(yīng)用實例,12.7,習(xí)題與實驗指導(dǎo),主目錄,第12章 Web圖形和動畫 12.1 關(guān)于Web圖像,12.1,關(guān)于,Web,圖像,12.1.1,常用的,Web,圖像格式,Web,圖像主要有三種圖像文件格式，分別為,JPEG,、,GIF,、,PNG,格式。,GIF,格式：,通過減少圖像中的顏色數(shù)目來壓縮文件，因此適合顏色比較少的圖像，如圖

2、標、符號、邊框等。另外,GIF,格式還可以保存透明圖像和動畫圖像。,JPEG,格式：,通過刪除圖像中的數(shù)據(jù)信息來壓縮文件，雖然也是有損壓縮，但是不會改變圖像的顏色數(shù)目，因此適合色彩豐富，文件較大的圖像，但是不支持透明圖像。,PNG,格式：,采用無損壓縮方式來減少文件的大小，兼有,GIF,和,JPG,的色彩模式，不但能把圖像文件壓縮到極限又能保留所有與圖像品質(zhì)有關(guān)的信息，支持透明圖像，不支持動畫圖像。,12.1 關(guān)于Web圖像12.1.1 常用的Web圖像格,12.1.2,設(shè)計,Web,圖像,Web,圖像通常是低分辨率的，一般設(shè)置為,72,像素,/,英寸，而且通常采用,RGB,色彩模式。一個,W

3、eb,頁面是各種圖像，文字和符號等信息內(nèi)容的綜合體，如何合理編排優(yōu)化各種內(nèi)容是,Web,圖像設(shè)計的關(guān)鍵。,Web,圖像設(shè)計包括如下內(nèi)容：,背景設(shè)計,文本設(shè)計,圖片設(shè)計,圖標設(shè)計,動畫設(shè)計,本章目錄,12.1.2 設(shè)計Web圖像 Web圖像通常是低分辨率,12.2,切片,使用“切片工具”可以將一幅圖像切割成若干個小圖像，每個圖像切片都包含獨立的調(diào)色板、,URL,鏈接對象和優(yōu)化設(shè)置，可以提高圖像的上傳下載速度。一般應(yīng)用于網(wǎng)絡(luò)的大圖或設(shè)計網(wǎng)頁以及制作各種圖標、圖像，用戶還可以利用切分制作翻轉(zhuǎn)使用的圖片組。,12.2 切片使用“切片工具”可以將一幅圖像切割成若,12.2.1,創(chuàng)建切片,1,用戶自定義切

4、片,使用“切片工具”繪制切片的基本步驟如下：,（,1,）從工具箱中選擇“切片工具”工具。,（,2,）單擊選項欄中的切片列表，從中選擇一項：正常、約束長寬比、固定大小。,（,3,）移動切片工具到圖像上，并在要創(chuàng)建切片的區(qū)域上拖動。按住,Shift,鍵可產(chǎn)生正方形切片，按住,Alt,Shift,鍵可以單擊點為中心向外擴展正方形，如下圖所示。,用戶自定義切片,12.2.1 創(chuàng)建切片 1用戶自定義切片用戶自定義切,2,基于圖層的切片,使用“新建基于圖層的切片”菜單命令創(chuàng)建基于圖層的切片的基本步驟如下：,（,1,）在“圖層調(diào)板”新建一個“圖層,1”,。,（,2,）在該圖層里，使用“矩形”工具 繪制一矩形

5、。,（,3,）選擇“圖層,新建基于圖層的切片”命令，自動創(chuàng)建切片，如下圖所示。,基于圖層的切片,2基于圖層的切片基于圖層的切片,3,基于參考線的切片,創(chuàng)建基于參考線的切片的基本步驟如下：,（,1,）向圖像中添加參考線。,（,2,）選擇“切片工具”，然后在選項欄中單擊“基于參考線的切片”，如下圖所示。,基于參考線的切片,3基于參考線的切片 基于參考線的切片,4,自動切片提升到用戶切片,在創(chuàng)建新的用戶切片或基于圖層的切片時，將會生成附加自動切片來占據(jù)圖像的其余區(qū)域。換句話說，自動切片填充圖像中用戶切片或基于圖層的切片未定義的空間。每次添加或編輯用戶切片或基于圖層的切片時，都會重新生成自動切片?？梢?/p>

6、將自動切片轉(zhuǎn)換為用戶切片。,4自動切片提升到用戶切片,12.2.2,修改切片,移動切片：,用“切片選擇”工具選擇要移動的用戶切片，然后按住鼠標左鍵不放，拖動“切片”即可改變用戶切片的位置，如右圖所示。,改變切片大小,：,拖動“用戶切片”四周的手柄則可以改變大小，如右圖所示。,如果要修改切片，首先要選擇切片。通過“切片選擇”工具單擊圖片可選則切片，按住,Shift,鍵可以選擇多個切片。,移動切片,改變切片大小,12.2.2 修改切片 移動切片：如果要修改切,復(fù)制切片：,選定一個或多個“用戶切片”，按,Ctrl,鍵不放，拖動切片，即可復(fù)制切片，如右圖所示。,刪除切片：,選定一個或多個“用戶切片”，

7、單擊右鍵，在彈出的菜單中選擇“刪除切片”選項，或者按,Del,鍵也可以刪除切片。,組合切片：,對于選定的多個“用戶切片”，可執(zhí)行“組合切片”命令，如右圖所示。,復(fù)制切片,選擇兩個切片圖,組合切片,復(fù)制切片：復(fù)制切片 選擇兩個切片圖 組合切片,12.2.3,劃分切片,對要切分的切片單擊“右鍵”，在彈出菜單中選擇“劃分切片”命令。在彈出的劃分切片對話框中輸入水平劃分垂直劃分的參數(shù)，如圖所示。,水平劃分 垂直劃分 水平劃分 垂直劃分,12.2.3 劃分切片 對要切分的切片單擊“右鍵”，在,12.2.4,切片屬性,切片類型：,默認情況下，切片類型為“圖像”，切片包含圖像數(shù)據(jù)；若選擇無圖像，切片包含純色

8、或,HTML,文本。,名稱：,定義切片的名稱,URL,：,在,URL,文本框中輸入鏈接地址，創(chuàng)建超級鏈接。,目標：,設(shè)置打開鏈接位置的窗口狀態(tài)。,信息文本：,切片選項調(diào)板會提示輸入一段文本，在網(wǎng)頁上使用這段文本代替切片。,Alt,標記：,如果在該輸入框輸入內(nèi)容，則當光標接觸到切片時，這些內(nèi)容就會在光標旁的提示信息中顯示出來。,尺寸：,設(shè)置切片的尺寸。,切片背景類型：,設(shè)置空白切片的背景。,切片選項對話框,用戶可以使用切片選項來指定切片數(shù)據(jù)顯示在,Web,瀏覽器中的方式，右鍵單擊切片，在快捷菜單中選擇“編輯切片選項”命令，就會彈出切片選項對話框，如下圖所示。,本章目錄,12.2.4 切片屬性 切

9、片類型：默認情況下，切片類型,12.3,制作翻轉(zhuǎn)圖像或按鈕,翻轉(zhuǎn)是網(wǎng)頁上的一個按鈕或圖像，當鼠標移動到它上方時會發(fā)生變化。要創(chuàng)建翻轉(zhuǎn)，至少需要兩個圖像：主圖像表示處于正常狀態(tài)的圖像，而次圖像表示處于更改狀態(tài)的圖像。,目前,Photoshop CS3,雖然沒有提供翻轉(zhuǎn)功能，但用戶可以通過,Photoshop CS3,的繪制工具和切片工具來制作用于翻轉(zhuǎn)圖像或按鈕的圖像組，最后使用,Dreamweaver CS3,將這些圖像置入網(wǎng)頁中并添加,Javascript,代碼制作翻轉(zhuǎn)，具體方法如下：,1,使用圖層創(chuàng)建主圖像和次圖像。,2,將每個圖層存儲為單獨的圖像以創(chuàng)建完成的翻轉(zhuǎn)按鈕組。,本章目錄,12.3

10、 制作翻轉(zhuǎn)圖像或按鈕翻轉(zhuǎn)是網(wǎng)頁上的一個按鈕或,12.4,制作動畫,Photoshop CS3,能夠制作出網(wǎng)頁,GIF,動畫。,GIF,動畫就是設(shè)置好一系列,圖像或幀的順序、裝載時間和播放次數(shù)等，類似于電影膠片的原理。制作,動畫需要結(jié)合應(yīng)用“圖層”和動畫調(diào)板，且處理圖層是創(chuàng)建動畫的關(guān)鍵，如,下圖所示。,動畫調(diào)板,幀延遲時間,刪除,所選幀,復(fù)制所選幀,過渡動畫,幀,選擇下一,幀,播放動畫,選擇上一,幀,選擇第一,幀,12.4 制作動畫 Photoshop CS3能夠制作,12.4.1,幀動畫,本節(jié)通過制作一個簡單的打字動畫來詳細了解制作幀動畫的基本方法，如下圖所示。,打字動畫,12.4.1 幀動畫

11、 本節(jié)通過制作一個簡單的打字動畫來,12.4.2,過渡動畫,本節(jié)通過制作一個“跳動的球”動畫來詳細了解制作過渡動畫的基本方法，如下圖所示。,跳動的球動畫,本章目錄,12.4.2 過渡動畫 本節(jié)通過制作一個“跳動的球”動,12.5,優(yōu)化并輸出,Web,圖像,優(yōu)化網(wǎng)頁圖像是在保證圖像質(zhì)量的前提下盡量使文件體積減小，以便于在網(wǎng)上傳輸。而在制作網(wǎng)頁時要用到很多圖片，如果這些圖片教大，就會影響網(wǎng)頁的瀏覽速度。,Photoshop CS3,提供了強大的優(yōu)化輸出工具，用戶能夠在壓縮圖像文件大小的同時又能優(yōu)化在線顯示圖像的品質(zhì)。,12.5 優(yōu)化并輸出Web圖像 優(yōu)化網(wǎng)頁圖像是在保證圖,12.5.1,優(yōu)化并輸出

12、圖像,選擇“文件”,“,存儲為,Web,和設(shè)備所用格式”命令，即可彈出“存儲為,Web,和設(shè)備所用格式”對話框，如右圖所示。在對話框中可以選擇輸出,JPEG,、,GIF,、,PNG,等一般常用的網(wǎng)頁圖像的格式，設(shè)置相應(yīng)的優(yōu)化參數(shù)。,視圖的顯示方式可以有優(yōu)化、雙聯(lián)、四聯(lián)，如在四聯(lián)視圖模式下，用戶可以看到原始圖像，也可以看到其他,3,種不同壓縮方式的預(yù)覽圖，每個預(yù)覽都顯示了文件的大小和下載時間，也可以用工具箱里的工具對預(yù)覽圖進行移動、縮放及顏色取樣等操作。,“,存儲為,Web,和設(shè)備所用格式”對話框,12.5.1 優(yōu)化并輸出圖像選擇“文件”“存儲為We,12.5.2 Web,圖像文件的格式的選擇及

13、其優(yōu)化,1.JPEG,。,擅長壓縮圖片，可提供完全的,32,位顏色，但不允許使圖像的部分透明，如果用了過高的壓縮值，,JPEG,會導(dǎo)致嚴重的圖像失真，如右圖所示。,預(yù)設(shè)：已存儲的優(yōu)化設(shè)置,文件格式：,JPEG,壓縮品質(zhì)：下拉列表有低、中、高、非常高、最佳,5,個選項可以選擇。,連續(xù)：在,Web,瀏覽器中以漸進方式顯示圖像。,IOC,配置文件：隨文件一起保留圖片的,ICC,配置文件。,優(yōu)化：創(chuàng)建文件大小稍小的增強,JPEG,。,品質(zhì)：微調(diào)壓縮品質(zhì)。,模糊：指定應(yīng)用于圖像的模糊量。,雜邊：為在原始圖像中透明的像素指定一個填充顏色。,優(yōu)化,JPEG,12.5.2 Web圖像文件的格式的選擇及其優(yōu)化

14、1.,2.GIF,格式。,適合單調(diào)顏色的圖片和較小的文件，支持有限的透明度，支持動畫，但其壓縮方法是對顏色單調(diào),區(qū)域,優(yōu)化的，因此對較大的圖片效果比較差。優(yōu)化設(shè)置對話框如右圖所示。,優(yōu)化,GIF,預(yù)設(shè)：已存儲的優(yōu)化設(shè)置,文件格式：,GIF,減低顏色深度算法：指定用于生成顏色查找表的方法，以及想要在顏色查找表中使用的顏色數(shù)量。,仿色算法和仿色：確定應(yīng)用程序仿色的方法和數(shù)量。,透明度：選擇則啟用透明度的相關(guān)設(shè)置。,透明度設(shè)置：確定如何優(yōu)化圖像中的透明像素。,交錯：當完整圖像文件正在下載時，在瀏覽器中顯示圖像的低分辨率版本。,損耗：通過有選擇地扔掉數(shù)據(jù)來減小文件大小。,顏色：設(shè)置顏色的數(shù)量。,雜邊：

15、為在原始圖像中透明的像素指定一個填充顏色。,Web,靠色：指定將顏色轉(zhuǎn)換為最接近的,Web,調(diào)板等效顏色的容差級別（并防止顏色在瀏覽器中進行仿色）。,2.GIF格式。優(yōu)化GIF 預(yù)設(shè)：已存儲的優(yōu)化設(shè)置,3.PNG-8,能精確控制透明度，壓縮效果很好，但一些較老的瀏覽器不支持,PNG,所有的選項，常用于,FLASH,動畫的圖片制作。優(yōu)化設(shè)置對話框如右圖所示，其具體的設(shè)置可參考,GIF,格式。,4.PNG-24,PNG-24,適合于壓縮連續(xù)色調(diào)圖像；但它所生成的文件比,JPEG,格式生成的文件要大得多。使用,PNG-24,的優(yōu)點在于可在圖像中保留多達,256,個透明度級別。優(yōu)化設(shè)置對話框如右圖所示

16、，其具體的設(shè)置可參考,GIF,格式。,優(yōu)化,PNG-8,優(yōu)化,PNG-24,3.PNG-8優(yōu)化PNG-8 優(yōu)化PNG-24,無仿色：根本不應(yīng)用仿色，同時用純黑和純白像素渲染圖像。,擴散：應(yīng)用與“圖案”仿色相比通常不太明顯的隨機圖案。仿色效果在相鄰像素間擴散。如果選擇此算法，請指定“仿色”百分比以控制應(yīng)用于圖像的仿色量。,圖案：應(yīng)用類似半調(diào)的方塊圖案來確定像素值。,雜色：應(yīng)用與“擴散”仿色相似的隨機圖案，但不在相鄰像素間擴散圖案。使用“雜色”算法時不會出現(xiàn)接縫。,5.WBMP,WBMP,格式是用于優(yōu)化移動設(shè)備（如移動電話）圖像的標準格式。,WBMP,支持,1,位顏色，意即,WBMP,圖像只包含黑色和白色像素。其優(yōu)化設(shè)置對話框如下圖所示。,仿色算法和“仿色”選項確定應(yīng)用程序仿色的方法和數(shù)量。為了獲得最佳壓縮比，請使用可提供所需細節(jié)的最低百分比的仿色?？梢赃x擇以下幾種仿色方法之一：,優(yōu)化,WBMP,無仿色：根本不應(yīng)用仿色，同時用純黑和純白像素渲染圖像,12.5.3,優(yōu)化切片圖像,（,1,）選擇“文件”,“,存儲為,Web,和設(shè)備所用格式”菜單命令，在彈出的對話框中進行優(yōu)化設(shè)置，選擇“雙聯(lián)”，