解析PS的Velositey插件在網(wǎng)頁設(shè)計中應(yīng)用

我們推薦Velositey這個PS插件已經(jīng)不是一次兩次了。這款著名的PS網(wǎng)頁布局設(shè)計工具為何會有“神器”之稱？因為它真的能讓你在短短幾分鐘內(nèi)完成網(wǎng)頁原型設(shè)計。正如同Velositey的口號所說：讓設(shè)計師專注打磨細(xì)節(jié)完善設(shè)計，而不用在無聊枯燥的事情上耗費(fèi)時間。

事實(shí)上，Velositey就是這樣！

先下后看，年薪百萬：http://vdisk.weibo.com/s/zduirFgzTMPAc

注意：教程所使用的Velositey為早期版本，目前最新版為1.1，與教程中所示界面稍有差別，但是基本一致，不過更為強(qiáng)大。

常見的布局樣式

在真正開始研究Velositey之前，讓我們先來簡單溫故一下常見的布局樣式。以ThemeForest最受歡迎的三個Wordpress主題（Avada、Enfold和Salient）為例，你會發(fā)現(xiàn)它們有著許多共同點(diǎn)。

首先，在大屏幕上你會發(fā)現(xiàn)，它們都將網(wǎng)站LOGO置于導(dǎo)航欄最左側(cè)，導(dǎo)航欄下都有大幅Banner，并且多個Banner會滾動播放。整個網(wǎng)頁的布局會呈現(xiàn)出明顯的遵循柵格系統(tǒng)來設(shè)計的痕跡。

這種布局方式是如此的普及，你會發(fā)現(xiàn)你經(jīng)常在做類似的事情，很明顯這是重復(fù)工作！

在這篇教程中，我們會了解Velositey的功能，并了解如何讓Velositey快速地自動執(zhí)行任務(wù)，加快原型設(shè)計的速度。此外，我們還會借助PS的原生功能為原型進(jìn)行適當(dāng)?shù)恼{(diào)整。

閑話少敘，讓我們開始吧！

設(shè)置和準(zhǔn)備工作

作為一款PS插件，Velositey對于早期版本的PS支持并不好，目前單獨(dú)推出了針對CS6和CC兩個版本，安裝的前提是安裝好Adobe的擴(kuò)展管理器。安裝的時候，可以將壓縮包中的Velositey文件夾放到photoshop的Plug-ins 里的 Panels 文件夾中，或者使用Adobe擴(kuò)展管理器來安裝。

當(dāng)你使用的時候，在PS的菜單中點(diǎn)擊 窗口—>擴(kuò)展—>Velositey ，便可以打開Velositey的界面。

基本布局

讓我們從新建一個新文檔開始。

新建文檔

首先，我們需要點(diǎn)擊“[+] New Template”按鈕來新建一個空白文檔。文檔自帶柵格，總寬度1170px，間隔為30px，方便你為網(wǎng)站進(jìn)行設(shè)計。

添加Header

在“[+] New Template”按鈕下方，你可以看到一系列選項卡，其中一個是Header。當(dāng)我點(diǎn)擊其中的一個的時候，Velositey會自動在文檔中生成Header。