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

2019-12-24 15:16:20 來源/作者: 互聯(lián)網(wǎng) / 華恒 己有:871人學(xué)習(xí)過

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

案例中,我們選擇最后一個(gè)slider樣式,于是就生成了一個(gè)包含標(biāo)題、內(nèi)容和兩個(gè)按鈕的slider區(qū)域。

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

正如上圖所示,你可以在圖層面板中看到slider區(qū)域的圖層分組。

增加內(nèi)容區(qū)域

增加內(nèi)容區(qū)域也一樣簡單。Velositey中第三個(gè)選項(xiàng)卡就是內(nèi)容區(qū)域。

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

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

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

使用圖層效果

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

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

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

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

使用調(diào)整圖層

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

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

最終成品

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

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

結(jié)語

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