第4章圖像處理

1、圖像處理圖像處理本章內(nèi)容本章內(nèi)容：本章主要介紹了界面設(shè)計(jì)的基本原則，使用Photoshop處理簡(jiǎn)單的圖像和文字，使用HyperSnap抓圖。學(xué)習(xí)目的學(xué)習(xí)目的：通過(guò)學(xué)習(xí)本章，了解多媒體界面設(shè)計(jì)的原則和圖像的基本概念，掌握使用屏幕抓圖軟件抓圖，掌握使用Photoshop處理簡(jiǎn)單的圖像和制作標(biāo)題文字。4.1 4.1 背景知識(shí)背景知識(shí) 界面是學(xué)習(xí)者與計(jì)算機(jī)交互的窗口，學(xué)習(xí)者通過(guò)界面向計(jì)算機(jī)輸入信息進(jìn)行控制、查詢和操縱，計(jì)算機(jī)則通過(guò)界面向用戶提供信息以供閱讀、分析、判斷。本節(jié)通過(guò)幾個(gè)實(shí)例介紹了多媒體界面的設(shè)計(jì)原則，以及介紹了常見(jiàn)的圖像處理軟件。4.1.1 多媒體的界面 多媒體的界面是非常重要的一個(gè)方面，

2、好的多媒體作品，用戶使用后的第一感覺(jué)就是其界面設(shè)計(jì)使人耳目一新，一進(jìn)入就被其優(yōu)美的界面設(shè)計(jì)吸引住了。下面先讓我們來(lái)欣賞幾個(gè)多媒體的操作界面。 友好的交互界面可以使得學(xué)習(xí)者對(duì)屏幕提供的界面能很容易的理解和接受，從而更容易地掌握、理解和使用多媒體。通過(guò)欣賞以上幾個(gè)多媒體操作主界面，可見(jiàn)多媒體主題的不同，決定多媒體的操作界面也有不同的風(fēng)格。界面設(shè)計(jì)要遵循以下這些原則： (1)一致性原則。 (2)符合主題。 (3)清晰性原則。 (4)見(jiàn)圖識(shí)意具有象征性。 (5)符合學(xué)生的認(rèn)知結(jié)構(gòu)。 (6)有效運(yùn)用刺激。 (7)反饋性。 4.1.2 圖像處理軟件 那怎樣才能制作出一個(gè)漂亮的操作界面呢，不僅要遵循以上的設(shè)

3、計(jì)原則，最主要的還是要通過(guò)相關(guān)的圖像處理軟件將其制作或經(jīng)過(guò)處理得出，隨著多媒體技術(shù)的發(fā)展，市場(chǎng)上的圖像處理軟件也越來(lái)越多，常用的圖像處理軟件有Photoshop、Fireworks、CorelDraw等，在這一章中我們選用Photoshop為制作軟件，介紹其在圖像處理方面的應(yīng)用。4.2 Photoshop4.2 Photoshop概述概述 Adobe公司推出的Photoshop軟件功能強(qiáng)大、實(shí)用性強(qiáng)，在圖像的加工處理方面一直是大部分人的選擇。運(yùn)用好Photoshop將給我們的多媒體作品帶來(lái)意想不到的收獲，Photoshop的常見(jiàn)版本有Photoshop 7.0，Photoshop CS，本書以

4、Photoshop CS為例說(shuō)明。本節(jié)介紹了圖像的一些基本概念，和Photoshop的界面認(rèn)識(shí)。 4.2.1 Photoshop Photoshop相關(guān)概念1、位圖和矢量圖、位圖和矢量圖位圖定義位圖特點(diǎn)矢量圖定義矢量圖特點(diǎn)2、像素、分辨率與圖像尺寸、像素、分辨率與圖像尺寸(1)像素(2)分辨率(3)圖像尺寸4.2.1 Photoshop Photoshop相關(guān)概念3、常用文件格式、常用文件格式 在使用Photoshop平面設(shè)計(jì)軟件系統(tǒng)中，文件的存儲(chǔ)格式有很多種，有PSD、JPEG、BMP、TIF、GIF、PNG等格式，而在這里我們將重點(diǎn)介紹一下PSD格式。PSD格式是Photoshop軟件的專

5、用格式。它能保存圖像數(shù)據(jù)的每一個(gè)細(xì)節(jié)，包括圖像的層、通道等信息，確保各層之間相互獨(dú)立，便于以后進(jìn)行修改。PSD格式還可以保存為RGB或CMYK等色彩模式的文件，但唯一的缺點(diǎn)是保存的文件比較大。安裝有Adobe Photoshop CS所顯示的PSD文件的圖標(biāo)是4.2.2 Photoshop CS Photoshop CS工作界面4.3 4.3 選擇操作選擇操作 選擇操作是Photoshop的最常見(jiàn)操作，軟件的很多后續(xù)操作首先都要選擇圖像的一部分。因?yàn)镻hotoshop功能強(qiáng)大，選擇操作也有很多方式，所以我們以幾個(gè)實(shí)例來(lái)說(shuō)明選擇操作。4.3.1 實(shí)例：女媧補(bǔ)天步驟步驟1 1 導(dǎo)入圖片導(dǎo)入圖片步驟

6、步驟2 2 合成圖片合成圖片步驟步驟3 3 去除圖層去除圖層1 1空白部分空白部分步驟步驟4 4 選中圖像中間橢圓區(qū)域，并模糊橢圓邊選中圖像中間橢圓區(qū)域，并模糊橢圓邊步驟步驟5 5 導(dǎo)出圖片為導(dǎo)出圖片為jpegjpeg格式格式4.3.2 實(shí)例：不規(guī)則圖形的選擇步驟步驟1 1 導(dǎo)入圖片導(dǎo)入圖片步驟步驟2 選取人物區(qū)域選取人物區(qū)域步驟步驟3 導(dǎo)出圖片導(dǎo)出圖片4.4.1 實(shí)例：改變圖像的尺寸 我們收集的素材圖片中，有些圖片偏大，那我們就可以將圖片導(dǎo)入Photoshop CS中，將圖片像素減少，可以達(dá)到我們所要的效果了。例如下圖4-32是一張923651像素的圖片，通常我們的多媒體界面為800600像

7、素，如果做為多媒體邊框的話，它是偏大的。我們當(dāng)然可以先將圖片導(dǎo)入Authorware，再在軟件中調(diào)整圖片的大小，也非常方便，但是這樣會(huì)使多媒體的容量增大，多媒體的打開(kāi)速度減慢。那么接下來(lái)我們就要改變這張圖片的大小。步驟步驟1 1 導(dǎo)入圖片導(dǎo)入圖片步驟步驟2 設(shè)置圖像大小設(shè)置圖像大小步驟步驟3 3 導(dǎo)出圖片導(dǎo)出圖片 4.4.2 實(shí)例：旋轉(zhuǎn)按鈕的制作 鄉(xiāng)土教材鄉(xiāng)土教材主界面左邊有四個(gè)導(dǎo)航按鈕，當(dāng)鼠標(biāo)移動(dòng)主界面左邊有四個(gè)導(dǎo)航按鈕，當(dāng)鼠標(biāo)移動(dòng)到按鈕上時(shí)，圖片就發(fā)生了旋轉(zhuǎn)，如圖到按鈕上時(shí)，圖片就發(fā)生了旋轉(zhuǎn)，如圖4-35所示。這樣所示。這樣的效果是怎樣制作出來(lái)的呢，其實(shí)很簡(jiǎn)單，只要制作兩的效果是怎樣制作出

8、來(lái)的呢，其實(shí)很簡(jiǎn)單，只要制作兩張不同狀態(tài)的圖片，再導(dǎo)入張不同狀態(tài)的圖片，再導(dǎo)入Authorware的按鈕中就可以了。的按鈕中就可以了。鼠標(biāo)未移上效果鼠標(biāo)移上效果步驟步驟1 導(dǎo)入圖片步驟步驟2 設(shè)置畫布大小 步驟步驟3 輸出鼠標(biāo)移上狀態(tài)圖片步驟步驟4 制作初始狀態(tài)按鈕4.5 4.5 文字處理文字處理 Photoshop CS Photoshop CS除了能對(duì)圖片進(jìn)行處理外，我們還除了能對(duì)圖片進(jìn)行處理外，我們還能夠通過(guò)使用能夠通過(guò)使用Photoshop CSPhotoshop CS中中“樣式控制面板樣式控制面板”，美，美化標(biāo)題文字。如化標(biāo)題文字。如射線和角射線和角多媒體中的文字多媒體中的文字“射線

9、射線和角和角”，接下來(lái)我們將運(yùn)用，接下來(lái)我們將運(yùn)用Photoshop CSPhotoshop CS學(xué)習(xí)一些文學(xué)習(xí)一些文字的簡(jiǎn)單處理。字的簡(jiǎn)單處理。 4.5.1 實(shí)例：“射線和角”的制作步驟步驟2 輸入文字“射線和角”步驟步驟1 新建一個(gè)圖像窗口 步驟步驟3 設(shè)置文字樣式步驟步驟4 調(diào)整文字位置步驟步驟5 給文字添加樣式 步驟步驟6 給文字添加陰影效果 步驟步驟7 導(dǎo)出“射線和角”圖片4.6 4.6 屏幕抓圖軟件屏幕抓圖軟件HypersnapHypersnap 有的時(shí)候我們需要截取屏幕上的圖形來(lái)修飾文章或者是做軟件演示，圖文混排可以更加清楚地講解某一問(wèn)題。抓取屏幕最講簡(jiǎn)單的方法是按鍵盤上的“Print Screen”鍵，抓取當(dāng)前桌面抓到剪貼板中，或者按“Alt+Print Screen”抓取當(dāng)前窗口到剪貼板中，然后再粘貼到圖像處理軟件中進(jìn)行編輯。在沒(méi)有專門的屏幕抓圖軟件的情況下，可以使用這種方法臨時(shí)代替。我們也可以用專門的抓圖軟件實(shí)現(xiàn)屏幕抓圖，使用更加方便，功能更加多。