PS插件Velositey疾速搞定網(wǎng)頁(yè)原型設(shè)計(jì)

優(yōu)設(shè)的老讀者可能會(huì)注意到，我們推薦Velositey這個(gè)PS插件已經(jīng)不是一次兩次了。這款著名的PS網(wǎng)頁(yè)布局設(shè)計(jì)工具為何會(huì)有“神器”之稱？因?yàn)樗娴哪茏屇阍诙潭處追昼妰?nèi)完成網(wǎng)頁(yè)原型設(shè)計(jì)。正如同Velositey的口號(hào)所說(shuō)：“讓設(shè)計(jì)師專注打磨細(xì)節(jié)完善設(shè)計(jì)，而不用在無(wú)聊枯燥的事情上耗費(fèi)時(shí)間。” 事實(shí)上，Velositey就是這樣！

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

常見的布局樣式 在真正開始研究Velositey之前，讓我們先來(lái)簡(jiǎn)單溫故一下常見的布局樣式。以ThemeForest最受歡迎的三個(gè)Wordpress主題（Avada、Enfold和Salient）為例，你會(huì)發(fā)現(xiàn)它們有著許多共同點(diǎn)。
首先，在大屏幕上你會(huì)發(fā)現(xiàn)，它們都將網(wǎng)站LOGO置于導(dǎo)航欄最左側(cè)，導(dǎo)航欄下都有大幅Banner，并且多個(gè)Banner會(huì)滾動(dòng)播放。整個(gè)網(wǎng)頁(yè)的布局會(huì)呈現(xiàn)出明顯的遵循柵格系統(tǒng)來(lái)設(shè)計(jì)的痕跡。 這種布局方式是如此的普及，你會(huì)發(fā)現(xiàn)你經(jīng)常在做類似的事情，很明顯這是重復(fù)工作！ 在這篇教程中，我們會(huì)了解Velositey的功能，并了解如何讓Velositey快速地自動(dòng)執(zhí)行任務(wù)，加快原型設(shè)計(jì)的速度。此外，我們還會(huì)借助PS的原生功能為原型進(jìn)行適當(dāng)?shù)恼{(diào)整。 閑話少敘，讓我們開始吧！

設(shè)置和準(zhǔn)備工作
作為一款PS插件，Velositey對(duì)于早期版本的PS支持并不好，目前單獨(dú)推出了針對(duì)CS6和CC兩個(gè)版本，安裝的前提是安裝好Adobe的擴(kuò)展管理器。安裝的時(shí)候，可以將壓縮包中的Velositey文件夾放到Photoshop的Plug-ins 里的 Panels 文件夾中，或者使用Adobe擴(kuò)展管理器來(lái)安裝。 當(dāng)你使用的時(shí)候，在PS的菜單中點(diǎn)擊 窗口—>擴(kuò)展—>Velositey ，便可以打開Velositey的界面。

基本布局 讓我們從新建一個(gè)新文檔開始。

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

添加Header 在“ [+] New Template”按鈕下方，你可以看到一系列選項(xiàng)卡，其中一個(gè)是Header。當(dāng)我點(diǎn)擊其中的一個(gè)的時(shí)候，Velositey會(huì)自動(dòng)在文檔中生成Header。
在這個(gè)案例中，我們使用的Header的樣式是Logo在左，導(dǎo)航在右。在圖層面板中，你可以看到Header中所有圖層均置于文件夾中，你可以根據(jù)需求進(jìn)行命名。 注意：如果你隨后選擇其他的Header，Velositey會(huì)幫你替換掉。

增加Slider區(qū)域（Slider Section） 盡管大尺寸Banner和slider區(qū)域有缺陷，但是很多網(wǎng)站依然選擇保留這個(gè)區(qū)域。Velositey中內(nèi)置了許多樣式，增加slider區(qū)域和添加Header一樣容易，點(diǎn)擊選擇即可。
案例中，我們選擇最后一個(gè)slider樣式，于是就生成了一個(gè)包含標(biāo)題、內(nèi)容和兩個(gè)按鈕的slider區(qū)域。
正如上圖所示，你可以在圖層面板中看到slider區(qū)域的圖層分組。

增加內(nèi)容區(qū)域 增加內(nèi)容區(qū)域也一樣簡(jiǎn)單。Velositey中第三個(gè)選項(xiàng)卡就是內(nèi)容區(qū)域。 我選擇了第三個(gè)樣式，點(diǎn)擊后添加了三列內(nèi)容，每列包含標(biāo)題、圖片和預(yù)制的內(nèi)容。