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

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

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

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

5、用格式。它能保存圖像數據的每一個細節，包括圖像的層、通道等信息，確保各層之間相互獨立，便于以后進行修改。PSD格式還可以保存為RGB或CMYK等色彩模式的文件，但唯一的缺點是保存的文件比較大。安裝有Adobe Photoshop CS所顯示的PSD文件的圖標是4.2.2 Photoshop CS Photoshop CS工作界面4.3 4.3 選擇操作選擇操作 選擇操作是Photoshop的最常見操作，軟件的很多后續操作首先都要選擇圖像的一部分。因為Photoshop功能強大，選擇操作也有很多方式，所以我們以幾個實例來說明選擇操作。4.3.1 實例：女媧補天步驟步驟1 1 導入圖片導入圖片步驟

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

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

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

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