藍(lán)藍(lán)設(shè)計(jì)( m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

來源：優(yōu)設(shè)網(wǎng)

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

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

先下后看，年薪百萬：

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

常見的布局樣式

在真正開始研究Velositey之前，讓我們先來簡單溫故一下常見的布局樣式。以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)頁的布局會(huì)呈現(xiàn)出明顯的遵循柵格系統(tǒng)來設(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對于早期版本的PS支持并不好，目前單獨(dú)推出了針對CS6和CC兩個(gè)版本，安裝的前提是安裝好Adobe的擴(kuò)展管理器。安裝的時(shí)候，可以將壓縮包中的Velositey文件夾放到Photoshop的Plug-ins 里的 Panels 文件夾中，或者使用Adobe擴(kuò)展管理器來安裝。

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

基本布局

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

新建文檔

首先，我們需要點(diǎn)擊“ [+] New Template”按鈕來新建一個(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ū)域也一樣簡單。Velositey中第三個(gè)選項(xiàng)卡就是內(nèi)容區(qū)域。

我選擇了第三個(gè)樣式，點(diǎn)擊后添加了三列內(nèi)容，每列包含標(biāo)題、圖片和預(yù)制的內(nèi)容。

增加更多模塊

在Velositey中，每個(gè)模塊相當(dāng)于一個(gè)獨(dú)立的內(nèi)容塊。它的內(nèi)容和用途由設(shè)計(jì)師來決定。和Header、滑塊區(qū)域不同，我們可以在文檔中添加多個(gè)模塊。

在案例中，我們添加了第一個(gè)模塊，其中包含一個(gè)橫跨整個(gè)柵格的圖片，標(biāo)題和預(yù)制的文本。

添加Footer

通常網(wǎng)頁的最底下都會(huì)添加Footer，同樣的，Velositey為我們內(nèi)置了一些可選的Footer：

在這個(gè)階段，我們已經(jīng)完成了網(wǎng)頁設(shè)計(jì)的必要部分，從Header到Footer，只需要幾次點(diǎn)擊就可以了。為了更好的布局，你還可以這樣添加一些合理的空檔：

現(xiàn)在我們已經(jīng)完成了基本的布局，接下來，我們可以定制它，讓它看起來更符合一個(gè)高保真的原型。

上面這個(gè)過程有多快？看下面的視頻你就明白！

 

 

細(xì)節(jié)調(diào)整

當(dāng)我們?yōu)槲臋n進(jìn)行個(gè)性化調(diào)整的時(shí)候，盡可能保證每個(gè)圖層的完整性是基本原則。每個(gè)圖層在進(jìn)行調(diào)整的時(shí)候，不能對其進(jìn)行破壞性的修改，這樣可以確保原型的可調(diào)整性。這樣一來，我們就需要用到PS的以下特性：

• 智能對象和智能鏈接對象
• 調(diào)整圖層
• 圖層效果

此外，我個(gè)人比較喜歡盡可能少地使用圖層。

使用智能對象

在置入LOGO的時(shí)候，將其調(diào)整為智能對象是非常有必要的。

首先，你需要在Header組中找到那個(gè)名為LOGO的圖層，鼠標(biāo)右鍵點(diǎn)擊它，將其轉(zhuǎn)換為智能對象。

為了將LOGO置入這個(gè)圖層，我們在這個(gè)圖層上點(diǎn)擊右鍵，選擇“編輯內(nèi)容”。

這個(gè)時(shí)候，我們會(huì)在PS中打開一個(gè)PSB格式的新文檔，原來PSD中的這個(gè)矩形的智能對象會(huì)變?yōu)橐粋€(gè)透明圖層，我們將準(zhǔn)備好的LOGO置于這個(gè)PSB文檔中，左對齊，這個(gè)時(shí)候如果你保存了這個(gè)PSB文檔，原來的PSD文檔中會(huì)同步改變。

此時(shí)，我們可以將這個(gè)LOGO智能對象圖層輕松改變、調(diào)整。為了更為有效地使用，我們可以在這個(gè)圖層上點(diǎn)擊右鍵，選擇“轉(zhuǎn)換為鏈接…”選項(xiàng)。

隨后，PS將會(huì)提醒你保存PSB格式的智能對象文件。作為網(wǎng)站圖片體系的重要組成部分，這個(gè)LOGO你會(huì)用上的。通常，我們會(huì)將其保存到一個(gè)名為“image”的文件夾中。

“盡量將圖片和圖標(biāo)的文件夾放在靠近PSD的地方，而不是放在桌面上某個(gè)名為Others的文件夾里面。”——PS禮儀書

設(shè)計(jì)師的必讀書：《PS禮儀書》

你在Header中編輯好了LOGO的智能對象，它還可以在Footer中復(fù)用。在Footer的組中找到LOGO的圖層，右鍵點(diǎn)擊它，選擇“替換內(nèi)容”。

這個(gè)時(shí)候打開你保存那個(gè).PSB 文件的文件夾，選擇LOGO，那么底部需要用到LOGO的地方也搞定了。

其他地方的處理方式也是類似的。

使用圖層效果

調(diào)整圖層效果想必大家都已經(jīng)非常熟悉了。在案例中，我們借助圖層效果來為按鈕上色，添加漸變。具體的操作在這里就不贅述了。

重復(fù)這些步驟，這里就是需要你精心打磨的設(shè)計(jì)細(xì)節(jié)了。它們讓你的網(wǎng)頁的可讀性更高，增加視覺表現(xiàn)力，等等等等。

使用調(diào)整圖層

調(diào)整圖層的存在，使得設(shè)計(jì)師可以以非破壞性的方式來定制圖層的色調(diào)（亮度、對比度等）。在案例中，我們可以將模塊中的圖標(biāo)變?yōu)楹诎?。在模塊組中找到對應(yīng)的圖層，右鍵點(diǎn)擊，選擇“編輯內(nèi)容”選項(xiàng)，隨后，點(diǎn)擊“新建調(diào)整圖層”然后選擇黑白效果就好了。

最終成品

最后，將預(yù)制的文本內(nèi)容（標(biāo)題、文本）替換成你需要的內(nèi)容，然后這個(gè)原型就算是成品了！

結(jié)語

仔細(xì)看看Velositey，你會(huì)發(fā)現(xiàn)用好工具真的能事倍功半。不論你是用PS、AI還是熱衷Sketch，這些系統(tǒng)化的設(shè)計(jì)平臺(tái)都有著許多使用技巧和拓展工具，閑暇的時(shí)候稍加研究，絕對會(huì)獲益匪淺。你說呢？