如何製作“水晶風格”的按鈕?

如何製作“水晶風格”的按鈕

由於應用物件的不同對按鈕的大小有不同的標準,這裡以“網頁中的按鈕為例”

如何製作“水晶風格”的按鈕

製作選框按鈕

開啟PS軟體,新建一個:

寬400畫素,高200畫素,72解析度的檔案;

並命名其為“背景”層。

如何製作“水晶風格”的按鈕

選擇“圓角矩形工具”

設定其半徑為“5畫素”,並將“前景色”設定為#006792

如何製作“水晶風格”的按鈕

如何製作“水晶風格”的按鈕

選擇圓角矩形工具建立“形狀”

描邊設定為“無顏色”,寬度為“215畫素”,高為“50畫素”。

在背景圖層上點選一下——建立一個“圓角矩形”。

如何製作“水晶風格”的按鈕

如何製作“水晶風格”的按鈕

雙擊“圓角矩形1”圖層,開啟其“形狀樣式”

選中“投影”並設定為:

距離“2畫素”

大小“5畫素”

關閉“全域性光”

角度“90度”

如何製作“水晶風格”的按鈕

如何製作“水晶風格”的按鈕

選中“漸變疊加”設定為:

將漸變顏色設定為“#0050a2”和“#008dea”

如何製作“水晶風格”的按鈕

如何製作“水晶風格”的按鈕

選中“描邊”設定為:

角度“90度”

填充色為“漸變色”,引數是“#002952”和“#38ace8”

如何製作“水晶風格”的按鈕

如何製作“水晶風格”的按鈕

此時的圖層和效果如下圖所示

如何製作“水晶風格”的按鈕

處理“按鈕”

選擇“圓角矩形工具”,設定前景色為白色,建立一個半徑為“5畫素”的圓角矩形。

如何製作“水晶風格”的按鈕

設定半徑為“10畫素”如下圖所示,再繪製一個圓角矩形。

注意要選中“減去頂層形狀”

如何製作“水晶風格”的按鈕

如何製作“水晶風格”的按鈕

選中“圓角矩形2”為其新增“漸變疊加”

如何製作“水晶風格”的按鈕

選中“描邊”設定其引數

填充型別為“漸變”

如何製作“水晶風格”的按鈕

設定“圓角矩形2”的圖層混合模式為“疊加”

不透明度為“50%”;

填充為“0%”。

如何製作“水晶風格”的按鈕

選擇“橢圓工具”按住“Shift”,建立一個“圓形”。

如何製作“水晶風格”的按鈕

為“圓1”圖層新增“漸變疊加”圖層樣式,引數見下圖。

如何製作“水晶風格”的按鈕

如何製作“水晶風格”的按鈕

為“圓1”圖層新增“描邊”

填充為“漸變”,引數為“#83b4de”、“#5d9bd0”和“#023363”

如何製作“水晶風格”的按鈕

如何製作“水晶風格”的按鈕

選擇“自定義形狀工具”

找到“形狀”如下圖建立一個“箭頭形狀”,並命名該圖層為“形狀1”圖層。

箭頭形狀的填充色為“白色”。

如何製作“水晶風格”的按鈕

對“形狀1”圖層新增“投影”、“內陰影”、“漸變疊加”和“描邊”,具體引數如下圖所示。

其中“漸變疊加”的顏色設定為“#240099”和“#13c5ff”

如何製作“水晶風格”的按鈕

如何製作“水晶風格”的按鈕

如何製作“水晶風格”的按鈕

如何製作“水晶風格”的按鈕

如何製作“水晶風格”的按鈕

新增上文字後,此時的圖層為下圖所示。

如何製作“水晶風格”的按鈕

最後選中“背景”圖層,新增漸變後

將除了背景外的圖層新增到一個組中,命名為“按鈕”,並複製該“組”

如何製作“水晶風格”的按鈕

選中“按鈕副本”,按下“Ctrl+T”組合鍵。

在視窗中右鍵點選“垂直翻轉”並向下平移。

如何製作“水晶風格”的按鈕

降低“按鈕副本”的不透明度,並安放至合理的位置即可。

如何製作“水晶風格”的按鈕

如何製作“水晶風格”的按鈕

相關問題答案

Have any Question?

Let us answer it!