數位繪圖/數位美工設計

本項講義從數位美學觀念介述數位繪圖/數位美工設計，兼及數位影象處理軟體應用簡介，目標包括：

1.上接數位色彩、數位調色盤、數位配色與當代實用數位繪圖/數位美工設計的綜合應用。 

2.介述數位影象處理軟體的介面、工具、與效果應用，以PhotoImpact為例。

3.依據圖片檔案的類型與影象的類型，介述各種進階實作技巧。

數位繪圖/數位美工設計建構=

視覺設計4元素 +

繪圖/美工建構4元件

美學可建構元素是因應感官知覺、媒體形式而不同的。

數位繪圖/數位美工設計是視覺設計的一種，同樣應用視覺設計建構4元素：統一向面的視覺結構、和視覺意涵（主題、故事），與變化向面的視覺動力、和視覺色彩。

數位繪圖/數位美工的媒體變化建構元件包括：自由造型-筆應用‧幾何造型-輪廓應用‧填充-色彩/物料應用‧特效，同時要注意檔案格式與解析度。

建構元件：自由造型-筆應用

以「點矩陣技術」造型的工具，作為自由繪畫使用，包括各種繪圖工具筆。

建構元件：幾何造型-輪廓應用

以「向量技術」塑造具規則幾何造型的工具，可繪製平滑幾何形狀，包括輪廓繪圖、與貝茲曲線選取工具等。更是從事現代「歐普藝術」風格創作的必備特殊元件。

建構元件：填充-色彩/物料應用

填充物件是指在輪廓中填充色彩或材質。這項元件在色彩設計的技巧，可以廣泛應用到其他相關工具，作為「當代實用繪圖/美工 創作設計」的元件。

建構元件：特效

將在未來各種進階實作單元中陸續介述。

數位影象處理/動畫軟體選擇：

PhotoImpact 為主‧Photoshop 為輔

數位影象處理軟體就名氣與歷史而言，曾經以 Photoshop 知名度最高。

而統雄老師「問題解決式學習方案」下的教學工具選擇策略是：
工具獨立性，
工具環境可供性，
工具個人應用性，
工具彈性發展性。

希望達到學文創‧不只是學軟體的目的，所以選擇 PhotoImpact 作為教學工具。

臺灣的資訊產業偏向硬體生產，而友立資訊1996 問世的 PhotoImpact 是軟體業中極少的臺灣之光，而也因為不凡的成就，在 2006 年後，被美國 Corel 集團併購了。

PhotoImpact 與 Photoshop， Corel Paint 並列為高階影象處理的三巨頭，使用自行開發的 ufo 系統格式存儲，有些繪圖支援功能還超過  Photoshop，且提供動畫製作功能，價格卻遠低於 Photoshop。

美國版的 X3 版之後，其國際評價已大幅提升、與PS 和 CorelDRAW 成為三巨頭，而價格也大幅提升了。

人類取用行為中，會發生「遠來的和尚會唸經」現象，也再一次實證。

PhotoImpact 12 的問題與解決

PhotoImpact 12 是臺灣品牌最後1版，賣到美國後功能並沒有顯著增加，只是介面略有改變。

PhotoImpact 實作檔案

 PhotoImpact 實作教材檔案，影象處理為 Exercise_12.exe ，動畫為 Exercise_8.exe。

Exercise_8.exe/ Exercise_12.exe

可以到統雄老師提供的工具頁下載：

../../Tools/ Image/Exercise/ 

這是自解執行檔，激活方式：

Exercise_8.exe：安裝後，參照 SN.txt 輸入激活碼。

Exercise_12.exe：安裝後，點擊 _open 激活程式。

PhotoImpact 無法開啟 .ufo 檔案

有些版本 PhotoImpact 無法開啟 .ufo 檔案。

upi12_patch_(tc).exe

友立資訊曾提出 upi12_patch_(tc).exe 修補程式，解決這個問題，建議使用PhotoImpact 12  以下，一定要安裝執行。

但由於友立資訊的易手，官網上已經沒有這個檔案，可以到統雄老師提供的工具頁下載：

../../Tools/ Image/Exercise/ 

將以上檔案加入 Exercise_12.exe 所建立的目錄中，再點擊執行。

媒材補充檔案

../../Tools/ Image/Exercise/ 

下載 PExercise20.exe 後，自解，再加入 C: Program Files(x86)\Ulead PhotoImpact 12 資料夾

工具獨立性教學法

Photoshop 與 PhotoImpact 比較/PhotoImpact 重點輔助教學

本系列講義採用「工具獨立性教學法」，以實作應用之「程序工程」需求設計，並非以軟體為中心的功能編序式教學，所以在設計、技術上並不受與 PhotoImpact 軟體限制；同時，由於 Photoshop 的流行，也作為本課程的重點輔助教學工具，如果有兩者在使用上差異有應注意之處，會提供「Photoshop 與 PhotoImpact 比較」節，以資參酌。

Photoshop 與 PhotoImpact 的比較，在絕對價格上，PS 壓倒高；在使用便利性、直覺性上，PI 壓倒勝，因為 PS 考慮許多細節的處理，使得許多處理程序較繁複，，亦不直覺。但在性價比/CP值（price–performance ratio）上，則視設計報酬的市場價格而不同。如果當前國內市場，一般沙龍照、商業照在1000~3000之間，PI 的 CP 值優勢明顯。但如果能夠拿到美國好萊塢、Lady Ga Ga 級的巡演海報設計，1張 50 萬元起跳，當然就要使用 PS。

當前在網路上看到的一般 PS 作品，其實 PI 都作得到，如果真是用訂價承租 PS，其實划不來。

Photoshop 與 PhotoImpact 的介面與設定，有過半比例相同，更多比例類似。在本系列講義中，遇有重要差異，將用以下標題提示。

Photoshop 與 PhotoImpact 比較

PhotoImpact 應用基礎篇

PhotoImpact 應用基礎篇包括：介面介紹、重要設定介紹、開新檔案、筆與幾何型的創作。

介面主要區域

〉視窗

列出各區域與其名稱，由上至下為：

一般工具列

命令列

屬性工具列：配合「左側工具箱」中各工具變換。

右側面版管理

左側工具箱

可以使用工具箱來選取物件、製圖、繪圖、剪裁影象和您專案的其他工作。工具箱的某些工具包含一個可顯示更多工具的副功能表。若要存取這些工具，請按工具按鈕右下角的三角形圖示。

優先常用工具

基礎5工具應用：

1. 挑選工具與移動物件

2. 選取工具：選取影象上的特定區域

3. 輪廓繪圖工具：幾何造型：向量類型

4. 繪圖工具：各種筆，自由繪畫：點陣類型

5. 填充工具：在輪廓中填充色彩或材質

6. 前景與背景：前景與繪圖工具的色彩相同。背景與底色-即「基底影象」的色彩相同。

開新檔案與創作

〉檔案
〉開新檔案
〉開新影象

影象類型

影象類型包括：黑白、灰階、16色、256色、和全彩。

通常選擇全彩。

底色/基底影象

「單色」 將底框色彩設成白色。
「自訂色彩」 將底框色彩設成您指定於色盤內的色彩。按一下色彩方塊，即可開啟「友立色彩選擇工具」，或按滑鼠右鍵來開啟其他的色彩選取工具。
「背景色」 將底框色彩設成目前指定於工具箱內的背景色彩。
「透明」 透明背景將在新的影象中顯示成棋盤狀。您可以使用「檔案：偏好設定：一般」對話方塊來自訂透明背景的格線大小與格線色彩。按一下「PhotoImpact」類別底下的「透明度」可開啟「透明度」選項。

注意：選取「透明背景」將會隱藏基底影象，您可以選取「檢視：基底影象」
來顯示基底影象 [Ctrl+F5]。

本選項通常是為設計透明背景之 gif 圖示、或動畫的畫格。

物件

在基底影象上繪製、選取複製、或從其他圖片複製而來的影象，都是物件。

物件被選取時，會出現物件動態邊緣。

解析度

作品為網頁：72 dpi

作品為紙類印刷出版：200 dpi

Photoshop 與 PhotoImpact 比較

在 Photoshop 中，物件稱為「圖層」。在「圖層面版」選取後，必須先點圖層，出現虛線，再按 Ctrl 才看得見選取物件的邊緣，取消則必須 Ctrl + D；或按 Ctrl + T 編修，才看得見邊緣，處理較不直覺。

Photoshop 選擇物件後，必須在「圖層」上，滑鼠點選欲選物件，再 + <Ctrl>，才會顯示選取區，非常不直覺，要特別注意。

選取圖層或遮色片

>選取

>載入選取範圍

>色版：「透明度」為圖層；「遮色片」即為該圖層之遮色片。

Photoshop 之「建立新圖層」圖示，預設為透明。

如果要加「顏色」，或作「混合圖層」，或填滿中間調（50％灰）以便後續加亮等，則必須：

Alt + 「建立新圖層」圖示

在 Photoshop 中，基底稱為「背景」。在

〉圖層

〉影象平面化

是指所有物件合併到基底。

Photoshop 的工具箱：

Photoshop 與 PhotoImpact 比較

Photoshop 最下方的「前後景色」比 PhotoImpact 多一個小型圖示功能，即回到預設的「前黑後白」，避免手調。

Photoshop 最下方再多一個「快速遮色片」，其實等於手繪選取工具。

繪圖工具實作

建構元件：自由造型-筆應用

選擇「筆刷」，隨意繪製線條與輪廓。

面板應用 

顯示面板：通常以 2px 作為繪製線條練習。

建構元件：幾何造型-輪廓應用

〉路徑工具

包括幾何形的填滿與輪廓

選擇「輪廓工具」，隨意繪製幾何型線條與輪廓。

選擇「線條與箭頭工具」，練習線條與箭頭使用效果。

Photoshop 與 PhotoImpact 比較

路徑工具

PhotoImpact 的填滿與輪廓，圖示很清楚。

Photoshop 的幾何造型稱為「形狀」，屬性設定在 CC 版前，非常困擾。其預設為填滿，若要繪輪廓，設定為：

形狀工具列：

〉形狀：形狀

〉填滿：無色彩

〉筆觸（應係「輪廓」）：純色；再〉選取顏色

又，除了正幾何形外，少數外形範本，如畫框：

形狀工具列：自訂形狀工具

智慧型物件

在 Photoshop 中，「智慧型物件」即為「向量圖層」。除具備向量不失真特性外，所有「智慧型特效」均是外加，可以刪除，而不損及原稿。

選取工具實作

選取工具種類

PhotoImpact 的工具箱中提供了標準選取工具、套索工具、魔術棒工具、貝茲選取工具 4 種選取工具。

標準選取工具：框選基本對稱幾何區域，如矩形、正方形、橢圓形及圓形。

魔術棒工具：自動選取影象中色彩相近的區域，應用範例如連結。

套索工具與貝茲曲線選取工具，都是選取多邊型、不規則形狀，詳細說明如連結。

使用「標準選取工具」，選擇部分區域移動。

配合頂端「剪裁工具」、按右鍵的各種選取選項，綜合練習。

選取工具屬性

測試「標準選取工具」的各種屬性，如形狀、柔邊（範圍：0-150）…等。

模式

由左至右分別為新建、加入、減掉 3 種模式。新建模式只能建立 1 個選取區， 如果您再選取第 2 個區域， 前一個選取區便會消失。加入模式可以在影象中建立多個選取區 (同形狀或不同形狀)， 如果選取區有重疊的部分， 則會合併成一個聯集的區域 

柔邊

可以讓選取區域的邊緣「霧化」， 邊緣看起來較不突兀。柔邊是以像素為單位， 預設是 0 表示沒有柔邊效果， 最大可到 150。在設定柔邊之後， 選取區的邊緣會變得比較朦朧， 而且柔邊愈大則霧化程度愈明顯。

柔邊效果，是自邊緣起，上下左右各半「霧化」，譬如設 20px，則上下左右各「霧化」10px。

固定

勾選此項， 可直接指定選取區的大小 (以像素為單位)， 之後只要在圖片上按下滑鼠左鈕即可產生指定大小的選取區。適合用在需要裁剪出相同大小的圖片時。

百分比

控制選取物件的檢視尺寸。

移動圈選框鈕

在選取好範圍後， 若想針對選取範圍進行移動， 必須先按下此鈕再拉曳搬移選取範圍， 例如以標準選取工具選取圓形或橢圓形時， 常常無法一次就精確地選定影象中的特定物體， 此時可在框選完後， 按下移動圈選框鈕， 將圈選框搬移到正確的位置上。
若沒按此鈕就進行搬移， 便會將選取範圍轉換成一個物件。

保留基底影象鈕

當選取範圍變成物件後 (例如移動選取範圍)， PhotoImpact 預設會選取此項， 表示選取範圍的基底影象會保留；若取消選此項， 則基底影象中的選取範圍將會以背景色取代。

在物件上選取鈕

若要在物件上建立選取範圍， 必須先按下此鈕， 否則會變成移動物件位置。

剪裁鈕

可以將選取區之外的影象裁切掉， 只留下選取區的部分。 

Photoshop 與 PhotoImpact 比較

剪裁鈕/裁切鈕

PhotoImpact 的剪裁鈕，Photoshop 譯為裁切鈕。

PhotoImpact 的剪裁鈕，對最後圖層剪裁，並不會影響該圖層先前編輯過程中留底的畫面。

Photoshop 的裁切鈕，其屬性列有〉刪除裁切的像素〈選項，應取消勾選。如果預設即為有勾，或不小心勾選，將會裁切掉先前編輯過程中所有的圖層，非常危險！

Photoshop 裁切的小技巧

編輯裁切後，會裁掉基底影象，妨害以後修改編輯。

故可將編輯後的各圖層合併，在合併後圖層上再按右鍵：

>複製圖層

>目的地

>文件

>新增

則成為另 1 檔案。

柔邊/羽化

Photoshop 之「柔邊」，PhotoImpact 稱為「羽化」，是影象重疊的重要功能。

百分比/放大鏡

Photoshop 之百分比屬性，和工具箱之放大鏡，作用差不多。但 PhotoImpact 的百分比顯示在狀態列的左下方。

使用放大鏡，向右變大，向左變小；在放大鏡模式下，如要移動位置，可同時按〈space〉後拖曳。

標準選取工具的形狀

選取選取區的形狀：形狀分成矩形、正方形、橢圓形及圓形， 您可依需求來選擇。若選擇矩形或橢圓形， 除了可以拉曳形狀的大小外， 長寬比例也可在拉曳時調整。 

圓形應用

使用圓形或橢圓形狀來建立選取範圍時， 你可以如下圖假想選取點的起始位置， 也就是從圓形上方與水平線的切點 (X 點) 往左延伸， 和圓形左方與垂直線切點 (Y 點) 往上延伸的相交原點處 ( O點)。

選取限制

選取工具只能選取基底影象上的區域。

如果基底影象上有其他物件，而想連物件一起選取時，必須在「基底與物件合併」的條件下，才可使用。

〉物件〉全部合併

套索工具與貝茲曲線選取工具差異

套索工具與貝茲曲線選取工具，都是選取多邊型、不規則形狀，但工具原理、技術，與效果不同，可以去雜，也可以去背。

套索工具

套索工具又分為2種：

套索工具（預設）：就是自由手繪選取區。

智慧型套索工具：是以「色彩原理」相關諸條件，作為辨別選取區的依據，可以自動選區色彩區分的邊緣。

套索工具應用範例

在去背時，有時去背的較快速工具會有細節上的疏失，通常可優先使用套索工具，加減選取區，作去背的去雜。

貝茲曲線選取工具

貝茲曲線選取工具是以「貝茲曲線（Bézier curve）」方法，將多邊型各點之間的直線，轉化為「最柔和曲線」（如圖例）的計算方法。同時，以向量方式表現。

任職於法國雷諾汽車Renault 的工程師皮埃爾·貝茲（Pierre Bézier），於1962年發表了貝茲曲線，作為對汽車主體設計的方法。現在已成為影象處理、電腦圖學、電腦輔助設計/建造( CAD/CAM )的重要工具。這個方法也可以設計 3D 物體，所設計的曲線平面，稱為貝茲曲線平面（Bézier surface）。 

貝茲曲線選取工具應用範例

選取平滑多邊型，可優先使用貝茲曲線選取工具，如去雜。

Photoshop 與 PhotoImpact 比較

智慧型套索工具 V.S. 磁性套索工具

PS 稱為磁性套索工具，與套索工具為同一工具按鈕群組。

Photoshop 與 PhotoImpact 比較

智慧型套索工具 V.S. 顏色範圍選取

在 Photoshop 中，與曲線選取工具類同者還有「顏色範圍」選取命令，因設定條件比 PhotoImpact 多，較有優勢。

〉選取

〉顏色範圍

〉顏色範圍

Photoshop 與 PhotoImpact 比較

貝茲曲線選取工具 V.S. 筆型工具

在 Photoshop 中，與曲線選取工具類同者還有「筆型工具」，又有幾個子工具。由於設定條件比 PhotoImpact 多，在處理複雜曲線時有優勢。

Photoshop 與 PhotoImpact 比較

在 Photoshop 中，與 PhotoImpact 「智慧套索」類似的，有另一種選取：

〉選取

〉顏色範圍

以滴管在原稿上選取

〉朦朧：調整「朦朧桿」，至全部選取區呈白色。若有雜點，事後由遮色片、筆刷處理。

〉「調整」面版

〉色相/飽和度

下一步-建構元件：數位調色盤與繪圖影象工具應用

數位色彩系統與數位調色盤

色彩心理學 

TX選色與四大配色定律

數位繪圖/數位美工設計

色彩設計實作系列