ps7.0 中文版教程-網(wǎng)頁(yè)常用小按鈕

來(lái)源:www.psbaike.com整理 作者:不詳 學(xué)習(xí):618人次

網(wǎng)頁(yè)常用小按鈕一

  雖然越來(lái)越多的人開(kāi)始使用寬帶,速度已經(jīng)不象早些年那樣限制著網(wǎng)絡(luò),但近年來(lái)的網(wǎng)頁(yè)卻沒(méi)有越來(lái)越繁雜,正相反,以簡(jiǎn)約為風(fēng)尚的網(wǎng)頁(yè)設(shè)計(jì)正悄悄流行在網(wǎng)絡(luò)世界中。這種風(fēng)格不但節(jié)約了帶寬,更重要的是,大多數(shù)人更喜歡在清新的環(huán)境中尋找他們所需的信息,簡(jiǎn)單精巧的設(shè)計(jì),使獲取信息變得更加方便快捷。今天,我們就來(lái)設(shè)計(jì)幾款最常用的網(wǎng)頁(yè)小巧按鈕。

  第一款:像素按鈕

  這是目前最為流行的一種按鈕,在每個(gè)以像素為主題的網(wǎng)站上幾乎都能看到它的身影。想要最大程度的減小網(wǎng)頁(yè)大小,這種按鈕可是不二法門(mén)。這種按鈕簡(jiǎn)單大方,除了個(gè)性化的網(wǎng)站之外,用于公司網(wǎng)頁(yè)也非常合適。

  新建一個(gè)ps文檔,RGB模式,白色背景。

  新建一層,復(fù)位色板,將前景色設(shè)為一種淺灰色,如例子中的RGB(239,239,239),用矩形選框工具選擇一個(gè)小矩形,填充前景色后取消選擇。

  下面我們來(lái)制作按鈕的立體效果。這里,我們完全用添加圖層樣式的方法,雙擊圖層,打開(kāi)圖層樣式對(duì)話框,我們來(lái)依次添加:

  首先選擇斜面和浮雕樣式,設(shè)置結(jié)構(gòu)為內(nèi)斜面,方法為平滑,深度為1%,方向在上,大小和軟化均為2像素,陰影角度為146度,使用全局光,高度為30度,光澤保持默認(rèn),高光和暗調(diào)的混合模式與顏色都不變,不過(guò)不透明度分別設(shè)為100%和43%;

  其次是內(nèi)陰影模式,模式為正常,顏色為白色,不透明度為100%,角度為146度,使用全局光,距離為1像素,阻塞為100%,大小為0,品質(zhì)不變;

  接下來(lái)是描邊,將描邊大小設(shè)為1像素,位置在外部,混合模式為正常,不透明度為100%,填充類型為顏色,描邊顏色設(shè)為黑色;

  最后是投影樣式,將陰影顏色設(shè)為黑色,不透明度為22%,角度為120度,取消全局光,距離為3像素,擴(kuò)展為0,大小為0,品質(zhì)保持默認(rèn)不變。

  好了,現(xiàn)在你可以選擇細(xì)一些的字體,最好是專門(mén)的像素字體,在按鈕上寫(xiě)上文字。在設(shè)置文字選項(xiàng)的時(shí)候,有一項(xiàng)需要特別注意,那就是要將文字消除鋸齒的方式設(shè)為無(wú),否則字體會(huì)出現(xiàn)模糊。整個(gè)制作過(guò)程如圖1所示。

ps7.0中文版教程-網(wǎng)頁(yè)常用小按鈕一

圖1

  如果覺(jué)得灰色太單調(diào),你也可以為按鈕添加各種顏色,過(guò)程和前面的大致相同,但有些地方有些細(xì)微差別。

  在新建圖層、設(shè)置選區(qū)后,設(shè)置你的前景色,如這里我們將前景色設(shè)為RGB(106,175,5),填充選區(qū)后取消選擇。然后開(kāi)始設(shè)定圖層樣式。在斜面和浮雕樣式中,將深度設(shè)為100%,大小和軟化為1像素,注意要將陰影的高光模式設(shè)為顏色減淡,不透明度為65%,暗調(diào)的不透明度也要減低一些;和剛才不同,我們?nèi)∠藘?nèi)陰影樣式,在描邊樣式中,將描邊顏色設(shè)為一種較深的灰色,如RGB(132,132,132),當(dāng)然,你也可以用黑色描邊;對(duì)于投影樣式,由于按鈕本身的顏色較深,相對(duì)的,我們可以將陰影的不透明度設(shè)的稍微高一些,40%即可。最后,寫(xiě)上文字。

  第二款:漸變按鈕

  相對(duì)于第一款按鈕來(lái)說(shuō),接下來(lái)我們要介紹的這種類型的按鈕實(shí)用性更強(qiáng),而且顏色也更豐富。你在許多網(wǎng)站上都會(huì)看到它。

  首先,仍是新建RGB模式的ps文檔,白色背景。

  這次我們新建一層,用矩形選框工具選擇一個(gè)小矩形,然后點(diǎn)擊“選擇->修改->平滑”,設(shè)為5像素。選擇漸變工具的由黑到白漸變,在選框內(nèi)由下往上拉。效果如圖2。

ps7.0中文版教程-網(wǎng)頁(yè)常用小按鈕一
圖2

  雙擊圖層,進(jìn)入圖層樣式,我們?yōu)榘醇~添加立體感,選擇斜面和浮雕樣式,在樣式中選擇內(nèi)斜面,方法為平滑,深度為1%,方向?yàn)樯希笮?像素,軟化為0像素,陰影的角度為120度,使用全局光,高度為30度,保持高光和暗調(diào)的默認(rèn)混合模式及顏色不變,高光的不透明度為75%,暗調(diào)為36%;

ps7.0中文版教程-網(wǎng)頁(yè)常用小按鈕一
圖3

  最后,我們?cè)儆妹柽叺姆绞叫揎棸醇~,設(shè)置描邊大小為1像素,位置在外部,混合模式為正常,不透明度為100%,填充類型為顏色,將顏色設(shè)為灰色。

ps7.0中文版教程-網(wǎng)頁(yè)常用小按鈕一
圖4

由Ci222編寫(xiě),轉(zhuǎn)裁請(qǐng)保留作者

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

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

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

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