PS網(wǎng)頁(yè)設(shè)計(jì)中制作Web水晶按鈕

來(lái)源:薛欣博客 作者:薛欣姚輝 學(xué)習(xí):6125人次

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(四)

12.3.3Web水晶按鈕

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(四)PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(四)

圖12-3-26

在瀏覽網(wǎng)頁(yè)中我們經(jīng)常會(huì)看到一些漂亮的水晶似的按鈕,那么下面我們就通過(guò)使用ps的選區(qū)以及圖層混合模式等工具制作這樣一個(gè)web水晶按鈕。

1.首先我們打開(kāi)ps,新建一個(gè)500*500像素大小的圖像,Ctrl+R打開(kāi)標(biāo)尺,做兩條輔助線,如圖12-3-27所示。

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(四)

圖12-3-27

2.然后選擇橢圓選框工具,按住Shift+Alt鍵,從輔助線中心焦點(diǎn)進(jìn)行繪制,如圖12-3-28所示。然后選擇漸變工具,設(shè)置漸變的顏色,然后進(jìn)行填充,如圖12-3-29所示。

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(四)PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(四)

圖12-3-28圖12-3-29

3.接下來(lái),我們將選擇【選擇】菜單,【修改】,選擇【收縮】。彈出【收縮選區(qū)】對(duì)話(huà)框,如圖12-3-30所示。

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(四)

圖12-3-30

4.單擊【確定】,選區(qū)被收縮,我們新建一個(gè)圖層再次選擇漸變工具對(duì)其進(jìn)行填充,效果如圖12-3-31所示。我們?cè)俅涡陆ㄒ粋(gè)圖層,執(zhí)行上面的操作。這里的收縮量我們?cè)O(shè)為10像素。顏色我們選擇淡紫進(jìn)行填充,效果如圖12-3-32所示。

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(四)PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(四)
圖12-3-31圖12-3-32

5.接著我們?cè)俅沃貜?fù)上面的步驟,如圖12-3-33所示。下面我們開(kāi)始制作按鈕的高光部分,我們將選區(qū)移動(dòng),如圖12-3-34所示。

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(四) PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(四)

圖12-3-33圖12-3-34

6.我們Ctrl+L打開(kāi)色階,調(diào)整其色階值,如圖12-3-35所示。

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(四)

圖12-3-35

1.我們選擇橢圓選區(qū)工具,新建一個(gè)圖層,繪制一個(gè)小橢圓對(duì)其進(jìn)行填充,顏色為白色,填充后,調(diào)整到合適的位置,作為按鈕的高光點(diǎn)。如圖12-3-36所示。高光點(diǎn)繪制完后,我們選擇【鋼筆】工具,新建一個(gè)圖層,再次繪制高光形狀,為圖層3繪制高光,如圖12-3-37所示。

PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(四)PS教程大禮包-第12章網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用(四)
圖12-3-36圖12-3-37

 

學(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)回答!