Adobe建立新世代網站的10大Adobe工具與服務,將其產品分為4類。其中,CS6的Dreamweaver、Firework是主要的生產工具,而初期的網站設計工具,以及後期的檢測、發布工具後,便可以架構出HTML相關的開發流程。

近年來,行動裝置應用與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」


熱門新聞

Advertisement