[軟體]全新的設計體驗,Adobe Creative Suite 6 – FW, Fl, AE

全新的設計體驗,Adobe Creative Suite 6 - FW, Fl, AE

此篇為此系列的第二篇,包含 Fireworks、Flash Professional 與 After Effects 的介紹。以下是本文系列:

全新的設計體驗,Adobe Creative Suite 6 – 前言, PS, AI 

全新的設計體驗,Adobe Creative Suite 6 – FW, Fl, AE (本篇)

全新的設計體驗,Adobe Creative Suite 6 – Other, 結語

Fireworks

Fireworks

我想很多設計師都跟 Fireworks 不熟,不過 Fireworks 在 UI 設計的工作中非常好用,我不清楚 Fireworks 最初的設計目的(Micromedia 時代),但 Adobe 現在整合的很好,不管是從 PS、AI 轉進來或是從 FW 轉出去,檔案交換的相容性都算是相當不錯的。

Fireworks 之所以在 UI Design 上有其不可取代的優勢是因為它算是 PS 和 AI 的結合,具有向量軟體的靈活性,也有 Photoshop 這類軟體的編輯、濾鏡、效果,在追求 pixel perfect 的現代,這樣的本質讓工作變得非常方便。詳細的好處可以閱讀 Smashing Magazine 的 The Power of Adobe Fireworks: What Can You Achieve With It ? 以及 reinegger.net 的 50 reasons NOT to use Photoshop for Web Design

現在我們就來看看 Fireworks 在 CS6 中有哪些改進:

新的顏色選取介面

新的顏色選取介面

以前的 Fireworks 在顏色選取和填色方式的變換上實在非常麻煩,CS6 中做了不少改進,填色方式也能直接切換,外框線的參數切換也方便不少,比起以前在各種調整上是方便許多,不過我認為相比 Adobe 的其他軟體,還是麻煩不少。

我想應該是為了 Web Safe Color 的因素,所以使用這種介面,這沒什麼問題,但是若你想選別的顏色,FW 就會叫出系統本身的色彩選取 UI,而 Windows 的 UI 實在稱不上好用…,希望未來能調用 Adobe 的色彩選取 UI。

建立 CSS Sprites

建立 CSS Sprites

在以前要建立 CSS Sprites 是相當麻煩的,當然有別的軟體能處理,但是在 CS6 中,這個功能整合進了 Fireworks,要產出 CSS Sprites(images and CSS)只要按個按鈕就好了!非常方便!

從上圖中可以看到 FW 會自動幫我們把圖排好(你不需要自己排,只要把要用到的圖元切好版即可),同時產出相應的 CSS。(因為 demo 所以我就沒改名稱了,實務上請記得好好命名!)

更好的 CSS 轉換

更好的 CSS 轉換

支持更多的 CSS 屬性,直接複製 code 就能用了!不過若是要用 IE filter 的話,那還是要自己寫,但這不苛求。

jQuery Mobile Theme

jQuery Mobile Theme

CS6 中內建了 jQuery Mobile Theme,能夠直接用或是再依此修改,方便不少。

其他

除此之外,當然在效能與穩地度上面都有了提升,以前做大圖當機的情況會少發生許多。詳細的更新一樣請參閱 Adobe 官網

建議

首先就是色彩選取 UI 的問題,Windows 的 UI (如下圖)真的稱不上好用,希望未來可以統一成 Adobe 的色彩選取介面。調用系統本身的 UI 還有另外一個問題,雖然我想多數人不會遇到,由於我本身 Windows 和 Mac 兩個系統都有在使用,調用原生 UI 就會在兩個系統中出現不一致的情況,雖然不是很大的問題,但多少還是有些困擾。

Fireworks Widows 顏色選取 UI

另外就是倒圓角的問題,下圖可以說明這個問題:

Fireworks 圓角問題

圓角尺寸太大或是邊框太粗,效果就會變得相對粗糙,雖然這是個小地方,但是常用 R 角的設計師,要做到品質好的 R 角,要用到數個圖層去疊(或是用一些外框屬性去調整視覺效果),相當麻煩,後續修改也不方便,希望未來在這個部分,Adobe 能做一些調整。

Flash Professional

Flash Professional

隨著各種移動裝置的興起,Adobe 在 Flash 上面的策略也慢慢在改變(應該說已經改變了),由於不支援 Flash 的裝置越來越多,勢必 Flash 要回歸到本質,以前做無用的惱人動畫的工作,未來我認為勢必交給 HTML5 去處理。

但是 Flash 本身還是個不錯的製作平台,只要稍微調整一下,要輸出 HTML5 動畫其實也不是太大的問題。因此,這次最重要的就是 Flash 支持直接輸出 HTML5 了!

支持 HTML5

支持 HTML5

只要下載一個擴充元件,就能在 Flash 中將原本的 Flash 動畫輸出成 HTML5 動畫(CreateJS)。

Sprite sheet

Sprite sheet

常要輸出 sprite sheet 的設計師應該會很高興,CS6 中可以直接將元件輸出成 sprite sheet,並支援多種格式,同時還有很多很 handy 的設計選項。lynda.com 有一段很詳盡的介紹

其他

Flash Professional CS6 還有對 AIR 有一些改進,不過由於我沒有在用這方面的功能,就沒辦法做講解了,詳細請參閱 Adobe 官網

After Effects

After Effcets

After Effects 在 CS6 除了效能的增進之外還有一些 3D 以及影片後製相關的改進。雖然寫完這句之後覺得自己在寫廢話,但其實這次有幾個相當 handy 的更新,馬上來看看!

Global Performance Cache

Global Performance Cache

簡單講就是 CS6 中的緩存功能變好了,在 CS6 中,許多變動都會被緩存起來,因此不像以前每一次都要重新 render,比如說藉由 hue/saturation 調了顏色之後,在預覽中發現不好滿意,關掉效果後可以馬上預覽修改前的效果,不用再重 render 一次。

好處當然是使用上方便很多,但是當然你也要有相應的硬體才能發揮,因為 AE 現在可以把你的硬體吃的更乾淨了!

Camera Tracker

Camera Tracker

現在 AE 內建了一套 3D tracking,我是還沒有試用過效果如何,不過免費內建對於初階的使用者是個不錯的開頭。至於常要用到 tracking 的專業使用者,我想也都已經買了自己慣用的套件了,應該沒什麼差異。

Rolling Shutter Repair

Rolling Shutter Repair

跟 3D tracking 一樣,內建總是好事。

Ray-tracing

Ray-tracing

text 和 shape 現在都能用 ray-tracing 去 ren 了,光影效果好多了!

其他

還有許多族繁不及備載的內建效果更新,請參閱 Adobe 官網

之後還有其他軟體的介紹以及結語,以下是本文系列:

全新的設計體驗,Adobe Creative Suite 6 – 前言, PS, AI 

全新的設計體驗,Adobe Creative Suite 6 – FW, Fl, AE (本篇)

全新的設計體驗,Adobe Creative Suite 6 – Other, 結語

zp8497586rq