好站推薦：Photoshop Disasters

做設計的人常常因為種種因素，只能把東西「做完」而沒辦法「做好」，所以只要稍加注意，你就會發現許多Photoshop特效下「不為人知」的一面！Photoshop Disasters不止告訴你「不為人知」的那一面，而且還把它放大給你看！告訴你「不為人知」在哪裡！這下子你用Photoshop處理照片或影像的時候可得小心了！別被拿來當做負面教材呀！

快速「確認」Photoshop的文字輸入

這句話講得真是奇怪，但我不知道該怎麼形容比較好！有時候你在Photoshop使用文字工具("T")，當你將文字輸入完畢後，你可能會用滑鼠按「打勾」的確認鈕，或是換成其它工具，例如黑色的選取箭頭("V")…可是，當你把所有的工具列都隱藏起來("Tab")、讓Photoshop的顯示範圍最大化的時候("F")，你使用了文字工具打幾個字…好，字打完了；結果你發現沒有任何可以讓你執行「確定文字輸入已完成」的方法，因為浮動工具列被隱藏起來了…沒辦法換其它的工具！不管你按了什麼 "V"、"M"、"Tab"、"Enter"、…都沒用，它都會把你按的東西加到文字框裡面！怎麼辦？

其實Photoshop藏了一個快速完成文字輸入的組合鍵，就是 "Ctrl"+"Enter"。當你完成文字輸入的動作後，按下這兩個按鍵就等於是告訴Photoshop「我已經把字打好了、快讓我用其它的工具吧！」小小的技巧，但有時候真的很重要！

下拉選單(Drop-Down Menu)被Flash擋住了…

今天遇到一個奇怪的問題，就是當我們用Dreamweaver的SPRY來做下拉選單(Drop Down Menu)功能的時候，如果底下有個Flash的話，會造成這個下拉選單被擋住！

被擋住會怎樣嗎？…很明顯的，會讓人很生氣！

我首先想到的是 z-index 屬性，它的數值愈大，愈不會被別的東西擋住；數值愈低，則代表這個元素在愈底層…不過，前提是它只能在設有 position 屬性的元素裡面才有作用。所以我在 ul 裡面加了一個 class="zTop" 的類別，在zTop加入底下的屬性：

position:static; z-index:999;

結果，發現…根本就沒有任何作用！難不成得在Flash裡面加上 position:static; z-index:-1; 這樣的屬性嗎？仍然是一個完全無效的結果…ap4a有一篇文章可以參考： Z-index Oddities: Menu dropdowns overlapped by positioned elements，但在目前的狀況下，似乎幫助不大。

所以這問題可能不在 z-index 的深度，而是在Flash本身的問題。webmasterworld.com的一篇文章有提到另一個解決的方法：mozilla - dropdown menu will does not overlap flash movie。這方法確實解決了這個問題！

請在Flash的Object標籤底下加入一個空白標籤，裡面寫進底下的參數：

<param name="wmode" value="transparent">

在 embed 標籤裡再加入底下的參數：

wmode="transparent"

沒想到這樣就解決我的問題了！棒！Adobe針對Flash Object與Embed標籤的屬性也有做詳細的說明。事實上，不一定只有將 wmode 的參數值設成 Transparent(透明) 才行，其實 Opaque(不透明) 也可以！所以只要設定透明度，不論是否透明，都能有效解決這個問題。(設成 window 則是肯定不行！因為我試過了~)

慾望城市：官方網站

最近在播放的電影：慾望城市，我覺得它的官方網站設計得相當不錯！純白的背景、灰階的紐約街景，襯托出四位女主角的身影！彩色的主體與黑白的背景對比，加上鑽石般閃亮的SEX AND THE CITY，可說是一整個白色時尚簡潔的高雅與貴氣！

這個網站整個都是Flash的，當你在畫面左右移動滑鼠的時候，畫面也會跟著移動；當你選取其它項目的時候，利用上下的兩個虛線開合，產生一種把頻道開啟的錯覺，這就是Flash的互動表現囉！

除了整個設計感讓人覺得很時尚之外，可能會有人很好奇那些紅色大大的、像鑽石一樣發亮的字要怎麼做？其實我也有一些好奇，但我懷疑那是「純手工」的…也就是一個一個排上去的，因為裡面的鑽石並不是排列得非常整齊，有一些地方還是有歪掉…不過，瑕不掩瑜，它的效果還是非常的棒！這個網站非常值得我們參考與借鏡！

CSS：簡單解決「飄浮(float)」的問題

當我們在Div裡面再放進不同的Div的時候，只要你有使用 "float" (float:Left;或float:Right;)這個屬性的話，常常會發現外面的Div立刻就會忘記自己裡面還有其它的小Div…所以會變成「外面的Div是外面的Div、裡面的Div是裡面的Div」，好像沒什麼關係似的！？

到底應該怎麼弄才能讓外面的Div想起來自己應該要隨著裡面的Div來調整高度呢？畢竟它們是有連帶關係的！不能因為裡面的Div會飄來飄去的就不予理會呀~！？

其實是有幾個解決的方法，例如W3C就建議用額外的標籤來解決這個問題：在裡面最後的一個Div底下，加上強制換行的 BR 標籤，並且在裡面加入 Style="clear:both" 屬性；如此一來，就可以解決這個問題了！

不過，這會讓我們的程式碼看起來有點兒多餘！有別的方法嗎？

有，用假類別(pseudo class) ":after" 屬性一樣能達到同樣的目的！不過…那很複雜！

目前最簡單也最直接的方法，是由英國的Paul O'Brien所發現！只要把外面的Div加上 "overflow:auto;" 屬性，外面的Div就會知道…原來裡面有其它的Div存在！真的是很神奇！

Alex Walker在SitePoint.com的Simple Clearing of Floats以及Peter-Paul Koch在QuirksMode.org的Clearing Floats都有更詳細的圖示與說明。

Adobe CS3 一氣呵成研討會

七月一日的時候，我參加了Adobe舉辦的「CS3一氣呵成」研討會(Adobe CS3 Master Class 2008)；原本我不打算參加的，但是Adobe寄了很多次它的EDM給我，我想，應該是不錯的活動，不然不會發這麼多次同樣的東西！所以我決定還是參加了！

一大早，誠品信義店的門口就排了很多的人，我也就加入了…因為得排隊才能上六樓！從人潮看來，這天參與研討會的人就比我想像中的還要多了！

這次研討會主講的是三位「大師級」的人物，其中為首的是Greg Rewis(the Group Manager of Creative Solutions Evangelism at Adobe Systems, Inc.)，他是Dreamweaver和之前GoLive的創始人之一，長得跟 Richard Gear滿神似的，他主要是針對網頁設計的部份做說明…另外兩位，一位是Rufus Deuchler(主講平面設計)，一位是Jason Levine(主講影像多媒體)。

我試著把他們演說的技巧寫下來，分享給自己，也分享給有需要的人。

上午他們三位輪流演說，好像在唱戲一樣，滿有趣的！他們三人合作把一個網頁做出來，這樣應該就算是一氣呵成了吧！至於重點嘛…主要的有三個(當然是不會只有三個而已…)：

1. Photoshop的Layer Camp功能
2. Fireworks的分享圖層功能
3. 直接把Photoshop的PSD檔拉進Dreamweaver裡

[ 說明 ]
1. Photoshop的Layer Camp功能
其實有很多人都還不大會用Layer Camp這個功能，它可以很方便的將你的圖層記錄下來；你只需要在Layer Camp裡新增圖層，之後只需要簡單的點選，就可以讓圖層自動開啟與關閉，很方便的功能！

2. Fireworks的分享圖層功能
在圖層上按右鍵，就會有一個「分享圖層」的功能；當你在製作許多不同的頁面時，有可能會有主要的版面是不變的，利用這個功能，你可以讓每個頁面都有同樣的東西。

3. 直接把Photoshop的PSD檔拉進Dreamweaver裡
很多人都是利用切割功能，把一張一張的圖切成個別的圖片，然後再放到Dreamweaver裡。其實你可以直接把Photoshop的PSD檔直接拉進Dreamweaver裡，Dreamweaver會自動開啟一個視窗，讓你選擇要轉換的圖片格式(如JPG/GIF/PNG)；並且在需要更新或修改的時候，你可以點選Dreamweaver屬性面板的Photoshop編輯圖示，Dreamweaver就會幫你打開Photoshop、讓你修改這個圖片了！修改完，只需要按「儲存」，Dreamweaver就會自動幫你把圖片更新唷！真的很神奇！而且很方便！

下午的時候，分成三個場地，由他們三個人分別主講不同的主題；由於我目前從事網頁設計的工作，理所當然的就是去聽Greg Rewis的網頁設計囉！

網頁設計的場地，不知為什麼，人似乎特別多！多到有些人得坐在走道上，還有一票人是直接坐在講台前面的空地…看來，想學網頁設計的人真不少！

Greg一開始就強調使用CSS來設計網頁的重要性，而且他一再強調，要用CSS而不要用Table來製作網頁！但是，剛開始要用CSS來設計網頁確實是比用Table來得難多了！尤其是對那些CSS不很了解的人來說。他用Rufus先前設計的版面來將它做成網頁給大家看…

下午的小技巧：

1. 使用正確的網頁文件格式(Doc-Type)
2. 從一開始設計網頁就用Dreamweaver提供的CSS起始版面(CSS Starter Layout)
3. 養成「先按一下Element Inspector，然後再按左、右鍵」的習慣
4. 雙擊工作視窗的標題列就可以將該工作視窗最大化
5. Dreamweaver的尺規工具
6. 使用EM而不要用PX來做為文字的單位
7. 方塊理論(Box Model)
8. 從Photoshop複製，然後直接在Dreamweaver貼上
9. 浮動(Float)的屬性：先往上靠齊，然後才向左或向右
10.用Dreamweaver直接調整CSS
11.用Dreamweaver內建的SPRY來建構標準的Ajax頁面
12.在同一個標籤裡使用多個「類別(Class)」
13.絕對不要一開始就在IE裡檢查你的網頁
14.IE修正碼「[if IE lte7]」

[ 說明 ]
1. 使用正確的網頁文件格式(Doc-Type)
很少有網頁設計師會一個一個字的把網頁文件格式打下來，因為我們可以直接用Dreamweaver來建構一個具有正確網頁文件格式的網頁。

2. 從一開始設計網頁就用Dreamweaver提供的CSS起始版面(CSS Starter Layout)
Dreamweaver CS3提供了許多方便而且有效的CSS起始版面；使用這些內建的版面不止確保你會使用正確的網頁文件格式，也讓你避免掉許多的衝突與問題，同時它也會給你許多網頁設計的提示 ；當然，你得先了解自己的設計是屬於哪一種的CSS樣式，你才能選到適合你的CSS起始版面。

3. 養成「先按一下Element Inspector，然後再按左、右鍵」的習慣
Dreamweaver有一個很強大的功能，就是 "Element Inspector"。你可以透過這個功能來選取某一個網頁元素。如果你想在某個網頁元素之後加上一個東西，你可以用Element Inspector選取這個網頁元素，然後再按「右鍵」，這樣你就完完全全的讓游標跑到這個元素之後了！這樣可以避免放錯網頁元素的位置。

4. 雙擊工作視窗的標題列就可以將該工作視窗最大化
有時候你想要用Dreamweaver的某個工作視窗，但你得不時調整它的大小，可能要往上拉，可能又要往下拉，很浪費時間！但其實你可以直接在工作視窗的標題列快點兩下，Dreamweaver就會知道你想要把它放大，它會自動把其實的工作視窗收合起來，把你要的工作視窗放到最大！很方便吧！

5. Dreamweaver的尺規工具
如果Photoshop的參考線工具的話，Dreamweaver也有！用法就跟Photoshop一樣！從尺規的地方拉出參考線就可以了！不過，Dreamweaver不止提供這個功能而已…按住你的「Ctrl」鍵，你會發現Dreamweaver告訴了你兩個參考線之間到底是多少Pixel的距離！哇！真是方便的功能！

6. 使用EM而不要用PX來做為文字的單位
Pixel是固定的大小，在許多瀏覽器上會無法讓文字放大或縮小；EM則是按照文字的空間，不論你是要放大或縮小，文字都可以自動將調整大小而且保持原始比例。1em = 16px，這是預設的字體大小，當然，你也可以用百分比來調整字體，和EM的道理是相通的。

7. 方塊理論(Box Model)
這個理論只是用來說明在不同瀏覽器中所存在的問題。如果你設定某個方塊的寬度為「300px,　padding-20px,　border:5px」，FireFox或Safari這類的網頁標準格式的瀏覽器會解讀實際的寬度為 350px(5+20+300+20+5)。但是微軟的Internet Explorer(IE)則會解讀為300px的實際寬度。IE會把裡面的內容自動縮小好讓實際的寬度可以是300px；換句話說，以這個例子來講，IE把內容的寬度改成250px了！這可能就是讓網頁設計師不喜歡CSS的原因之一了！(W3C有更多關於方塊模式(Box Model)的介紹)

8. 從Photoshop複製，然後直接在Dreamweaver貼上
一般來說，很多網頁設計師都會先把圖片切割好再匯出，然後再放進Dreamweaver裡；但是，現在你可以從Photoshop複製選取區域，然後直接貼進Dreamweaver裡！跟先前將PSD檔放進Dreamweaver很類似，Dreamweaver在你將複製的圖片貼進來的時候，會提示你需要儲存的圖片格式是什麼…又是一個超方便的功能！不過，這邊有個重點你必須要知道，就是這個功能是基於「圖層」的前提之下(Layer-Based)；意思是說，它只能接受在選取的圖層上被複製的區域，如果你沒有選擇任何圖層，就無法複製。

9. 浮動(Float)的屬性：先往上靠齊，然後才向左或向右
如果這些向哪邊的屬性影響了你底下其它的Div，你可以用 "clear:both" 的屬性來隔離上方的浮動屬性，這樣它們就不會被影響了。

10.用Dreamweaver直接調整CSS
用Dreamweaver調整CSS是很正常的，但是你也可以直接從Dreamweaver裡面，將兩個不同CSS檔的內容做移動！也可以直接把網頁內置的CSS變成外部CSS檔！這個功能我之前還沒試過，現在…真的覺得滿方便的！

11.用Dreamweaver內建的SPRY來建構標準的Ajax頁面
Dreamweaver支援Ajax。如果你想做出像Ajax一樣的效果，Dreamweaver其實已經內建了一個Ajax的功能：SPRY。你不需要花很多時間來寫一個Ajax的元件，Dreamweaver已經幫你寫好了，你只需要拿來用就行了！目前最新的版本是1.3版，可以在Adobe Labs找到更新。

12.在同一個標籤裡使用多個「類別(Class)」
其實你可以在網頁標籤裡使用不止一個的「類別Class」，你只要在兩個不同的類別中間加上空白就可以了。例如：class="style1 style2"，這樣會用上style1和style2這兩個類別。

13.絕對不要一開始就在IE裡檢查你的網頁
因為IE並不符合網頁標準規格；即使是IE本身，不同的版本所呈現的網頁畫面也不一樣！所以IE的問題不少！你最好先從FireFox或Safari這類的標準網頁格式的瀏覽器來檢查你的網頁。

14.IE修正碼「[if IE lte7]」
你可以用這個修正碼來加註在網頁上，以修改IE7以下的版本所產生的問題…雖然…不同的版本還是有可能會有不同的問題…

嗯…差不多就這樣了！雖然我並不是Dreamweaver的新手，但這個研討會還是讓我覺得獲益匪淺！雖然也花了不少時間寫這個東西，但我相信這也是加深了自己的印象！Greg在研討會中不時的提醒我們他出的新書：Mastering CSS with Dreamweaver CS3；這本書是他和他未婚妻一起寫的，聽說有許多不錯的教學，Amazon上的評價也不錯！所以我昨天就訂了一本…NT$1383…投資一下自己吧！

From VX Revolution To VX Nano

前陣子我的滑鼠用起來怪怪的，有時候明明是點一下，會變成快點兩下，在操作的時候真的滿困擾的；直到上星期，我才把羅技「VX Revolution」拿去送修…在八德路四段123號6樓之四。我一次就送修了兩隻滑鼠，包括我之前用很久的那隻…

拿去的時候，那邊有一位小男生要我填個表格，表格拿給他之後，他問了一下我的問題是什麼，並且告訴我「年代久遠」的那隻如果早一點拿來的話，也許還可以修，那隻到今年四月就不保修了；但「VX Revolution」這隻，可以到2010年，所以沒有問題，但要等滑鼠才行，因為目前這隻滑鼠缺貨，可能要到月中或月底才能把滑鼠寄給我。我…也只能說：「沒問題！」不然也是沒辦法呀…慢慢等吧…

後來，那個人打電話給我，問我要不要換成「VX Nano」這隻？如果好的話，下個星期(這星期)就可以寄給我囉！我只是問他說，「這隻滑鼠的中間鍵可不可以用？」因為它的中間鍵現在按下去是啟動與關閉飛速捲動的功能；他說，可以設定滾輪後面那個按鍵的功能為中間鍵，一樣可以當第三鍵來用！於是我就跟他說：「沒問題！就是這隻了！」雖然我還不是很確定它的樣子，但是它是比VX Revolution更晚才推出的滑鼠，所以應該不會比較差，而且，它們是同一等級的產品。

今天，我終於拿到我的「VX Nano」了！看起來還滿不賴的耶！不但有送電池，而且還附上具有延長線的接收器，而且上面還有一個USB的插槽，不會讓這個延長線的接收器只是個接收器而已~另外，它還有一個旅行用的小包包，可以把VX Nano裝進去，一整個感覺就是「棒！」

沒想到舊的羅技VX Revolution滑鼠修完以後，居然變成一隻新的VX Nano滑鼠了~真是夢幻呀！(果然花大錢買東西有時候還是有好處的~:)

Au Revoir Simone

Au Revoir Simone是今天逛到的一個很不錯的音樂網站，一進去就可以聽到她們輕快而美妙的歌曲！有時候當你把手邊的音樂都聽到不想聽的時候，到這個網站來聽聽她們的歌吧！當然，不止是她們的歌曲聽了以後讓人覺得很輕鬆自在，她們的網頁也設計得很有剪貼簿的風格感！

假字製造機：Lorem Ipsum

做設計總是會遇到需要文字的時候，不管是「真的」需要字來放進去，但文字人員還沒辦法給你；或者是「裝飾性」文字，也就是…這些字到底寫了些什麼，其實一點兒關係也沒有…最棒的是，不管你要多少假字，Lorem Ipsum全部都給你！毫不保留！絕不藏私~

連到Lorem Ipsum的首頁，你會看到四個主要的文字區塊，包括What is Lorem Ipsum、Where does it come from、Why do we use it、Where can I get some；在Where can I get some的底下，你可以輸入需要的段落行數(預設是五個段落)，選取需要的文字形式，按下"Generate"(製造文字)！接著你就會看就一個新的頁面，裡面就是你需要的文字了！

至於為什麼要用Lorem Ipsum的「假字」呢？你當然可以隨便用一句像底下這樣子：

This is Lorem Ipsum, This is Lorem Ipsum, This is Lorem Ipsum, This is Lorem Ipsum, This is Lorem Ipsum, This is Lorem Ipsum, This is Lorem Ipsum, This is Lorem Ipsum, This is Lorem Ipsum, This is Lorem Ipsum, This is Lorem Ipsum, This is Lorem Ipsum, This is Lorem Ipsum, This is Lorem Ipsum, This is Lorem Ipsum

不斷的重複文字來當作你的假字內容，但你會發現，這些This is Lorem Ipsum太假了，一下子就被發現是「很假」的假字！

如果你像許多國外的出版業者包括Adobe一樣，使用Lorem Ipsum的假字之後，你會發現，雖然文字是假的，但這段文字卻假得很真！例如：

Sed id dolor. In hac habitasse platea dictumst. Maecenas diam ligula, vulputate vitae, mollis at, ullamcorper non, velit. Donec in velit. Sed lacus nisl, vestibulum sed, vehicula et, commodo eu, ligula. Duis vel lacus. In tincidunt. Vestibulum elit. Praesent hendrerit. Suspendisse venenatis.

這些文字呈現的樣貌就像隨便翻開的一本歐美小說一樣，「不會重複」，而且「具有閱讀性」(雖然你不可能看出寫了什麼)，這就是它被許多人所採用的原因之一了！

Adobe CS4 Beta - 開始下載了!

Adobe偷偷把一些CS4的Beta版本放進實驗室(Labs)裡，不過只有Adobe Dreamweaver CS4 Beta、Adobe Fireworks CS4 Beta以及Adobe Soundbooth CS4 Beta這三個是CS4的Beta，其它CS4的Beta，我只有在Greg Rewis的簡報之中曾看到Flash CS4 Beta；按照前天參與的Adobe一氣呵成研討會裡偷偷聽到的消息，Adobe CS4明年應該就會正式推出了！

想想，有些人連Adobe CS3都還不大會用呢，結果更新的Adobe CS4又要推出了…喔，對了，如果你想安裝這些Adobe CS4 Beta的話，得先有Adobe CS3的合法授權安裝，否則是沒辦法安裝的唷！

還有還有…Dreamweaver CS3的Spry也有出更新程式，雖然已經出一陣子了…

拔牙記

今天去拔牙齒了！！！其實今天只要一想到要拔牙，心裡就很難過，雖然我知道很多人都有拔牙的經驗，但是我已經有很久的時間沒拔過牙了，想到這次要拔我的一顆智齒…心裡面又是一陣難過…

終於，到了晚上九點，跟醫生約定的時間，我一個人走進牙醫診所，心裡滿是難過…護士小姐安慰我說：「不會痛的…」雖然她很好心，但我還是覺得心裡很不舒服，於是我打了電話給小瑜，希望她給我一些安慰，只是打了她都沒接…打給陳明義，他只會打屁而已，覺得一點效果也沒有，後來我打給我妹，她說她之前也有去拔牙，到時候會要咬著紗布一陣子來止血…聽著聽著，總算有一點被安慰到的感覺；本來還想打給大姐的，但這時…護士小姐叫我進去坐了…

我坐上「手術台」，看著醫生笑著的臉，雖然我也是笑著，但那是苦笑，我一點兒都不覺得開心…醫生也是給我一些安慰，跟我說不會痛的…說著說著，他就拿起一根好大隻的針、面帶微笑的把針緩緩插到我的嘴巴裡…哇…好無奈呀！我只能讓醫生「予取予求」！想著我無助的嘴巴…只想渡過這短暫煎熬的時間…

打完針以後，醫生說要等麻醉起作用，所以我們三個人就大眼瞪小眼，看我的嘴巴什麼時候麻…嗚嗚嗚…好可憐…雖然他們還是不斷的安慰著我，但我還是覺得好難過…

醫生試了一下，看我有沒有麻，結果他說這樣可能還不夠；於是他又給我打了一針…嗚嗚嗚…好可憐…我又被打一針了…

過沒多久，好像比較麻了…醫生就開始「動手」了！我想，他應該是先把我牙齒的肉切開來，然後才拿「好大」的一隻鉗子，直接夾住我的牙齒，然後用旋轉向上的方式，轉呀轉的…而且還滿用力的，才把我的牙齒拔出來…終於！！！

感謝醫生和護士小姐的安慰，終於把我的這顆智齒拔出來了…告一段落，還得去藥局拿消炎止痛的藥方…一天吃四次，三餐飯後加睡前…這時的我，還在咬著嘴裡的紗布…想著：「牙痛不是病，痛起來要人命…」牙齒的問題真的是令人頭大呀！我的牙齒可不可以不要再生病了！

What is My Style?

今天晚上和安吉拉去捷運雙連站1號出口一家新開的咖啡店吃飯，看起來像日文的名字我叫不大出來…主要是教她怎麼使用iMovie，只不過，她給的影片檔iMovie都不能用，甚至轉成了.mov也都不行，其它的格式似乎又沒辦法轉檔，真不知道該怎麼辦才好呢！…後來，打開Windows的Movie Maker，不過還沒使用，就覺得累了…

電腦收起來，聊聊她準備要去義大利唸書的事情，13個月大約要花140萬！哇！真的是不少錢呢！

她說還沒找到自己的風格，所以出國希望能找到…我給了她一些建議，也許，這也提醒著自己！

當妳花了140萬去到義大利學東西的時候，妳已經準備好跟老師「要」東西了嗎？妳知道要跟老師「要」什麼嗎？

當妳找不到自己的風格時，妳有沒有辦法找到妳喜歡的風格？妳有沒有辦法做出跟妳喜歡的風格一樣的東西？甚至，妳有沒有辦法做得比妳找到的風格還要好？畢竟，「在妳打破規則之前，妳得先把規則學好！」

另外，就是「整體性」的觀念。當妳在做一件事情的時候，應該要注意「整體性」的感覺！如果各種條件都允許的話，才再進一步把東西做更好！否則，妳應該隨時一停下來，作品都能有六十分以上的水準。

舉個例子來說，「豪華五星級酒店」和「豪華汽車旅館」的差別，除了設計的造型之外，品質也會有相當的差別！大部份豪華汽車旅館的裝潢雖然漂亮，但品質都不比豪華酒店好！然而，豪華汽車旅館整體性的感覺卻不見得會輸豪華五星級酒店！畢竟風格不同！

儘管風格不同，成本的差異卻很大！

有些花費大成本、號稱五星級的豪華酒店，在住過以後只會讓人覺得很普通、沒什麼特別的印象；但有些之前從來沒去過的汽車旅館，在住過之後，卻能讓人留下美好而不可思議的回憶！在這之間，整體性就是其中一個主要的因素！

因此，不論時間和金錢等各種條件有多麼的嚴峻，好的建築師或設計師都有辦法做出讓人舉起大姆指的好作品！然而，這同時也是許多大師認為最好的作品都是下一件作品的原因，因為很多的作品都存在著不少的限制！

那麼，回過頭來，What is My Style? 我的風格到底是什麼呢？

好好思考「整體性」的觀念，我們就能在有限的條件之下，做出「整體性」具有相當水準的作品！再者，隨著觀念、經驗、技術的提昇之下，我們的作品水準自然會愈來愈高！自己的個人風格呢？…有成語叫做「水到渠成」，到時候，不想要有自己的風格都很難呀！

所以，妳找到自己喜歡的風格了嗎？

Photoshop Lightroom Beta 2.0 直接將照片列印成JPG檔

最近工作忙，沒什麼時間用Photoshop Lightroom，但The Image-Space提到了一個在Photoshop Ligthroom Beta 2.0的新功能，而且我認為也相當不錯，就是「Print to a JPEG file directly from the Print Module」(在「列印」模式底下，可以直接將照片輸出成JPG檔)。有時候我們並不想直接印出來，因為Photoshop Lightroom輸出模式的效果有時相當不錯，為什麼不能把列印的照片放在網路上呢？現在多了列印成JPG檔的選項，真的是太棒了！

其實「你都懂」的基本設計原理：Gestalt Psychology

身為設計人，對於「格式塔心理學(Gestalt Psychology)」或「完形心理學」，應該有充份了解與認知；同時，也應該讓你的客戶有相當的體認。然而，在時間的前提與客戶的要求之下，很多設計師卻犧牲了這一點，讓一團亂的畫面完整的呈現在眾人的眼前！這是設計師的錯嗎？還是客戶的錯？或者，這不是我的錯、都是別人的錯？

暫時先不管是誰的錯，當我們在執行設計的工作時，創意的加乘當然萬分重要，但我們還是不該忘記完形心理學的基本理論：「部份之總和不等於整體，因此整體不能分割；整體是由各部份所決定。反之，各部份也由整體所決定」。所以設計的結果是看整體，而不單是看某個部份而已。

我之前的同事Green曾跟我說過：「好的畫家，隨時一停下畫筆，至少都能拿六十分以上。」這就是整體！不論是設計，或者是工作，這都會是一個很好的觀點！當你停下手邊的工作時，是否也能輕鬆的拿到及格分數呢？

從事設計工作，勢必得讓客戶了解到「整體」，而非強調每個都是首要的重點；因為，當電影裡面所有的漂亮女生都是女主角時，等於是沒有女主角了！

wowboxBlog的「格式塔心理學」這篇文章，轉載了Blueidea.com的「格式塔心理學」，提供了格式塔原理在構圖中的應用形式，讓我們好好的再復習一次吧！

IE6自動將你Div的Margin加倍！不管你要或不要…

如果你的Div具有 float 屬性的話，可以讓你的Div向左或向右「飄移」對齊，但在IE6底下卻會讓Div的margin加倍！這是IE6的一個小bug。解決這問題的方法就是把Div加上底下的屬性：

display:inline;

如此就不需要再針對IE6來調整你的Div了，這會省下很多時間唷！

CSS也有圖層遮罩功能！

今天在iBloom Studios上看到了「Misunderstood CSS Clip (誤解的CSS Clip功能)」這篇文章，才注意到原來CSS也有一個像Photoshop Layer Masker(圖層遮罩)的功能，語法如下：

div { clip: rect(5px, 40px, 45px, 5px) }

如果想進一步了解的話，這個網頁有很詳細的說明！嗯…又多學了一樣東西！