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

來源:chenzimu.com  作者:臣子木  學(xué)習(xí):3968人次

 

在這篇用戶界面設(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ù)覽教程的最終效果:

ps教程:www.theoat.com.cn_用photoshop設(shè)計(jì)一個(gè)簡約漂亮的定價(jià)表 三聯(lián)

  第一步:新建文件

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

  層。

ps教程:www.theoat.com.cn_

  第二步:背景修飾。

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

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

ps教程:www.theoat.com.cn_

  下邊是背景的最終效果:

ps教程:www.theoat.com.cn_

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

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

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

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

ps教程:www.theoat.com.cn_
ps教程:www.theoat.com.cn_
ps教程:www.theoat.com.cn_

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!