當(dāng)前位置: 首頁 > 設(shè)計資訊 > 設(shè)計教程 > 正文

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

2018-01-25 1807 0
優(yōu)設(shè)的老讀者可能會注意到,我們推薦Velositey這個PS插件已經(jīng)不是一次兩次了。這款著名的PS網(wǎng)頁布局設(shè)計工具為何會有“神器”之稱?因為它真的能讓你在短短幾分鐘內(nèi)完成網(wǎng)頁原型設(shè)計。正如同Velositey的口號所說:“讓設(shè)計師專注打磨細節(jié)完善設(shè)計,而不用在無聊枯燥的事情上耗費時間。” 事實上,Velositey就是這樣!
注意:教程所使用的Velositey為早期版本,目前最新版為1.1,與教程中所示界面稍有差別,但是基本一致,不過更為強大。

常見的布局樣式 在真正開始研究Velositey之前,讓我們先來簡單溫故一下常見的布局樣式。以ThemeForest最受歡迎的三個Wordpress主題(Avada、Enfold和Salient)為例,你會發(fā)現(xià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的原生功能為原型進行適當(dāng)?shù)恼{(diào)整。 閑話少敘,讓我們開始吧!

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

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

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

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

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

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

  


14
評論區(qū)(0)
正在加載評論...
相關(guān)推薦