游戲UI設(shè)計(jì)-第3章-按鈕設(shè)計(jì)

1、 游 戲 UI 設(shè) 計(jì)PPT模板：/moban/ PPT素材：/sucai/PPT背景：/beijing/ PPT圖表：/tubiao/ PPT下載：/xiazai/ PPT教程： /powerpoint/ 資料下載：/ziliao/ 范文下載：/fanwen/ 試卷下載：/shiti/ 教案下載：/jiaoan/ PPT論壇： PPT課件：/kejian/ 語文課件：/kejian/yuwen/ 數(shù)學(xué)課件：/kejian/shuxue/ 英語課件：/kejian/yingyu/ 美術(shù)課件：/kejian/meishu/ 科學(xué)課件：/kejian/kexue/ 物理課件：/kejian/wul

2、i/ 化學(xué)課件：/kejian/huaxue/ 生物課件：/kejian/shengwu/ 地理課件：/kejian/dili/ 歷史課件：/kejian/lishi/ 010203043.1 游戲按鈕類型介紹3.2扁平化按鈕設(shè)計(jì)3.3 Q版風(fēng)格按鈕設(shè)計(jì)3.4 歐美風(fēng)格按鈕設(shè)計(jì)目錄013.1 游戲按鈕類型介紹3.1 游戲按鈕類型介紹經(jīng)常有同學(xué)會(huì)問一些關(guān)于按鈕設(shè)計(jì)的問題，怎么樣做些漂亮又特別的按鈕，畫按鈕的技法在網(wǎng)上能找到很多，但是很少有人講按鈕設(shè)計(jì)的方法論。一個(gè)漂亮的按鈕，我們要看他的表現(xiàn)方式、形態(tài)、質(zhì)感是否符合整個(gè)界面所要傳達(dá)的整體風(fēng)格是值得每一個(gè)設(shè)計(jì)師去重視的。隨著網(wǎng)絡(luò)媒體的發(fā)展。各行各業(yè)

3、都在網(wǎng)絡(luò)媒體上來展示自己，也相繼出現(xiàn)了許多行業(yè)界面，那么這些界面的設(shè)計(jì)風(fēng)格肯定不會(huì)千篇一律，那么涉及到的按鈕設(shè)計(jì)也是各有風(fēng)格的?！八囆g(shù)來源于模仿”，“設(shè)計(jì)來源于生活”，在畫按鈕的時(shí)候主要從生活中發(fā)現(xiàn)自己需要的元素。下面就舉例來談?wù)勗O(shè)計(jì)方法。首先，我們知道按鈕在效果表現(xiàn)上很大一部分我們是從質(zhì)感的表現(xiàn)上來識(shí)別的，比如我們最常見Vista風(fēng)格的按鈕就是從玻璃質(zhì)感上表現(xiàn)。如圖3-1所示，很明顯就能看出玻璃瓶的高光、反光和投影。我們?cè)谧儸F(xiàn)按鈕質(zhì)感的時(shí)候也多是從這三方面出發(fā)。這里做一個(gè)實(shí)例分析。圖3-1玻璃杯素材3.1 游戲按鈕類型介紹這里做一個(gè)實(shí)例分析。如圖3-2所示，A按鈕是完全按照玻璃瓶質(zhì)感的方式來

4、畫的。如圖3-3所示，B按鈕是經(jīng)過對(duì)光規(guī)律的觀察而總結(jié)出的自己想要表現(xiàn)方式的一種藝術(shù)處理。主要是為了說明我們?cè)谶M(jìn)行參照質(zhì)感進(jìn)行按鈕設(shè)計(jì)的時(shí)候要考慮自己需要的藝術(shù)效果進(jìn)行適當(dāng)?shù)乃囆g(shù)處理。這樣也便于界面制作人員的制作。下面一種是我們經(jīng)常所見的蘋果風(fēng)格的按鈕設(shè)計(jì)，這種風(fēng)格的按鈕也是我們?cè)谏钪薪?jīng)常能見到的，鍵盤手機(jī)就經(jīng)常采用這種設(shè)計(jì)方式，但是隨著觸摸屏手持設(shè)備的普遍，絕大數(shù)的鍵盤界面都采用模仿原來手機(jī)實(shí)物鍵盤的設(shè)計(jì)方式，這樣是為了讓用戶對(duì)界面產(chǎn)生親切感，同時(shí)這樣的設(shè)計(jì)也看起來更加簡(jiǎn)潔美觀，如圖3-4所示。圖3-2 A按鈕圖3-2 A按鈕3.1 游戲按鈕類型介紹如圖3-5所示，C按鈕是參照鍵盤的質(zhì)感做

5、的樣稿。D按鈕是選擇了同一色相不同明度和純度所做的按鈕，之所以列舉這個(gè)列子，是為了說明我們?cè)谧鲞@種風(fēng)格的按鈕設(shè)計(jì)的時(shí)候，一定要把握住一個(gè)很重要的問題，那就是一定是在同一種色相中拉漸變，這樣的按鈕效果才自然，當(dāng)然除了設(shè)計(jì)師追求一些不一樣的效果，如圖3-6所示。如圖3-7所示的這張色譜，大家可以看出色相的微妙關(guān)系。有利于我們做漸變類型的按鈕。圖3-5 C按鈕圖3-6 D按鈕圖3-7 色譜3.1 游戲按鈕類型介紹如圖3-8所示的E按鈕就是采用的45度角徑向漸變的按鈕，是為了說明漸變方式不同最后按鈕的最后出現(xiàn)的效果也會(huì)不同，就這一點(diǎn)我們?cè)O(shè)計(jì)師可以設(shè)計(jì)出很多不同形式的按鈕。還有一些生活中的按鈕設(shè)計(jì)，如圖

6、所示這個(gè)按鈕設(shè)計(jì)是參考常見的復(fù)印機(jī)上面的按鈕來設(shè)計(jì)的，這種按鈕的設(shè)計(jì)方法也很簡(jiǎn)單，但是效果很好。同時(shí)也加強(qiáng)了用戶對(duì)界面的親切感，更加有利于用戶的使用。如下圖3-9所示。如圖3-10所示的按鈕是我們常見的調(diào)節(jié)上下的按鈕，按照實(shí)物的樣式，粗糙的畫了一個(gè)實(shí)例，為的就是說明其實(shí)在做按鈕設(shè)計(jì)的時(shí)候我們參考的實(shí)物是很多的，多觀察周圍的實(shí)物往往會(huì)得到一些意想不到的收獲，并且我們還可以通過簡(jiǎn)單的藝術(shù)效果處理得到不同的按鈕效果。圖3-8 E按鈕圖3-9 開關(guān)按鈕圖3-10 上下調(diào)節(jié)按鈕023.2扁平化按鈕設(shè)計(jì)3.2扁平化按鈕設(shè)計(jì)具體操作步驟如下：1.打開Photoshop CS6軟件，單擊【文件】【新建】或按【

7、ctrl+N】組合鍵，【新建】一個(gè)【空白文檔】，寬度和高度分別設(shè)置為2680像素、1280像素，分辨率為300像素/英寸，顏色模式為RGB模式8位圖像，背景為白色，如圖3-11所示。2. 按【Ctrl+O】組合鍵【打開】一張?jiān)诰W(wǎng)絡(luò)上保存的圖片作為背景，如圖3-12所示。圖3-11 新建空白文檔圖3-12 打開素材圖片3.2扁平化按鈕設(shè)計(jì)3.單擊左側(cè)工具欄中的【鋼筆工具】或按快捷鍵【P】，勾選出一個(gè)不規(guī)則的矩形，勾選完畢后按【Ctrl+Enter】組合鍵【轉(zhuǎn)換為選區(qū)】，如圖3-13所示。4.按【Ctrl+Shift+N】組合鍵【新建】“圖層1”，單擊左側(cè)工具欄中的【填充工具】，進(jìn)入【拾色器（前景

8、色）】，選取顏色【RGB】參數(shù)分別為R:214、G:197、B:150，點(diǎn)擊【確定】按鈕，如圖3-14所示。圖3-13 轉(zhuǎn)換為選區(qū)圖3-14 拾色器3.2扁平化按鈕設(shè)計(jì)5.按【Ctrl】鍵的同時(shí)左鍵點(diǎn)擊“圖層1”，進(jìn)行【載入選區(qū)】，單擊左側(cè)工具欄中的【筆刷工具】，設(shè)置【大小】為70像素，如圖 所示。再配合【橡皮擦工具】輕微擦拭選區(qū)邊緣，制造出破舊紙張的效果，繪制效果如圖3-15所示。6.在【圖層】面板中，將“圖層1”的【不透明度】調(diào)整為80%，如圖3-16所示。調(diào)整后的效果如圖3-17所示。圖3-15 繪制圖3-16 調(diào)整不透明度3.2扁平化按鈕設(shè)計(jì)7.按【Ctrl+J】組合鍵【復(fù)制】“圖層1

9、”，長按鼠標(biāo)左鍵將“圖層1副本“拖至”圖層1“的下方。用單擊左側(cè)工具欄中的【填充工具】，進(jìn)入【拾色器（前景色）】，選取顏色【RGB】參數(shù)分別為28、6、1，點(diǎn)擊【確定】按鈕，并把圖層1副本的不透明度改為100%，如圖3-18所示。圖3-17 效果圖圖3-18 調(diào)整不透明度3.2扁平化按鈕設(shè)計(jì)8.按【Ctrl+T】組合鍵進(jìn)行【變形】后，再按【Alt+Shift】組合鍵將“圖層1副本”原位放大,設(shè)置參數(shù)X：1345.00像素，Y：682.50像素，W:100.00%，H：100.00%，如圖3-19所示，修改效果如圖3-20所示。圖3-19 變形圖3-20 修改效果圖3.2扁平化按鈕設(shè)計(jì)9.按【C

10、trl+O】組合鍵【打開】一張?jiān)诰W(wǎng)絡(luò)上保存的圖片作為背景，如圖3-21所示。10.單擊右鍵“圖層”并選擇【柵格化圖層】，如圖3-22所示。圖3-21 打開素材圖片圖3-22 柵格化圖層3.2扁平化按鈕設(shè)計(jì)11.按【Ctrl+U】組合鍵打開【色相/飽和度】的面板，將“圖層”的【色相】參數(shù)設(shè)置為0，【飽和度】設(shè)置為-100，【明度】設(shè)置為0，如圖3-23所示。效果如圖3-24所示。 12.單擊右鍵“圖層”并選擇【創(chuàng)建剪貼蒙版】，如圖3-25所示。圖3-23 色相/飽和度圖3-24 效果圖圖3-25 創(chuàng)建剪貼蒙版3.2扁平化按鈕設(shè)計(jì)13.單擊【圖層】面板左上方的【混合模式】列表，并選擇【線性加深】如

11、圖3-26所示。效果如圖3-27所示。 14.按【Ctrl+Shift+N】組合鍵【新建】“圖層2”，單擊左側(cè)工具欄中的【畫筆工具】，設(shè)置筆刷【大小】為7，如圖3-28所示。圖3-26 線性加深圖3-27 效果圖圖3-28 設(shè)置筆刷3.2扁平化按鈕設(shè)計(jì)15.單擊左側(cè)工具欄中的【填充工具】，進(jìn)入【拾色器】選取顏色參數(shù)【RGB】分別為R:105,G:81,B:83，R:72,G:49,B:51，R:44,G:21,B:23，三種顏色繪制出圖釘效果。 點(diǎn)擊【確定】按鈕。如圖3-29、圖3-30、圖3-31所示。最后繪制效果如圖3-32所示。圖3-29 拾色器圖3-30 拾色器圖3-31 拾色器圖3-

12、32 繪制效果3.2扁平化按鈕設(shè)計(jì)16.按【Ctrl+J】組合鍵【復(fù)制】“圖層2”，單擊左側(cè)工具欄中的【移動(dòng)工具】并按住【Shift】將“圖層2副本”水平拖至右側(cè)，適當(dāng)調(diào)整位置使“圖層2”和“圖層2副本”中的圖釘樣式【對(duì)齊】，效果如圖3-33所示。17.單擊左側(cè)工具欄中的【橫排文字工具】，輸入文本內(nèi)容為“退出游戲”并選用【字心坊李林哥特體簡(jiǎn)體中文】的字體樣式，如圖3-34所示。18.單擊左側(cè)工具欄中的【橫排文字工具】，在相應(yīng)圖層雙擊鼠標(biāo)左鍵【全選】“退出游戲”文字，如圖3-35所示。圖3-33 調(diào)整位置圖3-34 創(chuàng)建文本圖3-35 全選文字3.2扁平化按鈕設(shè)計(jì)19.單擊將左上方文字工具欄的【

13、拾色器】，如圖3-36所示。并將顏色【RGB】調(diào)整為R:34,G:30,B:34，如圖3-37所示。20.單擊【菜單欄】里的【窗口】列表并打開【字符】面板，如圖3-38所示。圖3-36 填充工具圖3-37 拾色器圖3-38 字符3.2扁平化按鈕設(shè)計(jì)21.打開字符面板后，將【行距】設(shè)置為18.44點(diǎn)，【所選字符的字距調(diào)整】設(shè)置為200，【水平縮放】設(shè)置為100%，如圖3-39所示。22.在【圖層】面板下雙擊“退出游戲”的圖層，將【圖層樣式】面板打開，單擊【描邊】效果，【大小】設(shè)置為4像素，【位置】選擇外部，【混合模式】為正常，【不透明度】為79%，【填充類型】選擇顏色，如圖3-40所示，雙擊顏色

14、框打開【拾色器】。圖3-39 設(shè)置字符面板圖3-40 描邊3.2扁平化按鈕設(shè)計(jì)23.選取顏色【RGB】參數(shù)為R:231,G：231，B：231，如圖3-41所示，最后單擊【確定】按鈕，填充效果如圖3-42所示。24.單擊左側(cè)工具欄中的【鋼筆工具】，勾選出一個(gè)不規(guī)則的小矩形作為按鈕的底色，按【Ctrl+Enter】組合鍵【轉(zhuǎn)換為選區(qū)】，效果如圖3-43所示。圖3-41 拾色器圖3-42 填充效果圖3-43 轉(zhuǎn)換為選區(qū)3.2扁平化按鈕設(shè)計(jì)25.按【Ctrl+Shift+N】組合鍵【新建】“圖層3”，單擊左側(cè)工具欄中的【填充工具】，選取顏色【RGB】參數(shù)為R:118,G:121,B:147，如圖3-

15、44所示。26.按【Ctrl+Shift+N】組合鍵【新建】“圖層4”，單擊左側(cè)工具欄中的【畫筆工具】，Sampled Brush13 70筆刷 【大小】設(shè)置為7，如圖3-45所示。27.單擊左側(cè)工具欄中的【填充工具】，選取顏色【RGB】參數(shù)為R:75,G:72,B:77，如圖3-46所示，最后單擊【確定】按鈕。在小矩形周圍畫出邊框。圖3-44 拾色器圖3-45 設(shè)置畫筆圖3-46 拾色器3.2扁平化按鈕設(shè)計(jì)28.繼續(xù)使用【填充工具】，選取顏色【RGB】參數(shù)為R:51,G:53,B:90，最后單擊【確定】按鈕，如圖3-47所示。在小矩形的中間畫幾條橫線作為木紋紋理。29.繼續(xù)使用【填充工具】，

16、選取顏色【RGB】參數(shù)為R:43,G:39,B:43，如圖3-48所示。最后單擊【確定】按鈕。加深小矩形的邊框，最后效果如圖3-49所示。圖3-47 拾色器圖3-48 拾色器圖3-49 效果圖3.2扁平化按鈕設(shè)計(jì)30.按【Ctrl+J】組合鍵【復(fù)制】“圖層3”，將復(fù)制出來的“圖層3副本”拖至“圖層4”的上方，如圖3-50所示。31.按【Ctrl】鍵的同時(shí)左鍵單擊“圖層1” ，載入選區(qū)后打開【拾色器（前景色）】窗口，選取顏色【RGB】參數(shù)為R:74,G:39,B:31，如圖3-51所示。按【Alt+Delete】組合鍵為“圖層3副本”【填充】顏色，填充效果如圖3-52所示。圖3-50 復(fù)制圖層圖

17、3-51 拾色器圖3-52 填充效果3.2扁平化按鈕設(shè)計(jì)32.點(diǎn)開【圖層】面板左上方的【混合模式】列表，并選擇【柔光】效果，如圖3-53所示。再將【不透明度】設(shè)置為65%，如圖3-54所示。33.按【Ctrl】鍵的同時(shí)左鍵點(diǎn)擊“圖層3”、“圖層4”、“圖層3副本”后，按【Ctrl+E】組合鍵將3個(gè)圖層【合并】為“圖層3副本”，如圖3-55所示。圖3-53 柔光模式圖3-54 調(diào)整不透明度圖3-55 合并圖層3.2扁平化按鈕設(shè)計(jì)34.按【Ctrl+J】快捷鍵【復(fù)制】“圖層3副本”，單擊左側(cè)工具欄中的【移動(dòng)工具】并按住【Shift】鍵將復(fù)制出來的“圖層3副本2”水平拖至右側(cè)，適當(dāng)調(diào)整位置使“圖層3

18、副本”和“圖層3副本2”中的按鈕框【對(duì)齊】，效果如圖3-56所示。35.單擊左側(cè)工具欄中的【橫排文字工具】，并選用【字心坊李林哥特體簡(jiǎn)體中文】的字體樣式，在2個(gè)按鈕框中間分別輸入文本“取消”、“確定”，并將文字【大小】改為23.57點(diǎn)，如圖3-57所示。圖3-56 調(diào)整位置圖3-57 創(chuàng)建文本3.2扁平化按鈕設(shè)計(jì)36.使用【橫排文字工具】，選擇“取消”“確定”文本所在圖層，單擊左上方文字工具欄的【拾色器】，并將顏色【RGB】調(diào)整為R:241,G:230,B:241，如圖3-58所示。37.最后單擊左側(cè)工具欄中的【移動(dòng)工具】，在“取消”“確定”的相應(yīng)文本圖層，按方向鍵移動(dòng)“取消”“確定”的位置，

19、將它們調(diào)至適當(dāng)位置即可。完成效果如圖3-59所示。圖3-58 拾色器圖3-59 完成效果圖033.3 Q版風(fēng)格按鈕設(shè)計(jì)3.3 Q版風(fēng)格按鈕設(shè)計(jì)具體操作步驟如下：1.打開Photoshop CS6軟件，單擊【文件】【新建】或按【ctrl+N】組合鍵，【新建】一個(gè)【空白文檔】，寬度和高度分別設(shè)置為1200像素、640像素，分辨率為300像素/英寸，顏色模式為RGB模式8位圖像，背景為白色，如圖3-60所示。圖3-60 新建空白文檔3.3 Q版風(fēng)格按鈕設(shè)計(jì)2.單擊【創(chuàng)建新圖層】按鈕，或按【Shift+Ctrl+Alt+N】組合鍵，單擊左側(cè)工具欄中的【圓角矩形工具】，在畫布中雙擊，在彈出的頁面設(shè)置【寬

20、度】為200像素，【高度】為100像素，【半徑】為30像素，勾選【從中心】，最后單擊【確定】按鈕。如圖3-61所示。效果如圖3-62所示。圖3-61 創(chuàng)建圓角矩形圖3-62 效果圖3.3 Q版風(fēng)格按鈕設(shè)計(jì)3.按【Ctrl+T】組合鍵進(jìn)行【自由變換】，按【Alt+Shfit】進(jìn)行【放大】，調(diào)整好圖形位置，效果如圖3-63所示。4.雙擊“圓角矩形1”的圖層，打開【圖層樣式】窗口，單擊【描邊】效果，【大小】設(shè)置為9像素，【位置】選擇外部，【混合模式】為正常，【不透明度】為100%，【填充類型】選擇漸變，勾選【與圖層對(duì)齊】按鈕，【傾斜度】為0，【縮放】為100%，如圖3-64所示。圖3-63 自由變換

21、圖3-64 描邊3.3 Q版風(fēng)格按鈕設(shè)計(jì)5.然后單擊漸變色，設(shè)置【漸變編輯色】，再雙擊【色標(biāo)】，選擇顏色參數(shù)分別為【#2f1402】 、【#5f2a06】、【#57270a】、【#57270a】、【#311807】，如圖3-65所示。6.單擊【光澤】效果，【混合模式】為正常，顏色參數(shù)設(shè)置為【#de8716】，【不透明度】為48%，【傾斜度】為19，【距離】為30像素，大小為166像素，勾選【反相】按鈕，如圖3-66所示。圖3-65 設(shè)置漸變色圖3-66 光澤3.3 Q版風(fēng)格按鈕設(shè)計(jì)7.單擊【顏色疊加】效果，【混合模式】為正常，顏色參數(shù)設(shè)置為【#783819】，【不透明度】為100%，最后單擊【

22、確定】按鈕，如圖3-67所示。8.按【Ctrl+J】組合鍵【復(fù)制】圖層，再次使用【Ctrl+T】組合鍵進(jìn)行【自由變換】，【縮放】參數(shù)設(shè)置為【W(wǎng)】：90%，【H】：85%，如圖3-68所示。圖3-67 顏色疊加圖3-68 自由變換3.3 Q版風(fēng)格按鈕設(shè)計(jì)9.雙擊“圓角矩形1副本”的圖層，打開【圖層樣式】對(duì)話框，點(diǎn)掉【描邊】按鈕，單擊【顏色疊加】效果，【混合模式】為正常，顏色參數(shù)設(shè)置為【#e7a09f】，【不透明度】為100%，如圖3-69所示。10.單擊【外發(fā)光】效果，【混合模式】為正常，【不透明度】為100%，【雜色】為3%，顏色參數(shù)設(shè)置為【#893905】,【方法】選擇精確，【擴(kuò)展】為51%

23、，大小為24像素，【范圍】設(shè)置為50%，如圖3-70所示，最后單擊【確定】按鈕。圖3-69 顏色疊加圖3-70 外發(fā)光3.3 Q版風(fēng)格按鈕設(shè)計(jì)11.單擊【新建圖層】按鈕，單擊左側(cè)工具欄中的【鋼筆工具】，進(jìn)行繪制高光點(diǎn)，將菜單欄下的【填充】顏色參數(shù)設(shè)置為【#e49c2c】，然后將圖層【不透明度】設(shè)置為30%，如圖3-71所示。圖3-71 填充工具3.3 Q版風(fēng)格按鈕設(shè)計(jì)12.單擊【新建圖層】按鈕，單擊左側(cè)工具欄中的【鋼筆工具】繪制餅干碎，然后選中所有餅干碎所在的圖層，按【Ctrl+G】組合鍵，并將圖層名更改為“點(diǎn)綴”，然后雙擊“點(diǎn)綴”圖層，打開【圖層樣式】對(duì)話框，添加【斜面和浮雕】樣式，【樣式】

24、選擇內(nèi)斜面，【方法】為平滑，【深度】設(shè)置為32%，【方向】為下，【大小】為2像素，【軟化】為1像素。設(shè)置陰影的【角度】為120度，【高度】為30度，勾選【使用全局光】按鈕?！靖吖饽Ｊ健繛闉V色，顏色參數(shù)設(shè)置為【#fdf5b6】，【不透明度】為75%?！娟幱澳Ｊ健繛檎B底，顏色參數(shù)設(shè)置為【#eaad71】，【不透明度】為75%,如圖3-72所示。圖3-72 斜面和浮雕3.3 Q版風(fēng)格按鈕設(shè)計(jì)13.勾選【等高線】效果，【范圍】設(shè)置為50%，如圖3-73所示。結(jié)合整體，調(diào)整出立體效果。14.單擊【新建圖層】按鈕，單擊左側(cè)工具欄中的【圓角矩形工具】，在畫布中雙擊，在彈出的頁面參數(shù)設(shè)置【寬度】為635像

25、素，【高度】為300像素，【半徑】為70像素，最后單擊【確定】按鈕，調(diào)整整體位置，效果如圖3-74所示。圖3-73 調(diào)整出立體效果圖3-74 創(chuàng)建圓角矩形3.3 Q版風(fēng)格按鈕設(shè)計(jì)15.用雙擊“圓角矩形2”圖層，打開【圖層樣式】對(duì)話框，單擊【內(nèi)發(fā)光】效果，【混合模式】為正常，【不透明度】為78%，【雜色】為0%，顏色參數(shù)設(shè)置為【#9b5020】,【方法】選擇柔和，【源】選擇邊緣，【阻塞】為24%，大小為13像素，【范圍】為50%，如圖3-75所示。圖3-75 內(nèi)發(fā)光3.3 Q版風(fēng)格按鈕設(shè)計(jì)16.單擊【漸變疊加】效果，【混合模式】為正常，【不透明度】為100%，選擇顏色參數(shù)分別為【#fde345】

26、 【#ed566f】，【樣式】選擇線性，勾選【與圖層對(duì)齊】按鈕，【角度】為-90，【縮放】為100%。如圖3-76所示，最后單擊【確定】按鈕,效果如圖3-77所示。圖3-77 效果圖圖3-76 漸變疊加3.3 Q版風(fēng)格按鈕設(shè)計(jì)17.單擊【新建圖層】按鈕，單擊左側(cè)工具欄中的【文字工具】打上文本內(nèi)容“充值”，使用“方正胖娃簡(jiǎn)體”，【大小】設(shè)置為50，【字符間距】調(diào)整為300，如圖3-78所示。效果如圖3-79所示。圖3-79 整體效果圖圖3-78 創(chuàng)建文本3.3 Q版風(fēng)格按鈕設(shè)計(jì)18.單擊【新建圖層】按鈕，單擊左側(cè)工具欄中的【鋼筆工具】，繪制光亮的奶油感覺，顏色參數(shù)設(shè)置為【#fbe175】，然后將

27、圖層【不透明度】設(shè)置為36%，最后把圖層移到“充值”文本圖層的下方，如圖3-80所示。圖3-80 填充工具3.3 Q版風(fēng)格按鈕設(shè)計(jì)19.單擊【新建圖層】按鈕，單擊左側(cè)工具欄中的【鋼筆工具】，繪制高光，雙擊該圖層，打開【圖層樣式】窗口。單擊【內(nèi)發(fā)光】效果，【混合模式】為正常，【不透明度】為75%，【雜色】為0%，顏色參數(shù)設(shè)置為【#ffe955】,【方法】選擇柔和，【源】選擇邊緣，【阻塞】為46%，大小為33像素，【范圍】為50%，如圖3-81所示。圖3-81 內(nèi)發(fā)光3.3 Q版風(fēng)格按鈕設(shè)計(jì)20.單擊【顏色疊加】效果，【混合模式】為正常，顏色參數(shù)設(shè)置為【#ffffff】，【不透明度】為100%，如

28、圖3-82所示。圖3-82 顏色疊加3.3 Q版風(fēng)格按鈕設(shè)計(jì)21.單擊【外發(fā)光】效果，【混合模式】為正常，【不透明度】為75%，【雜色】為0%，顏色參數(shù)設(shè)置為【#fbdd71】,【方法】選擇柔和，【擴(kuò)展】為0%，大小為5像素，【范圍】設(shè)置為50%，單擊【確定】按鈕，如圖3-83所示。最后單擊【添加圖層蒙版】按鈕，讓高光部分顯得更自然，效果如圖3-84所示。圖3-83 外發(fā)光圖3-84 效果圖3.3 Q版風(fēng)格按鈕設(shè)計(jì)22.雙擊【背景】圖層，并單擊左側(cè)工具欄中的【漸變工具】填充顏色，顏色參數(shù)設(shè)置為【#d4ac8c】和【#966a4f】，如圖3-85所示。23.Q版按鈕制作完成，最終效果如圖3-86

29、所示。圖3-86 最終效果圖圖3-85 漸變工具043.4 歐美風(fēng)格按鈕設(shè)計(jì)3.4 歐美風(fēng)格按鈕設(shè)計(jì)具體操作步驟如下：1.打開Photoshop CS6軟件，單擊【文件】【新建】或按【ctrl+N】組合鍵，【新建】一個(gè)【空白文檔】，寬度和高度分別設(shè)置為1200像素、640像素，分辨率為300像素/英寸，顏色模式為RGB模式8位圖像，背景為白色，如圖3-87所示。圖3-87 新建空白文檔3.4 歐美風(fēng)格按鈕設(shè)計(jì)2.單擊【創(chuàng)建新圖層】按鈕，創(chuàng)建“圖層1”。在菜單欄下點(diǎn)擊【視圖】，并且打開【標(biāo)尺工具】，如圖3-88所示。長按鼠標(biāo)左鍵拖出參考線。單擊左側(cè)工具欄中的【鋼筆工具】勾出內(nèi)側(cè)外形，效果如圖3-

30、89所示。圖3-88 標(biāo)尺工具圖3-89 拖出參考線3.4 歐美風(fēng)格按鈕設(shè)計(jì)3.雙擊“圖層1”圖層，打開【圖層樣式】窗口，添加【斜面和浮雕】效果，【樣式】選擇內(nèi)斜面，【方法】為平滑，【深度】設(shè)置為100%，【方向】為上，【大小】為5像素，【軟化】為0像素。設(shè)置陰影的【角度】為120度，【高度】為30度，勾選【使用全局光】按鈕?！靖吖饽Ｊ健繛闉V色，顏色參數(shù)設(shè)置為【#ffffff】，【不透明度】為75%?！娟幱澳Ｊ健繛檎B底，顏色參數(shù)設(shè)置為【#000000】，【不透明度】為75%。如圖3-90所示。圖3-90 斜面和浮雕3.4 歐美風(fēng)格按鈕設(shè)計(jì)4.在網(wǎng)絡(luò)上找一張金屬紋理貼圖，如圖3-91所示。5

31、.對(duì)其進(jìn)行【紋理疊加】，并添加圖層樣式。添加【斜面和浮雕】效果，【樣式】選擇內(nèi)斜面，【方法】為平滑，【深度】設(shè)置為100%，【方向】為上，【大小】為16像素，【軟化】為0像素。設(shè)置陰影的【角度】為120度，【高度】為30度，勾選【使用全局光】按鈕?！靖吖饽Ｊ健繛闉V色，顏色參數(shù)設(shè)置為【#ffffff】，【不透明度】為75%?！娟幱澳Ｊ健繛檎B底，顏色參數(shù)設(shè)置為【#000000】，【不透明度】為75%,如圖3-92所示。圖3-92 斜面和浮雕圖3-91 金屬紋理貼圖素材3.4 歐美風(fēng)格按鈕設(shè)計(jì)6.再單擊左側(cè)工具欄中的【鋼筆工具】繪制出如圖3-93所示的裝飾邊，并填充不同顏色。7.打開【圖層樣式】

32、窗口，添加【斜面和浮雕】效果，【樣式】選擇內(nèi)斜面，【方法】為平滑，【深度】設(shè)置為100%，【方向】為上，【大小】為13像素，【軟化】為0像素。設(shè)置陰影的【角度】為120度，【高度】為30度，勾選【使用全局光】按鈕?！靖吖饽Ｊ健繛闉V色，顏色參數(shù)設(shè)置為【#ffffff】，【不透明度】為75%?！娟幱澳Ｊ健繛檎B底，顏色參數(shù)設(shè)置為【#000000】，【不透明度】為75%。使它們有立體感，如圖3-94所示。圖3-93 填充工具圖3-94 斜面和浮雕3.4 歐美風(fēng)格按鈕設(shè)計(jì)8.單擊左側(cè)工具欄中的【鋼筆工具】，在按鈕內(nèi)側(cè)邊框勾勒出與內(nèi)側(cè)相同的形狀，并將其【不透明度】設(shè)置為60%，如圖3-95所示。圖3-95 調(diào)整不透明度3.4 歐美風(fēng)格按鈕設(shè)計(jì)9.打開【圖層樣式】窗口，單擊【外發(fā)光】效果，【混合模式】為濾色，【不透明度】為75%，【雜色】為0%，顏色參數(shù)設(shè)置為【e7fcfc】，【方法】選擇柔和，【擴(kuò)展】為6%，大小為32像素，【范圍】設(shè)置為50%，如圖3-96所示。圖3-96 外發(fā)光3.4 歐美風(fēng)格按鈕設(shè)計(jì)10.繼續(xù)單擊【漸變疊加】效果，【混合模式】為疊加，【不透明度】為100%，【樣式】選擇對(duì)稱，勾選【與圖層對(duì)齊】按鈕，【角度】為-90，【縮放】為104%。如圖3-97所示，最后單擊【確定】按鈕。圖3-97 漸