《Photoshop CC 2015限定》多工作區製作RWD自適應版型更方便

梅問題-《Photoshop CC 2015限定》多工作區製作RWD自適應版型更方便
  現在在製作網頁版型愈來愈麻煩,不像以前只要製作桌機一個版型就好,隨著智慧型裝置愈來愈多元,現在在設計網頁版型時,還得考量到手板與手機的版型,由於Photoshop只有一個工作區,因此每當設計一個自適應的網頁版型,就得分別的存三、四個檔案,但在Illustrator CS6時,就已多了一個多工作區的功能,如此一來就可將各式不同的大小的版型,同時儲存在同一個檔案中,但現在這功能己下放到Photoshop中啦!因此在Photoshop CC2015中,就可在同一個檔案,建立多個不同工作區的大小,如此一來當在設計RWD自適應的網頁版型時就更加方便啦!因此還不知怎用的朋友,不妨也一塊來看看,新版Photoshop CC 2015所新增的功能吧!

Step1
首先,先任意建立一個新檔案。
梅問題-《Photoshop CC 2015限定》多工作區製作RWD自適應版型更方便
Step2
接著點圖層面板的右上角三角形,再選擇「新增工作區域」。
梅問題-《Photoshop CC 2015限定》多工作區製作RWD自適應版型更方便
Step3
再設定工作區的名稱,以及工作區的編輯區域大小。
梅問題-《Photoshop CC 2015限定》多工作區製作RWD自適應版型更方便
Step4
當完成時,圖層就會多一個群組,同時工作區域的左上角也會出現工作區名稱。
梅問題-《Photoshop CC 2015限定》多工作區製作RWD自適應版型更方便
Step5
接著就可分別建立多個不同大小的工作區域。
梅問題-《Photoshop CC 2015限定》多工作區製作RWD自適應版型更方便
Step6
當要製作版型時,就可將每各裝置的版型元素,放到工作區的群組資料夾中。
梅問題-《Photoshop CC 2015限定》多工作區製作RWD自適應版型更方便
Step7
當要改變工作區域範圍時,點一下群組名稱後,這時工具箱就會看到一個像文字的圖示,這時被選到的群組資料夾的工作區域,就會出現八個控制點,就可拖拉控制點改變工作區域的大小。
梅問題-《Photoshop CC 2015限定》多工作區製作RWD自適應版型更方便
Step8
哈~這樣是不是超方便的呀!如此一來就可將所有的版型大小,放在一個檔案中啦!接著可再配合Adobe Preview CC,將版型同步到手機、平板中來進行檢視,如此一來就更便於調整與修正,因此有了這功能就更方便設計RWD自適應的版型啦!
梅問題-《Photoshop CC 2015限定》多工作區製作RWD自適應版型更方便

延伸文章

《Photoshop CC 2015限定》將製作好的版型同步至手機、平板中檢視

《Photoshop CC 2015限定》將製作好的版型同步至手機、平板中檢視


相關文章

「Icons8」上萬個扁平圖示產生器,可直接拖拉到Photoshop中使用

「Icons8」上萬個扁平圖示產生器,可直接拖拉到Photoshop中使用

Adobe Photoshop CC2017開新檔案大改版,加入Adobe Stock素材模板

Adobe Photoshop CC2017開新檔案大改版,加入Adobe Stock素材模板

使用舊版「Photoshop的儲存為網頁用」也可輸出Retina的各種影像尺寸

使用舊版「Photoshop的儲存為網頁用」也可輸出Retina的各種影像尺寸

Photoshop CC 將圖片批次轉存Retina各種不同的尺寸規格

Photoshop CC 將圖片批次轉存Retina各種不同的尺寸規格

「ElemisFreebies」上百個免費超質感網頁版型PSD檔下載 (可商用)

「ElemisFreebies」上百個免費超質感網頁版型PSD檔下載 (可商用)





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    Quni 說道:

    請問梅干老師有沒有遇到檔案很大的問題呢?

    目前我們檔案也都是使用ps設計,
    但是檔案都很很大~能請問梅干老師都是怎麼整理檔案或壓縮檔案呢?

    以前用fireworks檔案都只10m內
    現在ps設計三款放一起的就超過100m了..

    回應:
    這跟設計的內容元素有關,盡量刪除不必要的圖層,
    或合併圖層可減少檔案大小