Bootstrap教學-Bootstrap3自適應Photoshop網格模版素材檔

梅問題-Bootstrap教學-Bootstrap3自適網格Photoshop模版檔
  雖然目前有許多RWD的CSS framework,但最常被使用則是由社群網Twitter所推出的Bootstrap,之所以會被大家喜愛,最主要的原因就是簡單好應用,也是因為如此讓梅干對Bootstrap愛不釋手,透過Bootstrap可以快速的完成專案,省去自行一個一個慢慢刻,但許多朋友當開始使用Bootstrap時,第一個會遇到的問題就是,在Photoshop中網頁尺寸要開多大,以及要如何規畫。
  雖然在Bootstrap的文件中,也已明確的說明每個解析的尺寸與每個欄位的大小,但要一個一個尺寸慢慢的拉出格線,實在有點浪費時間,所以梅干最近在網路上發現一個很佛心的網站,將Bootstrap的網格,作好一份份的PSD檔,因此當下載後,立即就可使用,並依照Bootstrap 12欄來作設計,因此有用Bootstrap的朋友,也趕快來下載囉!
Step1
首先,先到benstewart.net網站後,向下拉就會看到Downlaod連結,點一下隨即可下載。
梅問題-Bootstrap教學-Bootstrap3自適網格Photoshop模版檔
Step2
當下載完畢解壓縮後,分別會看到三個PSD檔,而這三個尺寸,分別就是Bootstrap所設定的三個解析,因此在規畫RWD版型時,只要依照這個解析設計即可。
梅問題-Bootstrap教學-Bootstrap3自適網格Photoshop模版檔
Step3
打開後,在Photoshop中分別會看到淡黃色與深橘色,而淡黃就是padding, 深橘色就是欄位的寬度,因此在規畫版型時,千萬別讓區塊落在淡黃色區域中喔!如此一來下回再開發RWD版型就更加的得心應手啦!
梅問題-Bootstrap教學-Bootstrap3自適網格Photoshop模版檔

相關文章

「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: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。