迎向HTML5與平板使用體驗，Adobe CS6大轉變

近年來，行動裝置應用與HTML5的發展受到所有人的矚目，從智慧型手機與平板電腦銷售市占的大幅提升，到HTML5的應用逐漸開始加溫，提供諸多內容編輯與網頁開發軟體的Adobe，在2012年中，也已經準備好針對這樣的趨勢，提供相關的應用與服務。

以Adobe近期推出的Creative Suite 6（CS6）套裝軟體來看，出現相當大的變化。

從CS 3開始，Adobe將其套裝軟體分為Design（平面設計）與Web（網頁製作），兩類各有標準版與專業版，再加上Production Premium與Master Collection，總共有6種包裝。

到了CS5時，Adobe取消了Web標準版，而最新的CS6更是進一步將Design 和Web的專業版合併，變成4大實體套裝產品組合。基本上，Design標準版適用於平面美術工作，Design & Web專業版適用於美術及網站開發，Production則是專業版影音製作，而Master Collection包含所有CS產品。其中，CS6 Design & Web Premium成為我們關注的焦點。

這次改版，在CS6下的各主要產品，均有升級版本，只有Acrobat沒有更新，而CS系列產品成員方面，有不少值得注意的異動。

CS6增加了兩套軟體，分別是SpeedGrade和Prelude。前者是影片色彩修正工具，後者則是一款檔案工作流程管理軟體。而且，這兩項產品都是包含於Production Premium，以及Master Collection套裝版本中。

此外，也有不少產品已經不包含在CS系列當中。從CS5開始納入的Flash Builder，現在只出現在Master Collection，而Flash Catalyst在這一版本中已經看不到了，而且，Adobe在今年4月底已經終止這套產品的開發與販售。此外，OnLocation、Device Central也同樣終止開發。

原廠表示，主要是因為這些產品都有相關的替代工具可使用。據了解，以Flash Catalyst來說，現在可以轉變為使用Edge Animate與Muse，雖然都只是針對HTML5的開發，但從這點也可看出Adobe目前對於網頁動畫製作的轉變。

至於另外兩款終止開發的產品，Adobe建議，使用者可以Adobe Premiere Pro來取代OnLocation；利用Adobe推出的Shadow軟體，以及Flash Pro CS6內建的內容模擬器，來取代Device Central，以便於跨平臺的測試。

此外，Contribute雖然仍有持續開發，最新版本更新到6.5，並支援HTML5。只是，現在Contribute已經不再包含在CS套裝版本內，對於原本習慣使用Contribute軟體進行網站內容編輯的人來說，需要另外購買，或是改用另一套功能更豐富的Business Catalyst。

大幅提升行動平臺的開發能力
從這次CS6主要產品的功能變化來看，增加行動平臺上的Web與App開發能力，是最大改版特點。

在網站開發上，過去設計網頁的尺寸時，可能注意到的是個人電腦螢幕解析度800×600、1024×768以上等條件，現在，由於智慧型手機、平板電腦的應用大增，為了適應更多跨平臺的網頁開發，設計人員在開發網頁時，需要製作適用於更多不同畫面大小網頁，畢竟，筆電、平板、手機的螢幕解析度都不大一樣。

Adobe為了跟上趨勢，從CS5.5起推出行動App的開發功能，以便開發人員能用這套軟體設計出用於不同手機平臺的應用，因而開始新增多重螢幕設計及預覽的機制。

在CS6中，跨平臺開發的功能變得更實用，網頁開發人員可以利用新功能直接建立不同畫面大小的CSS版面，讓手機、平板、PC等跨平臺網頁設計一次搞定，而不用多花時間去個別手工設計不同版本。

此外，Adobe在去年10月已經收購了PhoneGap開發商Nitobi，並讓新版Dreamweaver與PhoneGap整合得更密切。因此，現在開發人員在Dreamweaver CS6軟體介面中，利用內建PhoneGap服務面板，即可將行動版網頁打包成像是手機原生軟體，發布成不同平臺上的App。簡單來說，在Dreamweaver CS6上的PhoneGap Build服務，基本上就是一個結合雲端程式架構（API及framework）的打包器。

現在，PhoneGap已經能夠支援很多種行動平臺的封裝，像是iOS、Android，以及BlackBerry、WebOS、Symbian、Windows Phone與Bada。

如此一來，不論是開發行動版網頁，或是將行動網頁包裝成原生軟體，開發人員都可以使用CS6系列的軟體來開發跨平臺的應用，而不一定要重新學習iPhone或Android等手機平臺開發語言。

此外，不僅是網頁與App的開發，在平板電腦應用上，為了對應行動平臺的數位內容開發，新版的InDesign也提供與Dreamweaver類似的彈性排版設計，便於數位雜誌版面配置，呈現的內容可以自動依不同螢幕尺寸而調整版面，節省不同平臺的數位內容編排時間。InDesign甚至可將數位內容直接輸出為iOS App。基於種種內容應用的融合趨勢日益明朗，這也許是Web與Design Premium套裝版本合併的原因之一。

在跨平臺測試功能方面，CS6也有一些變化。之前提到Flash CS6中有模擬器功能可取代Device Central，這項功能對於行動平臺的內容測試也很有幫助。這個行動裝置內容模擬器內建於Flash中，在「控制」選單中選擇測試影片，即可啟動模擬器。

使用者可以在模擬的Android或iOS環境中，測試以Adobe AIR建立的內容。以模擬硬體按鍵、加速計、多點觸控和地理位置功能效果。

如果是針對HTML5的內容，Adobe目前在他們的Lab網站中，也推出一款名為Shadow的行動網站預覽軟體，以便預覽開發網站在行動瀏覽器上的呈現，協助行動平臺開發上的測試，使用者可以下載試用，檢視所開發的行動網站，其中的HTML、CSS和Javascript是否運作正常。

強化對HTML5的支援性
再從另一角度來看CS6的發展。去年，Adobe將重點放在jQuery，以解決用HTML3、HTML4無法做出效果的問題，到了現在，CS6更加重視對HTML5規格的支援，並且未來Adobe會持續針對CSS的應用部分加強，以加強網頁動畫的設計能力。

在CS6主要產品中，我們也可以看出許多新特色都是基於HTML5所發展的，像是Flash利用CreateJS可將動畫轉成HTML5內容，Dreamweaver也支援了HTML5和CSS3的程式指令碼，Illustrator也早可以存成SVG類型檔案。

在產品功能之外，Adobe技術顧問李彥璋表示，Adobe建立了一個名為Adobe&HTML的網站（html.adobe.com），提供CSS網頁標準、開放原始碼專案，以及工具與服務的狀態與詳細資訊，便於前端開發者找到目前正在開發的HTML5與CSS3計畫。

其中，在Web標準方面，Adobe已經協助制定了許多標準規範，像是CSS Regions、CSS Shaders、CSS Exclusions、CSS Compositing與CSS Transforms。讓網頁可以充分運用CSS技術，做出更佳的效果。

操作上增加直覺式的智慧型功能 
除了上述這些變化，在Adobe CS6的各套軟體中，也有一些新功能與強化是值得注意的。

像是在效能上，新版Photoshop、Illustrator等主要軟體均開始採用新的Adobe Mercury圖形引擎，原廠表示，在硬體的支援下，可以利用GPU加速提升執行效能，尤其在即時效果的預覽的效果上。

同時，繼Photoshop CS5開始原生支援64位元作業系統後，Illustrator在CS6的版本中也能夠支援64位元的作業平臺，因此，繪圖設計時可以利用更多的記憶體來作為快取，加快大型檔案的處理效能。

但要注意的是，如果在硬體條件沒有配合的情況下，比較新版舊版執行的效率，差異其實不大。

在操作上，CS套裝軟體的介面從CS4之後逐漸定型，隨著改版次數的提升，基本功能可以說是相當齊全，因此，近年來各軟體的在強化上，以提供直覺化與智慧化工具為重點。以繪圖軟體而言，這次的Illustrator的功能改變，吸引許多設計人員的目光，尤其是漸層筆畫工具相當實用，整體操作順暢度，也讓使用者會感受到比較大的使用差異。

在Photoshop CS6中，新增加的背景儲存自動復原功能倒是一大改進，這項功能對於使用微軟Office的人來說，並不陌生，只可惜其他產品沒有跟進。而圖層面板的搜尋功能上，也算是很不錯的改進。至於許多智慧化的功能，對於新接觸的使用者來說，相當具有吸引力，不過，進階使用者可能會認為，基本功能便已經相當足夠了。

至於Firework軟體方面，雖然受到的關注不比其他軟體，但在版型處理與切圖的使用上，仍然相當方便。新版本中，你可使用屬性面板來擷取CSS程式碼，也可以針對行動網站和應用程式編輯jQuery主題，並可存取 API 以產生擴充功能。

此外，各軟體工具面板的設計改良上，也很明顯。不論是面板參數的調整，以及畫面中控制項的操控方式，在CS6中都有直覺式的使用方式，除了輸入參數的與可調式的拉桿，影像上的直接控制項，在使用時可以更直接，而即時預覽功能也可幫助調整時的順暢。

附帶一提的是，由於Adobe在去年底開始宣布，將不再繼續開發支援新行動裝置上瀏覽器的Flash Player，在這樣的策略轉變下，Flash在網頁動畫的應用將逐漸被HTML5技術取代，不過，Adobe技術顧問李彥璋表示，Flash的優勢在於多媒體應用與大型遊戲開發，未來應用開發將朝這兩個方向持續邁進。

而且，現在Flash也有能力轉換成HTML5內容，對網頁動畫製作上，也有一定的幫助。

在Flash的遊戲製作方面，以Flash設計遊戲後，可以搭配一款名為Scaleform的軟體（這款軟體之前被Autodesk收購），它可以將Flash的內容可以打包至遊戲平臺中，讓開發者只要利用Flash來設計，就可以進行遊戲開發。

可從線上訂閱14種CS應用軟體
在CS6套裝軟體中，除了既有的盒裝版本，現在，Adobe還提供Creative Cloud的雲端租賃服務。原廠表示，在這項服務當中，使用者可以一次訂閱14種應用軟體下載使用，但沒有單項產品購買。與盒裝版的CS6相比，Creative Cloud不僅包含Master Collection中的14套主要軟體，同時Muse也在訂閱服務之中。只是，這項服務目前在臺灣尚未啟動，推出時間也尚未確定。

不止Creative Cloud這項雲端服務，Adobe在雲端應用上，現在還推出了一些服務項目，便於Dreamweaver等軟體建立網站時的應用與管理。像是網站代管服務Business Catalyst，可以提供網站流量監測與業務分析，便於使用者做出改善的判斷。此外，網站字型工具TypeKit則是一個雲端的字型庫的服務，Adobe還將推出資料同步工具Creative Cloud Connection，以加強未來網站設計、建置等應用。

綜合來看，CS6對於網頁內容開發有相當大的改變，增加許多平板應用與HTML5開發的特性，本身產品的功能也持續強化。不論是平面數位影像設計、網頁設計開發、應用程式設計、多媒體設計、行動App設計，都能利用CS6各軟體的特性，完成多種複合式的專案與企畫。

一直以來，CS產品的改變可以吸引到平面設計人員，也讓他們可以簡便地做出各式網站、數位內容。對於其他網站開發者而言，這些跨平臺開發的新特性，也許是可以嘗試的應用。

Adobe對HTML5技術支援的策略：直接提供專屬開發工具
對於網頁技術HTML5的發展，Adobe推動的部分其實並不少，像是協助CSS網頁標準的建立，以及配合開放原始碼專案來應用。此外，就HTML5相關的工具和服務方面，Adobe也規畫出不同應用範疇，其中以網站的設計、內容產生工具最受關注。

從去年開始，Adobe已經在他們的Lab網站上推出兩款HTML5相關的開發工具，分別是Edge與 Muse，並開放使用者下載試用。

今年5月，Muse已經正式推出販售，不過，這款工具並未包含於CS6的套裝版本當中，需單獨購買。Edge則更名為Edge Animation，可惜目前尚未正式推出，仍然屬於預覽版，使用者目前可隨時下載試用。

以Muse這套軟體來說，它是一套比DreamWeaver簡單的網頁製作工具，由於這套軟體可以幫助使用者將製作內容自動生成HTML5的原始碼，因此，即使是不懂HTML5與CSS3的美工人員，也能夠很直覺地利用圖示的引導來建立網站。

而且Muse上的設計流程和平面設計人員做稿流程很相似，可適用於熟習InDesign等軟體的使用者。此外，既有的HTML5網站內容，也能直接匯入Muse中來編輯。

至於另一款動畫設計工具Edge Animation，可以將至做出的動畫，將會轉換成HTML5、CSS3及JavaScript，並存成HTML與JavaScript的檔案格式，便於網頁動畫的設計。

它的操作概念類似Flash與After Effect的整合，介面卻相對簡化。

在平板電腦上，Adobe也提供類似CS6的設計工具App
在平板App的發展上，Adobe的腳步也不慢，目前已經推出6款相關工具，包含Photoshop Touch、Proto、Kuler、Ideas、Debut與Collage。這6套工具目前幾乎都已提供iPad與Android平板的版本，除了Debut與Kuler在iPad版本上，會提示Notify Me的選項，無法適用。此外，還有一款免費的Adobe Photoshop Express相片編輯軟體，功能上比較簡單，主要是將圖片加上特效或外框。

在這6款付費的設計工具App中，Photoshop Touch像是Photoshop的簡化版，具備影像處理上的基本功能，Ideas則是簡易的向量式繪圖工具，Kuler是一款配色工具，Collage 是圖像拼貼的好幫手，可搜尋Google與Flickr上的素材，將圖像、文字等內容自由組合。此外，透過Debut連接Adobe Creative Cloud雲端服務，以便展示其中的作品與檔案，展示、提案時很方便，還能直接以畫筆工具標記、註釋。

特別吸引我們注意的是Proto這款App，它是一款平板上的網站輔助製作工具。過去使用者可能會先在紙上畫出草稿，以便討論網頁版型，藉由Proto這款App，使用者可以在平板上利用特殊的手勢來製作網站雛形，相當方便。像是以手勢畫出水波紋，可以產生文字框；畫出方形產生DIV標籤框，畫叉加入圖片框，畫個播放符號的三角形，就能嵌入影片。存檔後，也可以透過瀏覽器來檢視完成的網站草稿。

綜合來說，透過這些平板工具來設計開發，可以達到隨手製作的目的，並可存為CS6所支援的檔案格式，搭配Adobe雲端服務上傳至Creative Cloud，便能夠做到跨設備的編輯、檢視。

平板上可隨手製作網站雛形的設計工具Proto
以手勢建立網站版面，是Proto這款App的特色。只要用手畫出水波紋，可以產生文字框，其他手勢還能幫網站版面加入DIV標籤、圖片，影片區域。

相關報導請參考「全面瞭解Adobe CS6」