適合內容的繪圖

　　在設計圖形時要考慮很多事情，從技術上的限制到美學上的考量都有，譬如用在網頁上的圖形應該要支援並能夠增強 HTML 文件的內容。技術上的限制雖然都已漸漸地獲得解決，但是仍然不可忽視；而關於圖像運用以及設計方面的美學問題，則不會有太大的改變。以下所討論的繪圖原則，將一直適用於大多數的應用實例中。

　　當一個藝術家在為多媒體設計圖像時，一定會有許多巧思。不過要設計一個成功的圖像，則必須要體認到電腦不會替你創造藝術。一件好的設計必須出自於藝術方面的天賦與後天不斷的努力練習。當然，這並不是說如果你不是一個藝術家，你就沒有辦法創造出一個好的圖像。

　　許多藝術家喜歡參照過去大師們的作品，按照新的方式，和藝術家自己的畫風，來重新呈現過去作品中所描繪的環境、氣氛、人物。因此，我們若學習直接討論世界著名藝術作品，並觀摩同行的作品，加以分析，應該可以提昇我們從事設計、創作的品味。

　　要做出成功的圖像，有一個很重要的技巧是要有一雙具批判性的眼光。如果你能夠客觀地評量你的作品並且發現它的缺點，那麼你就能夠改進它。如果你相信你的作品只是〝還不錯〞，那麼它就還有一點點變得更好的可能。

　　許多藝術家一直不斷地在尋求自身藝術造詣的更上層樓，而為了要訓練自己具有批判性的眼光，最好的方式就是常常接收他人對自己作品的回饋。有了多年來為學生作品打分數的經驗後，我發現其他人對同一作品會有不同於我的觀點的解釋，甚至常常有些人會指出我完全沒注意到的部分，而這個部分一但被我注意到，我也就能產生另一種不同的觀點。

　　當你向他人尋求對你的作品的忠告時，你必須要能夠不帶防衛地接受那些具建設性的批評。你應先聽聽別人所說的話，然後在心中衡量一下，要不就是回絕這個建議，要不就是根據他人的建議改正原有作品中有問題的部分。如果你回絕這個建議，那麼你也要能夠合理地解釋為什麼這不是一個好建議。「因為我想要這樣子做」並不是一個好理由。

　　找到一個願意提出有意義評語的人是很重要的，像「我喜歡」這樣的評語並不能幫助你把作品做得更好，一定要請對方針對你的作品﹝圖像﹞的使用效用說出優缺點才會有幫助。

　　若想要創作出成功的圖像，必需具備一定程度的繪圖技巧。僅僅憑藉鑑賞的眼光就想要改進繪圖技巧是不夠的。設計師可以依循某些規則或訣竅來學習發展這些技巧。雖然可以從網路上取到許多經過處理的影像，但是絕大部分的時候設計師也必須具備實際繪圖的能力。

　　我們要知道手跟眼睛之間的協調、以及將眼睛所見的 3D 立體物體轉換成電腦上 2D 的平面圖像所需的視覺轉換能力，是需要多年的訓練與經驗才能做得好。要學習這種能力，你可以隨身帶著一本素描簿，並且在任何時候畫下你所見的事物，這樣不久你就能夠自然且隨意地表達你所想表達的東西。

　　處理影像也需要技巧，你必須考慮顏色、整體設計、對比、色值、符號意涵、以及許多其他的因素。用 PHOTOSHOP 把兩個影像放在一起，製造出一個圖像放在你的網頁上，這事看起來很容易，但你必須注意，如果你在設計一個圖像時，沒有考量整體網頁的設計，那麼你的網頁可能會顯得雜亂無章而使得效果打了折扣。

　　網頁上的每一個圖像之間都有緊密的關聯，所以當它們被放置在同一個網頁上時，不能只對它們作各自獨立的處理。因此就有必要發展出一套設計圖像的規則，並且能確實地應用在圖像的創造上。例如，你可以在每一個圖像上加一道邊框，並且讓每一個圖像保持同樣大小，使不同圖像之間擁有一個共同的特質。

　　當你建立起一套規則並實際運用到網頁圖像設計上時，人們也許並不會注意到你的努力。但是如果你設計的圖像大小不一，有的有邊框、有的沒有，那麼人們就會注意到，而你的網頁也不會那麼吸引人。

　　將一個圖形或文字加上陰影時，通常會表現出一種深度的錯覺。譬如在文字下方加上陰影，會使文字看來栩栩如生地躍然於紙上：將陰影搭配圖像時，也會讓讀者覺得這影像比較逼近自己。並不是所有時候都必須使用陰影，設計師應該小心並有創意地用它。

　　使用陰影效果時，應該了解到有陰影就表示有一個潛在的光源，譬如說在物件右下方加上陰影，那麼看的人就會有意識或無意識地認定在物件左上方向的地方一定有一個光源。設計師經常患的一個錯誤是在網頁上某個物件的一方加上陰影，卻又在同一個網頁另外一個物件上的不同方向也製造出陰影。這樣的錯誤經常會讓讀者無法確定光源到底來自哪個方向，而導致讀者的視覺混淆，。

　　處理成對出現或一系列的圖像時，應該讓所有的圖像保有統一的規格。如果圖像都是以同樣的比例製作的，那麼這倒不是難事，但是如果圖像有的是水平的、有的是垂直的，儘量把它們分別集中在一起，並且統一它們的規格。

　　如果把垂直和水平的影像放在同一個區塊中，就要重新調整它們的大小，讓其中一個方向保持一樣的尺寸，這將有助於建立統一感。由於一般人都習慣使用固定的行間距，所以，調整影像讓它在同一方向上具有一樣的長度，將有助於維持整齊的行列。當一個影像以水平方向向其他影像對齊時，就調整影像使它的高度相等，而垂直方向的對齊，則有賴於影像寬度的一致。

　　畫家江隆芳 網頁對於不同尺寸的作品，以水平方向保持一樣的尺寸，介紹其作品。
　　※﹝首頁範例﹞

　　在一個有許多圖像的網頁上，即使每個圖像都有一致的規格，仍然有可能因為缺乏具有創意性的排列，而顯得凌亂隨便。如果能事先為網頁建立格線，那麼只要將圖像依格線對齊，就能夠產生一個一致規格的架構。不管用不用格線，設計師都必須有意識地決定如何安排每個圖像的位置，不要被 HTML 的技術限制住你對圖像編排的控制。

　　設計師常常會去模擬或是借用某種媒材的視覺特性，並把它轉換到另一種媒材表現上面。譬如在某些情況中，設計師意圖在平面上製造出三度空間的幻覺，他可以用以下技巧製造出三度空間的效果︰

1. 線條透視畫法﹝將線條延伸聚集在無限遠的一點上﹞
2. 將兩個影像輪廓重疊﹝在上者看起來比較近﹞
3. 色彩透視畫法﹝較遠的物體具有較淺的顏色、且較不精細﹞
4. 大小關係﹝大的物體看起來比較近﹞
5. 做立體模型／做陰影／做漸層﹝將物體件加上立體效果﹞
6. 以方向性燈光製造陰影﹝強調物體到表面的距離﹞
7. 在平面上的位置﹝上面的物體看起來比較遠﹞
8. 粗線條﹝看起來向前方前進﹞
9. 色彩﹝亮／暖色系看起來向前方前進，暗／冷色系則看起來像在後退﹞

　　讀者第一次看到某些模擬手法時，常常會覺得驚訝或是新鮮。例如，在網頁上看到一個木質的邊框可能會覺得沒有什麼了不起，可是看到一個很少見的金屬材質的註冊標誌，就會張大眼睛了。適當地仿照其他的媒體而創造出不常見的圖像，往往會引起讀者的好奇心，因而繼續瀏覽你的網頁。

　　一個有創意的濾鏡處理方式經常能加強網站的視覺效果，但是設計師也要知道，有許多處理方式都已經被過度使用而變成陳腔濫調了。例如，頁尾捲起的效果，許多人不管這樣的效果有沒有意義或是它和頁面的內容圖片有沒有關係，在一開始被引進時，就大量地引用，以致於變成陳腔濫調。所以，當你發現一種新的濾鏡效果時，要小心，這樣的處理方式可能會被誤用或是過度使用，而使的原來的本意大打折扣。

　　使用濾鏡時，要謹慎並且要有選擇性，試著避免直接使用它的預設值，並且盡量將多種濾鏡組合使用，以創造出不能被歸類為某一種濾鏡效果的圖形。

　　設計師常用一個小技巧是打破大多數矩形圖形的直線欄框。一般的圖形都是被預設為以矩形的形狀儲存，雖然矩形的格式可以讓畫面看起來比較有組織，但有時候一個突破框架限制的圖形更能夠引起讀者視覺上的刺激，讓網頁看起來更生動活潑。一個突破框架的圖形設計方法是在設計 GIF 檔的圖形時，可以將這個檔案設定為以某一種顏色當作透明罩遮，當讀者在瀏覽器上看這個圖形時，這個顏色就會變成透明的。這種透明效果只能用在 GIF ，而不能用在 JPG 檔，用得好的話，它可以讓你的 WWW 網頁生色不少。

　　動畫效果對網頁設計來說既能載舟，也能覆舟，所以設計師必須仔細考慮何時以及為何要使用動畫。從許多網頁設計案例中，我們看到動畫是被用來標示一些新鮮有趣的東西，有時動畫則可以增加資訊的負載量，製造出某一種氣氛、或是配合支援網頁的內容。要記住，在大部分的情況中，動畫都會使得下載的速度變慢，而讓連線必須一直處於開啟狀態。

　　創造一個動畫之前，要仔細的想想看這個動畫會與網頁上的其他元素如何產生互動？它對讀者的感受與所要傳達的資訊有幫助嗎？如果要放進一個動畫，一定要讓讀者覺得他花費許多下載的時間是值得的。

﹝一﹞圖像的主體

1. 要清晰可見，去除不必要的雜訊。
2. 正確地顯示真實世界的物件。

﹝二﹞圖像的意義

1. 要簡單明瞭、能清楚地陳述一個意義。
2. 能和其它圖像在觀念上分辨開來。

﹝三﹞圖像內文字的本身

1. 筆劃要清楚，容易辨認。

﹝四﹞圖像內文字的裝飾

1. 裝飾不要過分花俏，否則造成文字辨識不易。下面所舉的網頁例子顯示，設計師設計左側圖像時，因背景花俏，忽視文字筆劃必需清礎的設計原則，造成左側文字不易辨識的結果。