編按：微信小游戲自2018年誕生以來備受歡迎，飯后、地鐵上、等車時(shí)來上一盤，成為一種時(shí)尚。今天教大家設(shè)計(jì)一款微信小游戲上的按鈕圖標(biāo)。設(shè)計(jì)簡(jiǎn)單，可以快速上手，學(xué)會(huì)之后距離做小游戲美工更近一步了！

1，首先在圖像中新建一個(gè)圓角矩形，圓角為70px(可根據(jù)個(gè)人自定)，并填充為淺灰色（#e3e3e3）。它是按鈕的最底部。

2，首先添加斜面與浮雕，陰影顏色#838383

3，立體感不強(qiáng)，我們可以再為其添加內(nèi)陰影效果，增加立體感。

4，接著我們復(fù)制一個(gè)圓角矩形并把復(fù)制的圓角矩形的樣式都刪除，然后 ctrl+T適當(dāng)縮小和壓縮。因?yàn)閳A角矩形受到調(diào)整，圓角半徑會(huì)受到影響，所以我們可以根據(jù)最底的圓角矩形做適當(dāng)?shù)恼{(diào)整（案例的半徑不變，還是70px）。然后再?gòu)?fù)制兩個(gè)調(diào)整好的圓角矩形，適當(dāng)錯(cuò)開，并用不同顏色先區(qū)分，代表是按鈕，厚度和陰影。

5，首先我們處理按鈕，添加漸變疊加、內(nèi)發(fā)光和描邊效果。

描邊顏色為#0082d5

內(nèi)發(fā)光顏色為白色，不透明度可根據(jù)個(gè)人感覺適當(dāng)調(diào)整。

漸變顏色為#36afff、#007fcf。

6，接著新建幾個(gè)矩形并旋轉(zhuǎn)適當(dāng)角度，調(diào)整羽化值2.5像素，剪切蒙版在按鈕矩形里，并調(diào)整不透明度為20%。

7，然后我們新建一個(gè)圓角矩形

Ctrl+T，右擊鼠標(biāo)選擇透視命令，然后點(diǎn)擊右下角的錨點(diǎn)向右拖動(dòng)到合適位置。

復(fù)制一個(gè)，然后clrt+T,右擊選擇垂直翻轉(zhuǎn)，并放到按鈕下方。再次clrt+T，按住鍵盤左下角alt，向中間縮放一丟丟。

接著選中矩形，在屬性面板中將羽化值調(diào)到參數(shù)3，然后調(diào)整圖層不透明度為20%，混合模式為疊加。

為圓角矩形創(chuàng)建蒙版，然后單擊蒙版縮略圖

設(shè)置前景色為黑色，用柔邊畫筆在矩形邊緣輕微涂抹，讓過度更自然。

8，新建圖層，設(shè)置前景色#00b4ff，用畫筆工具（不透明100%，畫筆大小200px）在畫布中間點(diǎn)擊一下，然后clrt+T，向下壓縮成線條狀，移動(dòng)至按鈕矩形的上方，再?gòu)?fù)制一個(gè)在按鈕下方，混合模式為疊加。

9，按鈕部分完成，接著我們處理厚度和陰影部分，厚度矩形顏色#155b89。

陰影部分填充黑色，不透明度為45%。

10，接著我們給按鈕添加對(duì)應(yīng)文字，并添加內(nèi)陰影，漸變和投影，得到下面效果。

11，最后我們?yōu)樽畹撞康木匦翁硌a(bǔ)上外發(fā)光效果

完成

本文配套的練習(xí)素材請(qǐng)加QQ群：565256668下載

做PS高手，快速提升工作效率，部落窩教育《 Photoshop全面精通班》視頻和《 AI平面與電商設(shè)計(jì)從零到精通》直播課全心為你！

掃下方二維碼關(guān)注公眾號(hào)，隨時(shí)隨地學(xué)習(xí)PS：

相關(guān)推薦：