設計一個網頁，最基本就是從畫布局開始，然而這個也是比較耗時間的，不過沒關系，今天設計達人為大家分享一個網頁布局Photoshop擴展插件——Velositey，這個擴展可以快速在PS上實現多種流行布局，布局包含頭部、幻燈片、內容布局、頁腳排版等等。

還有個我喜歡Velositey的原因就是這個布局兼容Bootstrap前端框架，它生成的柵格線、Layout都能用Bootstrap來編寫，十分方便。下面我們來簡單介紹下這個擴展：

相關推薦：
《取色指南！7款靠譜工具幫你選取完美配色》
《交互神器！誰是最好用的原型繪制工具？》
《設計師新寵！交互神器ORIGAMI》

軟件使用是免費的，所以放心使用，請選擇對應的Photoshop版本下載，官網測試了PS CC版，小編測試的是PS CS6版，所以都沒問題哦！

感謝@阿隨向前沖 同學提醒，已更新到2.0版本，支持CS6、CC、CC 2014，可在 微盤下載

一分鐘搭建網頁布局

快速新建柵格線,柵格總寬度為1170PX，剛好和Bootstrap框架一樣。

通過擴展的布局功能，我們只用1分鐘時間就能實現下圖這個網頁排版，圖層也幫你編組好，真的好人性化。

安裝Velositey

Step 1： 下載擴展

先從官網下載http://dandkagency.com/velositey/ 對應版本的Velositey Photoshop 擴展（下載鏈接在文章底部），如下圖，點擊網頁頁腳的下載按鈕，需要提供Twitter和Facebook帳號才能下載，不過我們也很貼心的上傳到微盤上了。

Step 2：安裝路徑

這里小編下載的是CS6版本，解壓后把文件夾Velositey整個復制到CS6安裝目錄的：Plug-ins–Panels目錄下。

Step 3：: 打開擴展

打開PS軟件，然后點擊菜單窗口>-擴展功能Velositey即可打開。

好吧，安裝都是很簡單的，如果有問題或使用心得，可在文章底部評論處留言交流。如果你有好的擴展，請別忘了分享哦！

原文地址：shejidaren

【優設網 原創文章 投稿郵箱：2650232288@qq.com】
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量66萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：