解析PS的Velositey插件在網頁設計中應用

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

解析PS的Velositey插件在網頁設計中應用,PS教程網

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

解析PS的Velositey插件在網頁設計中應用,PS教程網

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

增加內容區(qū)域

增加內容區(qū)域也一樣簡單。Velositey中第三個選項卡就是內容區(qū)域。

解析PS的Velositey插件在網頁設計中應用,PS教程網

我選擇了第三個樣式,點擊后添加了三列內容,每列包含標題、圖片和預制的內容。

解析PS的Velositey插件在網頁設計中應用,PS教程網

使用圖層效果

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

解析PS的Velositey插件在網頁設計中應用,PS教程網

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

解析PS的Velositey插件在網頁設計中應用,PS教程網

使用調整圖層

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

解析PS的Velositey插件在網頁設計中應用,PS教程網

最終成品

最后,將預制的文本內容(標題、文本)替換成你需要的內容,然后這個原型就算是成品了!

解析PS的Velositey插件在網頁設計中應用,PS教程網

結語

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

標簽(TAG) 網頁設計 插件 解析