ps設計網頁定價表

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

　　首先先預覽教程的最終效果：

　　第一步：新建文件

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

　　層。

　　第二步：背景修飾。

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

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

　　下邊是背景的最終效果：

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

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

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

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