如何在Photoshop中制作價(jià)格表UI
今天我們來學(xué)習(xí)如何在PS中制作價(jià)格表UI。
新建1000×500 px的文檔。
將背景圖層解鎖,并為之添加漸變疊加的圖層樣式。漸變顏色從# 9b9b9b到# f4f4f4。
選擇圓角矩形工具,在屬性欄上,選擇形狀圖層按鈕,并設(shè)圓角半徑為10 px。
Ctrl+R調(diào)出標(biāo)尺,在標(biāo)尺上點(diǎn)擊鼠標(biāo)右鍵,會(huì)出現(xiàn)單位的快捷菜單。在這里我們選擇像素。
拉參考線,使用圓角矩形工具繪制出一個(gè)200×300 px的圓角矩形。
Ctrl+;隱藏參考線,Ctrl+R隱藏標(biāo)尺。
為圓角矩形添加圖層樣式。
內(nèi)發(fā)光顏色為白色。
漸變是從# e4e4e4到# dcdcdc到# fafafa。
效果如下。
用前面所教方法,再繪制一個(gè)圓角半徑為5px的圓角矩形,大小是130×40 px。
將兩個(gè)圓角矩形水平居中對(duì)齊,并調(diào)整好相對(duì)的垂直位置。然后我們?cè)匐[藏標(biāo)尺和參考線。
為其添加圖層樣式。
結(jié)果如下。
在背景圖層(圖層0)上新建空白圖層,用多邊形套索工具繪制如下選區(qū),填充# 3a3a3a。
再來看下效果。
碼字。這里使用的字體是Myriad Pro,20點(diǎn),白色。
為文字添加圖層樣式。
繼續(xù)碼字。這里使用的文字顏色為灰色。
接下來我們使用單行選框工具繪制兩條1px的直線。一條填充灰色,一條填充白色。
摁住Alt往下拖動(dòng)幾次,復(fù)制出另外的幾條分割線,然后選中這幾個(gè)圖層Ctrl+E進(jìn)行合并。然后使用矩形選框工具框出一個(gè)矩形范圍,為其添加矢量蒙版。
使用圓角矩形工具繪制一個(gè)圓角半徑為5px,100×38 px。添加圖層樣式。
摁住Ctrl單擊矢量蒙版縮覽圖,選擇矩形選框工具,摁住Alt拖拉矩形減去下半部分。
新建空白圖層,為該選區(qū)填充白色,并使不透明度為10%。
再新建空白圖層,繪制一根淺灰色的1 px的線。
縮小來看。
碼上字。
將這一個(gè)部分的內(nèi)容放在一個(gè)文件夾里。并摁住Alt拖拉出兩個(gè)文件夾。然后進(jìn)行文字和細(xì)節(jié)上的修改(放大中間部分,并且分割線的那兩根1 px會(huì)因?yàn)榉糯蠖兴淖,故也要重新繪制)。
為了突出中間的部分,我這里也將它的部分組成改成藍(lán)色。
繪制一個(gè)橢圓,【濾鏡】|【模糊】|【高斯模糊】,大概模糊3~5px,作為陰影,并降低它的不透明度。
按照同樣的做法做出其它幾個(gè)陰影。這次的任務(wù)便完成。
學(xué)習(xí) · 提示
相關(guān)教程
- 陰影效果,教你制作各類陰影教程
- 陰影效果,制作網(wǎng)頁(yè)常見的圖片投影效果
- 設(shè)計(jì)知識(shí),新手詳情頁(yè)制作誤區(qū)
- banner教程,超簡(jiǎn)單三步設(shè)計(jì)一個(gè)BANNER
- 圖標(biāo)設(shè)計(jì),ps設(shè)計(jì)六邊形圖標(biāo)實(shí)例
- banner教程,用ps制作960*90的廣告圖片
- 做投影,教你做扁平風(fēng)格長(zhǎng)陰影
- 網(wǎng)頁(yè)設(shè)計(jì),設(shè)計(jì)金屬質(zhì)感游戲主題登陸框
- ps設(shè)計(jì)游戲網(wǎng)頁(yè)頭版教程
- 臨摹播放條
推薦教程
- 用ps制作高級(jí)會(huì)員升級(jí)按鈕
- 用ps制作暗黑風(fēng)格登陸界面
- photoshop設(shè)計(jì)黑色網(wǎng)站導(dǎo)航
- photoshop做media質(zhì)感水晶透明播放器
- ps制作window7移動(dòng)導(dǎo)航網(wǎng)頁(yè)界面設(shè)計(jì)教
- photoshop設(shè)計(jì)解析漂亮醒目的雜志設(shè)計(jì)分析
- ps設(shè)計(jì)粉色漂亮播放器按鈕
- Photoshop設(shè)計(jì)為愛等待的漂流瓶DM單
- Photoshop教程:輕松繪制黑色風(fēng)格導(dǎo)航條文字
- 利用PhotoShop制作卡通風(fēng)格導(dǎo)航欄