如何在Photoshop中制作價格表UI

今天我們來學習如何在PS中制作價格表UI。

新建1000×500 px的文檔。


將背景圖層解鎖，并為之添加漸變疊加的圖層樣式。漸變顏色從# 9b9b9b到# f4f4f4。

選擇圓角矩形工具，在屬性欄上，選擇形狀圖層按鈕，并設圓角半徑為10 px。

Ctrl+R調(diào)出標尺，在標尺上點擊鼠標右鍵，會出現(xiàn)單位的快捷菜單。在這里我們選擇像素。

拉參考線，使用圓角矩形工具繪制出一個200×300 px的圓角矩形。

Ctrl+；隱藏參考線，Ctrl+R隱藏標尺。
為圓角矩形添加圖層樣式。
內(nèi)發(fā)光顏色為白色。

漸變是從# e4e4e4到# dcdcdc到# fafafa。



效果如下。

用前面所教方法，再繪制一個圓角半徑為5px的圓角矩形，大小是130×40 px。

將兩個圓角矩形水平居中對齊，并調(diào)整好相對的垂直位置。然后我們再隱藏標尺和參考線。

為其添加圖層樣式。



結(jié)果如下。

在背景圖層（圖層0）上新建空白圖層，用多邊形套索工具繪制如下選區(qū)，填充# 3a3a3a。

再來看下效果。

碼字。這里使用的字體是Myriad Pro，20點，白色。

為文字添加圖層樣式。



繼續(xù)碼字。這里使用的文字顏色為灰色。

接下來我們使用單行選框工具繪制兩條1px的直線。一條填充灰色，一條填充白色。


摁住Alt往下拖動幾次，復制出另外的幾條分割線，然后選中這幾個圖層Ctrl+E進行合并。然后使用矩形選框工具框出一個矩形范圍，為其添加矢量蒙版。

使用圓角矩形工具繪制一個圓角半徑為5px，100×38 px。添加圖層樣式。







摁住Ctrl單擊矢量蒙版縮覽圖，選擇矩形選框工具，摁住Alt拖拉矩形減去下半部分。

新建空白圖層，為該選區(qū)填充白色，并使不透明度為10%。

再新建空白圖層，繪制一根淺灰色的1 px的線。

縮小來看。

碼上字。

將這一個部分的內(nèi)容放在一個文件夾里。并摁住Alt拖拉出兩個文件夾。然后進行文字和細節(jié)上的修改（放大中間部分，并且分割線的那兩根1 px會因為放大而有所改變，故也要重新繪制）。

為了突出中間的部分，我這里也將它的部分組成改成藍色。

繪制一個橢圓，【濾鏡】|【模糊】|【高斯模糊】，大概模糊3~5px，作為陰影，并降低它的不透明度。

按照同樣的做法做出其它幾個陰影。這次的任務便完成。