Edward's Land

[靈感] Apple style 風格網站設計

noreply@blogger.com (Edward Chien) — Thu, 26 Feb 2009 16:04:00 +0000

我自己的PC已經被我弄得像一台偽Mac，原因無他，實在是太喜歡Mac的設計風格。賈老除了是個了不起的企業經營者，同時他的設計品味也是為大家所崇拜的一點。打從Mac OSX以來，一直到iPod、iPhone誕生，以及新的Mac book問世，Apple 的工業設計、UI、乃至網站設計，無不令人讚嘆！

Apple 的官方網站改版之後，延續Leopard的設計質感，清楚、簡單、而且易用，網站基調是白色的，用灰色來旁襯，放上許多鮮艷、醒目、有趣的產品圖片，凸顯產品價值，更讓整個網站看起來像時尚伸展台，而一部部Mac、iPod、iPhone，則化身成為標緻的模特兒！

清楚、流暢的 Layout 規劃，購物單元逛起來一點壓力也沒有，反而更想一探每個產品的究竟！

大量使用java script，以及搭配QT內嵌影片播放，增添瀏覽網站時的趣味。我也相當喜歡看他們的教學影片，很清楚、簡單，影片的畫質也是沒話說！

Apple 的設計風格如此強眼，無怪乎第3方軟體製造商的網站風格，也多延續這個方向！除了讓使用者一目了然網站是提供服務給 Mac 的軟體商之外，儼然也形成一種網站識別的印象：代表著 Apple 的高品質、簡潔以及高易用性！

以下列出幾個收集來的 Apple 風格的網站，大多是軟體服務商的網站，很酷喔！也許可以幫助激發些什麼靈感，或想法。

1. Panic Coda、Panic CandyBar

相當知名的軟體，網站也是非常有名，在許多 java script 資源網站中，都會拿這2個網站來當範例！使用許多有趣的語法，讓瀏覽網站充滿意思！

2. RapidWeaver

令人印象深刻的配色，上方的漸層真的很美！影片播放的時候，也能與背景有所呼應，很棒的設計。

3. Icon Designer

提供許多 icon 設計服務，都很精緻有質感！黑色的網站基調與作品相互輝映！

4. MacRabbit CSSEdit

CSS編輯軟體，網站很簡單，有大大、醒目的軟體 icon，簡單明瞭！

5. 280 Slides

很酷的線上幻燈片編輯服務！看到Mac風格介面，讓人忍不住玩了起來。製作好的投影片還能存成PDF檔下載喔！

6. Versions

連結軟體的icon意象發想，綠草地讓人印象深刻！

6. Tao Effect

能夠將檔案、資料夾、信件加密的軟體。網站形象區結合導覽影片，兼具創意與實用性。黑色與亮綠色的配色，實在讓人著迷！國內使用黑色背景的網站似乎很少，在國外真的超多的。

7. Jumsoft

簡單帶點可愛的網站風格，讓這幾個使用於工作上的軟體看起來格外親切、易用！沒有太多複雜設計的網站，似乎也宣告他們的軟體一樣可以輕鬆上手。

8. Checkout

幾乎跟Apple官網一模一樣的設計與layout，讓他的銷售點系統看起來格外可靠、安全！每個功能搭配精緻的情境圖示，像看圖說故事般的讓使用者馬上就能清楚這就是他所需要的產品！

9. Things

Mac上的 toDo list 軟體。網站淡藍色的配色讓人感到放鬆，簡單的動線規劃，從下載、購買，到觀看導覽影片一氣呵成。一樣利用醒目的軟體icon來識別，加深印象！

10. AppleStyle

最後，來看看台灣的吧！這應該算是一個中文介面的Apple商品購物平台吧！介面直接承襲OS Leopard風格，連背景也是 Leopard default 的紫色宇宙。閱讀時會有4個欄位的版型，讓文字過於狹窄，不是很容易閱讀。不過商品的種類倒是挺多的。

Apple 的東西除了外表華麗之外，事實上都兼具有實用性！總是站在使用者角度出發的UI設計，輕巧的機身外殼，親切的操控，化繁為簡，而設計不就是如此嗎！

使用Fireworks CS4製作標準html+CSS文件

noreply@blogger.com (Edward Chien) — Sat, 29 Nov 2008 16:29:00 +0000

英文版 CS4 已經上市，中文版也將於12月登台，Fireworks 大進化的功能之一，就是能將設計稿直接匯出，變成使用 div+CSS 架構的標準 html 文件檔案！你的設計稿可以是 psd，也可以是 png，Fireworks CS4 將完整開啟這些檔案並轉換，即使是使用 Photoshop 製作的設計稿！

那麼，實際上該如何設計一份 Fireworks 讀的懂，然後完全按照設計者的想法匯出成為一個 html 文件呢？以下我就自己實際製作的心得整理幾個方向給大家參考。

開始設計

先在腦子裡規劃好網站的基本版型，例如：一般會有放識別 logo 的top 或是 header，側邊欄位的 sidebar，放置主要內容的 content，還有最後版權宣告、聯絡資訊的 footer。然後在 Fireworks 裡面開啟一個圖層資料夾，取名為「div元素」，將上述各區塊，按照版型排列，使用「矩形工具」繪製於版面上。並將每個繪製出來的區塊元素打上名字，請務必以英文命名，因為這些名字在匯出成 html 之後，會成為元素的 id，而這些矩形區塊則是支撐整個網站架構的 div 配置！

設計

在「div元素」資料夾之上，新增所需的圖層資料夾，將你的創意與設計繪製在這些圖層上。當然，已經繪製好的「div元素」也可以改變形狀，除了方正矩形之外，你也能改成具有4邊圓角的矩形，只要在之後使用「分割工具」切圖注意幾個要點即可。這部份待後文介紹。

當需要放置「表單」元素的時候，例如：會員登入欄位、核取方塊等，必須打開「視窗」>「通用元件庫」，找到「HTML」分類，開啟後拖拉使用裡面的元件來製作。Fireworks 將自動識別這類元件，匯出成為具有<form>標籤的表單元素。

另外，html裡面標題元素：<h1>~<h6>等，也能使用「通用元件庫」裡的「標題1」~「標題6」來對應。需要針對上述元件設定詳細屬性，則開啟「視窗」>「元件屬性」來設定。字型、字級、顏色、行高，將會轉成CSS樣式。

分割切圖

這個部份必須注意幾點。首先，我們不需要整個網站切滿分割區域才能匯出，只需要針對元素、屬性製作分割區域即可。例如：要變成背景「圖片」的部份，只需要切一塊小方塊，在「分割屬性」的部份選擇「背景影像」，設定是某重複，或是沿著 x 軸 repeat，這樣 Fireworks 自動會將 CSS 的 background 屬性指向這張小圖片。

另外，文字的部份，除非是具有特殊字型與效果的字體，可以圖片形式匯出之外，其餘會以「電腦字」型態出現的文字，都不需要「分割」！在Fireworks 設定的字體屬性將會自動轉成 CSS。

在「設計」部份，如有使用元件庫製作「表單元件」，也不需要作分割。如上所述，Fireworks 將自動判定，匯出成為具有 form 標籤的表單。

如果需要製作自動依照內文延伸的圓角區塊，切圖的時候必須將區塊分為「上」、「中」、「下」3個部份，並且將「中」區塊的圖片設定為「背景影像」。例如：一個 id 為 sidebar 的圓角矩形，上方左右2個圓角為一張圖片，下方左右則為另一張圖片，中間則另外輸出成背景影像，一個具有圓角的div 區塊就完成了！

匯出

文件完成之後，選擇「檔案」>「匯出」，類型選擇「CSS 和影像(.htm)」，也可以指定圖片存放的資料夾，然後按下「儲存」，一個具有標準html 與 CSS 的網頁就完成了！

附上 Adobe 官方教學影片，可以更加清楚整個過程唷！

Adobe CS4 台北發表會與試用心得

noreply@blogger.com (Edward Chien) — Wed, 12 Nov 2008 16:21:00 +0000

11月7日，Adobe 在台大醫院國際會議廳舉辦了 CS4 中文版的上市發表會。很早就報名的我一直相當期待這天的到來，很想看看 CS4 的介面與功能改進，因為光從 Adobe 官網看來的介紹就已經夠讓我熱血沸騰了！

會場還有發送限量的 Adobe CS4 T-shirt，可憐的阿鳥太晚到沒拿到。T-shirt 是黑色的，上面有金色的 Adobe logo 與產品 icon，還蠻酷的，至少穿起來不會太宅XD。人潮還不少，現場還有贊助商的攤位，Apple、HP、nVidia、Canon之類的，小小的場地有熱鬧到。可惜當天我忘記帶DC去拍照，沒辦法紀錄現場的盛況！

發表會請到3位大師：Tim Cole、Karl Soule、Paul Burnett，分別就「平面」、「影音」、「網路」三大領域展示產品功能。內容都相當精彩，誠意十足，大師也都很幽默風趣，現場笑聲不斷。

幸運的，因為工作的關係，在發表會之前其實我就已經提早拿到了 CS4 DesignPremium 中文試用版，綜合發表會上的資訊以及我的試用心得，我就稍微整理幾個產品的新功能吧！

CreativeSuite

這次針對3大領域提供4種版本，MasterCollection、ProductionPremium、DesignPremium、WebPremium。系統需求大大提高，2GB記憶體之外，螢幕解析度也建議以1280x900以上為最佳解析度，傳統1024x768使用的話會有選單折行，導致工作區變小的狀況。另外，顯示卡要求也相當高級，由於這次 Adobe 導入 OpenGL 使用介面、GPU加速功能，太過老舊的顯示卡完全無法發揮 CS4 的功力。以我家的電腦來說，1.7G雙核 + 2G DDR2 + Geforce8500GT，跑Photoshop、Flash 很多地方都還會鈍鈍的！之前跑 CS3 很順的電腦可能都要再去升級一下了！除非已經使用工作站等級顯示卡的電腦，就可以不用擔心啦！

這次系列產品的介面也做了很大的改變，不再包覆著作業系統的框架，而是使用全新的外框架，將選單整合到最上方，面板的浮動與工作區域的調整更加有彈性！你也可以自訂工作區域，快速切換！從 Photoshop 到 Fireworks 等產品介面完全統一，不會再有不同。CS3 沒做到這點，我覺得很可惜！

另外，每個產品都能透過「共享螢幕」功能，同時最多讓4個人線上共同編輯、討論一份文件！實際使用過，效能與速度都非常不錯！還能進行文字討論與筆記分享，對於線上會議、遠距工作很有幫助！

Photoshop CS4

可直接將3D物件匯入，並直接使用2D圖層影像的編輯功能，而不需另開3D面板。你可以用筆刷工具在你的3D物件上面塗塗改改，透過圖層「混色模式」看起來更逼真！另外新增3D工具，讓你可以旋轉物件角度，以檢視物件各部份細節。
使用 OpenGL 技術，新增旋轉畫布、流暢放大縮小功能。就像手繪的時候，會習慣轉圖紙一樣，現在影像的畫布可以流暢的旋轉到任何角度，以便繪畫。
整合式影像調整面板，智慧型編輯影像而不失真。例如，使用加亮工具，以前會過於慘白，必須再修正，現在將不會遺失色彩、色調等細節。另外你還能快速指定哪些圖層套用這個變化，而不需製作遮罩。
新增「內容感知縮放」。從前縮放圖片，圖片中的物件也將喪失原有的比例，現在透過這個強大的功能，Photoshop 聰明的調整影像物件，讓縮放後的影像仍能維持原有的最佳比例、位置！
可開啟影片檔案，利用 Photoshop 的筆刷、圖層直接編輯影格。例如，你可以使用「修補工具」將影片上的雜物消除，然後存成 PSD ，再到 Premium 匯出成任何格式的影片檔案！

Illustrator CS4

可建立最多100個工作區。現在只要一個檔案，就能儲存DM、海報等不同尺寸的內容，而且你還能隨時更改、新增這些工作區！
漸層工具大躍進！可以說是這次 Illustrator 最大的改變，漸層工具將在物件上面增加「調整桿」！這表示你將可以任意調整漸層位置、大小、旋轉，更可以調整「透明度」！不用再像從前使用遮罩，步驟繁雜的才能製出透明效果。
新增物件「外觀」面板。可以在上面修改顏色、筆劃，或是增加效果濾鏡！僅次於漸層工具，我相當喜歡這個改變，對於物件的掌控大大提昇！
新增「點滴筆刷」工具。可以直接使用筆刷製作向量「形狀」，而不只是「線條」了！在已經存在的物件上面繪製，將會自動變更樣式，以符合原物件！還能使用「橡皮擦」工具清除向量路徑。製作向量物件更加簡單！

InDesign CS4

即時檢視錯誤，並在面板中直接找到位置，並做調整。
快速匯出成 SWF 檔案。只要按下「另存新檔」，調整設定，就能生成網頁動畫檔，並且自動具有翻頁動畫效果！讓你的專案在網站上也能像平面出版一樣出色！
自訂連結面板。這裡你可以檢視文件所有的圖片、文字資源，按一下連結還能馬上跳至物件所在 Page，進行編輯、調整、置換等動作！
設定條件文字。對文字、段落設定屬性，之後就可以透過控制屬性來調整文字段落的顯示或不顯示。有點像是「標籤」功能，例如：如果我要把含有「英文」這樣標籤屬性的段落隱藏，我只要到屬性面板，將「英文」旁邊的眼睛圖示按掉，則擁有此標籤的文字將會被隱藏，而其他文字段落將會自動排版、定位。
交互參照。有點像是網頁的錨點功能，針對文字>文字或段落，製作指向性的連結。即使因為編修，頁碼有所改變，路徑也會自動修正，而不會讓指向錯誤！
跨媒體應用更加完整。InDesign 可以說是 Adobe 整合平面、網路2大產業的最佳應用示範！幾乎所有 Adobe 的產品都能與 InDesign 連結，包含 Dreamweaver、Phtoshop、illustrator等，在 Photoshop 上所作的特效能完全呈現在 InDesign 上。你可以讓 InDesign 與 Dreamweaver 使用同一個資料庫與架構，甚至排版也能互通。

Dreamweaver CS4

新增「即時檢視」模式，等於是內涵標準瀏覽器規則，你可以直接在 Dreamweaver 瀏覽網頁，表單、選單、連結，甚至連 java script 功能都能觸發，不用在瀏覽器與 Dreamweaver 來回切換了！而且還能檢視 java script 語法的變化，停在事件階段，以利檢修語法！
「關聯檔案」我覺得真是超級好用！以往開啟網頁檔案，Dreamweaver 並不會讀入所連結的 CSS 與 java 等相關檔案，是的！現在可以了！在同一個檔案標籤底下，將會同時顯示這份 html 所讀入的外部檔案，你不用再為了尋找 CSS 檔案而苦惱，你可以快速找到並編輯他！
「程式碼導覽器」有點類似FireFox 的外掛 FireBug，將滑鼠游標點一下網頁元素，按下「程式碼導覽器」icon，就會列出 CSS 樣式，從父元素到子元素詳列，還能馬上連到 CSS 檔案中修改、編輯！真的是超好用的啦！
與 PSD 整合。當插入 PSD 檔案的時候，會直接跳出影像轉存視窗，而不用再開啟 Photoshop！另外，當 PSD 透過 Photoshop 而有所更動的時候，Dreamweaver 也會利用圖示通知你，你只要點一下圖示就會自動更新，不需要另外在做匯出的動作！

FireWorks CS4

Adobe AIR 製作。可以直接在 FireWorks 製作滑鼠行為，匯出打包成 AIR 執行程式，或是轉存 html、swf檔等。
匯出PDF。將你的所有頁面(Page)建立連結，轉存成 PDF 之後，也將保有這些頁面關聯，以利與客戶溝通、提案！
製作標準 html 與 CSS 語法的網頁。是的！這真是太傑克了！在 FireWorks 將版面設計好，竟然可以直接匯出，變成一份擁有完整 div 架構的網頁檔，連 CSS 都幫你寫好了！也就是說當你完成頁面的設計，同時你的網站也搞定了！OMG！可以把 CSS 的書籍丟掉了！實際製作一遍，效果真的很不錯，即使不能有太複雜的架構(例如：絕對定位)，但是對於網站版型、定位，與網站製作時程，已經提供很好的解決方案！
提供更加豐富的樣式面板，分門別類，讓你輕鬆套用樣式！你也可以將自訂的樣式加入面板，以利其他檔案使用！
新增路徑面板，讓你快速選取向量點，以及編輯節點的屬性！例如一個擁有複雜向量的物件，當你要選取左半部的節點時，以往只能一顆一顆慢慢點，現在只要按下面板中「選取左側點」，他就會以物件為中心往左半部選取節點！
顯著的效能提昇。CS3 版之前，常常工作一段時間之後，FireWorks 總會出現遲鈍、緩慢的現象，而且非常嚴重，必需要充新開啟以釋放記憶體才會改善。現在 CS4 能明顯感受到這部份問題的解決！
能忠實呈現 Photoshop 與 illustrator 所製作的檔案原型，並保有編輯空間！例如：一份含有切圖屬性的 PSD，在 FireWorks 開啟，不論是效果、文字、切圖區塊都能完整呈現，你可以將他匯出成 html+CSS 文件。

Flash CS4

物件導向動畫概念！捨棄從前複雜的「關鍵影格」，動畫改以物件為導向，簡單而快速製作移動、漸變、旋轉等動畫，也能輕鬆針對動畫範圍做大小縮放、移動。拿掉了關鍵影格，時間軸更簡單明瞭。這也意味著，過去利用關鍵影格製作的動畫，在 CS4 底下將失去編輯空間，變成逐格動畫！
全新的 3D 變形工具，讓物件不只是左右選轉，而能有 z 軸的空間變化！當然，這也很簡單的能應用在動畫製作上！
劃時代「骨骼」工具登場！替物件綁上一節一節的骨骼，他就可以像手一樣隨著骨骼移動、旋轉。例如：你想製作一個3節機械手臂，只要在物件上加上骨骼，然後拖曳物件，就能輕鬆利用物理運算製作出逼真的擺動動作！酷翻了！
想要製作滿天星斗，隨機閃亮的動畫嗎？除了利用 Script，以往動畫製作相當繁雜，並需層層設定。現在只要使用「噴灑」工具，將動畫物件隨機繪製在場景中，一個閃亮的滿天星斗就完成了！不過實際製作的時候，不是很瞭解參數的使用，總是做不出隨機的效果Orz
新的移動編輯器。包含水平移動、垂直移動、縮放大小、旋轉、套用濾境等，都能使用此編輯器透過數值詳細設定！不過我覺得需要時間去熟悉，畢竟一堆數值與曲線，看起來並不是很親切。
常常看到別人的動畫很酷很炫嗎？或是對自己的動畫超滿意，想要對其他人分享？現在 Flash 可以將物件動畫打包到面板中，下次要使用的時候，只要按一下「套用」，就能將動畫完整複製到新的物件上！也能發佈到網路上供人下載。老實說，這真的很棒！預設的動畫效果就已經有很多很棒的範例可以使用，真的是連小還都可以做 Flash 動畫啦！

其他還有 Premium、After Effect 等產品應用，也都很酷！因為本身沒研究，電腦也跑不動，所以這邊沒有心得。

雖說是上市發表會，不過真正鋪貨讓消費者購買，則是要等到12月份了。我覺得這次改版相當令人驚豔！看得出來 Adobe 的野心，一直致力於跨媒體整合，以及提供設計人員與程式人員更好的溝通媒介，尤其是 InDesign 的發展，傳統出版也能延伸到網頁這塊，而且是透過資源共享的方式，將內容橫跨媒介傳播，提供大家一個很棒的體驗！

話說活動最後還有大抽獎，Wacom 繪圖版、Canon事務機、iPod nano、小折、CS4正版中文軟體，超多大獎，看的我都流口水了！結果一樣也沒沾上邊，嘔死我啦！

台灣之美 - 清境農場2天1夜行

noreply@blogger.com (Edward Chien) — Tue, 04 Nov 2008 16:51:00 +0000

趁著國慶3天連假，帶著 Mika 到南投清境農場散散心。9月份一連3個颱風，讓南投受創嚴重，很多路段坍塌，知名景點「廬山」也發生令人驚愕的土石流事件。7月多就開始計畫，並且訂好民宿房間的我真是忐忑不安啊！一直很擔心清境也會遭受風災，即使到了出發前一星期都還有颱風警報發佈。不過，最後還是很開心可以順利成行！

早上6點半，我們在台北車站搭乘「清境專車」出發前往南投清境。單人來回票價1500，而且直達清境，我覺得還挺划算的。如果不介意長途坐車，而且位子較窄小的話，可以參考看看！中間會停留2次，讓大家下車走走，休息一下。

車程約5小時，山上天氣很好，我們在「國民賓館」下車，步行10分鐘就到了「香格里拉-空中花園」。這是我們這次住宿的地方。那邊民宿的外觀都走西式歐風的感覺，很舒服，即使不出門賴在民宿房間裡面，都是一種享受！

我們訂了最便宜的房間，一個晚上也要2800，清境的民宿價格普遍較高。房間很小，四面都是木頭，而且充滿了香茅味道。不過2個人住其實大小剛剛好，只是香茅讓我很難受。

民宿老闆很親切，一樓的陳設相當用心！到處都是小熊布偶、精緻的裝飾品之類，營造很悠閒而高雅的氣氛！老闆說綿羊秀的格蘭先生並沒有回澳洲，當天還是有表演，而且就在1小時之後，要我們快些準備一起出發。通常「國民賓館」附近會有專車開到「青青草原」，不過不知道為什麼那天並沒有。民宿老闆開車載我們到「青青草原」，綿羊秀已經快開始了，買了門票就直奔表演場地。

那天看秀的人不算多，長椅都還有空位，不過太陽超大的！萬里晴空無雲，陽光直射，都快要被烤焦。這是我第一次看綿羊秀，真是蠻有趣的，格蘭先生很幽默、熱情，雖然一些中文因為口音聽不太懂，不過大致都還能抓到笑點！

附近有飼料販賣機，可以買食物餵羊，拔草給他吃還不吃哩！飼料一打開，所有的羊都會跑過來盯著你，好像要把柵欄衝破似的，真的挺嚇人的。不過，事實上他們很笨，如果左邊被嚇到，就往右邊跑，要是停下來，看到地上有草就吃，沒什麼腦筋！所以別怕，餵羊也是很好玩的！只是手記得洗乾淨啊！

現場唯一不覺得熱的，大概就只有上面這位皮小孩了。到處爬上爬下，把長椅當衝浪板滑來滑去，真是相當耐操！

清境農場吃的地方蠻多的，只是距離都頗遠。晚上我們選擇了在民宿提供的自助吧裡用餐，主食種類還算多，牛、豬、雞、魚排都有，自助吧的菜色也不錯！也供甜點以及湯品，飲料也是無限供應。

我點了「去骨牛小排」。說實話，真的相當好吃！肉質軟嫩，醬汁、肉汁真的在嘴裡化開的感覺很棒！讓我印象深刻！

第2天行程就比較鬆，用完民宿提供的早餐之後，我們就到處晃晃、拍拍照。附近有一個「統一風車廣場」，裡面有7-11、星巴克這些統一集團旗下的商店。也有一些手工香皂、精油、綿羊油保養品販售。可以來這裡買一些東西回家，綿羊油護手乳我覺得還不賴！香味很自然，也不會很油膩。

之後搭乘1點左右的專車回台北，結束在清境的旅遊。其實，清境不是個好玩的地方，卻是個適合放鬆心情、遠離塵囂的世外桃源！拜天氣所賜，高山美景一覽無遺、美不勝收！真的很棒！

有別於阿里山的高聳、神秘感，清境農場感覺比較清新、可愛，真的很適合大家來走走、散散心，看看可愛、笨笨的綿羊，都是很棒的體驗唷！

[心得] Photoshop 色彩描述檔小筆記

noreply@blogger.com (Edward Chien) — Thu, 16 Oct 2008 18:41:00 +0000

最近比較忙，好久沒寫文章，這次來分享一下使用 Photoshop 色彩描述檔的心得吧！

話說有在做平面印刷的人一定都知道色彩描述檔這種東西，不過沒有接觸過的人可能就很難了解他的作用。可以把他看作是圖稿的顏色識別證，基本上掛上相同的識別證之後，作品在兩台電腦之間是不會有太大的差異的。

不同的色彩描述檔，有著不同的色域。色域越廣的描述檔所呈現出來的圖稿越鮮艷、漂亮！所以，如果我們想要讓自己的照片在經過 Photoshop 調整之後還能更加閃亮動人，我們就不能不認識這個了不起的功能了！

以下我們來作個小實驗，順便也能了解在 Photoshop 底下，如何將圖片色彩描述檔轉換成較廣色域的描述檔！

Step 1

首先，我們先將 Photoshop 內建 RGB 描述檔改為 Adobe RGB (1998)，這是目前色域最廣的描述檔。方法為：選擇「編輯」>「顏色設定」，開啟設定視窗。「使用中色域」的地方下拉選取 Adobe RGB (1998) 然後按下「確定」。

Step 2

然後準備一張圖片，並在 Photoshop 裡面開啟他。

Step 3

接下來，我們要用 2 種不同的方法來另存這張圖片：

A. 「檔案」>「另存新檔」，檔名任意，最好與原來有所區別。JPEG 儲存對話視窗中「品質」選擇最大，按下「確定」儲存。

B. 「檔案」>「儲存為網頁與裝置用」，開啟對話視窗，檔案類型選擇 JPEG，品質最大 100 ，然後記得勾選「ICC 描述檔」選項，按下「儲存」，檔名最好與原圖片與上面 A 方法有所區別。

Step 4

用 Photoshop 以外的軟體分別開啟剛剛 A、B 方法儲存的 2 張圖片（或是直接拖曳到瀏覽器開啟）。試著比較看看！是不是差很多呢？哪一張比較鮮艷？

很神奇吧！起初我以為只要 Photoshop 顏色設定就好，「另存新檔」之後描述檔也會跟著存出，但事實上並非如此。在「另存新檔」中即使勾選（預設）了「ICC 描述檔」儲存圖片，使用其他軟體或是裝置開啟之後，圖片依然呈現較少色域的顯示狀態。相反地，利用「儲存為網頁與裝置用」來存出，卻能正確表現圖片的鮮艷與色彩！

為什麼會這樣，詳細原理其實我也不是很清楚，不過至少我們知道，下一次把照片透過 Photoshop 修的美美之後，記得別只是按下「另存新檔」，使用「儲存為網頁與裝置用」將 ICC描述檔讀入，才能讓你的照片保留完美的顏色紀錄唷！

來看看Google、Yahoo、Apple，10年前的樣子

noreply@blogger.com (Edward Chien) — Sat, 04 Oct 2008 03:06:00 +0000

網路發展10年間進步迅速，各種技術應用，以及 Web 2.0 興起，讓網路使用習慣與10年前大不相同！細看網站設計，也有許多大躍進。CSS 應用抬頭、Html 語義化、Flash 3D 強化、各種創意版型設計，讓目前的網站與10年前相較，除了賞心悅目之外，更增添互動的樂趣！前天在國外網站看到幾個知名企業的網站比較圖，讓我們可以檢視這段時間的改變，很有意思！

Apple 2008 V.S. 1998

Google 2008 V.S. 1998

Yahoo 2008 V.S. 1998

AOL 2008 V.S. 1998

Nike 2008 V.S. 1998

IKEA 2008 V.S. 1998

另外，Youtube 上面還有人將這10年 Google 網頁每一天的變化錄製成影片，很厲害！不過 Google 網頁10年來其實變化不大，大部分只是 Google 的 logo 隨著節日變化，呵呵！應該蠻適合晚上睡不著的時候觀看哩。

Mirror's Edge 靚影特務，There's no looking back！

noreply@blogger.com (Edward Chien) — Tue, 30 Sep 2008 17:12:00 +0000

「Run ! Forrest ! Run !」這段「阿甘正傳」裡的經典台詞，大家應該不陌生吧！而這正是「靚影特務 Mirror's Edge」這款遊戲的最佳 slogan 呢！

EA 與瑞典開發商 DICE 共同研發的第一人稱動作遊戲「靚影特務 Mirror's Edge」，與大家熟悉的 FPS ，也就是第一人稱射擊遊戲有所不同，不再只是拿著槍到處掃射，「靚影特務 Mirror's Edge」更著重於凸顯角色的動作層面！赤手空拳的逃離追捕，並且在偌大的城市裡面，藉由奔跑、攀爬、跳躍來找尋出口。遊戲透過第一人稱視覺，配合逼真的聲音效果，讓玩家更加深入體驗動作冒險的肢體臨場感！

Mirror's Edge 'Flight Level' gameplay HD

這段逃離直升機追擊的影片真是相當經典！逼真的聲音，彷彿真的快被子彈打中，從大樓高處一躍而下，風從耳邊刮過，我想有懼高症的人可能不太敢玩吧XD。

有別於一般較為灰暗的背景，本作大膽使用白色，整個城市看起來相當明亮！製作人 Tom Farrer 提到，這是為了反應女主角眼中的世界，並透過找尋紅色的物品，象徵「希望」與「溝通」，讓主角追逐紅色、找尋希望。這點真的頗具巧思！想必這會是一款相當值得收藏的好遊戲！

Mirror's Edge 'City Story Flashback' trailer HD

這段影片訴說著這個城市的過去與現在，以及女主角的背景與命運。雖然還不是很清楚來龍去脈，不過看得出來製作公司在故事設定上也下了功夫。

此款遊戲預計於2008年11月11日發售，將橫跨PC、PS3、XBOX 360平台。所以不論是哪個主機的 Fans 都能享受到這款遊戲帶來前所未有的動作體驗唷！

Mirror's Edge 'Stormdrains Alternate Route' HD

相關連結
On Mirrors Edge：圖片、影片與新聞（本站圖片來源）
Mirrors Edge 官方網站
巴哈姆特介紹

3 部音樂強烈的電影預告

noreply@blogger.com (Edward Chien) — Wed, 24 Sep 2008 03:34:00 +0000

自己還蠻喜歡看電影預告的，就像是一個精緻的小型電影，彙集了整部電影的視覺精華，搭配音效，短短幾分鐘，卻總是能讓人血脈噴張，或是捧腹大笑。最近在逛 HQTV 高清電視，看一些電影預告的時候，發現幾部預告配樂還挺有特色的！曲調類型我不是很清楚，也許是輕搖滾吧？我相當喜歡！下面這3部電影的預告都選了相似的配樂，畫面也充滿張力，整體氛圍像是快要窒息、力量要爆發似的感覺。跟大家分享。

Watchmen：守望者
上映日期：2009-03-06

改編 DC 同名科幻漫畫，由「300壯士」導演 Zack Snyder 執導，講述一群已經退隱的超級英雄，由於調查夥伴被殺害的事件，被扯入世界末日陰謀的故事。原作漫畫當年被公認為是美國漫畫小說巔峰之作，甚至影響了後期「蝙蝠俠」等英雄漫畫，以及迪士尼賣座的「超人總動員」動畫。

預告幾乎跟著音樂在走，感覺就像是在看一支精彩的 MV 一樣，音樂相當好聽，視覺充滿黑暗、嚴肅的色調，讓這部電影相當有看頭！令人期待！

Max Payne：麥斯。潘恩
上映日期：2008-10-17

改編同名自暢銷電玩的作品。「麥斯。潘恩」，原本是一個有著人人羨慕的幸福家庭的緝毒組探員，在妻女被殺之後，化身為復仇者，追查幕後真兇。卻發現敵人竟是比他想像中的還要殘暴的惡魔！

復仇、喪失理智，加上地獄火焰與惡魔，題材真是相當具有張力。

前段鋪陳，後段配合視覺上的特效，如同地獄火焰爆發，營造潘恩與惡魔孤注一擲的大對決，世紀之戰，相當精彩！

The Spirit：閃靈俠
上映日期：聖誕節 2008

由「300壯士」、「萬惡城市」原創作者：法蘭克米勒執導，又一改編漫畫作品。描述一名年輕探員「丹尼。科特」死亡之後重生，並獲得神秘的力量，在城市中打擊罪犯，並對抗死對頭「章魚博士」。這位見人就殺的大反派，由「山繆傑克森」出演，在劇中變換各種造型，相當活躍！

劇中另一大賣點，就是網羅好萊塢各大美女，Scarlett Johansson、Eva Mendes、Jaime King 等飾演個性、職業、生活大不同的女主角們。閃靈俠拼死打擊罪犯，卻也豔福不淺。

[CSS] 使用自訂圖片取代選單文字

noreply@blogger.com (Edward Chien) — Fri, 19 Sep 2008 00:45:00 +0000

這是之前格友 Queen 提過的問題，稍微整理一下方法跟原理吧！

使用國內的「無名」、「Pixnet」等 BSP 的朋友，部落格的選單連結已經是 html 寫死的狀態，也就是說，如果不刻意去控制的話，預設的選單就是「相簿、部落格、留言、名片」這樣的連結文字，加上 Windows 作業系統對中文字型先天上支援不足，幾個大拉拉的電腦字就杵在那裡。雖無大礙，但是若能替換自訂的圖片，增加裝飾性與主體整體性的話，視覺就更棒了！

由於各家 BSP 結構不盡相同，各主題之間樣式差異頗大，在此需先做一個模型，我以「Pixnet」的架構為例子，樣式則假設為橫式選單。

html架構原始碼如下：

CSS 樣式表如下：

#navigation {
    background-image:url(bg.jpg);
    background-repeat:repeat-x;
    position:absolute;
    width:400px;
    height:35px;
    left:200px;
    top:200px;
    overflow:hidden;
}
#navigation li {
    float:left;
    margin:0;
}
#navigation a {
    color:#fff;
    display:block;
    width:90px;
    height:25px;
    text-align:center;
    padding:5px;
}

顯示結果：

Step 1 替換自訂圖片

準備好自訂的背景圖片。最簡單的作法就是直接製作一整張底圖。以這個例子來說，就是製作一張寬：400px，高：35px的圖片，上面有設計好的與整體部落格風格搭配的背景，連結的文字也一併使用非電腦字的字體設計。上傳之後，修正 CSS 如下紅字：

#navigation {
    background-image:url(新自訂圖片.jpg);
    background-repeat:no-repeat;
    position:absolute;
    width:400px;
    height:35px;
    left:200px;
    top:200px;
    overflow:hidden;
}
#navigation li {
    float:left;
    margin:0;
}
#navigation a {
    color:#fff;
    display:block;
    width:90px;
    height:25px;
    text-align:center;
    padding:5px;
}

顯示結果：

Step 2 隱藏連結文字

上面可以看到預設的連結文字與我們自訂圖片上得文字產生重疊，只要想辦法把文字隱藏起來就可以了！修正 CSS 如下紅字：

顯示結果：

完成！！很簡單吧！

事實上，在 FireFox 底下，只要下「font-size:0;」屬性，文字就會被隱藏起來了，但 IE 不認這個屬性，所以我們必須在加上 only for IE 的屬性「*text-indent:-9999px;」，這樣 IE6、IE7 都能正確的顯示出自定圖片之後的選單了！

另外一個重點在於 <a> 這個元素一定要給予高度「height」的屬性！如此才能確保當連結文字被隱藏之後，使用者還能正確點選連結！高度值最好與背景圖片設定相同。

進階

如果想要花俏一點，製作出滑鼠指向效果，也就是當使用者把滑鼠移到選單上面後會產生變化，我們該怎麼做呢？

Step 1 準備自訂圖片加上效果圖片

以上面的樣式為例，我希望平時選單為黑底白字，滑鼠指向選單上面的時候，才出現霓虹的效果。除了將「自訂圖片」改為白色的字之外，還必須為各各連結(這裡是4個)準備不同的效果圖片。

Step 2 CSS樣式修改

依照上面的 CSS 為基礎，再分別新增下列屬性：

#link-album a:hover,#link-album a:active{
    background-image:url(01_over.jpg);
    background-repeat:no-repeat;
}
#link-blog a:hover,#link-blog a:active{
    background-image:url(02_over.jpg);
    background-repeat:no-repeat;
}
#link-guestbook a:hover,#link-guestbook a:active{
    background-image:url(03_over.jpg);
    background-repeat:no-repeat;
}
#link-profile a:hover,#link-profile a:active{
    background-image:url(04_over.jpg);
    background-repeat:no-repeat;
}

其中「#link-album」代表「相簿」按鈕，「#link-blog」則是「部落格」，「#link-guestbook」則為「留言」，最後「#link-profile」則是「名片」。而 01_over.jpg~04_over.jpg 代表各單元按鈕的效果圖片。「#」後面的名稱，各家 BSP 結構不相同，可以開啟網頁原始碼來得知，FireFox 使用者則可以利用 FireBug 套件來觀察元素。通常結構都會是<li id="xxxxx">，這裡 id 名稱 xxxxx，在CSS裡面就是「#xxxxx」。

顯示結果：

激發創作靈感的的插畫欣賞

noreply@blogger.com (Edward Chien) — Sun, 14 Sep 2008 09:06:00 +0000

整理幾個不錯的個人插畫網站、Blog。看看這些令人驚嘆的作品，不僅可以啟發自己創作時的靈感，也能讓我們思考這些創作背後的意義與技巧，也是很有趣的一件事情！看看他們如何製作的，什麼時候打亮光源，什麼時候利用模糊效果，或是配合照片，讓自己的插畫更具質感。

Alberto Cerriteño

來自美國的插畫家 Alberto Cerriteño，相當喜歡富有朝氣與生命力的設計！目前在波特蘭擔任行銷與設計總監，閒暇時刻就會進行一些插畫創作。很喜歡他的角色，造型可愛，搭配一些材質質感，構圖都相當豐富、多彩，每每讓目光停留、探索更多有趣的地方！

Ars Thanea

一個團體創作的設計工作室，喜歡鑽研、著眼於一些嶄新的創作技巧，大量使用 Photoshop 的效果在他們的作品上，給人酷炫到不型的強烈印象，就是他們的風格！像下面這張酒類的海報設計，同樣一個酒瓶瓶身，透過光影效果，就能呈現在4個不同場景的氛圍，相當厲害！

byroglyphics

來自英國的插畫家 Russ 的作品，充滿張力的線條，像來自人體的靈魂得到釋放，並獲得重生般，有股力量要爆發似的！我相當喜歡他的作品！畫面很有力量，促使著我們跟著他的線條，奔放、恣意飛翔，好像有無限可能似的！

Ghostco

Matthew Woodson 出生於美國的印地安納州，作品主題總是環繞在「人」的身上，透過畫面訴說一些想法、議題與情感，漫畫風格的線條相當容易讓人接受！網站上也有一些漫畫創作，沒有對白，僅透過幾格簡單的畫面，卻能讓人深刻感受到一股強烈的情緒，偏灰色調的風格，也總讓人看完作品之後進入沉思，值得一再玩味、讚賞。

Mario Belem

來自葡萄牙的插畫藝術家，作品混用粉臘筆創作，讓他的插畫看起來別有一番特色！作品裡面多以衝浪、南島為主題，鮮明的色彩、有趣的畫面，商業色彩濃厚！

話說插畫家真是一個有趣的職業，感覺較為抽象、隱喻、隨性，多以豐富的色彩、圖紋、元素來構成畫面。自己很難做到這種程度，一直無法理解插畫家創作的思考過程是如何進行的，呵呵，每次想要試著創作插畫，就會感到挫折，因為很沒 Fu 啊！相當佩服這些內涵豐富的插畫創作家！他們所帶來視覺上、思考上、靈感的激勵都相當棒！

Sonic Unleashed：在長城大鬧的音速小子

noreply@blogger.com (Edward Chien) — Sat, 13 Sep 2008 08:21:00 +0000

音速小子最新作品：Sonic Unleashed，又釋出最新影片。場景轉換到中華文化濃厚的地方，有類似長城的建築，也有蜿蜒的中華龍造型跑道，相當酷哩！音樂在快板中，也帶點中國風。印象中，這是第一次在音速小子的作品裡面出現中華文化的東西。仔細看，音速小子最後還變身成大金剛！手還能伸長，還可以使用槍亂打(？)，咦？這不是海賊王魯夫的招式嗎！

Sonic Unleashed 'Wild' trailer HD

音速小子進化到這代，在場景設計、遊戲玩法上都改良了許多。融合橫向捲軸，更能體驗奔馳的速度快感，從前3D化後，動不動就撞到障礙物的不順暢感，也改由畫面出現即時指令取代，只要成功按下正確指令，音速小子就能漂亮閃避障礙物唷！

Sonic Unleashed 'Debut' trailer

我相當喜歡這樣的音速小子作品！兼具遊戲性與原創性，過於真實的3D場景，也改變成富有色彩，融合幻想風格的世界。預計在2008年跨平台在 PS3 與Xbox 360 上推出。值得期待唷！

[CSS] 使用背景圖片自訂項目清單圖示

noreply@blogger.com (Edward Chien) — Sat, 06 Sep 2008 10:28:00 +0000

項目清單(list)在網頁編寫上是很常用到的元素，常見的項目符號除了「1、2、3」數字之外，大多使用圓點或是方塊來標注個個清單，區分條列。CSS語法裡面也能選擇清單樣式的宣告，像是「list-style-type」屬性，雖然這樣的符號相當容易使用，但是卻有著無法彈性修正位置以及自訂樣式的缺點。另外一種屬性，「list-style-image」也許可以讓你替換自訂的樣式圖片，卻在各瀏覽器上存在著不一致的情況，在位置上的調整上也具有難以異動的缺點！那麼，想要製作清單圖示 最好的選擇 是什麼呢？就是利用背景「background」元素來宣告！

以下就來分享一下如何使用背景圖片來製作清單圖示吧！

Step 1 建立基本的項目清單

清單項目一
清單項目二
清單項目三

HTML           
        <ul>          
<li>清單項目一</li>
        <li>清單項目二</li>
        <li>清單項目三</li>          
</ul>

Step 2 清除預設的項目符號（以及元素內外間距）

清單項目一
清單項目二
清單項目三

CSS           
        *{          
padding:0;           
margin:0;           
}
        ul{          
list-style-type:none;           
}

清除預設的項目符號只要加上「list-style-type:none;」語法即可。這裡有另外一個重點，在於清除瀏覽器預設的內外間距。我的習慣會在編寫CSS之前下一個 *{margin:0; padding:0;} 的語法，意思是宣告整個網站「所有」元素內外間距皆為 0 ，而 * 指的就是「所有元素」。

為什麼要清除所有預設的屬性呢？原因無他，就是為了清除各瀏覽器之間的差異！以項目清單的「縮排」為例子，在 FireFox 底下預設是使用 padding 來呈現，而在 IE 則是 margin 。將所有瀏覽器基準同於一線的時候，再去作調整，則每個瀏覽器之間的差異就不會太大了！

Step 3 自訂縮排間距

清單項目一
清單項目二
清單項目三

CSS           
        ul{          
list-style-type:none;           
margin-left:20px;           
}

清除了預設的縮排之後，我們就可以隨心所欲將項目清單位置作調整。這裡我使用 margin-left: 20px 。可依情況改變。

Step 4 加上自訂的背景圖片

CSS           
        ul{          
list-style-type:none;           
margin-left:20px;           
}
        li {          
background-image:url(images/icon01.gif);            
background-repeat:no-repeat;             
}

針對 li 下背景圖片的屬性，我們還必須增加一個 no-repeat 屬性，免得背景圖片一直重複，以致整個 li 被圖片淹沒。

Step 5 調整背景圖片位置

CSS           
        ul{          
list-style-type:none;           
margin-left:20px;           
}
        li {          
background-image:url(images/icon01.gif);           
background-repeat:no-repeat;           
background-position:0 0.4em;           
}

在上一步，背景圖片的預設位置，將會對齊元素的 left 與 top ，也就是左上方，這在每個瀏覽器中都是相同的。使用背景代項目符號的優點，就是能調整符號的位置！在這裡，「background-position:0 0.4em;」語法後面的2個數字分別代表：靠左 0px ，靠上 0.4em。0.4em 圖片正好垂直置中於文字的行高。

背景定位的數值可以自行調整，數值大小將取決於網站字級、行高等因素而有不同。編寫的時候，可以嘗試不同的值，以達到自己滿意的效果。

Step 6 調整項目位置

CSS           
        ul{          
list-style-type:none;           
margin-left:20px;           
}
        li {          
background-image:url(images/icon01.gif);           
background-repeat:no-repeat;           
background-position:0 0.4em;           
padding-left:12px;           
}

最後，針對每個項目做靠左的定位，這裡必須使用內距 padding-left:12px; 的屬性，來讓項目定位在正確的位置上。數值可以依據符號圖片的寬度做調整，儘量不要靠圖片太近。使用圖片寬度較大的，就必須將數值調整更大了！

完成！

一個具有調整彈性，又能兼容各瀏覽器的「背景圖片製作的項目符號」就完成了！如果覺得項目與項目之間的行距不夠高，也能針對 li 下 margin-bottom:8px; 拉大與下面項目的距離。

[設計] 公司外牆海報設計-illustrator

noreply@blogger.com (Edward Chien) — Tue, 02 Sep 2008 17:27:00 +0000

專案名稱：公司內部外牆海報設計
使用軟體：illustrator CS3
尺寸：340x220 cm

這個專案應該是我作過尺寸最大的印刷品了。儘管很久沒有使用 illustrator，但是因為 CS3 介面的改進，變得親切許多，讓我使用起來還算ok，至少不會像 CS 版那樣綁手綁腳的。花費時間約3天，創意發想佔去大部分。網路的東西作多了，印刷品反而覺得很棘手，這樣的完成度我還挺滿意的。

公司今年做了新裝潢，有幾面牆需要美化一番，今年大家都相當忙碌，這件事就一直延宕。直到最近有了空檔，才由我接手去作。老闆與前輩決定讓我自由發揮、不設限。主題圍繞「整合」+「創意」=「無限可能」的上面，創意也是以此去發想，儘量擺脫公司的嚴肅形象，以抽象、活潑、跳脫為方向，因此就產生了象徵「整合」的多元千手，向四方抓取並吸收資源，然後透過大腦五彩繽紛的「創意」工廠加工製作，最後像變魔術一般的「無限可能」，從帽子裡面蹦出充滿神奇力量的超人兔！意念其實很簡單，但是透過插畫、卡通式的表現，希望也能替公司裡緊繃的氣氛舒緩一下！

蠻感謝前輩 William，一直鼓勵我接下這個案子，雖然看得出來是他自己不想做XD，不過也因為這個機會，我又回頭把 illustrator 給研究了一遍，真的又挖到了不少技術。不然平常 Firework 用好好的，也很懶得去打開 illustrator。話說 illustrator CS3 真的非常好用，整合一些UI介面，使用起來更順手、更有效率。以後有機會，也分享一些使用的心得！在此之前，我還得多多學習印刷設計呢！

[設計] 部落軌道logo設計手札

noreply@blogger.com (Edward Chien) — Sat, 30 Aug 2008 04:02:00 +0000

「部落軌道」是一個增加部落格或網站曝光率，以及格友之間互相交流的好用工具！當初是卓太德推薦我使用的，相當好上手，加上原作者索尼斯大不斷努力更新、進步，以及所有軌道使用者配合，服務已經相當完整！在這裡推薦所有格主都能使用看看，尤其是使用國外BSP的格主，例如：Blogger，或是Wordpress自行架站者，因為這些並不像國內BSP會有專屬的首頁，沒有專欄介紹，也沒有分類目錄可以找到自己，完全要靠自己努力宣傳，這時後「部落軌道」正好能提供一個迷你平台，讓你與其他部落格串接起來，大家透過軌道相互拜訪、交流，像是開啟了任意門，不分BSP，是不是很棒呢！

前些日子軌道在徵新的logo，小弟正好也有參加，一共投了3件作品參賽，最後感謝評審抬愛，得了第一名、第四名以及第十三名，真的非常感謝！其實創作過程中，還蠻頭大的，150x30 像素其實很小，要作的富有質感其實並不容易，看了索尼斯大整理出參賽作品之後，並不是很滿意自己的設計，主要在於與軌道整體搭配上似乎沒那麼適切。

作品編號：37 名次：13

這是我第一個設計出來的作品，事實上是我自己最喜歡的一個，反而是3件作品裡面名次最低的，甚至沒有前5名...Orz。以部落軌道的英文名稱「Blog Orbit」中2個字母的字首「BO」發想，藍色的為「B」，黃色則為「O」，結合圓形，簡單營造「BO」的形象，搭配黑色英文名稱，這裡故意不放上中文，總覺得會過於複雜，而且，有朝一日軌道走上國際化，這樣的logo也相當適合。而且還頗有大部份 Web 2.0 服務提供者logo的Fu哩！

作品編號：38 名次：1

這是我的第2個作品，與第一個作品產生的時間，大概相差了一天，創意來源是我女友！呵呵！她說試著把「BO」弄得方方正正吧！就給了我這樣的靈感。「BO」相互對稱，黃色點點增加趣味性，中文字沒有太多裝飾，配上俏皮的英文對話框，整體感覺較為活潑、多元。這作品有評審給了滿分，也有只給60分的，真是相當具有「爭議」啊 (笑)！另外因為150x30是長方形，基本上物件的擺設，沒有辦法垂直，只能橫向，不然這件作品，我比較希望字能出現在「BO」的下方哩！

作品編號：39 名次：4

第3件作品，幾乎同時與第2件誕生，走比較柔的感覺，「BO」發想化為蝴蝶的翅膀，藍色為「B」，紅色則為「O」，帶點漸層質感，並將logo配置在文字的中間，英文則在最下方，其實還蠻有某知名RPG logo的Fu說 (笑)！這件我也蠻喜歡的。而且算是3件裡面整體感最好的吧！

結果，第一名的反而不是自己最喜歡的，呵呵！

設計上，還有很多小細節可以加強，小弟也是很認真在這次徵稿上，只是時間上較為緊迫，希望部落軌道的朋友們都能喜歡囉！

最後，如有新手欲加入「部落軌道」，官方部落格這裡有許多給新手的指導說明，可以參考看看。

要加入「部落軌道」，可以點這裡！一起讓Blog更好吧！

古墓奇兵性感新代言人：Alison Carroll

noreply@blogger.com (Edward Chien) — Tue, 26 Aug 2008 04:19:00 +0000

隨著「古墓奇兵」最新系列作「地下世界(Tomb Raider Underworld)」釋出越來越多消息與遊戲畫面，電影中強悍又性感的羅拉(Lara Croft)，也公佈新一代的新任代言人：Alison Carroll。

這位來自英國，年僅23歲的漂亮模特兒，主修體操，讓他在表現肢體動作時，更多了一份力與美的優雅，雖然在大螢幕前略顯羞澀，不過還是很期待她所扮演的新一代羅拉！應該能走出跟瓊莉裘莉 (Angelina Jolie)不一樣的風格吧！

每天6小時的嚴格動作課程，包含格鬥以及武器課程，真是相當不容易，訓練出來更加性感、符合羅拉形象的 Alison Carroll 。以下是一些她的扮相以及動作照片：

以上照片，全部來自Gossip Gril 這個網站，裡面還有更多圖片可以欣賞！

另外，Evolution of Lara Croft - Alison Carroll Pictures - Official Eidos assets 這裡更提供高畫質圖片下載！給大家參考！

用Email搞「訂」RSS feed、News、Blogs

noreply@blogger.com (Edward Chien) — Mon, 25 Aug 2008 16:54:00 +0000

對於大部分的電腦使用者來說，並不是很清楚RSS是什麼，也不會使用閱讀器來訂閱新聞與部落格文章。事實上，一些mail服務商都有提供RSS訂閱以及新聞閱讀的服務，不過我想並不是很多人有興趣去了解。

FeedMyInbox 這樣的免費服務，正好提供簡單的介面以及步驟，讓你輕鬆掌握最新消息，並且訂閱喜愛的部落格文章！真的很簡單，他的網站甚至只有2欄表單加一個按鈕，你完全不用了解RSS，也不需要去找尋RSS來源，你只要知道兩件事情：

第一：你所喜愛的網站網址。

第二：你自己的 Email 地址。

然後，你只要每天打開你的信箱，就能掌握並閱讀你想要的所有資訊！夠Easy 吧！以下，就訂閱方法作簡單圖解吧！

1. 在網站一開始的畫面，分別輸入「網站連結」以及「Email位置」。然後按下「Submit」送出按鈕。

2. 出現以下畫面之後：

到剛剛所輸入的信箱裡，會出現確認信件，點下並啟動確認連結。

3. 完成！開始使用Email訂閱新聞與文章囉！

歐洲電玩展GC 2008：巫妖王之怒影片首次公開

noreply@blogger.com (Edward Chien) — Thu, 21 Aug 2008 18:48:00 +0000

歐洲最大電玩展萊比錫電玩展 GC2008 (Leipzig Games Convention 2008)，參展遊戲廠商公佈了許多相當值得期待的遊戲訊息與畫面！其中，最受矚目的，就是魔獸世界(WOW)最新資料片「巫妖王之怒」的開頭動畫首播了！以下整理這次電玩展幾個我還蠻喜歡的遊戲影片吧！

1. 魔獸世界：巫妖王之怒 (WOW) 開頭動畫

好酷啊！那隻龍，藍色的火焰，冰天雪地的場景，短短幾分鐘，整個氣氛營造得真棒！巫妖王也太帥了一點。
PC | MMORPG

2. 古墓奇兵：地下世界 (Tomb Raider Underworld) Game Play

畫面精緻程度不在話下，叢林、雜草製作的感覺，讓人彷彿置身於神秘文化古蹟裡探尋祕寶。可惜，不知道是不是開發中的關係，角色動作很奇怪，那個老虎整個像在飛。
PC PS3 XBOX360 | ACT

3. 波斯王子 (Prince of Persia) 完整Demo

按照以往慣例，系列作的賣點就是流暢、炫目的動作。與「古墓奇兵」相比，真的順暢很多，卡通風格的畫面也是與以往不同的嘗試！
PC PS3 XBOX360 | ACT

4. 快打旋風 4 (Street Fighter 4) Game Play

雖然打得很爛XD，不過還是可以看到包括人物選單的畫面在裡面。紅色系的背景倒是讓人眼睛一亮。熟悉的世界地圖，誇張的人物漫畫，真是讓人熱血沸騰啊！
大型機台 | FTG

5. 音速小子：解放 (Sonic Unleashed) Game Play

這速度好快啊！已經看不清楚景色了。這代音速小子除了畫面大進化之外，加入2D捲軸元素，更能表現音速小子爆衝的爽快感！相當期待的作品喔！
PS2 PS3 XBOX360 Wii | ACT

6. 靚影特務 (Mirror's Edge) Game Play

EA的另類FPS遊戲。在令人暈眩的都市裡穿梭，感覺就是一直跑，一直跳，一直爬，配合「音速小子」服用，應該會把一整天吃的食物都吐出來吧。
PC PS3 XBOX360 | FPS

7. 小小大星球 (Little Big Planet) trailer

之前有介紹過的「小小大星球」很可愛的多人同樂遊戲，主角是一堆有趣的巫毒娃娃。玩法無限，充滿想像，其中元素的物理運算，讓我嘆為觀止哩！
PS3 | AVG

8. EyePet trailer

很有創意的電子寵物玩法，整合自家EyeToy，讓寵物像是活生生的出現在客廳，還能畫畫、溝通，互動更加真實！
PS3 | ETC

使用Gmail的11個原因

noreply@blogger.com (Edward Chien) — Mon, 18 Aug 2008 17:39:00 +0000

儘管必須要去垃圾信件夾裡找重要信件，在重要信件夾裡刪除垃圾信件，雅虎信箱仍舊是廣為大家使用的信箱。我想這跟使用者習慣有關吧。在台灣，大部分人的瀏覽器裡面雅虎奇摩仍是佔據著首頁位置，屹立不搖，自然而然，就會去使用雅虎信箱，這絕對是方便的選擇！

再者，Gmail那醜醜、單調的畫面，還有「看起來」不是很親切的使用介面，也嚇跑不少想要嘗試的輕度網路使用者。其實如果因為這樣就放棄Gmail，實在是相當可惜！這邊，結合找來的資料，我就稍微整理一下應該使用Gmail的11個原因吧！

1. 強大的過濾垃圾信件能力

這可以說是Gmail的大絕招啊！幾乎過濾掉所有的垃圾信件，準確率高達99%！到目前為止，不論網路端( Yahoo、Hotmail )或是客戶端( Outlook、ThunderBird)等信箱服務，都仍然追趕不上Gmail在此項服務的技術。

2. 整合各家mail帳戶服務

使用Gmail整合你所擁有的各家mail帳戶，你仍可以收發原信箱中的所有信件，並且保有舊mail的來源地址，朋友也不會因為你換了新信箱，而不認識來自你所發送的信件！

3. 整合GoogleDocs服務

你可以快速透過Gmail發佈與分享你在 GoogleDocs 所製作的word、PDF、試算表等檔案。

4. 整合GoogleCalendar服務

如果你有使用 Google Calendar ，當重要的事件的時間快到的時候，他會透過Gmail寄送通知信件給你，你也可以利用Gmail帳戶，分享你的行程給朋友，並寄發提醒mail，讓聯絡朋友更加容易！

5. 星號標記讓你快速找到重要信件

Gmail特有的「星號標記」服務，當你賦予mail這個標記之後，你將可以在星號標記得資料夾裡找到他。方便建立重要信件，或是需要以後快速瀏覽的信件。

6. 會話群組功能

只要具有相同主題的回覆往來信件，Gmail將會貼心的幫你整合成一列表單，有點像是對話視窗那樣，方便瀏覽整個信件網來的過程，而不需要在一堆mail裡面找尋舊的對話紀錄。

7. 封存較舊的信件

Gmail提供能將時間較為久遠的 mail 「封存」，以使得「收件夾」看起來清楚、簡單。而被「封存」的郵件，將只能在「所有郵件」中出現。

8. 自訂標籤與過濾條件

你可以自行設定信件的標籤，還能給予標籤不同的顏色標示，組織化你的郵件，讓收件夾更加一目了然！更能自訂過濾條件，以減少或增加特定郵件的顯示。

9. 快速的信件搜尋

就像Google所提供的服務，Gmail也有信件搜尋的功能，而且一樣快速！

10. 線上網路端服務

Gmail所提供的所有服務，以及你的寶貴信件都是透過網路提供，並存在網路資料庫裡。這表示你可以在不同地點、不同的電腦，存取、收發相同的郵件帳戶裡的所有信件。

11. 不斷增加的空間

Gmail 最有趣的地方就是每次登錄的時候，都會告訴你，你的信箱空間正在不斷的加大！目前已經來到7GB啦！看著不斷跳動的數字，再也不用擔心信箱爆炸。

以上，有感受到Gmail功能很強大吧？下面整理一些Gmail基礎、進階接的使用教學，希望能有幫助囉！

基礎：

Gmail 電子郵件教學講義

進階：

FireFox套件：

Gspace 將Gmail當網路硬碟。
Gmail Manager Gmail郵件通知管理。
Better Gmail 2 Gmail介面美化。

影片：

[創作] 中華跆拳道代表隊加油MSN圖像

noreply@blogger.com (Edward Chien) — Sat, 16 Aug 2008 13:38:00 +0000

雖然中華棒球奧運代表隊在贏了荷蘭之後，連輸3場，甚至輸給中國大陸隊，但是其實還是有機會的！只要能提振起精神，未來若能扳成4連勝仍大有可為。

昨天我國跆拳道代表團幾位好手，也啟程出發前往北京，4年前在雅典奧運為我國摘下金牌的朱木炎選手，相當有機會能再為台灣奪得2面金牌！我想也將是我們寄予厚望的選手吧。

今天用了不同的畫風，製作了跆拳道加油圖，希望這紀「火焰踢擊」XD，能一掃中華棒球隊的陰霾，祝中華隊連續拿下勝利！並祝福跆拳道項目能再創佳績！為台灣再添金牌！

台灣加油！！GO！GO！

[創作] 中華棒球代表隊加油MSN圖像

noreply@blogger.com (Edward Chien) — Sun, 10 Aug 2008 07:39:00 +0000

昨天，北京奧運開幕典禮後第一個比賽天第一個比賽種類，咱們台灣好手「陳葦綾」就已經為我們摘下一面銅牌！真是值得我們驕傲與高興！

今天，眾多矚目的棒球代表隊，也將啟程前往北京，期望能為我們再創下佳績。

這裡稍微創作了一個ＭＳＮ加油圖，如果大家喜歡的話，可以自行點右鍵下載。希望也能替其他比賽項目的我國選手集氣加油囉！

台灣加油！ＧＯ！ＧＯ！

Batman movies 蝙蝠俠電影演進

noreply@blogger.com (Edward Chien) — Mon, 04 Aug 2008 01:00:00 +0000

說真的，幾個美國漫畫創造出來的英雄裡面，蝙蝠俠的特質與設定最合我的胃口！白天是有錢公子哥，夜晚搖身一變，成為一身黑暗勁裝的騎士，又有各種酷炫高科技武器。其系列作裡的反派角色們，相當具有角色魅力，各各個性鮮明又身懷絕技，真的是相當吸引人！

話說近代幾部蝙蝠俠題材電影，基本上我都有看過，從Borton系列1989年的「Batman」，到2008年Nolan系列的「The Dark Knight」，雖然對於原作漫畫未涉獵，但也應該可以算是蝙蝠俠系列電影的粉絲了吧！XD

以下，就找來的資料，整理一下系列電影的演進吧！

Batman: The Movie (1966)

這部第一個搬上電影螢幕的蝙蝠俠系列作，於1966年由「20th Century Fox」發行，我都還沒出生哩！看這可怕的蝙蝠俠大叔，那個藍色的衛生衣是怎麼回事XD，整個給他很歡樂！

完全感受不到壓迫感的壞蛋們XD。從左到右，分別是「企鵝先生」、「謎天大聖」、「貓女」、「小丑」。

從角色的穿著顏色相當鮮艷，到電影所營造的氛圍，蝙蝠俠狠狠揍壞人一拳的時候，還會出現「boooom!」這類漫畫中才會出現的相聲字詞，實在跟我們現在看到的蝙蝠俠形象差距甚大哩。

Batman (1989)

相隔了20年，奠定系列作基準，可以說是完美創造了蝙蝠俠「黑暗」形象的代表作在1989年上映了！鬼才導演Tim Burton善於利用黑色元素，成功打造不同於超人，以及以往蝙蝠俠那種歡樂的感覺，取而代之的是守護著沉淪於黑暗污穢的高譚市，晝伏夜出、黑色神秘的騎士！

再也不穿藍色衛生衣，蝙蝠俠換上帥氣的黑色盔甲，更加符合他「黑暗騎士」的形象！劇情部份增加深度，讓蝙蝠俠跳脫漫畫的虛幻，融入現實，讓人更能產生共鳴。這在當時完全造成一股旋風，蝙蝠俠帥氣的全身海報每每吸引目光，自此，蝙蝠俠在Tim Burton的手中，完成了蛻變！

由Jack Nicholson出演的Joker，在誇張的化妝效果，以及Jack Nicholson自然的詮釋之下，讓大家留下了深刻的印象，在此之後，沒有人認為有誰可以超越Jack Nicholson，而把小丑演得更加出神入化，直到「The Drak Knight」出現。

Batman Returns (1992)

相隔3年，Warner Brothers再度與Tim Burton合作拍攝了續集。延續上一集成功的經驗，本集的賣點完全在於反派角色的塑造與魅力上！性感又帶點瘋狂的「貓女(Catwoman)」配上從小被雙親遺棄的怪胎「企鵝先生(Penguin)」，相互利用，卻又依存合作，複雜的關係帶起本片一波波高潮。

拜高超的化妝技巧所賜，「企鵝先生(Penguin)」這個角色的形象得以完整體現。最後下場悽慘，死在下水道，口吐噁心的綠色血液，就像他那悲慘可笑的人生，孤獨的、怪異的，沒人在意的消失在這個世界上。

相較於企鵝先生這頭野獸，「貓女(Catwoman)」就顯得高雅、浪漫。復仇的驅使，讓她亦正亦邪，與蝙蝠俠一段若有似無的感情，也在片尾留待眾人思考。愛與恨，這隻九命怪貓，塑造的相當成功！Michelle Pfeiffer身上穿的這套皮製貓女裝，在當時甚至引起一股女性穿著皮衣的風潮！

可以與前面1966上映的電影比較，「貓女」與「企鵝先生」無論在服裝、個性以及背景設定上，都有相當程度的進化！可惜，這麼具有鮮明特色的反派角色，卻並不是每個人都能掌握的恰如其分！

Batman Forever (1995)

Tim Burton2部經典的蝙蝠俠還是遭遇了批評，認為實在過於暴力、黑暗，Warner Brothers也接受了這樣的意見，因此決定將下一部蝙蝠俠電影拍得較為適合闔家觀賞一點。於是導演就換成了Joel Schumacher。整部電影的基調又回歸到過去歡樂的漫畫電影風格。請來方基默(Val Kilmer)飾演帥氣的蝙蝠俠，金凱瑞(Jim Carrey)飾演「謎天大聖」，湯米李瓊斯(Tommy Lee Jones)飾演經典反派角色「雙面人」。另外美豔的女主角，則由妮可基曼(Nicole Kidman)出演。看似卡司陣容堅強，但本片意外的完全不值得一看！

劇情結構鬆散，常常不之所云，角色設計更是噁心到家。湯米李瓊斯假到不行的半邊臉不說也罷，金凱瑞的「謎天大聖」造型，活像是隻青蛙。還以為是蝙蝠俠大戰Keroro！

本集也是蝙蝠俠的好幫手羅賓的第一次登場，當然也是換上了重新設計過的酷炫的盔甲裝備。老實說我還蠻讚賞羅賓的服裝說。但血氣方剛的少年形象，有點被塑造成「成事不足，敗事有餘」這樣一種討人厭的多餘角色。為了復仇踏上懲奸除惡之路的原因薄弱，很難得到共鳴。「謎天大聖」與「雙面人」立場不明，完全不知道為何要跟蝙蝠俠對幹，唯一能解釋的，就是因為他們是壞人。簡單來說，特效、畫面、音樂，無一不爛！

Tim Burton塑造出來的蝙蝠俠印象，又回到了過去漫畫角色般，虛幻、幼稚，壞人打好人那種難登大雅之堂的小眾電影了！

Batman & Robin (1997)

Warner Brothers這次找來喬治克隆尼(George Clooney)飾演蝙蝠俠，這位熟男帥哥，為蝙蝠俠這個角色帶來不一樣的感覺，成熟而穩重，其實我還蠻喜歡的！反派角色依舊找知名大牌演員來擔任。阿諾史瓦辛格飾演Mr.Freeze，性感的鄔瑪舒嫚(Uma Thurman)則飾演「毒藤女」。老實說，這幾個選角以及這次的故事鋪成，的確比上一集要好的很多。最後布魯斯偉恩與阿福之間的親情，更讓人感動。

本集加強的視覺效果，讓高譚市看起來像是世界文化遺產的發源地一樣，到處都是高聳的神像，但是卻又打上五彩繽紛、五顏六色的燈光，讓這個城市看起來還真是一怪字了得。大量的螢光塗料，讓我覺得像個鬧劇。

本集重點，在於蝙蝠俠與羅賓之間的信任問題，藉由毒藤女從中挑撥，將2人心結浮上檯面：為何總是蝙蝠俠在前面，而羅賓只是個小助手般在後頭乖乖聽話？角色之間都有牽連，我覺得還不錯，只是很多地方過於做作。在熟男喬治克隆尼(George Clooney)成熟穩重的蝙蝠俠詮釋之下，反而更顯羅賓的輕浮與麻煩製造者的印象，還是會覺得，這真是個多餘的角色啊！

就像上一集那樣，漫畫般缺乏深度的電影，終究無法在票房上得到迴響。每下愈況的票房，加上「蜘蛛人」電影的成功，讓華納與DC Comics不得不重新思考蝙蝠俠電影的方向。

Batman Begins (2005)

終於到了2005年，一位年輕導演接下了蝙蝠俠系列電影的重擔，他必須尋找新的詮釋方法以被大眾接受，必須超越Tim Burton，必須有新的元素，是其他英雄電影未曾說過，甚至不敢觸碰的元素。然後，他給了我們「Batman Begins」！他是Christopher Nolan。

這部成就經典作品的偉大開端，一開始並不引人注意，畢竟離前作相隔8年之久，加上不好的印象，因而無法受到相當大的期待。起初我也是抱著「冷飯熱炒」的眼神來看待這部作品上映，但是，當我看到宣傳海報之後，我完全改觀了！漫天的蝙蝠幾乎遮蔽天空，以往大量使用的冷色調完全不見，取而代之的，卻是黎明陽光灑落的溫暖金黃色，蝙蝠俠孤獨的身影，他低著頭，似乎在思索什麼。很簡單的一張海報，我卻可以感受到這部電影不一樣！他想告訴我們的，比以前的電影更多！

本作趨近真實的敘事方式，讓蝙蝠俠這個角色就像個凡人一樣活了出來，他曾經是個為了復仇而活的人，當他了解並勇敢面對恐懼的時候，他要作高譚市罪犯們的恐懼，他要當高譚市體制之外的希望。這樣的轉變，透過兒時玩伴「瑞秋」，透過阿福的幫助，透過「忍者大師」的開導，他找到自己的角色，蝙蝠俠因而誕生！

片中許多橋段簡單而嚴謹，輕鬆寫意的將很多事情都交代清楚，像是蝙蝠車、蝙蝠探照燈的由來，又能保有商業動作電影的刺激元素，基本上已經能看出導演Christopher Nolan的功力還真是有那麼兩下子！

本作配樂由Hans Zimmer、James Newton Howard合作，氣勢磅礡，完全襯托電影裡緊張又內斂的氣氛！為本作加了不少分數。

Christian Bale擔綱本作男主角蝙蝠俠角色，帥氣多金的形象相當吻合，除此之外更多添正義、沉穩的內斂氣質，真的是相當適合布魯斯偉恩|蝙蝠俠這個角色！不斷進化的蝙蝠裝備，也值得細細玩味。從一開始高處落下摔傷，而要求加裝的披風，到最後完整的原型出現，過程細膩而別具巧思。

而Michael Caine演出的阿福角色，一開始我還相當不習慣，有別於之前系列作唯一不曾更動的Michael Gough所演的親切、和藹的阿福，本作的阿福除了忠誠，更多了一份紳士氣息，也許就是這樣大智若愚的氣質，讓我不得不慢慢信服這位阿福管家，將永遠都不會放棄布魯斯偉恩，永遠支撐著蝙蝠俠！

這一集反派角色倒不是重點，即使「忍者大師」在設定上成為蝙蝠俠的師父，過程中，卻仍主要著墨在布魯斯偉恩心境的轉變上，反派只是點綴而已，我認為這種安排相當大膽，卻意外的適切主題：Begins。

至此，蝙蝠俠又另開新的一頁，他沉著、勇敢，面對自我的恐懼。晝伏夜出，白天是偉恩企業的大老闆，平時風流不稽，夜晚他的攻擊總從黑暗中給予罪惡恐懼，是神秘的怪胎，卻又帶給高譚市向上的希望！他了解高譚市需要他，但事實上，布魯斯偉恩從變身成為蝙蝠俠那天起，他就脫離不了這個角色，他將黑暗各各擊破，將夜空撕裂成片片蝙蝠，隨著黑暗身影消失的時候，從破片中透出的黎明，將是照亮整個高譚市最明亮的溫暖陽光！

這是Christopher Nolan建立在Tim Burton所創造的黑暗蝙蝠俠、黑色高譚市之上，然後加以細碎咀嚼之後，更加真實、適切的給予蝙蝠俠這個角色定義，以及心態的闡述過程。然後，當一切要素設置妥當之後，一個更加偉大的作品由此誕生，蝙蝠俠真正放下自我，放下一切，變成更加強壯的「黑暗騎士」！

The Dark Knight (2008)

承襲開戰時刻的成功，Christopher Nolan繼續將故事牽引的更憾動人心。Heath Ledger所扮演的Joker，可以說是超越了Jack Nicholson的版本之外，人性貪婪的醜態，面臨生存關頭的自私與墮落，更是在本片發揮的淋漓盡致！

經典中的經典！2小時半的電影豐富而緊湊，卻又能留下多處空白，讓影迷回味無窮，導演功力在此片展露無遺。我想這部最近的大作也不需要我再多說什麼了。

「黑暗騎士」甚至探討了像蝙蝠俠這樣的角色，真的可以完全被人們所接受嗎？他真的就像白色騎士那樣英俊煥發，接受人民愛戴嗎？答案是否定的！他被排斥於體制外，法理、警察容不下他，沒有掌聲，只有追捕的槍聲，這樣偉大的英雄，層級更高了，除了強壯的身體，他的心理更是比一般人更加堅強！

蝙蝠俠電影發展至今，我想是最棒的結果，如果之後Christopher Nolan換手，那個導演想必相當頭疼吧！綜觀蝙蝠俠的電影，也像其他英雄電影一樣，必須跳脫漫畫的虛幻而更接近真實平凡，英雄們慢慢都發現自己的弱點，以及當英雄的孤獨。這代表人們也都開始思考，這幾個面罩怪胎，除了天賦異稟之外，他們與我們無所異，然後才能產生更多的共鳴。

讓我們期待蝙蝠俠越來越好吧！

整理超過千個免費下載的icon

noreply@blogger.com (Edward Chien) — Mon, 28 Jul 2008 04:59:00 +0000

國外的設計資源真的很豐富！大家都是基於讓設計業能更加成長，不斷的創作，無私分享，在這裡先感謝這些先進，讓我們能有好用、又具有豐富設計感的資源可以應用，而且完全免費！以下的icon大多是14*14，或是16*16大小，可以適用於網站圖示、部落格等地方。你可以放在自己的專案、網站等，但是千萬不能有商業販賣行為！

Over 320 mini pixel icons! All Free!
14*14去背icon。

Fugue Icons
16*16，PNG格式，總數788個。
Licenced：Creative Commons licence

ExplodingBoy Pixel Icons

PI Diagona Pixel Icons
10*10、16*16，PNG格式。

Bitcons
16*16，總數121個。

Mini Pixel Icons (Angle Stlye)
16*16，GIF格式。

MINI ICONS
GIF格式，總數144個。

FLAG ICONS
GIF、PNG格式，總數247個。

Bullet madness

The Dark Knight 黎明來臨前的夜晚總是最黑暗

noreply@blogger.com (Edward Chien) — Thu, 24 Jul 2008 16:47:00 +0000

上星期終於讓我盼到黑暗騎士上映，這部從年初就不斷放出海報、預告，看的我心癢癢的期待作品，真的完全沒讓我失望！年輕的導演Christopher Nolan，在第一集「蝙蝠俠：開戰時刻 (Batman Begins)」中重新詮釋、演繹了蝙蝠俠這個故事。除了承襲Tim Burton於1989年拍攝的「蝙蝠俠 (Batman)」黑暗華麗的風格，Nolan更著重在刻劃人性的弱點與矛盾！這點在第二集「黑暗騎士 (The Dark Knight)」更加發揮淋漓盡致！

You either die a hero or
you live long enough to see yourself become the villain.
你不是死得像個英雄，就是活得夠久看著自己變成惡人。

整部片可以說是圍繞著哈維丹特 (Harvey Dent) 這句話為中心。
在面對生存的時候，善惡沒有界線，能活下來的人，手上都沾滿了血，帶著罪惡感，與曾經奉為圭臬的道德、倫理交戰，最後墮落，沉淪。這是個萬惡城市！高譚市就是這個世界的縮影，面對存亡的時刻，我們都會自私的選擇讓自己活下來，就像高譚市那些收受賄絡的警察，他們也只是想養活自己，養活妻小。

這是個殘酷的事實！Joker也許瘋狂，但是他反而是那個看的最清楚的人！他不斷反覆的、血淋淋的，玩弄著人性的卑劣，嘲笑著這個社會，那些虛假、自以為是的「文明人」，他把他們剝光，赤裸裸的，他讓他們覺得自己只不過是個貪生怕死的罪人！

很黑暗，這一切卻在那2艘船上起了變化！沒有人按下炸彈，雖然過於浪漫，卻象徵蝙蝠俠心中的希望不滅！人們還是有善意的，即使只有那麼一點，都值得他背負罵名、追捕，犧牲一切也要繼續奮戰守護的目標！他不是英雄，更不會是惡人！

He's the hero that Gotham deserves,
but not the one it needs right now ... and so we'll hunt him ...
because he can take it ...
because he's not a hero...
he's a silent guardian, a watchful protector... a Dark Knight.

他是高譚需要的英雄，但是他現在不被需要…所以我們必須追捕他
因為他可以承受…
因為他不是個英雄…
他是沉默的守護者、戒慎的保護者…他是黑暗騎士。

這是片尾那段古登 (Gordon)局長的對白，蝙蝠俠將一切殺人罪名扛下，一跛一跛的逃走時，真是讓我感動到想哭！當Bruce Wayne決定變身成為令罪惡恐懼的化身，就註定了他的命運，一個體制外，以暴制暴的怪物。他讓法律顯得渺小，讓警察顯得沒用，有一天，高譚市從罪惡中走出來，人民對法制、警察重拾信心的時候，蝙蝠俠終究會受到審判。但他不會放棄，即使他失去一切，蝙蝠俠就是Bruce Wayne，也只有他能辦得到。真正的英雄是沒有掌聲的，除了忍受寂寞、孤獨，更需要強壯的信念！

相對蝙蝠俠的黑暗騎士道，哈維丹特 (Harvey Dent)這位白色騎士，世人們心目中永遠真正的大英雄，他站在體制上成功的打擊罪惡，也讓他的仕途平步青雲，也許得到太多，失去的太快，讓他一墜即下，變成復仇的惡魔。他痛恨過去的信念，深刻感受到人們醜陋的內心，他選擇鄙視這些人。

We thought we could be decent men in an indecent time... but we were
wrong! The world is cruel. And the only morality in a cruel world is chance.
我們想我們可以在骯髒的時刻當正派的人…但我們錯了！
這世界是悲慘的。在這悲慘世界的唯一規範是機率。

最終小丑還是勝利了，他不單單擊垮了哈維丹特 (Harvey Dent)，也讓高譚市的希望破滅，更深深影響了蝙蝠俠。不得不佩服「黑暗騎士 (The Dark Knight)」所塑造的小丑角色，不虧是蝙蝠俠系列最強的反派，他根本就「Complete」了蝙蝠俠！希斯萊傑 (Heayh Ledger)，不用誇張的面具與化妝，完全利用眼神、聲調，在噁心、不勻稱的小丑妝容下，讓小丑的活躍蓋過本片中任何一個角色！令人印象深刻！

本片在導演Nolan各各細節兼顧之下，2小時半的片長，情節緊湊、豐富，角色安排、戲份恰到好處！卻仍能留下許多空白，讓影迷回味無窮，真的是不容錯過的經典好片！

我相當喜歡看「英雄片」，主要不是看好人與壞人的對幹，而是每一部英雄片慢慢演進，已經不能再只有天真的保衛地球這種爛梗了，漸漸的，他們也有人性，也有弱點，這真的很有趣！如果你是導演，一部你小時候必看的英雄漫畫，你該怎麼拍？才能讓大家接受，並且賦予新的意義？相當難吧！

我想Christopher Nolan的「黑暗騎士 (The Dark Knight)」絕對會是此類電影很難超越的巔峰吧！

新案上線：Windows Live網路電話

noreply@blogger.com (Edward Chien) — Sat, 19 Jul 2008 01:18:00 +0000

設計、CSS：布丁、威廉 | 專案：Minna | 程式：小乖
Windows Live網路電話

歷經硬碟掛點，資料全部重繪等可怕事件，Windows Live網路電話終於也給他上線啦！

現在加入會員，還能有10分鐘免費體驗。撥打電話或是儲值，都能參加抽獎喔！從現在開始到8月底，周周抽WiiFit組合！詳情看這裡。
MSN也透過全家便利商店，販售儲值卡，也能在FamiPort直接儲值金額，憑儲值碼可至網站登錄，就能馬上使用網路電話喔！詳情看這裡

這次網站設計，主要朝簡單清爽的方向去設計，不過似乎是可以在更活潑一點，內頁單調了點，沒關係，再接再厲啦！。CSS佈局的部份，用了很多「絕對定位」的應用，讓網站在後面調整的時候，省下不少時間！FX、IE6、IE7都能正常瀏覽，也是一整個得意。話說，跟MSN合作真是一刻不得閒啊！修改時間常常壓的超緊的，今天提供資料，傍晚就要馬上上線了，還有其他專案軋在一起的時候，真的是會想哭出來哩！還有啊，微軟自家的瀏覽器反而問題最多，每次修改都想直接說：「請你們先把IE弄得好一點吧！」XD

威廉老大製作的小綠人造型，真是酷到不行，超精緻，當然也花了不少時間。不過慢工出細活，一個代表作就是這樣誕生的。Minna不斷開會、周旋在客戶之間，也是相當辛苦的。小乖程式軋戲軋的也很重，沒有假日的趕出來了。總之，We did it！

我的FireFox套件

noreply@blogger.com (Edward Chien) — Thu, 17 Jul 2008 17:02:00 +0000

FireFox 3.0 終於在2008年6月18日發佈正式版！並同步於全球舉辦Download day，創下單日24小時之內全世界下載次數達8,002,530次的世界新紀錄！在此恭喜Mozila團對達成新的里程碑之外，也感謝他們這些不求急功急利的軟體開創者為我們帶來這麼美好的Web體驗！

接觸FireFox其實並不久。Netscape在與IE爭霸的時候，我還只是個單純的IE使用者，上網就是收收mail、聊聊即時通訊。FireFox卻透過更高的安全性，豐富而功能強大的附加元件告訴我，瀏覽器可以不只是上上網、收收信而已！

下面我就列出我自己有在使用的擴充套件，也算是幫自己整理一下！

Adblock Plus
擋廣告套件。可以自訂規則，或是匯入別人已經做好的過濾清單。
實用性：5顆星

Add to Search Bar
只要點擊右鍵，就能簡單快速將任何網站上的搜尋bar加入到FireFox的搜尋引擎中！
實用性：4顆星

Auto Context
選取文字，就可以彈出複製、貼上、搜尋等功能選單。
實用性：3顆星

Compact Menu 2
將FireFox預設選單收集成單一按鈕，簡化瀏覽介面！
實用性：3顆星美觀：3顆星

Cooliris Priviews
在連結後方顯示小icon，並彈現連結的預覽視窗。瀏覽大量連結資訊時相當好用！
實用性：3顆星美觀：2顆星

Download Statusbar
不用多說的好用檔案下載控制套件。
實用性：4顆星

FireBug
直覺性的操作，快速找到網頁元素的屬性與style，節省你查看Html原碼的時間。網頁設計者、部落客必備的擴充套件！
實用性：5顆星

Firefox Showcase
分頁開太多而找不到目標嗎？用這套元件視覺化管理你開啟的分頁！並提供可以直接重整、關閉等分頁基本功能。
實用性：3顆星

FireGestures
必使用！強大的滑鼠手勢套件。
實用性：5顆星

Fission
模擬Mac的Safari，將網頁讀取狀態bar放到網址列。並可自訂圖片！
美觀：4顆星

Flashgot
下載應用套件。支援續傳、BT等功能。
實用性：3顆星

Foxmarks
讓你的FireFox在不同電腦上做書籤同步的工具。
實用性：5顆星

GBookmarks
Google Bookmarks的FireFox套件。如果有使用Google書籤的話，是一定要裝的方便套件！
實用性：4顆星

Google筆記本
Google筆記本的FireFox套件。讓你隨時隨地紀錄重要網站、圖片、文章！
實用性：4顆星

IE Tab
讓FireFox也能包含IE的核心。適合網站設計者以及瀏覽一些設計不良的網站使用XD。
實用性：5顆星

Locationbar²
層級化網址列，網域名稱標注等功能讓網址列更具功能性。
實用性：4顆星美觀：2顆星

Organize Search Engines
組織並管理你的搜尋引擎。與Add to Search Bar搭配更加好用！
實用性：4顆星

PCMan Plug-in
將FireFox內建PCMan核心，使用FireFox上BBS喔！
實用性：4顆星

PicLens
功能強大的多媒體3D牆瀏覽套件。支援Fliker、Picasa、Youtube，飆網必備的體驗工具！
實用性：5顆星美觀：4顆星

Remember the Milk for Gmail
將功能完備的toDo list內嵌在Gmail裡面，隨時隨地新增事項，並管理你的計畫！
實用性：4顆星

Sage
FireFox內嵌RSS 閱讀器
實用性：3顆星

ScrapBook
擷取網站，並可自行編輯存取，方便網頁加註、網站收集的好工具！
實用性：4顆星

Screen grab!
擷取畫面的工具。可擷取全螢幕、全網頁、可視範圍3種。
實用性：4顆星

Stop-or-Reload button
將「停止」與「重新整理」的按鈕合而為一，簡化工具列。
實用性：2顆星美觀：4顆星

Stylish
自訂本機瀏覽網站的外觀。對於Google家族支援度相當高！
實用性：4顆星美觀：4顆星

Super DragAndGo
拖拉文字或網址，以開啟搜尋或是網頁。
實用性：5顆星

Tab Mix Plus
強化FireFox分頁功能，並可紀錄已被關閉的分頁，重新開啟。
實用性：5顆星

Taboo
資訊太多嗎？Taboo可以幫你將網址暫時存下，製作縮圖，並依照日期排列，待日後再來瀏覽。
實用性：4顆星

TinyPaste Uploader
想將一段文字存取下來，並分享給朋友嗎？使用這個套件，選取文字，點擊右鍵中的功能，就能將文字上傳並得到一串縮址，便於分享與紀錄文字喔！
實用性：3顆星

TwitterFox
在FireFox上面也能玩Twitter喔！
實用性：3顆星

Web Developer
好用的網頁原碼瀏覽工具。可觀看選取文字的原始碼，或是disable CSS、圖片等元素，網頁設計師必備的工具！
實用性：4顆星

Yet Another Smooth Scrolling
讓你的FireFox也能有Opera捲軸的平滑效果。
美觀：4顆星

大概就是這些，FireFox的套件真是好用到說不完，相信持續不斷創新是我們絕對可以期待的！更多更棒的應用就是FireFox使用者們最幸福的地方！