多媒體設計 多媒體設計 Graphic and Multimedia Graphic and Multimedia

DesignDesign

人際溝通與資訊傳遞人際溝通與資訊傳遞

• 人類傳播時代進化過程–視覺媒體 (洞壁上面的繪畫 )–聲音媒體 (非洲土人利用聲音傳遞訊息 )–文字媒體 (文字、紙張、印刷術 )–大眾傳播時代 (無線電、廣播、電視、人造衛星 )

–多媒體傳播時代 (文字、圖像、聲音影像、動畫和錄影結合成不同的「多媒體系統」，例如：網際網路 )

什麼是多媒體？什麼是多媒體？

• 運用電腦儲存與再取資訊的技術，將各種溝通媒體 (文字、圖像、聲音影像、動畫和錄影結合成不同的「多媒體系統」 )，隨時隨地與在不同時候，不同地點的人互通資訊。

• 包含的媒體：– 文字、旁白– 圖案、插畫– 靜態的照片– 圖表、圖形– 視訊、動畫– 音樂、音效

• 科技整合角度 -多媒體是藝術、戲劇、傳播與新媒體科技的結合• 最熱門的資訊網路系統 - 網際網路 (Internet)• 最熱門的資訊傳遞方式 - 全球資訊網 (World Wide Web)

全球資訊網全球資訊網 (World Wide Web)(World Wide Web)

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

首頁首頁 (Home Page)(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 、 Inde

xed Color 、 Grayscale• 檔案格式 (File format):

– 以對檔案儲存處理的方式不同，可分為 PSD 、 GIF、 TIFF、 JPG、 EPS

WebWeb 上常用的影像檔案格式上常用的影像檔案格式• JPEG (Joint Photographic Experts Group):

– 對同一張影像進行不同程度的壓縮，再依據壓縮品質來取捨 – 適用於照片或複雜的連續色調繪成影像– 影像需先轉成 RGB的模式，才能存成 JEPG的檔案格式 – 檔案所佔的記憶體很少

• GIF( Graphical Interchange Format):– 只能呈現 256 色，適合用於線條或單純顏色所構成的圖案– 256 色的彩色圖檔，又稱索引色 (indexed Color) 圖檔，因為每

張 256 色圖檔裡面，都會紀錄著一個調色盤– 支援透明度，允許將圖像裡面的一種或多種色彩指定成透明色，做出除去背景的效果

– 具有動畫效果，也就是在同一個檔案裡面包含數張圖像，讓依據所指定的延遲時間交替播放

GIFGIF 檔與檔與 JPEGJPEG 檔之比較與取捨 檔之比較與取捨

圖檔格式 JPG/JPEG GIF

彩色範圍 全彩 16 色、 256 色

附加功能 無 透明背景、動畫

影像失真 失真式壓縮 無失真式壓縮法

適合場合 真實世界的影像，其影像的特徵是全彩的，有連續色調，

而沒有明顯的邊緣線。

顏色有限。只要是以漫畫圖案或線條為主的建築結構圖

或色塊處理的手繪圖為主

PNG (Portable Network Graphic PNG (Portable Network Graphic Format)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 的影像顏色– 透過掃描器輸入的照片顏色– 透過顯示器和印表機所表現的顏色…等等。

• 在數位環境下，各種周邊裝置都能和電腦連在一起使用，光源色和物體色的特徵全部都能共存而互相影響。

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

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

三原色三原色• 原色：不能從其他基本的顏色混合出來的顏色，光源原色和物體原色種類不

同於創造的顏色混合原理不同。• 光源三原色：紅、綠、藍

– 顯示器影像色彩– 加法原理 (以不同數量的光線加上去而混合成的 )– 紅、綠、藍基本顏色混合所產生的顏色，稱為 RGB 色系或 RGB 色空間

• 物體三原色：紅 (Magenta) 、黃 (Yellow) 、藍 (Cyan)– 印刷色彩– 減法原理 (藉由物體色的物理特性產生混合原理 )

色彩三屬性色彩三屬性• 對於顏色的感覺以心理面和顏色的體系實用面的眼光來看，一個顏色

有三個屬性：– 色相：所謂的色相就是指不一樣的顏色，像紅、黃、藍不一樣的三原色會因為波長不同的光線，而產生出不一樣的顏色。

– 明度：色彩明或暗的程度，光的反射和吸收的程度就產生明度的差異。通常亮色系的顏色明度較高，而暗色系的顏色明度較低。

– 彩度指的是色彩的強或弱。最純粹與原來顏色相近的顏色混合時，彩度較高。相反的和多量的白色或黑色混合時，所產生的顏色彩度較低。

影像模式影像模式• 依電腦內部對顏色處理的模式可分：

– RGB三原色：• RGB色彩模式為 PC 的預設影像顯示模式• 由R 、 G 、 B三個色版組成來表現彩色圖檔影像• 每個顏色值都介於 0-255之間，其分別於表示顏色的強度值， 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深淺不同的灰色來顯示影像的色彩模式

WebWeb 上的色彩上的色彩

• 網頁色彩呈現之不同因素– 顯示器、電腦的作業系統、電腦的等級、瀏覽器的不同

• 善用網頁 216安全色– 由紅、綠、藍的數位訊號以 0,51,102,153,204,255 再現的顏色依照 6X6X6 所組合成的，共有 210 種有彩色和 6 種無彩色共同組合所完成的。

– 216安全色是安全的調色盤，在不同的作業系統下，可使原色重現。

• 色碼表

視覺傳達視覺傳達• 多媒體製作是在電腦螢幕上呈現視覺畫面

– 觀者要學習電腦畫面上看見訊息 (認知心理學、訊息處理模式 )– 多媒體製作者要瞭解觀者 see 的能力，以設計使人易懂的畫面，協助觀者看見訊息

• 一個賞心悅目的視覺呈現有賴於設計者的創意 (idea)、表現技巧 (technique)、編排 (lay-out)能力。

• http://neostream.com/• http://www.jennysrealm.com/ 強調輕鬆、好玩的

視覺過程、原理、經驗視覺過程、原理、經驗

• 視覺的過程 -觀者從一個起點開始一路進展下去，斟酌這些原則是如何共同運作，自然瞭解整個面貌。這整個觀賞的過程稱之為「視覺過程」。

• 視覺原理 - 人在視覺上的共通性稱為「視覺原理」，對於相同的事物如以適當的時間和空間呈現，則會產生視覺的連結，而產生事物運動之知覺。

• 視覺經驗 -觀賞者的視覺經驗越豐富，他從設計者創造的視覺形式所得的量也越大。

平面設計編排構成原理平面設計編排構成原理• 目前許多國內設計的電腦螢幕視覺呈現是依賴設計者的「感

覺」、或者多年的「實務經驗」來完成。– 對多媒體初學者來說「感覺」很難捉摸， 「經驗」更是殘酷。– 平面設計編排構成原理，可幫助初學者，甚至對設計師而言，在其缺乏「感覺」的時候，還能創作出具水準的作品。

• 平面設計編排構成原理– 大小的對比 - 圖與地 -導線 – 明暗的對比 -平衡 - 型態的意象– 粗細的對比 -對稱 -水平線– 曲線和直線的對比 -強調 -垂直線– 質感的對比 - 比例 -陽晝、陰晝– 位置的對比 -韻律感 -留白量– 主與從的對比 -左右的重心 -版面率– 動與靜的對比 - 向心與擴散 -螢幕上字的大小– 多種的對比 -jump率– 起與受 - 統一與調和