FIREWORKS好好用之: SHARED LAYER

除了MASTER PAGE，
萬一有些特定頁面會共用某些元素，該怎麼辦??
答案就是，SHARED LAYER(不過某些狀況當然也可以用SYMBOL解決)

FIREWORKS好好用之: SYMBOL(I)

雖說FW有很棒的PAGES功能，還有很正點的導引線

若真要讓我說還有甚麼功能是拿來做UI圖的必備功能....

我會說:"SYMBOL!!"：
甚麼是SYMBOL?身為一個美工...我是說UI設計師....

你必須面對不斷重複出現的原件，包含各種按鈕，表單，CHECK BOX，RADIO BUTTON.....

簡直就是一個繁瑣到爆炸。

如果今天老闆要你把所有APP的通用元件中的某個按鈕作風格修改，重新出圖，若是每次都要在PS(或VISIO)，把一顆按鈕修改好後，

然後貼到每個頁面出現相同按鈕的位置來替換....

真的很辛苦。

在這樣的狀況下，我想要的作法只有一個，

就是修改好一個按鈕，然後所有用到該按鈕的頁面自動更新好這個按鈕。
該怎麼辦??

答案就是SYMBOL!

SYMBOL其實就是一個可以重複不斷利用的元件。

這個東西在FLASH已經行之有年，而AI在最近也有這功能了(其實VISIO也有)

(不過我懷疑ai使用者使用symbol的普遍性)。

由於flsah的成功，為了要讓fw以及ai這兩個向量圖型的軟體能很好的跟flash媒合

紛紛加入了symbol(元件)的功能。

轉換的方式也幾乎跟flash一模一樣，就是功能鍵F8。

接著就會看到SYMBOL的設定視窗

可以幫SYMBOL命名，命名規則其實在FLASH中是有通則的。

但這邊就不贅述了，就依照喜好的習慣來命名吧。

例如:message_button_normal 一類的

然後就是選擇原件的屬性，因為這邊我沒有要做成互動的PROTOTYPE或者網頁，

我暫時用GRAPHIC而不選按鈕。

底下的9-slices可以看狀況來勾選，這個功能會另闢專文來解釋。

就是這個原件若再縮放要保有角落(原角等等)，可以勾選起來。

而下面的加入COMMON LIBRARY也可以先不用勾，這個之後也會另外解釋。

按下確定後，你已經將一個圖形轉換成可以重複使用的SYMOL了!

FIREWORKS好好用之: 選取物件

所選即所得

其實這個是很簡單的特徵，因ˋ為FW是個很類似AI的軟體。

這裡凸顯一個方便的操作性:

在PS作業中，如果你要拷貝一個物件(譬如說一個按鈕)到另一個文件上...

你會怎麼做?

用移動工具點該物件，然後CTRL+C接著再到另一個文件中CTRL+V?

NO，看起來是很普遍四海皆準的操作流程，在PS中是行不通的...

因為他是PIXEL BASED的軟體

所以你得....看是用選取工具，或者複製圖層(這個我覺得好煩)到另一個文件。

但是FW中妳真的只需要這麼作，點中妳要的物體，COPY AND PASTE，DONE!!

當兩個文件都是同樣SIZE的RESOLUTION，你可以精確的拷貝貼上任何元件。

我覺得棒透了!

FIREWORKS好好用之: PAGES 頁面視窗(II) MASTER PAGE

OK! 延續上一篇PAGES的討論，

接下來要講一個很重點的PAGES功能，也就是MASTER PAGE。

甚麼是MASTER PAGE?其實就是貫穿所有PAGE都會存在的元素。

啊?甚麼東西啊??

舉個簡單的例子，今天我們在開發APP的UI，

甚麼東西會一直存在頁面上: STATUS BAR (當然FULL SCREEN APP等不在此列)

所以我們只要在MASTER PAGE中把STATUS BAR做好，之後新增的PAGE都會看得到STATUS BAR了。

舉個圖例:

如圖，可以看到我的MASTER PAGE裡面只有一條STATUS BAR，但是如此一來，

每個PAGE都有STATUS BAR了

那要怎麼設定MASTER PAGE?

只要選擇你想要設的PAGE，然後按右鍵\設成主要頁面。

很棒的功能~所以舉一反三

如果您在做WEB SITE....可以怎麼使用MASTER PAGE?

我的話我會拿來做FOOTER ，NAVIGATION BAR跟基本底圖...

以上!

FIREWORKS好好用之: PAGES 頁面視窗(I)

自從工作以來，一直覺得很困擾的事情就是....PS很難用

原因不在於PS不好，而是PS本身既不是排版軟體，也沒有針對GUI工作流程來考量。

舉一個簡單的例子，

如果各位手上有個MESSAGE的APP

裡面有很多不同的頁面，那你要怎麼做?做好之後又要怎麼出圖給老闆看每個頁面??

一般用PS，都是用資料夾來管理，但是這麼一來，每次出圖就要開開關關圖層或群組...

然後老闆看了不喜歡叫你修改，你又要出圖一次.....青春有限....妳有沒有想過是工具不對?

FW裡面提供了跟INDESIGN非常類似的工具

也就是PAGES的概念。

PAGES可以獨自有自己的LAYERS。

於是乎，如果我用FW作MESSAGE，我可以針對每個不同的頁面來製作，只需要一個FW檔案。

請看貼圖， 我把他出包含新增聯絡人，LIST頁面，氣泡對話的頁面

如此一來，就可以針對每個頁面來專心製作，沒有不相干的LAYER來干擾。

而出圖時，就可以選擇要的頁面，大大節省了開關圖層的時間.....

FIREWORKS好好用之: GUIDE導引線

這是我最愛的功能，可以自訂座標的導引線

只需要雙擊導引線就可以輸入座標。

此外，按住SHIFT就會出現各導引線之間的距離

在拉線時也可以按住來拉

同時間要杯葛..不..我是說比較一下PS的導引線...

不僅缺乏明顯的座標，而且也很難對準整數PX...

而FW中，都是精確到1-PIXEL的...所以所有存在於FW中的物件都是整數PX值

包含GUIDE的位置，相較之下，針對SCREEN resolution來設計，FW顯得專業很多。

FW的靈魂之窗: PROPERITY WINDOW

這邊主要是要介紹FW中最重要的視窗: 屬性視窗

WINDOWS\PROPERTY( CTRL+F3)

為啥要用FIREWORKS啊..

再談我的經驗之前可以先看看歪果人的看法:

50 reasons NOT to use Photoshop for Web Design

接下來我會用不同的文章來討論各種我覺得FW適合UI作業的觀點。

但重點是，因為FW跟AI以及PS都很雷同，並不需要太大的負擔就可以很快上手

對我來說...這是改善生活品質很重要的一環 ^^

然而為了不想花時間去習慣，爾捨棄了好的工具，我是覺得很可惜的。

FIREWORKS 線條平滑化? 談FW的PATH WINDOW

在那天的分享裡，有人提出"FLASH中的線條平滑化，在FW中有
沒有?"

我第一個疑點是...BITMAP有辦法做到嗎?

回去開了FLASH來測試，並沒有真的看到對BITMAP線條平滑化的功能

(不過也許是我看漏了，請不吝指正)

基本上FL中除非特例，不然應該都是向量格式...

仔細想想FL跟FW本來就是同源同種的兄弟...FW應該不會沒有類似的功能

接下來，就來看看FW中的PATH WINDOW吧!!

這玩意很強大，可是卻藏的很曖昧@@，上次分享時一時找不著@@

請到: 視窗\其他\路徑

你會看到如圖中所示的視窗，第一排是我很愛的路徑選項....大家應該很容易上手

其中第三排的"編輯點"中的第二個就是平滑化了。

不過在我測試的感覺，FLASH可以一直按一直更平滑化，可是FW似乎不太一樣，只能來一次(?!)各位可以感受一下。

值得一提的是其中"選取點"底下的功能我覺得非常有趣

可以針對某個選取的路徑來選取起始點，反選取的目前之外的點，

選取其"上半部的點""下半部的點""左半部的點""右半部的點"等等

在某些狀況下非常有用...

NOTE:不過執行時，請先轉換工具到"選取細部點(A)"

總之這是個非常強大的視窗，而且是在PS中我怎麼都很想念的功能...