多媒體設計 Graphic and Multimedia Design

人際溝通與資訊傳遞 人類傳播時代進化過程 – 視覺媒體 ( 洞壁上面的繪畫 ) – 聲音媒體 ( 非洲土人利用聲音傳遞訊息 ) – 文字媒體 ( 文字、紙張、印刷術 ) – 大眾傳播時代 ( 無線電、廣播、電視、人造衛星 ) – 多媒體傳播時代 ( 文字、圖像、聲音影像、動畫 和錄影結合成不同的「多媒體系統」，例如： 網際網路 )

什麼是多媒體？ 運用電腦儲存與再取資訊的技術，將各種溝通媒體 ( 文字、圖像、聲 音影像、動畫和錄影結合成不同的「多媒體系統」 ) ，隨時隨地與在 不同時候，不同地點的人互通資訊。 包含的媒體： – 文字、旁白 – 圖案、插畫 – 靜態的照片 – 圖表、圖形 – 視訊、動畫 – 音樂、音效 科技整合角度 - 多媒體是藝術、戲劇、傳播與新媒體科技的結合 最熱門的資訊網路系統 - 網際網路 (Internet) 最熱門的資訊傳遞方式 - 全球資訊網 (World Wide Web)

全球資訊網 (World Wide Web) 最容易接觸到的多媒體 互動式溝通 ( 雙向 ) 即時溝通、具臨場感 賞心悅目的視覺效果 個人角度：網際網路是一種互動式媒體、 一種通訊的方法，是一種吸收新知的工具。

首頁 (Home Page) 準確傳達網站設計的意圖 相關資訊的傳達 讀者根據首頁的指引進入其他頁 (page) ，讀 取更多相關的資訊。

影像處理流程圖

電腦繪圖與影像處理 數位影像 – 以數位化 ( 即用電腦 ) 的方式來處理或儲存影像 – 影像數位的好處乃在容易修改、不佔空間、容 易保存、容易在電腦 網路上傳輸... 等。 – 數位影像可分為兩種 : 向量影像、點陣影像

數位影像種類 向量影像 (Vector-based Image) ： – 乃以數學的程式來記錄或處理影像中的圖案，而圖案間的處理大 多用 Object-oriented 的方式來處理 – 目前市面上屬於這類型的軟體有， Corel Draw 、 Illustrator 、及其 它 3D 軟體 – 優點 : 檔案儲存比較小、影像在放大縮小的轉換過程中品質比較不 受影響、每個物件 (Object) 可隨心所欲的搬動 點陣影像 (Bit-mapped Image) ： – 乃以點或稱像素 (pixel) 來記錄影像 – 每個像素所記錄的資料包括特定位置及顏色的數值 (x 座標, y 座標, r 顏色值, g 顏色值,b 顏色值 ) – 目前市面上屬於這類型的軟體有 Photoshop 、 Photoimpact 、 Painter – 優點 : 色彩自然富變化、逼真度較高、易於對整個圖像作顏色處理 ( 如, 明度、彩度、飽合度 ) – 缺點 : 影像在放大縮小的轉換過程中較易失真、檔案很大、無法呈 現 3D 影像

專有名詞 檔案大小 : – 指檔案佔硬碟空間的大小，以 KB 或 MB 計算 影像大小 : – 指檔案的尺寸大小，通常以 Width (pixel) x Hight (pixel) 表示 像素、圖素（ Pixel ）：專指電腦圖像上的映像點 解析度 (Resolution) : – 指檔案的品質程度，通常以 dpi (dots/inch 或 pixel/inch) 表示 – 預設值通常為 72 dpi( 適用於 browser 、 HTML authoring program ， 不適用於平面輸出 ) 影像模式 : – 以對影像顏色處理的方式不同，可分為 RGB Color 、 CMYK Color 、 Indexed Color 、 Grayscale 檔案格式 (File format): – 以對檔案儲存處理的方式不同，可分為 PSD 、 GIF 、 TIFF 、 JPG 、 EPS

Web 上常用的影像檔案格式 JPEG (Joint Photographic Experts Group): – 對同一張影像進行不同程度的壓縮，再依據壓縮品質來取捨 – 適用於照片或複雜的連續色調繪成影像 – 影像需先轉成 RGB 的模式，才能存成 JEPG 的檔案格式 – 檔案所佔的記憶體很少 GIF( Graphical Interchange Format): – 只能呈現 256 色，適合用於線條或單純顏色所構成的圖案 –256 色的彩色圖檔，又稱索引色 (indexed Color) 圖檔，因為每張 256 色圖檔裡面，都會紀錄著一個調色盤 – 支援透明度，允許將圖像裡面的一種或多種色彩指定成透明色， 做出除去背景的效果 – 具有動畫效果，也就是在同一個檔案裡面包含數張圖像，讓依據 所指定的延遲時間交替播放

GIF 檔與 JPEG 檔之比較與取捨 圖檔格式 JPG/JPEGGIF 彩色範圍 全彩 16 色、 256 色 附加功能 無透明背景、動畫 影像失真 失真式壓縮無失真式壓縮法 適合場合 真實世界的影像，其影像的 特徵是全彩的，有連續色調， 而沒有明顯的邊緣線。 顏色有限。只要是以漫畫圖 案或線條為主的建築結構圖 或色塊處理的手繪圖為主

PNG (Portable Network Graphic Format) – 可攜式網路圖形檔案，使用的是非破壞式 (loseless) 的 壓縮方式 – 具備 JPG ＆ GIF 兩種格式優點能儲存全採影像，也能紀 錄 256 色圖片的色盤 – 即使再壓縮影像時使用這種格式，也不會造成影像品 質的損失 – 可在不同的電腦平台自動調整影像的亮度 – 少數瀏覽器支援 ( windows 版的 IE6.0 瀏覽器僅支援 GIF) – 無法製作動畫 ( 可輸出至 flash 製作動畫 )

其他檔案格式 PSD ：是 photoshop 的圖檔格式，此圖檔格式的特色是每個物件皆為 一個圖層，因此整個影像的形成即是由各個圖層的影像所構成。 *photoimpact 可以開啟 psd 圖檔，且能保持圖檔的圖層關係。 TIFF ：是一種高品質的全彩圖檔且能支援 CMYK 色彩，因此一般支援 印刷列印的排版軟體都有支援此圖檔格式。 ( 圖檔很大不適用於網頁 上 ) 。 BMP: 是 for Windows 的通用圖檔格式，一般掛在 Windows 內使用且 能插入圖片的軟體都能開起此圖檔。 ( 支援全彩，常被運用於製作桌 面影像，但不支援 CMYK 分色功能，不適用於印刷，且檔案較大亦不 適用網頁 ) EPS ： (Encapsulated Postcript) 是排版軟體常用的格式，可被向量 繪圖軟體接受，可與 Illustrator 、 Pagemaker 及 Quark Xpress 等 軟體作檔案轉換。

數位色彩 數位色彩：透過電腦來收發信號，然後利 用周邊裝置使色彩重現。 – 光碟機放映 vcd 的影像顏色 – 透過掃描器輸入的照片顏色 – 透過顯示器和印表機所表現的顏色 … 等等。 在數位環境下，各種周邊裝置都能和電腦 連在一起使用，光源色和物體色的特徵全 部都能共存而互相影響。

色彩概論 色彩三要素：光源 ( 光線 ) 、物體和人

光源色 vs 物體色 顏色的種類：光源色、物體色 光源色：本身可發出光線的光源 ( 日光、螢光燈 ) 內部散發光線的裝置 ( 電視、電腦 ) 物體色：光線投射在某個物體後，透過反射後所顯現的 顏色。 ( 蘋果在波長中只有反射紅色的波長 )

三原色 原色：不能從其他基本的顏色混合出來的顏色，光源原色和物體原色種類不 同於創造的顏色混合原理不同。 光源三原色：紅、綠、藍 – 顯示器影像色彩 – 加法原理 ( 以不同數量的光線加上去而混合成的 ) – 紅、綠、藍基本顏色混合所產生的顏色，稱為 RGB 色系或 RGB 色空間 物體三原色：紅 (Magenta) 、黃 (Yellow) 、藍 (Cyan) – 印刷色彩 – 減法原理 ( 藉由物體色的物理特性產生混合原理 )

色彩三屬性 對於顏色的感覺以心理面和顏色的體系實用面的眼光來看，一個顏色 有三個屬性： – 色相：所謂的色相就是指不一樣的顏色，像紅、黃、藍不一樣的三原色 會因為波長不同的光線，而產生出不一樣的顏色。 – 明度：色彩明或暗的程度，光的反射和吸收的程度就產生明度的差異。 通常亮色系的顏色明度較高，而暗色系的顏色明度較低。 – 彩度指的是色彩的強或弱。最純粹與原來顏色相近的顏色混合時，彩度 較高。相反的和多量的白色或黑色混合時，所產生的顏色彩度較低。

影像模式 依電腦內部對顏色處理的模式可分： –RGB 三原色： RGB 色彩模式為 PC 的預設影像顯示模式 由 R 、 G 、 B 三個色版組成來表現彩色圖檔影像 每個顏色值都介於 之間，其分別於表示顏色的強度值， 0 代表黑色， 255 代表白色，於是 RGB 三顏色，則能表現出 1667 萬色，此色彩就稱為全彩 非 RGB 影像需先轉換為 RGB 影像採可以編輯 –CMYK 四色印刷： 由青 Cyan ，洋紅 Magental ，黃 Yellow ，黑 Black 四個色版組成來表現彩色圖 案影像，為印刷的油墨色因此稱之為「印刷四顏色」 螢幕上的影像必須轉為此模式印刷於紙張上，為印刷輸出模式 –Index color 索引色： 由一個 256 色的索引色表 (Index Color Table) 所成的彩色圖檔影像 不同的圖檔將選用不同的索引色表， GIF 與 PNG 圖檔都有支援索引色彩。 常用於 BBS 及 WWW 網路上傳輸 –Grayscale 灰階 : 由單一色版組成 ( 色版數值由 0 到 255) 來表現灰階圖檔影像 其每個像素皆使用 8 或 16 位元來記錄色彩資訊，擁有一個亮度值 每個像素都使用 256 深淺不同的灰色來顯示影像的色彩模式

Web 上的色彩 網頁色彩呈現之不同因素 – 顯示器、電腦的作業系統、電腦的等級、瀏覽器的不 同 善用網頁 216 安全色 – 由紅、綠、藍的數位訊號以 0,51,102,153,204,255 再現的顏色依照 6X6X6 所組合成的，共有 210 種有彩 色和 6 種無彩色共同組合所完成的。 –216 安全色是安全的調色盤，在不同的作業系統下，可 使原色重現。 色碼表

視覺傳達 多媒體製作是在電腦螢幕上呈現視覺畫面 – 觀者要學習電腦畫面上看見訊息 ( 認知心理學、訊息處理模式 ) – 多媒體製作者要瞭解觀者 see 的能力，以設計使人易懂的畫面， 協助觀者看見訊息 一個賞心悅目的視覺呈現有賴於設計者的創意 (idea) 、表現技巧 (technique) 、編排 (lay-out) 能力。 強調輕鬆、好玩的

視覺過程、原理、經驗 視覺的過程 - 觀者從一個起點開 始一路進展下去，斟酌這些原 則是如何共同運作，自然瞭解 整個面貌。這整個觀賞的過程 稱之為「視覺過程」。 視覺原理 - 人在視覺上的共通性 稱為「視覺原理」，對於相同 的事物如以適當的時間和空間 呈現，則會產生視覺的連結， 而產生事物運動之知覺。 視覺經驗 - 觀賞者的視覺經驗越 豐富，他從設計者創造的視覺 形式所得的量也越大。

平面設計編排構成原理 目前許多國內設計的電腦螢幕視覺呈現是依賴設計者的 「感覺」、或者多年的「實務經驗」來完成。 – 對多媒體初學者來說「感覺」很難捉摸， 「經驗」更是殘酷。 – 平面設計編排構成原理，可幫助初學者，甚至對設計師而言，在 其缺乏「感覺」的時候，還能創作出具水準的作品。 平面設計編排構成原理 – 大小的對比 - 圖與地 - 導線 – 明暗的對比 - 平衡 - 型態的意象 – 粗細的對比 - 對稱 - 水平線 – 曲線和直線的對比 - 強調 - 垂直線 – 質感的對比 - 比例 - 陽晝、陰晝 – 位置的對比 - 韻律感 - 留白量 – 主與從的對比 - 左右的重心 - 版面率 – 動與靜的對比 - 向心與擴散 - 螢幕上字的大小 – 多種的對比 -jump 率 – 起與受 - 統一與調和