字效（1） Channels 字效
2007‧1108 final
前提
講點故事
從 DOS → WPF
鋸齒凹凸
Channels 凹凸字效
Channels 變化字效
石中臉
( Rapidshare 使用說明 )
Channels 變化字效：
Channels 活用：( 石中臉 )
Channels + Flash：
筆者是從 Photoshop 2 版 玩起的，玩到 2.51 版 時，Photoshop 就變成當時天下無敵的影像軟體了
關於當年 PicturePublisher、PhotoStyler 與 Photoshop 的爭霸戰，請參考：電腦簡史
簡單來說，Photoshop 2.X 版，就是因為有了 Channels 這個專業的功能，才得以在那個影像軟體紛飛的年代稱霸
Photoshop 2.X 版已經有了 Plug-Ins ( 外掛濾鏡, 插件 ) 的功能，這也是一大賣點
Photoshop 從單純的「數位暗房」而變成複雜的「影像處理」天王，其成功的原因就在於不斷地推出重要的新功能
Photoshop 歷年來最重要的新增功能：Channels ( 色版 ) → Layers ( 圖層 ) → Brushes ( 筆刷 )
‧Channels：樹立了 Photoshop 的專業地位
‧Layers：讓編製的自由度大增，其中
。Layer Style ( 圖層樣式 ) 可謂特效產生器
。Blending Mode ( 混合模式 ) 則是合成的利器
。Fill Layer ( 填滿圖層 ) 與 Adjustment Layer ( 調整圖層 ) 都非常實用
‧Brushes：讓 Photoshop 也俱備 Painter 的功能
看看 Photoshop 2.5 ( 時值 Windows 3.1 ) 的長相唄
Layers 相關的功能實在是太多又太強大了，以致於大家學 Layers 的時間都不夠，哪還有空去管啥 Channels 與 Brushes
至多是有數位筆的人會去碰 Brushes 的功能，一般人則幾乎用不到 Brushes ( 故筆者才會發展出 把 Brushes 視為去背灰階圖庫 的觀念 )
而 Channels 則註定是爹不疼、娘不愛、沒人教、無人聞、…
雖然 Layers 早已取代了 Channels，但還是有一些技巧是非靠 Channels 不可 !
電腦，不是一夕之間就誕生的，很多您覺得理所當然的電腦功能，都是集眾人之智，甚至橫跨上百年
人類最早是因為天文、曆法、航海、建築，而有了數學 ( 計算 ) 的需求
‧天文與曆法很有關聯，而曆法是農業的命脈
‧天文與航海很有關聯，而航海除了是漁業的命脈之外，更是國力的展現
牛頓就是為了要解決天文學的計算困擾而創造出了微積分
約莫 300 年前，有了牛頓的數學、瓦特的蒸汽機，第一次工業革命於焉展開 《 第一波 》
約莫 100 年前，有了物理的電磁學與機械的內燃機，促成了發電機、無線電、飛機等等的相繼出現，引爆了第二次工業革命 《 第二波 》
第一次工業革命與第二次工業革命間接導致了歐洲海權國家的向外侵略
第二次工業革命更直接導致了一、二次世界大戰
其間，更因為砲彈的彈導問題，而有了更大、更多、更即時的數學 ( 計算 ) 需求
幾經波折，隨著物理學的進步，計算機從 機械式 → 電子真空管 → 半導體電晶體 不斷地演進，最後也進化到變成電腦 《 第三波 》
電腦 ( Computer, 運算器 ) 就是計算機 ( Calculator, 計算器 )
簡言之，電腦就是 可程式化 的計算機 ( 譬如鍵入一組複雜的數學公式，只要有數據就能馬上算出答案，這在科學或是戰爭上，都是無比的重要 )
所以您大學所學的「計算機概論」，其實就是「電腦概論」
又是與戰爭有關，冷戰時期美國基於國防需要，建置了全球第一個 Internet 系統 － － Apanet
又是與物理有關，歐洲核子研究組織 ( CERN ) 裡的 Tim Berners-Lee，為了讓科學研究可以快速交流，創造出了 HTTP、URL、HTML、WWW
Internet ( 網際網路 ) 出現了 《 第四波 》
第五波應該會是 奈米 出線，第六波才會是 基因與生物科技
假設氣候沒有巨變、地殼沒有劇動、慧星沒有撞美國、外星人沒有侵略地球、…，那麼各位的有生之年，應該可以享受到第五波與第六波所帶來的好處
石油很快就會耗盡、核融合發電的技術可能還要再等幾十年、中印兩國會吸乾地球所有的資源、…，所以各位的有生之年也不會太好過 …
理論基礎
英國數學家 Boole ( 布爾 ) 在 1847 ～ 1852 年間發展出 Boolean 代數 ( 布林代數 )
這是二進位的濫觴，有了二進位，才有了計算機的硬體理論架構，也才有了低階程式語言的理論基礎，更因此有了後來的計算機
計算機再進化，就是電腦
計算機
其間，科學家一直想辦法以各種的機械結構、物理原理、電子設備來建造計算機，以處理工作上越來越龐大的計算工程
‧算盤就是最早的計算器
‧工業革命後，機械式的計算器就跟著出現了
但一則體機太大、製造不易，再則計算的速度慢，三則也沒有可程式化的功能，四則容易故障、維修不易
‧電子學是物理的分支，隨著電磁學的進步，電子式的真空管計算機就應勢而生
不過真空管既貴、又大、而且壽命很短
‧當物理學發展到半導體，電晶體取代了真空管，半導體式的電晶體計算機就變成了主流迄今
‧計算機沒有可程式化的功能，故電腦就跟著被研發出來了
半導體
半導體的技術出現後，讓早期佔地一個體育館的電腦，變成您現在正在看筆者文章的那一台小機器
( 10 幾年前的超級電腦，可能還比不上現在四核心 CPU 的速度快 )
( 隨著半導體技術的不斷進步，現在的超級電腦，也可能比不上 10 年後的桌上型電腦 )
傳統矽晶片的製程，大約 20 奈米就會達到物理的極限，故現在的 CPU 已轉向多核心的架構
也就是說 CPU 的進步還是看不到瓶頸 ( Intel 甚至已經有了 80 核的原型樣品 )
換言之，未來的電腦還有很大的變化空間，故您還是得不斷地學習新東東 …
半導體是量子物理的副產品
儲存設備
電腦與計算機的架構基本上是一模一樣的：CPU、RAM、ROM、主機板、顯示器 ( 螢幕 )、電源 ( 電池 )、鍵盤 ( 按鍵 )、…
除了可程式化的功能之外，電腦還多了一樣計算機所沒有的功能，那就是儲存設備
‧最早期的打洞機 ( 沒聽說過吧 )
‧再來是磁碟片 ( 筆者以前玩電腦時，光是為了要玩大一點的軟體，就得要花好幾天以 5 1/4 吋的軟碟解 DDI 檔數百片 … )
‧一開始 5MB 的硬碟要十幾萬台票，等到筆者玩 PC 時，買了第一台 20 MB 的硬碟就花了 1.5 萬 ( 對，是 20 MB，不是 20GB )
‧光碟機與燒錄器 ( 筆者剛玩電腦時，單倍速的 CD 光碟機 = 1 萬台票，單倍速的 CD 燒錄器 = 25 萬台票，一片 640 MB 的 CD 空白片 = 250 台票，… )
‧MO、ZIP 與磁帶機等等沒流行過的東東，就不談了
當時要玩電腦，簡直得傾家蕩產才玩得起 >_<
儲存設備的硬碟 ( 電磁學 )、光碟機 ( 雷射 )，也都是物理的東東
至此，電腦都是因為要解決科學上的運算與儲存而不斷地拿物理的東東來改良與革新
顯示器
等到顯示器夠大後，電腦就不再是科學家的禁臠
因為有了圖像的功能，而不是單純的數學公式，尋常百姓就開始對電腦有興趣了
筆者從 14" 的單色螢幕玩起 → 14" 640 × 480 的彩色螢幕 → 15" 800 × 600 → 17" 1024 × 768 → 19" 1280 × 1024
→ 19" 1280 × 1024 + 19" 1280 × 1024 的雙螢幕，一直到現在 22" 1600 × 1200 + 19" 1280 × 1024 的雙螢幕
筆者到現在都還只用映像管 ( CRT ) 的螢幕，這是因為液晶 ( TFT - LCD ) 螢幕的顏色不夠漂亮
TFT - LCD 現在要顏色漂亮，不是得買 EIZO 貴到爆的產品，就是得買 LED 背光 的新技術產品 ( 編按：三隻鳥的東東，現在已淪為爛貨 )
CRT 是 100 多年前物理的陰極射線管，液晶一樣是物理的東東
在真空的玻璃管中，以電子去撞螢光塗料而發光，這就是 CRT 的原理
物理學界從 100 多年前起，就以電子撞出了一狗票的諾貝爾物理獎得主
杜正宗王八蛋就不提牠了，李遠折老二只是把物理的方法拿到化學去用 ( 把電子束換成分子束 )，就得到了諾貝化學理獎
得獎後記者訪問時，李遠折老二說牠是因為小時後愛打棒球，所以才會想到分子束這種創新的觀念 ( 編按：聽牠在放狗屁 )
當時筆者就跟友人說：李遠折老二這廝很偽善 ( 因為電子束的東東，在李遠折老二的養成教育中，是出現過幾百萬次的觀念 )
李遠折老二若是說牠因為把物理的觀念用在化學上而得獎，那麼就會啟發很多化學後輩傚尤，進而整個化學界就會像電腦界大量引用物理而軍容壯盛
但是上述的說法聽起來不夠「原創」，不夠「偉大」，所以李遠折老二就討巧地說是因為愛打棒球才「原創」出這種「偉大」的觀念 …
事後證明李遠折老二果然比杜正宗王八蛋更王八蛋，身兼了數十個體制外單位的職務而不受任何人的兼督，連高鐵牠都要管
教改也被牠下指導棋下成了 18 分就能上大學，牠還大言啖啖地說：人人都上大學很好呀 ( 編按：凸凸凸 ＝..＝ 凸凸凸 ) ( 編再按：好 TMD 蛋啦 )
閒話扯遠了，回到主題：^^|||
現在主流的液晶螢幕，主要是使用類似日光燈管來背光，這會造成很多問題，所以就得用濾光片來解決
但是一用了濾光片：顏色就會失真、對比就會降低
故變通的解決之道就是把背光加強以提高對比 ( 只要有濾光片，顏色就很難不失真 )
所以液晶螢幕普遍都偏亮，這反而傷眼 !!
‧CRT
缺點：有電磁輻射、體積大、22" 幾乎已是極限 ( 比 22" 大的話，就會是天價 )
優點：顏色漂亮而溫潤、不會太亮、不傷眼
‧TFT - LCD
缺點：對比低、亮度 ( 流明 ) 太高、顏色不漂亮
優點：體積小、尺寸大小理論上無上限
‧LED BackLight TFT ( LED 背光 )
缺點：新技術故良率低 ( 所以貴到爆啦 )
優點：體積小、尺寸大小理論上無上限、顏色漂亮 ( 不用濾光片 )、對比高、…
所以買一般的液晶螢幕要注意幾點：
‧對比越高越好
‧亮度 ( 流明 ) 太亮就肯定有問題
‧若是有 NTSC 值，則肯定會是貴貴的好物 ( 通常 LED 背光的螢幕才會有這項規格，NTSC 92% 是起跳，新一點的都達到 NTSC 104% 以上 )
圖像、顯示、印刷
早期的電腦分類：
Super Computer ( HPC, 超級電腦 ) → MainFrame ( 大型主機 ) → 中型電腦 → 小型電腦 → 迷你電腦 → Work Station ( 工作站 ) → 個人電腦 ( PC or Mac )
大小約是：大型體育館 → 一整層大樓 → 幾間辦公室 → 一間辦公室 → 一 ～ 數個機櫃 → 中型冰箱大小 → 您的電腦
隨著 PC 的進步，現在的電腦分類：
Super Computer → MainFrame → Work Station → PC or Mac → Notebook → UMPC → PDA → CellPhone
大小約是：大型體育館 → 一間辦公室 → 小型冰箱大小 → 您的電腦 → A4 筆記本大小 → A4 ～ A5 之間 → 手掌大小 → 半個手掌
未來的電腦分類：Super Computer → MainFrame → PC or Mac → UMPC → CellPhone
大小約是：一間辦公室 → 幾個機櫃 → 您的主機 → A4 ～ A5 之間 → 半個手掌
Xerox Alto
在電腦硬體 ( 前述的半導體、儲存設備、顯室器 ) 日益成熟之際，也在電腦硬體日益小型化之際，PARC 研發出 整套 的個人電腦系統 ( 請參考 電腦簡史 )
為啥說是整套呢 ?!
1973 年 ( 30 多年前 )，PARC 的 Xerox Alto：
‧圖形界面
‧滑鼠
‧單色螢幕排版
‧單色雷射印表機
‧乙太網路
‧PostScript 印刷 / 印表語言的前身
‧…………
當時的大型電腦，都是文字界面，處理終端機與大量數據的報表為主
當時的工作站，雖然也有排版軟體，但還是幕後排版 ( 文字界面、要打指令、…，很像 HTML )，非現今的幕前排版
PARC 的 Xerox Alto 以滑鼠與圖形界面來幕前排版，還可以直接雷射印表，這震撼了當時的業界，也直接導致了日後 Mac 與 Windows 的出現
桌上那一盤一盤的，應該是磁帶 圖左側手拿的應該是雷射印表機印出來 WYSIWYG 的幕前排版文件
( WYSIWYG ＝ 所見即所得 )
看到沒 ?! 是三鍵滑鼠 ( 爛 Mac 現在還是單鍵的滑鼠 … )
圖形界面
電腦的顯示器 ( 螢幕 ) 與電視的映像管都是陰極射線管，雖然本質相同，但是設定的規格卻差異很大：
‧電視的解析度不用很高 ( 320 ～ 400 條線即可 )，垂直頻率也不用很高 ( 60 Hz 即可 )，只要顏色鮮豔就好
簡言之，類比、低解析度、動態而鮮豔
‧電腦的解析度卻要很高 ( 至少需要 768 條線 )，垂直頻率不能太低 ( 至少需要 75 Hz )，顏色要正確與溫潤
簡言之，數位、高解析度、靜態而穩定不晃動
還有其它的原因：
‧當時的顯示技術似乎只有黑與白的單色，不是灰階顯示 ( 當時數位科技才剛起步，顯示器相關的規格又比電視嚴苛許多 )
‧當時的 CPU 不夠猛，無法處理彩色 ( 甚至是灰階 ) 的資料量：全彩 = 224，單色 = 21，兩者相差 224 ÷ 21 = 839 萬倍 !!
‧當時的 RAM 容量非常小 ( 而且貴到爆 )，無法處理彩色的資料量
‧當時的 ………
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
30 多年前
1973 年，PARC Xerox Alto
全錄 ( Xerox ) 的本業是影印機，輔之當時個人電腦的市場還未出現，PARC 也不是營利單位，Alto 後繼的商業機種又太貴了
這些都讓世人很快就遺忘了 PARC 的個人電腦，除了 Apple 與 Microsoft ....
( 當時 IBM 的老闆還說：市場不需要個人電腦，個人電腦全世界大概只賣得出五台 … )
30 年前
1977 年，Apple II ( 文字界面 )
Apple II
Apple I 只是一台木頭外殼的原型機，並未量產
但是 Apple II 就是全世界第一台量產的個人電腦了：雖然沒有圖形化的界面，但是已具備可程式化的功能，故一推出就賣翻天了
個人電腦的時代，於焉開始
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
20 多年前 ～ 20 年前
‧1980 年，Apple III
雖然 Apple II 大賣，但是 Apple III 又貴又沒啥創新的功能，故銷售數字非常難看
‧1981 年，PC + DOS ( 文字界面 )
IBM 看到 Apple II 大賣，就推出 PC 的硬體規格，並請微軟提供 PC 的作業系統, DOS ( Disk Operating System, 磁碟 ( 軟碟 ) 作業系統 )
這一段歷史非常可笑，別忘了參考 電腦簡史
‧1982 年，試算表
個人電腦第一類最重要的應用軟體出現了
試算表是從計算機進化到電腦的首要目的之一，也是早期大型電腦的基本需求
‧1983 年，Apple Lisa、文書軟體
PC 迅速竄起後，Apple 就推出了先進的 Lisa 來因應
文書軟體，個人電腦第二類最重要的應用軟體在同年出現
‧1984 年，Apple Mac
Lisa 雖然非常先進 ( 全世界第一台量產的圖形界面電腦 )，但是比貴到爆的 Apple III 更貴到爆，所以沒賣出幾台
在推出 Lisa 的隔年，Apple 推出 Lisa 的精簡版：Mac
Mac 開啟了圖形界面的時代，但同一時期 PC 仍是文字界面
‧1985 年，排版軟體 ( PageMaker )、印刷語言 ( PostScript )
試算 → 文書 → 排版，電腦從此走向一般的商用，然後飄進尋常百姓家，並且迅速擴展到所有的知識領域
Apple Lisa
Apple Mac
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
20 年前 ～ 10 年前
‧1987 年，向量軟體 ( Illustrator )、簡報軟體 ( Power Point )、VGA
印刷語言與排版軟體雖然已在兩年前出現，但主要只是排文字，間或一些簡單的單色鋸齒圖
向量軟體出現了，從此圖檔不再是簡單的單色鋸齒圖
VGA 的顯示規格出現了，在 VGA ( 256 色 ) 之前還有 CGA ( 4 色 ) 與 EGA ( 16 色 )
因為當時 CPU 運算的能力有限，輔之記憶體很貴，所以軟硬體一直在單色 → 全彩之間慢慢進化
直到後來的 SuperVGA ( SVGA )，才有 1677 萬色的全彩
‧1989 年，WWW、HTML ( 1992 年才免費公開 )
科學界對運算及其衍生出來的需求是永無止境的：早在一般人還不知道電腦為何物時，WWW 就已經出現 !
‧1990 年，影像軟體 ( Photoshop )
當時的硬碟還很貴，容量也只有區區的 10 幾 20 MB，但是拿軟碟來儲存灰階圖、大面積的 256 色圖、小面積的全彩圖則綽綽有餘
故 Photoshop 也適時出現了
‧1991 年，視訊軟體 ( Premiere )
很難想像 Adobe 那麼早就推出視訊軟體
‧1992 年，Windows 3.1
PC 也進入了圖形界面，學習電腦的難度大大地降低，市場需求旺盛
所有的軟硬體都因為大量需求而開始了不斷地降價 → 進步 → 降價 → 進步 → … → 迄今
‧1993 年，Office 軟體 ( MS Office )、Photoshop for Windows
Windows 的市場開始成熟，應用軟體開始大量出現、不斷地推陳出新
‧1994 年，Netscape ( FireFox 的前身 )
全世界第一套走出實驗室的 Browser：Netscape，一推出後隨即引爆了網際網路的興起迄今
‧1995 年，Windows 95、IE 1.0、Photoshop 3.0、JavaScript
第三波工業革命真正的核彈是 Windows 95
Windows 95 讓全世界的人都瘋狂投入電腦軟硬體相關的製造、創新、研發、商業化、學習、…
軟體技術從此一日千里，也帶動了硬體市場的多樣化與低價化
Photoshop 3.0 問世後，奠基了多媒體的基石
JavaScript 則讓 WWW 有了基礎的活力，不再是呆板又靜態的無功能頁面
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
10 幾 20 年前，要一堆人、要照相打字、要剪刀與膠水、要辛苦好久，才能完成一本書的印前作業
但是這 10 年來，只要一個人在電腦前面動動手指，就可以搞定一本書所有的印前事項
有了網際網路後，也不用印刷了，即時就能把資訊傳到世界任何一個能上網的地方
10 年前，向量軟體、影像軟體、排版軟體全面趨於成熟，WYSIWYG ( What You See Is What You Get, 所見即所得 ) 已是基本的功能、…
CPU 的速度也能輕易處理圖檔、RAM 已不再是天價、硬碟也又大又便宜 ( 擺圖檔啦，不是擺您下載的電影或是 幾萬張的 A 圖 )
圖形界面徹底佔領電腦的桌面
10 年前 ～ 今天
‧1997 年，Flash 1.0、Dreamweaver 1.0
此時應用軟體已全面地 WYSIWYG，但是網頁編製則還停留在 HTML 指令 ( 文字式 ) 的幕後排版
半圖形化網頁編製的 Dreamweaver 一上市就席捲市場
當點陣圖全面進入電腦，向量架構 ( Vector-Based ) 的 Flash 悄然問市
‧1998 年，Google、Windows 98
Google 成立
Windows 98 再一次把 Windows 推向高峰 ( 把封閉的 Mac 打入冷宮 )
‧2000 年，Windows 2000、Pentium 4 ( P4 )
Windows 2000 徹底揚棄 DOS 核心，成為史上最強健的作業系統
P4 問世，電腦的運算能力邁向新的里程碑 ( 可以處理多媒體 )
‧2001 年，Windows XP
微軟依舊壓重兵在桌面應用，反而忽略了網際網路的興起
‧2003 年，Corel 下市
大者恆大的趨勢已現，繪圖軟體大廠 Corel，因為擴充到太多雜七雜八的領域而爆發財務危機、被併購下市
‧2005 年，Adobe 併購 Macromedia
大者恆大，併購是最快速的手段
‧2006 年，Blogger 正式版
經過很久的 Beta 版，Blogger 終於推出了正式版
從此不需要擔心頻寬、不需要擔心硬碟空間、也不需要工程師的支援，只要懂一點 XHTML，人人都可以經營網路
‧2007 年，Windows Vista、MS Expression Studio
微軟依舊壓重兵在桌面應用，所以在網際網路的服務，微軟被 Google 與 Yahoo 打得滿頭包
不果微軟也不是省油的燈，在 Vista 這隻大木馬的基礎上，發展出了 Expression Studio，準備要屠整個網際網路的所有城堡
‧2007 年年底，天下無敵【火星人】首創 Blogger 免費大教學，電腦教學的紙本從此走入歷史的灰燼 ^+++++++^
隨著液晶螢幕的低價化，1024 × 768 已是最低的解析度，螢幕閱讀開始可以取代紙本
‧顯示卡已經可以處理即時的 3D 動畫 ( 狹義指 Game )
‧圖檔的處理已是 Piece of Cake
‧多媒體的播放已是電腦最最基本的功能
‧網際網路已是所有人必備的工具
‧……
今天的電腦似乎已是完美的、無所不能的、所有的產業都得導入電腦來增加效率、甚者如好萊塢創造出以前根本難以想像的東東、…
電腦的軟硬體似乎只要再修補一些小地方，就可以達到頂峰，從此不會再有特殊的新東東出現，故也不用認真學電腦 ?!
真的是這樣嗎 ?! 看看 30 多年來，電腦的軟硬體進步，曾有稍歇過嗎 ?!
DOS 的文字界面並不是沒有圖形的功能，只不過每一個軟體都得在 DOS 有限的圖形功能上自行開發圖形界面
因為是自行開發，所以非常耗時，因為規格不同，故每一個圖形界面的軟體都很難與其它的軟體互通有無
從 Windows 3.1 起，不僅可以多工，不同的軟體間也可以互通有無 ( 譬如可以 Copy / Paste )
但有一個問題卻從來就沒解決過 !! 那就是螢幕的解析度：dpi ( dots per inch, 螢幕每一英吋中的點數 )
印刷至少要 300 dpi 才會既清楚又漂亮，印表也至少要 150 dpi，但螢幕永遠是 72 or 96 dpi
CRT 礙於物理與機電的限制，很難再提高 dpi 的規格，但是液晶螢幕卻可以
現在的液晶螢幕是先求量大、價低、大尺寸、顏色不失真，等到 LED 背光螢幕變成人人都負擔得起時，恐怕才會去提高 dpi 的規格
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
電腦業界還有另一個盲點：鋸齒點陣圖界面
圖形界面雖然是電腦走進尋常百姓家的第一功臣，但因為螢幕的 dpi 過低，所以螢幕上的文字永遠都是有鋸齒的點陣字
早期的電腦還有中文卡，也就是從 6 × 6 → 8 × 8 → 9 × 9 → 10 × 10 → 11 × 11 → 12 × 12 → 14 × 14 → 18 × 18 → 24 × 24
→ … → 512 × 512 → 1024 × 1024，各種字級大小的鋸齒點陣字
一個字級就要造一套字、故一張中文卡要價好幾萬 ...
Adobe 的老闆從 PARC 帶著 PostScript 前身的技術出來創業
PostScript 說穿了就是同時處理向量字、向量圖與點陣圖 ( 整合排版與印刷 )
向量字除了檔案大小比鋸齒點陣字小非常多之外，最重要的就是縮放不失真之外
向量字天生就不會鋸齒，也不必一個字級就要造一套字
Adobe 就靠著 PostScript 統領印刷界的數位化而壯大
‧PostScript 是印刷與高階印表的語言 ( 印刷界唯一的標準 ← Adobe 早期靠這個就賺翻了 )
‧Type 1 ( ATM ) 向量字 ( Adobe 攏斷的技術 ← Adobe 早期靠這個就賺翻了 )
‧Illustrator 向量繪圖
‧Photoshop 影像處理
‧PageMaker 排版軟體 ( 現在已換成 InDesign )
上述就是電腦排版所需要的全部軟體，至若兼具印刷、電子書、網際網路的 Acrobat ( *.pdf )，則是後來逐步發展成型的
有了 PostScript ( 向量字、向量圖、點陣圖 )、PageMaker ( 排版 )、雷射印表機，圖形界面的 Mac 才得以在推出後大賣
因為 Adobe 攏斷了印刷最重要的兩個標準：PostScript 與 Type 1 向量字
所以 Apple 就與微軟合作，開發出了 True Type Font ( *.ttf )：
Windows 3.1 時就支援 TTF 字型，Mac 也一樣適用 TTF
TTF 雖然沒有 Type 1 漂亮，但也相去不遠，還可以用於印刷
TTF 在作業系統與軟體界面都是以鋸齒點陣字的方式呈現 ( 小字清楚 )，在軟體的編輯區則會以向量字呈現
TTF 與 Type 1 最後則整合成 Open Type ( 同時相容於 TTF 與 Type 1 )
印刷物在 Mac 推出後不久就沒有鋸齒點陣字的困擾了，但螢幕的文字卻因為 dpi 過低而依舊是鋸齒點陣字
這在 Flash 的應用上最為頭痛：
‧小字會因為轉成向量而模糊
‧小字不轉成向量就要嵌入字型檔，而字型檔以鋸齒點陣字呈現時，就會因為鋸齒反而變成清楚不模糊 ( 但不漂亮 )
英文字的字型檔很小，但對中文來說就很頭大了：
即令寬頻，但一套中文字型檔動輒就是 5 ～ 15 MB，實在是太大了! 雖然 Flash 可以只嵌入小半套的中文字型檔再壓縮，不過還是要 1 MB 左右
‧不嵌入字型檔又要鋸齒點陣字，就得以 PNG-24 的去背字圖 ( 費工又麻煩 )
當您覺得電腦已臻成熟之際，因為解決了最不起眼的界面鋸齒點陣字，竟然引發了另一波的大躍進 …
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
說來也很弔詭
文字：Apple II 雖是文字界面，但是因為開放而大賣
圖形：Mac 雖是第一個圖形化的電腦系統，但卻因為封閉而被當時還是文字界面的 PC 搶走市場
印刷：Adobe 因為把向量納入到 PostScript 與 Type 1，因而統治了整個印刷界
即把向量的位階拉到比點陣高
網路：Macromedia 放棄了寡占的點陣多媒體編製軟體 ( Director ) 而轉投向量多媒體編製軟體 ( Flash )，進而變成網頁編製的龍頭老大
也是把向量的位階拉到比點陣高
液晶：微軟一開始只是為了解決液晶螢幕點陣字不清楚的毛病而推出了 Clear Type
後來 Windows Vista 的界面突然決定向量化，Clear Type 就重獲新生
一樣是把向量的位階拉到比點陣高
在往下討論之前，請先看微軟 Expression Studio 中的 Expression Blend 介面：
Expression Blend 的介面可以無段式調整大小，下圖是 100%
拖曳到 150% ( 其實還可以再大，但太大就沒意義了，所以最高只能到 150% )
注意到沒 ?!
除了下拉選單的文字沒變大之外，所有的界面文字都變大了，而且還很清楚地變大 ( 是向量的放大，不是點陣的放大 )
左側工具列的圖示也放大了，而且也是向量式的放大
so what ! 這有啥了不起 ?!
對以前人來說，從計算機變成電腦也沒啥了不起，只不過是可程式化而已，所以當時 IBM 的老闆才會說全世界賣不出五台個人電腦
Flash 也只不過是向量技術，沒啥了不起嗎 ?!
Windows Vista 華麗的 Aero 界面，也沒啥了不起嗎 ?! ( Mac OSX 已不再有人覺得很炫了 )
Microsoft Surface ( Link 1 2 3 ) 也沒啥了不起嗎 ?! ( 這可是比 iPhone 還炫太多了 )
以前 Windows 桌面的圖示，都是有鋸齒邊的縮圖，隨著 Windows XP 的界面支援 PNG 檔，現在很多新軟體的圖示都沒有鋸齒
( 左邊是有鋸齒，右邊是無鋸齒 )
放大到 600%
不過無鋸齒的 PNG 也已經落伍了：
‧Clear Type 解決了界面文字 ( 小字 ) 向量化會模糊的窘境
故螢幕的 dpi 未來能拉高則最好，沒拉高也已經無傷了
‧Windows Media Player 解決了視訊檔縮放會失真的問題
視訊檔是連續點陣圖，點陣圖縮放一定會失真，但只要縮放的幅度在 400% 以內，則幾乎感覺不出來
視訊檔的連續點陣圖縮放都不失真，這代表了整個 Windows 的點陣圖縮放都可以不失真
‧Windows Vista 的界面已是徹頭徹尾的向量檔 ( WPF / XAML )，向量檔的位階比點陣圖高，所以也可以處理點陣圖
。WPF ( Windows Presentation Foundation ) 的語言是 XAML
XAML 可以把向量檔與 3D 檔直接轉成 XAML ( 文字語法 ) 的一部份，帥吧 !
。XAML 可以用於 Visual Studio 的新版
也就是說以後 Windows Vista 的原生軟體都已具備比 Flash 更 Flash 的向量界面之能力
。XAML 還可以把應用程式轉成 IE 專用的 XBAP ( XAML Browser Application )，即桌面軟體也可以編譯成網路程式
。XAML 跨平台的網路應用就是 Silverlight ( 號稱 Flash Killer )
。WPF / XAML 讓界面也可以動態化 ( Vector-Based )、程式化，換句話說 Microsoft Surface 的界面應該就是 WPF / XAML
。同樣的技術若是用在 Windows Mobile，那 iPhone 根本就是玩具
簡單來說：
‧Windows Vista ＝ Windows XP + .Net Framework 3.0 ( 所以 XP 的用戶一定要安裝 .Net Framework 3.0 )
‧DOS ( 文字界面 ) → 以前的 Mac OS / Windows ( 鋸齒的點陣圖界面 )
→ Mac OSX / Windows XP ( 無鋸齒的點陣圖界面 ) → Windows Vista ( 向量 + 動態化的圖形界面, Vector-Based 的 WPF / XAML )
您可以參考筆者寫的 Expression Blend + Silverlight Blogger：
該 Blogger 是筆者應 微 ×.tw 邀稿所寫的，但是該公司窗口 C 小姐為求表現不斷地開空頭支票
到最後還說要不然給筆者兩萬台票算了 ( 安妮娘勒，這是施捨呀 ?! 筆者當然從頭到尾一毛錢都不拿 )
小女生還想玩俺這個老鬼，找死 !! 妳以為 微 ×.tw 是大公司俺就怕你們喔
所以當他們公司都知道筆者的 Blogger、所以當 SEO 也都是筆者的 Blogger 時，筆者就把 微 × 大凸槌的事件公佈
‧做事若是按照規矩，那筆者會是最好溝通的人
‧做事不照規矩就算了，事後筆者已不吭聲她還想陰俺搞俺，那俺就會是她永遠的惡夢 ^++++++++++++++^
( 當某大電腦補習班人士要問筆者 WPF 相關的東東時，C 小姐還在背後中傷筆者，叫他們不要找筆者 )
‧最後告訴各位，微 ×.tw 幾乎完全不瞭解 WPF、XAML 與 Silverlight，研討會也都是鬼扯一通 …
故除非 C 小姐滾蛋，不然筆者不會再更新該 Blogger 的內容 ( 當然啦，微 ×.tw 也推不動 Silverlight )
‧最可惜的就是 WPF、XAML、Silverlight 這些好物就這樣子被 微 ×.tw 給玩爛了 …
最後來看看筆者搞的兩個舊東東：
有鋸齒、無透明的界面 ( 八百年前的東東 ) ↓ 約 6 MB RAR
無鋸齒、半透明的界面 ( 那時 Windows Vista 尚未推出 ) ↓ 約 8 MB RAR
此兩者的差異，就等於是 XP 與 Vista 應用程式的差異 !!
好啦，前面講了那麼多的小故事，旨在說明：
‧現在電腦之所以那麼好用，是無數人心血的結晶，而很多美編人員 ( 喜歡自稱是設計師者 ) 常常連「學」都懶，更別說是去「研究」了
‧鋸齒與抗鋸齒 ( Anti-Aliased, 消除鋸齒 )、點陣與向量、CMYK 與 RGB、Pixel 與 dpi、…，很多「設計師」到現在還搞不清楚，這實在太扯了
‧電腦軟硬體的發展，目前還看不到瓶頸，各位網友可千萬不能停止學習
Windows 有兩個地方可以設定 Clear Type（XP 要手動設定，Vista 預設就是 Clear Type）
1. Windows
１. 桌面 > 右鍵 > 內容
２. 切換到 外觀 > 效果
３. 依圖設定 Clear Type
( 筆者的螢幕太大了，也太亂了，故重新搞一張桌面的示意圖 ^^||| )
Clear Type 未開啟 ( 圖右是放大到 300% )
Clear Type 已開啟
放大後可以很明顯地看到英文字的邊緣與中文字不同，那是因為 Clear Type 的向量技術，可以讓小字清晰而不必鋸齒點陣
2. IE
IE > 下拉選單 > 工具 > 網際網路選項 > 進階 > 多媒體 > HTML 永遠使用 Clear Type*
套用 Clear Type 後，把網頁抓圖再放大之：英文字變成向量了，但中文字依舊是鋸齒點陣
別忘了 IE 7 以後可以按 Ctrl + + 放大頁面，Ctrl + + 數次後、抓圖、再放大之：中英文字都變成向量了 !!
也就是說 Windows 界面的文字或是 IE 內的文字，小的英文字都因為 Clear Type 而向量清晰不模糊，大字則中英文都是向量字
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Anti-aliased（抗鋸齒, 消除鋸齒）
理論上最好不要有鋸齒，但有太多情況我們非得要有鋸齒不可，而很多初學者 常常搞不清楚哪些地方可以 開關 鋸齒，分述如后：
Lesso ( 套索工具 )：這是筆者的最愛，大大小小的問題沒它都不行，九成九的去背也都靠它
Magic Wand ( 魔術棒工具 )：說實話，筆者幾乎不用這東東
Eraser ( 橡皮擦工具 )：廣義來說，橡皮擦工具是筆刷的一種
‧Caps Lock ( 大小寫切換鍵 ) 在 小寫 的情況下，游標就會變成筆刷的形狀
‧按 [ 鍵 or ] 鍵，就可以控制筆刷的大小
橡皮擦工具設定為 Pencil ( 鉛筆 )，就會有鋸齒
橡皮擦工具設定為 Brush ( 筆刷 )，就 Anti-aliased 無鋸齒，故很多網友就習慣以此去背 … ( 請愛用 Lasso 啦 )
文字設為 None ( 無 ) 時，就會有鋸齒
文字設為 Smooth ( 平滑 )，就是 Anti-aliased 無鋸齒
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
鋸齒凹凸
跟書桌上書燈的最佳位置一樣 ( 對右手握筆者 )，電腦繪圖也常假設光源是在左上方
０. 首先，光源是從左上角往右下角照射
‧凸出會受光，故顏色比較淺；凹陷不受光，故顏色比較深
‧凸出物的陰影會落到右下角，凹陷物右下角的斜邊會反光 ( 下圖左側 陰影 與 凹角反光區 的大小都已加大以利辨視 )
‧Layer 中的物件要移動時得使用 移動工具 ( 快速鍵為 V 鍵 )
‧Layer 中的物件若是要微調，在點選 移動工具 的情況下，按方向鍵一次就微調一個 Pixel ( 畫素, 像素 )
１. 鋸齒凸字：打字 > 把文字設定成 None > 把文字的顏色設定成比底色深 > Ctrl + J ( 拷背的圖層 )
> 把工具設為移動工具 ( 按 V 鍵 ) > 按 ↑、按 ← 各一次 > 把文字的顏色設定成比底色淺
鋸齒凹字：請舉一反一，不再贅述
２. 把字級加大、再設為粗體字
３. 把字型改為中圓，文字設為 Smooth ( 平滑, 抗鋸齒 )
您可以發現抗鋸齒字就是沒鋸齒字來得清楚，礙於螢幕的 dpi 太低，所以很多時後小字還是非用鋸齒不可
( Photoshop 沒有 Clear Type 這種技術，所以小字一定得用鋸齒字 )
４. 換個字體、再把字級加大來看看
編製網頁時，我們常常得以鋸齒 ( or pixel 圖 ) 的方式來搞界面圖
下圖是國外論壇的抓圖 ( 已去除掉文字的部份 )，拖曳到 Photoshop 再放大來看，就可以發現其編製的技巧不賴： ( 光源一樣是設定在左上角 )
一部份是以 pixel 的方式編製，剩下的部份則都是無鋸齒 ( ← 高手才會如此，一般的低手 or 懶鬼都馬是全程鋸齒 … )
有耐心看完一堆小故事、瞭解了鋸齒與抗鋸齒、凹與凸、…、之後，接下來就夠資格開始學 Channels ( 色版 ) 了 ^++++++++++++++++++++++++++++^
１. 開新檔案 ( Ctrl + N )
２. 圖檔大約 300 × 300 pixels 的大小
３. 開新檔後，填入灰色
４. 橢圓選取工具，按 Shift 拉出正圓
５. 在選取區是動態虛線的情況下切換到 Channels 面板，把選取區儲存為色版
６. 剛儲存的色版被 Photoshop 命名為 Alpha 1
Alpha 1 要保留下來，以利等一下的作業
拖曳 Alpha 1 到 建立新色版 的小圖示，就產生了 Alpha 1 copy 的色版
( 您也可以在選取區還是動態的情況下，再按一次步驟５, 把選取區儲存為色版, 則新的色版就會被 Photoshop 命名為 Alpha 2 )
( Alpha 的名稱隨時都可以重新命名 )
７. 在 Alpha 1 copy 套用 Filter ( 濾鏡 ) > Blur ( 模糊 ) > Gaussian Blur ( 高斯模糊 )
８. Radius ( 強度 ) = 3，不要設定太大
９. 再來套用 Filter ( 濾鏡 ) > Stylize ( 風格化 ) > Emboss ( 浮雕 )
Height ( 高度 ) 的數值最好與步驟８的 Radius ( 強度 ) 相仿
10. 這是已套用 Gaussian Blur 與 Emboss 後的 Alpha 1 copy，看起來有凹下去的感覺
左上角的凹角斜邊背光，所以比較暗；右下角的凹角斜邊面光，所以比較亮
11. 與步驟６相同，把 Alpha 1 copy 複製出 Alpha 1 copy 2
12. 點選 Alpha 1 copy 2
13. 按 Ctrl + I ( Invert, 負片效果 )，就得到步驟 13 的圖，看起來有凸起來的感覺
又是題外話：
Silverlight vs. Flash
Adobe / Macromedia 的 Flash 是以 Browser ( 網頁瀏覽器 ) 為基礎所開發出來的純網路應用
時間軸為其最高位階，程式語法 ( Action Script ) 與 Flex、AIR ( Apollo ) 則是後來才發展出來的
而微軟的 Silverlight 則是以 OS ( Operating System, 作業系統 ) 為出發 → WPF → XAML → Silverlight，程式語法為其最高位階
最後把 OS ( Vista / .Net Framework 3.X )、Language ( 程式語言 ) 的 Visual Studio、Web ( IE, XBAP, Silverlight ) 都綁在一起
未來這兩大 RIA ( Flash 與 Silverlight 都是 Rich Internet Application ) 的應用，都會蓬勃發展，但是其出發點卻完全不同
CorelDRAW 與 Illustrator 的緩衝區
像 CorelDRAW 與 Illustrator 這類的向量軟體，在文件區外都有緩衝區可用，這在編製時是非常方便的 !
向量軟體與影像軟體在本質上是完全不同，所以影像類的軟體都沒有緩衝區
緩衝區就像做數學的計算紙一樣，影像軟體沒有緩衝區，所以就得以其它變通的方法
Photoshop 2.5 版時，記憶體與硬碟都又小又貴
圖層的觀念是向量軟體先導入的，因為向量的檔案小，所以加了圖層的功能也不痛不癢
Photoshop 把 RGB 三原色拆成三個不同的 Channels，每個 Channel 都是 256 階的灰階
這種方式的好處就是針對不同原色的 Channel 來 調整灰階，就可以達到數位暗房 調色 的目的
上圖左是紅色，您可以發現紅色的 Channel 是白，其它的 Channels 是黑
即白色代表紅光是開啟的，其它 Channels 的黑色則代表色光是關閉的
紅光開、藍綠關，依 RGB ( 紅綠藍 ) 三原色的原理，當然呈現出紅色
上圖右是紅到黑的漸層，即上方是紅光開，下方是紅光關
在紅色的 Channel 就是從白到黑，藍綠的 Channels 依舊還是黑色
所以 Channel 天生就有著白色是全開 ( 全選 )，黑色是全關 ( 全不選 ) 的特質
當調色這種數位暗房的目的達成後，Photoshop 就要能影像處理
影像處理的第一步就要具備 Select ( 選取 )、Load Selection ( 載入選取 )、Save Seclection ( 儲存選取 ) 等功能
Photoshop 雖然也有 Select ( 選取 ) 的功能，但是一次只能儲存一個選取區，不像向量軟體的緩衝區那麼好用
點陣 ( 影像 ) 軟體與向量軟體雖然都是繪圖軟體，但是在本質上卻相差很多，所以無法借用向量軟體緩衝區的觀念
Photoshop 於是乎在 Channels 面版加入了 Alpha 的功能 ( 即 RGB 那 3 個是 Channel，新增的是 Alpha )
Alpha 就是緩衝區 ! 256 灰階的 Alpha，對當時硬碟與記憶體都是又小又貴的年代，並不會增加太多的負擔
Alpha 裡面白色就代表 全選，黑色就代表 全不選，灰階的部份就是 部份選 ( 半透明 )
有了 Alpha 的功能，Photoshop 2.X 就具備了影像處理的能力了：
‧最常用於去背
‧基本的影像處理 ( Alpha 常當成是選取區的緩衝區 )
‧陰影的編修
‧……
很快地硬碟與記憶體都變大變便宜了，故 Photoshop 3.0 就加入了 Layers ( 圖層 ) 的功能
就好像 Silverlight 與 Flash，雖然出發點不同，但最後都可以拿來編製 RIA ( Rich Internet Application, 網路多媒體 )
Channels ( Alpha ) 與 Layers 的出發點不同，一樣可以拿來調色與影像處理
Flash 的時間軸是比較舊的觀念，所以一旦加入程式語法的功能後，就開始捉襟見肘
Silverlight 則一開始就以程式語法為出發，故未來會比較看好
筆者不會因為 微 ×.tw 陰俺做好幾個月的白工還搞俺，就說 Silverlight 的壞話
不過 微 ×.tw 有著 微 ×公司專有的自大嘴臉，這會讓 Silverlight 初期很難推動
Channels ( Alpha ) 雖然省記憶體與硬碟空間，但畢竟是舊觀念，所以很難使用，故現在已被 Layers 完全取代，除非一些特例
Flash 雖然動畫效果一級棒，但是在互動與程式語法上會被時間軸綁死，所以未來 可能 會被 Silverlight 取代
好啦，回回神，繼續 Channels 凹凸字效
１. 前述的 Alpha 計有三個：「圓」、「凹」、「凸」← 後續都以左述命名，已利討論
２. 點選到「凹」的 Alpha，按 Ctrl + L ( 色階 )，點選 黑滴管，然後在「凹」的灰色處點一下
這步驟的目的：只要黑滴管點到的地方，顏色比它深的都會變成黑色 ( 包含被點到處，也會變黑 )
如此，就只剩下凹角斜邊的反光處 ← 這就是緩衝區
同理，把「凸」的受光面也保留下來當緩衝區
３. 套用黑滴管後，就得到了「凹黑」、「凸黑」
４. 點選到「凹黑」，然後 Ctrl + 滑鼠左鍵按「圓」的縮圖，就會在「凹黑」載入「圓」
( 白色的部份就會全部載入, 全選、黑色的部份不載入, 全不選、灰色的部份半透明載入, 部份選 )
５. 「凹黑」載入「圓」了 ( 圓就是緩衝區，「凹黑」載入「圓」這個緩衝區，目的就是針對選取區來處理 )
‧向量軟體天生就是物件化，所以點選到物件就可以處理
‧影像軟體整張圖就是一個物件，所以只能針對選取區來處理
Alpha 就是緩衝區，載入後變成選取區才能繼續處理 ( Layers 有物件化的功能，所以比較簡單直覺 )
６. 在繼續處理之前，先放大來看：您可以發現凹角反光區一部份在「圓」內，一部份在「圓」外
這是因為之前有套用 Gaussian Blur，所以才會超出「圓」外
７. 把前背景調整為黑白，調整後若是按 Delete 鍵，凹角反光區就只會剩下「圓」外的部份，稱之為「凹黑外」
８. 按滑鼠右鍵 > Select Inverse ( 反轉選取, 反選 )，就會選到圓以外的地方
９. 反選後若是按 Delete 鍵，凹角反光區就只會剩下「圓」內的部份，稱之為「凹黑內」
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
例一 Layers + Channels
１. 開啟一張大小相同的圖檔，置入紋理
無中生有紋理請參考：四向連續無接縫紋理 ( 1 )、四向連續無接縫紋理 ( 2 )
然後把「圓」與「凹」分別拖曳過去
２. 拖曳過去後，紋理圖檔就有了這兩個 Alpha，而且大小與位置都一模一樣
３. 點選到「凹」> Ctrl + A ( 全選 ) > Ctrl + C ( Copy ) > 點選 Channels 面版最頂端的 RGB ( 切換回 Layers ) > Ctrl + V ( Paste, 貼上 )
調整 Blending Mode ( 混合模式 ) 為 Overlay ( 覆蓋 )
雖然已有凹陷的效果，但不夠真實：因為凹陷處比較不受光，所以應該再暗一點
４. Ctrl + 滑鼠左鍵按「圓」，載入「圓」為選取區
５. Ctrl + L ( 色階 )，把紅圈處的三角形往左拉：減少亮部就等於調暗
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
例二 Channels（1）
如果各位知道 13、14 年前 Photoshop 2.x 版時，只有 Channels 卻沒有 Layers、硬碟 / 記憶體小到不行、沒有網際網路、沒有中文版、只有紙本的字典、…
當時要搞一張爛圖是多麼地痛苦與費時，就知道您們現在有多好命了 !! 現在電腦的環境這麼好，資訊垂手可得，還有火星大教學 ( ^+++^ )，很多人卻無心學習 …
本篇能看到這一行者，就代表您還有救，所以囉，好好把玩 Channels 唄，能活用 Channels + Layers，才算是 Photoshop 登堂矣 ( 但未入於室喔 )
寫大教學也是一樣地痛苦與費時
雖說以 Captivate + iceProjector + Flash 來編製 ( 即前面那個「無鋸齒、半透明界面」的下載檔 ) 既炫又省時省工
但筆者最後還是決定以圖文為主軸，因為圖文可以反覆斟酌許多重要的觀念，但是 Captivate 式的教學卻很難做到這一點
每次看到捲軸中那個拖曳長方形變得越來越短，筆者就覺得很爽 ( 這是筆者寫大教學唯一的樂趣 ^^||| ← 因為您滾輪會滾到手軟 ^+++++^ )
但各位知否，像 Channels 這種超級難寫的單元，筆者又怕寫得太長而讓網友退卻，就得不斷地斟酌、斟酌、再斟酌
圖文式的教學可以講觀念 ( 教釣魚 )、易於前後對照、讓讀者舉一反三、…，但 Captivate 式的卻只能講範例 ( 給魚吃 )、也不易於再三閱讀與思索
真的寫到不知道要如何寫才能既精簡又好懂，所以小發個牢騷 ^^|||
為了方便對照，請先搞懂這個 示意圖：
套用 Alpha 時，通常不會用到「凸」與「凹」這兩個灰底的 Alpha，因為灰底會造成半透明，徒增困擾
我們要的是已套用過黑滴管的黑底 Alpha 來當緩衝區，載入緩衝區為選取區後，就能針對選取區來處理
Channels 的效果，以前都是在同一個 Layer 上完成 ( Photoshop 2.X 版時，也生不出第二個 Layer )
缺點就是完成一個步驟後，就會被釘死，毫無修改的空間
故以下的範例還是會用到 Layers，以利後續的編修 ( 如移動、調深調淡、… )
１. 新增 Layer 1 > 載入「圓」為選取區 > 填入比底色深一點的顏色 ( 也可以在 Background 載入「圓」，然後按 Ctrl + J )
２. 再新增 Layer 2 > 載入「凸黑內」> 填入黑色，如此已有下凹的感覺
Gaussian Blur > Radius ( 強度 ) 與 Emboss > Height ( 高度 ) 要大一點點，陰影才會真實好看
３. 新增 Layer 3 > 載入「凹黑外」> 填入白色，如此就有凹角反光的效果
Gaussian Blur > Radius 與 Emboss > Height 要很小，凹角反光才不會太過而不真實
最後可以調整每個 Layer 的 Opacity ( 不透明 )，免得過黑或過白
文字效果：
如果您不想要凹陷的邊緣銳利：
「圓」比底深、「凸黑」填黑、「凹黑」填白、再調整 Opacity ( 不透明 )：
這與例一殊途同歸，差別只在於沒有置入紋理
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
例三 Channels（2）
凹的討論完後，沒理由不討論凸的效果
凸起就要有陰影：
‧「圓」比底淺
‧在背景 Layer 上新增一個空白的 Layer > 載入「圓」> 填黑色 > Ctrl + D 取消選取區 > Gaussian Blur > 向右下角移動 > 調整 Opacity
凸得真實一點 嵌入式的凸
「凸黑內」填白、「凹黑內」填黑、陰影 「凸黑外」填黑、「凸黑內」填白、「凹黑內」填黑、「凹黑外」填白
文字效果：
Channels 當然還有其它的功能，也可以再加工，但上述已足夠一般的用途（Channels 字效、選取區）
前面的「Channels 凹凸字效」講了一大堆，但是看起來都馬素素的，效果不怎麼樣呀 !!
殊不知那跟素描一樣，是基本工，讓您對光影與 Channels 有基本的概念，如此，本節您才能遊刃有餘、運斤成風
前置作業
首先，無中生有一張有橫紋的底圖
鍵入文字
在文字的 縮圖上 按 Ctrl + 滑鼠左鍵 以取得選取區，然後在 Channels 面板把選取區儲存為色版 ( Alpha 1 )
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
把 Alpha 1 複製為 Alpha 1 copy，然後套用 Gaussian Blur ( 高斯模糊 )
同樣的方法再編製出一個 Gaussian Blur > Radius =10 的 Alpha，並把這兩個 Alpha 更名為 Gblur = 5、Gblur = 10
接下來的步驟很重要，請留意：( 也就是把 Gblur = 10 這個 Channel 存成 psd 檔啦 )
Gblur = 10 > Ctrl + A ( 全選 ) > Ctrl + C ( Copy ) > Ctrl + N ( 開新檔案 ) > Ctrl + V ( 貼上 ) > Ctrl + E ( 合併圖層 ) > 存檔 ( *.PSD ) > Ctrl + W ( 關閉 )
回到 Layers 面板，關閉文字 Layer 的眼睛，點選底圖 > Ctrl + J ( 拷背的圖層 )
這步驟有兩個目的：第一、在複製的 Layer 上可以大膽地嘗試，若是不滿意，刪掉後重新再複製一個即可
第二、等一下套用 Displace 後，會造成底紋的邊緣損耗，留著底圖才可以回補之
底圖 copy 的 Layer > Filter ( 濾鏡 ) > Distort ( 扭曲 ) > Displace ( 移置 ) > 載入剛才儲存的 *.PSD 檔
看到沒 ?! 橫紋會依著載入 PSD 檔的 Gaussian Blur 而產生起伏
Displace 的 Photoshop 7 ( 英文 ) vs. Photoshop CS2 ( 中文 )
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
開始加工
１. 這種凸起字效在上色時若是邊緣太銳利，反而不好看，所以載入 Gblur = 5
２. 點選到 底圖 copy 的 Layer
３. 按 Ctrl + J ( 拷貝的圖層 )，就複製出 Layer 1
４. 此時動態的虛線還在
５. 按 Ctrl + U ( Hue / Saturation, 色相 / 飽和度 )
６. 如此就等同於完成了填色，而依舊可以看到橫紋
７. 再把 Alpha 1 複製出一個新的 Alpha ( Maximum12+Gblur12 )，依命名，當然要套用 Maximum
８. 套用 Filter ( 濾鏡 ) > Other ( 其它 ) > Maximum ( 最大 ) 後，Alpha 中的白色處會外擴
接著再套用 Gaussian Blur，Radius ( 強度 ) = 12
９. 在 底圖 copy 與 Layer 1 中，新增一個空白的 Layer ( Layer 2 )，載入剛才那個 Alpha ( Maximum12+Gblur12 )，填入黑色
10. 調整 Blending Mode ( 混合模式 ) 與 Opacity ( 不透明 )
11. 有陰影了
請留意：本例並不完全遵照光源是在左上角 ( 初學者得先學會光源是在左上角，但真實世界光源則不一定如此 )
12. 開新的 Layer ( Layer 3 ) > 載入 Gblur = 5 的 Alpha > 從下方往上填入 黑到透明 的漸層
13. 調整 Blending Mode ( 混合模式 ) 與 Opacity ( 不透明 )
14. 不讓整張圖的顏色太均勻，看起來才會自然一點
填入黑到透明的漸層：
１. 按此可以把前景色設為黑、背景色設為白
２. 點選漸層工具
３. 編輯漸層
４. 選擇黑到透明
５. 已是黑到透明了
15. 複製 Alpha 1 > Filter ( 濾鏡 ) > Other ( 其它 ) > Minimum ( 最小 ) > Radius = 5
16. Gaussian Blur ( 高斯模糊 ) > Radius ( 強度 ) ＝ 5
17. 把這個 Alpha 命名為 Minimum5 + Gblur5
18. 複製 Gblur = 5 為 Gblur 5 copy
19. 在 Gblur 5 copy 中載入 Minimum5 + Gblur5，再背景色為黑的請況下按 Delete 鍵
20. 開一個新 Layer ( Layer 4 ) > 載入步驟 19 > 填入白色 > 調整 Blending Mode ( 混合模式 ) 為 Overlay ( 覆蓋 )
如此，我們就得到了玻璃邊 透明 + 反光 的感覺
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
加入光影
１. 既然已有了 Gblur = 5 copy，那就再利用之：複製為 Gblur = 5 copy 2
２. 複製後 > 向右移動 15 pixels > 向下移動 10 pixels > 載入 Gblur = 5 copy
３. 按 Ctrl + I ( 負片效果 )
‧Ctrl + D, 取消選取區
‧Ctrl + H, 隱藏 / 顯示 選取區
４. 點選選取畫面工具 ( 或是 Lasso, 套索 )，才可以操作步驟５
按 a：把前景色設為黑、背景色設為白
按 b：把前背景色對調
５. 載入 Gblur = 5 > 右鍵 > Select Inverse ( 反轉選取 ) > Delete
６. 按 Ctrl + D ( 取消選取 ) > Ctrl + Shift + L ( 自動色階 )
７. 開新的 Layer ( Layer 5 ) > 載入步驟６ > 填入白色 > 調整 Blending Mode ( 混合模式 ) 為 Overlay ( 覆蓋 )
這個光影有點太過了，不過等一下的步驟會自然淡化之
８. 之前的文字 Layer > 右鍵 > Rasterize Layer ( 點陣化文字 )，免得網友的字型與筆者不同
Ctrl + J ( 拷背的圖層 ) > 套用筆者提供的 Style ( 樣式 )：
| 下載 Style ｜ Style 的使用方法 |
９. 下載檔中的 Style ( 樣式 ) > 其它字效 ( 2 ) > 43
10. 套用後的效果
11. 接著要小改一下 Style：在 Layer 右側 反白的 f 上連點兩下 > 關閉 Drop Shadow ( 陰影 )
12. 點選到 Contour ( 輪廓 ) > Range ( 範圍 ) = 5 %
13. 修改後的效果 ( 其實可改可不改，筆者想要強調玻璃邊的效果，故修改成四周都是白色的 )
14. 在圖檔的標題欄按右鍵 > Duplicate ( 複製 )
15. Diplicate Mergerd Layers Only ( 只複製合併圖層 ) 打勾：把所有眼睛有打開的 Layers 合併成一張圖
16. 在複製出來的圖檔上按 Ctrl + A ( 全選 ) > Ctrl + C ( Copy ) > Ctrl + W ( 關閉 )
回到原來圖檔的 Channels 面板，開啟一個空白的 Alpha ( Alpha 2 )
17. Ctrl + V ( Paste, 貼上 )
18. 載入 Gblur = 5 的 Alpha > 滑鼠右鍵 > Select Inverse ( 反轉選取 ) > Delete
從步驟８起，只是為了要編製出步驟 18 的這個 Alpha，其實單用 Alpha 的技巧就搞得出來，不過：
‧講起來會肉肉長，純 Channels ( Alpha ) 的技巧也不符今日的編製效率
‧筆者順便為後面 Layer Style 的單元鋪路
‧筆者刻意把 Channels ( Alpha )、Layer ( Blending Mode 等等 )、Layer Style ( 含 Style, 樣式面板 ) 擺在同一個例子裡，以利您一次就可以通透
19. 有了步驟 18 的 Alpha 後，回到 Layers 面板，把套用 Style 的眼睛 ( Mars copy ) 關掉，再複製一次合併圖層出來
套用 Filter ( 濾鏡 ) > Render ( 演算上色 ) > Lighting Effects ( 光源效果 )
20. 依圖調整參數，其中最重要的就是載入步驟 18 的 Alpha 2
21. 完成圖 ( 有折射紋路的玻璃效果 )
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
把上例 複製出去套用 Lighting Effects ( 光源效果 ) 的完成圖 回貼，再調整 Blending Mode ( 混合模式 )
就可以得到更漂亮的效果
筆者喜歡比較溫潤的效果：( 只用到上例的部份技巧，留給您當練習唄 )
石中臉的方法都是前面講過的 ( 除了 Threshold 之外，但是 Threshold 在「把馬子招式」中也講過 )，本例只是 Channels 小小的活用罷了
首先準備好兩張圖：
↑ 筆者 無中生有 的紋理 ( 凹凸太明顯會不太好處理，故上圖的凹凸較不明顯 )
↑ 筆者以 Poser 搞的 ( 等到筆者有空再搞 Poser 的 Blogger 囉 ^^||| )
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
１. 把這兩張圖擺在同一個 PSD 檔的不同 Layer，準備處理
２. 石頭紋理的素材 > Ctrl + J ( 拷貝的圖層 )，原圖留著備用 > 右鍵 > Free Transform ( 任意變形 )
３. 再按右鍵 > Distort ( 扭曲 )
４. 拉成這種形狀，比較有 側視圖 的感覺，再按 Ctrl + J 保留這個側視圖紋理的圖層備用
５. Ctrl + J，把怪物頭素材的圖層複製 > 右鍵 > Free Transform ( 任意變形 ) > 旋轉至約略下圖的位置
６. 再按 Ctrl + J 把怪物頭的圖層複製，更名為 頭 01，並以 Lasso ( 套索 ) 去背，假設您夠熟 Lasso 的話 …
７. 再按 Ctrl + J、更名為 頭 02 > 以套索選取怪物頭右側邊緣區的附近 > 右鍵 > Feather ( 羽化 ) = 15 pixels 左右 > Delete
這個步驟的目的：等一下 怪物頭 與 側視圖紋理 可以融合得比較自然，不會有突兀的邊緣
８. 再按 Ctrl + J、更名為 頭 03 > 下拉選單 > Image ( 影像 ) > Adjustments ( 調整 ) > Brightness / Contrast ( 亮度 / 對比 )，把對比調高一些
９. 再按 Ctrl + J、更名為 頭 04 > Ctrl + U ( Hue / Saturation, 色相 / 飽和度 ) > Colorize 打勾 > 調整成約略與石材紋理相同的顏色
10. 關掉所有圖層的眼睛，只留下 背景 與 頭 02
接著在圖檔的標題欄按右鍵 > Duplicate ( 複製 ) > 把 Diplicate Mergerd Layers Only ( 只複製合併圖層 ) 打勾
在複製出來的圖檔按 Ctrl + A ( 全選 ) > Ctrl + C ( Copy ) > Ctrl + W ( 關閉 )
11. 回到原圖的 Channels 面板 > 新增一個 Alpha ( Alpha 1 ) > Ctrl + V ( Paste, 貼上 )
12. 複製 Alpha 1 為 Alpha 1 copy，套用 Image ( 影像 ) > Adjustments ( 調整 ) > Threshold ( 高反差 )
13. Threshold Level ( 高反差色階 ) = 57
14. 把 Alpha 1 copy 更名為 Threshold 57 以利查看
15. 把 Threshold 57 複製 > 套用 Gaussian Blur ( 高斯模糊 ) > Radius ( 強度 ) = 12，並把該 Alpha 更名為 Gblur 12 以利查看
Ctrl + A ( 全選 ) > Ctrl + C ( Copy ) > Ctrl + N ( 開新檔案 ) > Ctrl + V ( Paste, 貼上 ) > 存成 *.PSD 檔 > Ctrl + W ( 關閉 )
16. 複製 Gblur 12 > 套用 Filter ( 濾鏡 ) > Stylize ( 風格化 ) > Emboss ( 浮雕 ) > Height ( 高度 ) = 12
17. 複製步驟 16 > Ctrl + I ( 負片效果 )
18. Ctrl + L ( 色階 ) > 黑滴管，把步驟 16, 17 吸黑
19. 關掉所有怪物頭圖層的眼睛 > 側視圖紋理 > 套用 Filter ( 濾鏡 ) > Distort ( 扭曲 ) > Displace ( 移置 ) > 依下圖設定 > 載入步驟 15 所儲存的 *.PSD 檔
看到沒 ?! 載入 *.PSD 檔就產生起伏了
Displace 的 Photoshop 7 ( 英文 ) vs. Photoshop CS2 ( 中文 )
20. 載入步驟 16 套用過黑滴管的 Gblur 12 copy > 填入黑色 > 調整 Opacity ( 不透明 )
這步驟的目的：編製出背光的陰影 ( 光源在左上角 )
21. 載入步驟 17 套用過黑滴管的 Gblur 12 copy 2 > 填入白色 > 調整 Blending Mode ( 混合模式 ) 為 Overlay ( 覆蓋 )
這步驟的目的：編製出受光的反光區 ( 光源在左上角 )
22. 打開 頭 04 的眼睛 > 調整 Blending Mode ( 混合模式 ) 為 Soft Light ( 柔光 ) 來合成、調整 Opacity ( 不透明 )
23. 完成圖
NASA 拍到的火星臉，都是外星人跟筆者偷師的 ^++++++++++++++++++++++++++++++++++++++^
其實那是因為早期遙測的 解析度不足 與 人類的想像力 罷了
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Ctrl + U 小小加工一下，以求色系一致：( 當然還可以再細修、加工、作品化、…，不過留到以後 Photoshop 的 Blogger 再說 )
以 Flash 呈現：
↑ 回到文章 ↑
( Rapidshare 使用說明 )
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
↑ 回到文章 ↑
Style 的使用方法
Style ( 樣式 ) 面板的使用方法很簡單：所有的功能都在右上角的小三角形裡面
‧小型縮圖會看不清楚，故請切換到 Large Thumbnail ( 大型縮圖 )
‧隨時都可以 Reset Styles ( 重設樣式 )：也就是 Photoshop 預設那些沒用的 Styles
‧Load Styles ( 載入樣式 )：可以載入外部的樣式檔 ( *.asl )，並置於 Photoshop 預設那些沒用的 Styles 後面
‧Replace Styles ( 取代樣式 )：可以載入外部的樣式檔 ( *.asl )，並取代 Photoshop 預設那些沒用的 Styles ( 隨時都可以 Reset Styles, 重設樣式 還原之 )
Large Thumbnail ( 大型縮圖 ) > Replace Styles ( 取代樣式 ) > 筆者的下載檔 *.asl：
至若 Style 面板的其它功能 ( 如自製 *.asl 檔 )，在其它字效的單元中會提及