《Photoshop CC 2015限定》利用「新增參考線配置」快速建立符合各RWD框架的版面分隔線

梅問題-Photoshop教學-《Photoshop CC 2015限定》利用新增「參考線配置」快速建立符合各RWD框架的版面分隔線
  先前曾分享過Photoshop的套件,透過該套件,就可快速的建立版面分隔參考線,並透過這些輔助參考線,設計出符合RWD自適應的版面來,而目前這功能,已經被Photoshop納入進來,因此現在只要使用Photoshop CC2015版,立即就能產生版面隔線,同時還可依照所要套用的RWD框架,來設定Photoshop版面參考線,像是Bootstrap則是將畫面分割成12等份,Yahoo! Pure則是將畫可分割為24等份,同時也可針對RWD框架,每個分欄間距作設定,因此有了這功能,在設計RWD自適應的版面就更方便啦!因此身為網設的你,也趕快來使用看看囉!

Step1
建立好新的頁面後,再點選 檢視 / 新增參考線配置選項,由於梅干習慣使用Bootstrap,因此在版面上,則是設定1170像素。
梅問題-Photoshop教學-《Photoshop CC 2015限定》利用新增「參考線配置」快速建立符合各RWD框架的版面分隔線
Step2
接著內建分別就有8欄、12欄、24欄....等。
梅問題-Photoshop教學-《Photoshop CC 2015限定》利用新增「參考線配置」快速建立符合各RWD框架的版面分隔線
Step3
選擇好分欄後,接著再設定分欄間距,但特別的是,不可打px需用中文像素,否則會出錯,這時就可把分欄設定的與要套用的RWD框架一樣。
梅問題-Photoshop教學-《Photoshop CC 2015限定》利用新增「參考線配置」快速建立符合各RWD框架的版面分隔線
Step4
除了設定欄外,也可設定列。
梅問題-Photoshop教學-《Photoshop CC 2015限定》利用新增「參考線配置」快速建立符合各RWD框架的版面分隔線
Step5
參考線建立完畢後,就可開始設計版型啦!當在區塊落版時,得特別注意一下欄位區間,不可超出或跨一半的欄位,否則在套用上,就會無法一致,因此有這個功能後,就能讓視覺版型頁面,與最後切版的部分一致啦!
梅問題-Photoshop教學-《Photoshop CC 2015限定》利用新增「參考線配置」快速建立符合各RWD框架的版面分隔線

相關文章

「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梅
    ED 說道:

    梅大:

    有個CC版小問題請教,以往用50%的灰階填色後,

    選擇柔光、覆蓋、實光模式灰都不會影響到畫面(不管在RGB或CMYK模式下皆是)

    但目前使用CC版,發現在CMYK模式下,填50%灰選柔光、覆蓋、實光模式底下顏色都會被影響,

    是我設定錯誤或是CC在混合上有更改了什麼嘛?謝謝

    回應:
    是CC版的50%的CMYK的值變了,因此會造成色彩與底下的混色的問題