ps設(shè)計(jì)網(wǎng)頁定價(jià)表(5)

在這篇用戶界面設(shè)計(jì)教程中，我將向您展示如何用Photoshop設(shè)計(jì)一個(gè)時(shí)尚的定價(jià)表界面。定價(jià)表常見于一些基于web應(yīng)用程序的網(wǎng)站。我們將運(yùn)用橫排文字工具和圓角矩形工具等來完成我們的這項(xiàng)任務(wù)。我將向您展示如何迎合現(xiàn)代的web發(fā)展主流來創(chuàng)建這樣一個(gè)表界面。

　　首先先預(yù)覽教程的最終效果：

　　第一步：新建文件

　　選擇文件-新建，具體的參數(shù)設(shè)置如下圖所示，然后點(diǎn)擊OK。注意背景設(shè)置為透明，這樣將默認(rèn)在圖層面板中新建一層名為“圖層一”的透明圖

　　層。

　　第二步：背景修飾。

　　我們將創(chuàng)建一個(gè)光滑的背景，選擇一個(gè)你喜歡的顏色并用油漆桶工具(G)來填充第一步中新建的“圖層一”。

　　然后在圖層面板中雙擊該圖層打開圖層樣式設(shè)置窗口，添加一個(gè)平滑的深灰色道淺灰色的漸變疊加效果。具體參數(shù)如圖所示：

　　下邊是背景的最終效果：

　　第三步：創(chuàng)建中間的價(jià)格列

　　中間列的尺寸要比其他兩列的尺寸稍大，這樣是為了給用戶推薦最好的選擇。這是一個(gè)很流行的設(shè)計(jì)思路。

　　選擇圓角矩形工具(U)，確保你選擇了形狀圖層模式，并設(shè)置半徑為1px，然后畫一個(gè)200*330px的矩形。

　　雙擊矩形所在圖層打開圖層樣式設(shè)置窗口，分別設(shè)置內(nèi)陰影、漸變疊加和描邊效果，具體參數(shù)如下：

最終效果如下圖：

　　現(xiàn)在我們將創(chuàng)建一個(gè)小的圓角矩形來展示定價(jià)計(jì)劃的名稱。在這一列的最頂端，設(shè)置圓角矩形工具半徑為5px，創(chuàng)建一個(gè)130*40px的圓角矩形。

　　給該矩形設(shè)置陰影和漸變疊加，參數(shù)如下：

　　用鋼筆工具在圓角矩形的兩端分別畫一個(gè)小斜角(如下所示)，這將使其呈現(xiàn)出環(huán)繞著價(jià)格列的效果。

　　選擇橫排文字工具，設(shè)置字體大小為20px，字體顏色為白色，字體可任選，然后在矩形上方寫上計(jì)劃的名稱(在本教程中，名字為"Standard" )。

　　給文字圖層設(shè)置平滑的陰影和灰色的顏色疊加效果，參數(shù)如下：

下一步，在計(jì)劃名稱的下方添加價(jià)格的明細(xì)部分(如下所示)。給該文字圖層添加一個(gè)灰色顏色疊加和陰影效果。

　　現(xiàn)在，在計(jì)劃表下方，我們將在"Standard"計(jì)劃列中設(shè)計(jì)一個(gè)列表。在每一列表項(xiàng)中，畫兩條寬度為1px的線條，使第一條線的亮度比背景深，

　　另一條線的亮度比背景淺，這樣將生成一種陰影效果。

　　再下一步,讓我們創(chuàng)建一個(gè)時(shí)尚的網(wǎng)頁按鈕，選擇圓角矩形工具，設(shè)置半徑為5px，在此列的底部畫一個(gè)100*38px的矩形。

　　給按鈕圖層添加陰影、漸變疊加和描邊效果，具體參數(shù)如下:

　　為了使按鈕的效果更具光澤，我將在按鈕頂部添加一個(gè)亮光反射的效果，我將教你一種簡(jiǎn)單的方法，同時(shí)這個(gè)方法也可以用到其他設(shè)計(jì)中。

　　首先，按住Ctrl鍵并單擊圖層面板中按鈕圖層的縮略圖，選出按鈕的選區(qū)。

　　選擇矩形選框工具，在選項(xiàng)欄中，選擇與選區(qū)交叉，在當(dāng)前選區(qū)的上半部分畫一個(gè)選區(qū)，這樣就只選中了按鈕選區(qū)的上半部分。

　　新建圖層，選擇油漆桶工具并給選區(qū)填充白色。將新圖層的不透明度設(shè)置為10%。

　　下一步我們要給該web按鈕添加一條描邊效果，新建圖層，并放大圖片尺寸，按照下圖的樣式繪制一條淺灰色線條。

　　選擇橫排文字工具并在按鈕上方添加"Sigh Up"或者"Join us"字樣，我將字體的樣式全部設(shè)置為了大寫并添加了深色的陰影效果。

　　現(xiàn)在我們完成了我們第一個(gè)定價(jià)列。

　　第四步：創(chuàng)建其余的價(jià)格列

　　首先在圖層面板中，選中除背景圖層外的其它所有圖層，Ctrl+G將這些圖層放在同一個(gè)圖層組中。

　　然后復(fù)制圖層組兩次并按照下圖所示的樣子，將它們肩并肩排好，修改新列的一些細(xì)節(jié)部分，使它們看起來有些許的不同。

　　第五步：擴(kuò)大中間的價(jià)格列

　　在圖層面板中激活中間列所在的圖層組，然后點(diǎn)擊Ctrl+T命令來調(diào)整中間層。一定要確保該圖層在其它圖層的上方。

　　為了使中間的定價(jià)列顯得更突出，修改按鈕和價(jià)格的漸變疊加效果，顏色可以任選，我選擇藍(lán)色。

　　第六步：收尾

　　我將向你展示一些添加陰影的方法，選擇橢圓工具(U)，如下圖所示，畫一個(gè)黑色的橢圓形狀。

　　為了使效果顯得更好一些，我選擇濾鏡-模糊-高斯模糊，半徑選擇4px即可。

　　將陰影圖層放在背景圖層的上方，復(fù)制兩次，現(xiàn)在就有了三個(gè)陰影圖層，將每個(gè)圖層放在每一個(gè)價(jià)格列的下方，位置擺調(diào)整好。

　　好了，全部教程到此為止。