西西軟件園多重安全檢測(cè)下載網(wǎng)站、值得信賴的軟件下載站!
西西首頁(yè) 電腦軟件 安卓軟件 電腦游戲 安卓游戲 排行榜 專題合集

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

v1.1 cs6&cc版
  • PS網(wǎng)頁(yè)原型設(shè)計(jì)插件(Velositey)v1.1 cs6&cc版
  • 軟件大小:7.8M
  • 更新時(shí)間:2015-05-13 15:38
  • 軟件語(yǔ)言:中文
  • 軟件廠商:
  • 軟件類別:國(guó)產(chǎn)軟件 / 免費(fèi)軟件 / 濾鏡插件
  • 軟件等級(jí):4級(jí)
  • 應(yīng)用平臺(tái):WinAll
  • 官方網(wǎng)站:http://www.innovatechautomation.com
  • 應(yīng)用備案:
好評(píng):50%
壞評(píng):50%

本類精品

軟件介紹

Velositey是Photoshop的一款網(wǎng)頁(yè)布局?jǐn)U展插件,通過(guò)這款插件你可以快速搭建網(wǎng)頁(yè)布局,布局包括頭部、幻燈片、內(nèi)容布局、頁(yè)腳排版等等。可以讓設(shè)計(jì)師專注打磨細(xì)節(jié)完善設(shè)計(jì),而不用在無(wú)聊枯燥的事情上耗費(fèi)時(shí)間。

使用教程:

基本布局

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

新建文檔

首先,我們需要點(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)容。

增加更多模塊

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

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

添加Footer

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

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

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

上面這個(gè)過(guò)程有多快?看下面的視頻你就明白!

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

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

智能對(duì)象和智能鏈接對(duì)象

調(diào)整圖層

圖層效果

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

使用智能對(duì)象

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

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

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

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

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

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

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

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

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

使用圖層效果

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

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

使用調(diào)整圖層

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

最終成品

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

安裝方法:

Step 1:下載擴(kuò)展

先從官網(wǎng)下載對(duì)應(yīng)版本的Velositey Photoshop 擴(kuò)展(下載鏈接),如下圖,點(diǎn)擊網(wǎng)頁(yè)頁(yè)腳的下載按鈕,需要提供Twitter和Facebook帳號(hào)才能下載,不過(guò)我們也很貼心的上傳到微盤上了。


Step 2:安裝路徑

這里西西下載的是CS6版本,解壓后把文件夾Velositey整個(gè)復(fù)制到CS6安裝目錄的:Plug-ins–Panels目錄下。

Step 3:打開(kāi)擴(kuò)展

打開(kāi)PS軟件,然后點(diǎn)擊菜單窗口>-擴(kuò)展功能Velositey即可打開(kāi)。

其他版本下載

發(fā)表評(píng)論

昵稱:
表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
查看所有(0)條評(píng)論 > 字?jǐn)?shù): 0/500

TOP
軟件下載