Bitmap-based image &Vector-based image (Vector Graphics)

點陣圖 與 向量圖

by Olina ( 歐莉娜 )2015/ 10/ 20

@  耕莘數媒

之前的課堂簡報網址：

goo.gl/yTwbcu

請大家一起瞭解一下怎麼看老師的簡報

( 如果覺得沒有課本會很慌張的話 )

常見的 Image 格式

PSD

*.psd

The image format which supports layers

LayerLayers

● PSD, *.psd● PNG, *.png● TGA, Targa,

*.tga● TIFF, *.tif● 近期的 *.bmp

The image formatswhich support Alpha Channel

◆ 儲存圖檔時，若出現像這樣的選項，選擇 32

bits/pixel 就可以儲存 Alpha Channel 。

● JPG, *.jpg - 有壓縮● GIF, *.gif - ( 後面討論 )● BMP, *.bmp ( 早期的 )

The image formats whichDO NOT support Alpha Channel

*老師小抄： https://zh.wikipedia.org/wiki/%E8%89%B2%E5%BD%A9%E6%B7%B1%E5%BA%A6

Color Depth of Image

1 bit color image

(Black and White)

Dithering

"1 bit" by Thegreenj - Own work. Licensed under CC BY-SA 3.0 via Commons - https://commons.wikimedia.org/wiki/File:1_bit.png#/media/File:1_bit.png

⊙ Black and White ⊙

Color Depth of Image

Grayscale mode

8-bit color

⊙ Grayscale  ⊙

Color Depth of Image ⊙ Indexed Color  ⊙

GIF, *.gif 的特色 : 支援動畫

256 color palette ( 此影像檔會存一個 palette ，顏色編

號從 0~255 。所以此影像中每個 pixel 只要記錄是幾號色即

可，好像在查索引，所以叫 Indexed Color mode 。 )

不一定要 256 格都用到，這樣檔案可以更小。

可以指定一個色票 (Swatches) 格為透明色。

補充 Palette Cycling：http://www.effectgames.com/demos/canvascycle/(注意網頁右下角的循環 )

(去看一下放大九倍的樣子 )

編號 0

編號 255

Dither options

Diffusion【物】漫射；擴散

Pattern花樣，圖案

Noise

(Google一下 Pattern)

Filter

直接到這兩個連結去看看：

◎ 矩陣的運算：http://blog.csdn.net/rocky_shared_image/article/details/7248315

◎ 即時濾鏡效果實驗影片：https://www.youtube.com/watch?v=OgUhtUd9nGc

Filter : 在 Photoshop 中的矩陣選項

https://zh.wikipedia.org/zh-tw/解析度

(見「單位」及「圖像解析度」小節 )

dpi : dots per inch ，例如： 300 dots/inch ppi : pixels per inch ，例如： 72 pixels/inch

每個軸向上的像素數量，例如 640x480

Image resolution

Anti-aliasing

anti- ：反；抗 的字首

alias ：化名；別名

aliasing ：（圖形或聲音的）效果失真或混疊

Anti-aliasing

"Anti-aliased-diamonds" 。 使用來自維基共享資源 - https://commons.wikimedia.org/wiki/File:Anti-aliased-diamonds.png#/media/File:Anti-aliased-diamonds.png 的 創用 CC 姓名標示 - 相同方式分享 3.0 條款授權 aliased-diamonds.png

此二圖形哪個有 smooth 過？有反鋸齒設定？

Bitmap-based images&

Vector Graphics

由於放大縮小點陣圖 (bitmap-based images) 的時候，都會有邊緣插補後失真的問題，所以電子計算機科學家又想出另外一個方式來儲存影像：

◎ 之前討論的 Images 都是 bitmap-based images

◎ 向量圖形 Vector-based images→ Vector Graphics

◎ 用數學式向量 (vector) 來呈現影像，當放大縮小

圖形 ( 或說將畫面推進或拉遠 ) 時，這些數學式可以

重新運算出高品質的影像。

直接到這兩個連結去看看：

◎什麼是 vector ：https://zh.wikipedia.org/wiki/向量https://en.wikipedia.org/wiki/Vector_graphics

Vector graphics

"VectorBitmapExample" by Original uploader was Darth Stabro at en.wikipedia - Transferred from en.wikipedia; transferred to Commons by User:Pbroks13 using CommonsHelper.. Licensed under CC BY-SA 3.0 via Commons - https://commons.wikimedia.org/wiki/File:VectorBitmapExample.svg#/media/File:VectorBitmapExample.svg

Coordinate system

x-axis, y-axis

Vector

"Position vector" by User:Acdx - Self-made, based on en:Image:Plane Cartesian vector.png. Licensed under CC BY-SA 3.0 via Commons - https://commons.wikimedia.org/wiki/File:Position_vector.svg#/media/File:Position_vector.svg

Bézier Curve

Path, Anchor Point, Segments,

Control handles

https://zh.wikipedia.org/wiki/貝茲曲線路徑 錨點 線段 控制把手

◎Path & Anchor point ：https://helpx.adobe.com/illustrator/using/editing-paths.html影片：https://youtu.be/5BPrGoJZ8WI?t=1m34s

◎ 之後會增補：http://www.spellbrand.com/what-are-paths-anchor-points-in-adobe-illustrator

三種路徑：

1) Open Paths – This is a simple line with two end points.

2) Closed Paths – A closed shape no end points. Ex: rectangle, circle etc.

3) Compound Paths – Two or more open or closed paths.

* 上列文字引用自 Mash Bonigala 於

http://www.spellbrand.com/what-are-paths-anchor-points-in-adobe-illustrator的文章。

( 之後會再補充說明 )