ps設(shè)計(jì)粉色漂亮播放器按鈕(5)
最終效果
具體的制作步驟如下:
Ctrl+N新建畫布,大小為3000×2380像素,分辨率300dpi,點(diǎn)擊確定。
新建組,命名為"background",在組內(nèi)新建圖層,在工具欄選擇漸變工具,模式為徑向漸變,單擊漸變條,在背景圖層上由上往下拉動(dòng)光標(biāo)填充背景,如圖。
單擊形狀工具,選擇圓角矩形工具,將半徑設(shè)置為25,在畫布中央繪制一個(gè)長條狀的圓角矩形,填充為白色,如圖。
Ctrl+J復(fù)制此圖層,單擊移動(dòng)工具,按鍵盤的"↑"鍵將副本層向上移動(dòng)3像素,雙擊圖層添加圖層樣式(fx),勾選"漸變疊加"效果如圖。
新建組1,并在組1內(nèi)新建圖層。
單擊形狀工具里的圓角矩形工具,將半徑設(shè)置為25像素,按住shift鍵在矩形框內(nèi)繪制一個(gè)圓角矩形,為該圖層添加圖層樣式。
Ctrl+J復(fù)制圖層,單擊移動(dòng)工具,向下移動(dòng)3像素,并為圖層添加圖層樣式,勾選"斜面和浮雕""內(nèi)發(fā)光""漸變疊加",顏色如圖。
注意這里"光澤等高線"需要調(diào)整,調(diào)整成如圖的效果。
單擊鋼筆工具,選擇"形狀"填充顏色設(shè)置為#7d1821,繪制形狀如圖,將"填充"設(shè)置為78%,畫好后單擊右側(cè)的屬性選項(xiàng)卡,將"羽化"值設(shè)置為16像素。
Ctrl+J復(fù)制圖層,執(zhí)行"編輯>變換路徑>水平翻轉(zhuǎn)",將復(fù)制的形狀移動(dòng)到矩形右邊的相應(yīng)位置,使左右對(duì)稱,如圖。
單擊形狀工具選擇自定形狀工具,單擊形狀右邊的箭頭,選擇已經(jīng)定義好的squircle形狀,按住shift鍵在紅色矩形中央繪制一個(gè)squircle,用移動(dòng)工具放置在中央,按alt+shift鍵同時(shí)拖動(dòng)變換控件調(diào)整大小。添加圖層樣式,勾選"漸變疊加""外發(fā)光"。如圖。
這里的squircle精確的形狀無法用photoshop繪制完成,可以用AI繪制,或者在網(wǎng)上直接下載形狀素材,這里就不再多講啦~做不出來的同學(xué)可以換一種形狀做。
新建圖層,單擊鋼筆工具,在按鈕上繪制高光形狀如圖。右鍵>填充路徑,選擇顏色填充,填充為白色,按"Enter"確認(rèn)
為該圖層添加蒙版
單擊蒙版,選擇漸變填充工具,漸變顏色為由白到黑,選擇對(duì)稱漸變
從路徑中央拖動(dòng)光標(biāo)到右邊,蒙版效果如圖
"填充"不透明度設(shè)為40%
單擊鋼筆工具,在面板上方勾選形狀
用鋼筆工具繪制形狀如圖,畫好后組合路徑,并為圖層添加圖層樣式,如圖。
紅色按鈕繪制完成啦~
在掌握了基本要領(lǐng)以后,接下來繪制另外三個(gè)奶白色的按鈕,這里具體的步驟不再多講。
復(fù)制組1的紅色按鈕,將組命名為組2
選擇組2的最上面一層,刪除圖層
更改圖層的"漸變疊加"顏色以及"斜面和浮雕"的陰影顏色,其他參數(shù)相同,做出如圖效果。
(PS:顏色的選用要自己多多觀察,這樣才能調(diào)出合適的配色)
最后,在按鈕中央繪制圓角三角形,并添加圖層樣式,改變"漸變填充"顏色和"斜面和浮雕"陰影的顏色,其他參數(shù)基本相同。
用同樣的方法繪制剩下的兩個(gè)按鈕,效果如圖。
最后,在組1的下面新建組,命名為"shadow",為按鈕統(tǒng)一添加投影。
在"shadow"層內(nèi)新建圖層,單擊選擇工具繪制一圓形選區(qū),使用漸變工具,選擇徑向漸變,將漸變條設(shè)置顏色如圖,在選區(qū)內(nèi)由中心向邊緣拖動(dòng)光標(biāo),填充選區(qū),如圖。
Ctrl+D取消選擇,執(zhí)行濾鏡>模糊>動(dòng)感模糊,角度設(shè)為90,距離為200。移動(dòng)調(diào)整投影的位置,如圖。
使用矩形選框工具繪制選區(qū),如圖。
單擊圖層下方的蒙版工具,圖層自動(dòng)為選區(qū)添加蒙版,如圖。單擊圖層上的蒙版,執(zhí)行濾鏡>模糊>高斯模糊,半徑為10,如圖。
修改圖層混合模式,改為"正片疊底",最后,調(diào)整該層的不透明度為63%左右。效果如圖。
復(fù)制幾個(gè)投影圖層出來,分別放在其他3個(gè)按鈕下面,最終效果如圖。
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- Photoshop制作網(wǎng)頁搜索條
- PS教程:設(shè)計(jì)導(dǎo)航鼠標(biāo)懸停狀態(tài)小效果
- Photoshop精細(xì)制作Vista風(fēng)格網(wǎng)站導(dǎo)航條
- Photoshop制作網(wǎng)站導(dǎo)航圖
- 陰影效果,教你制作各類陰影教程
- Photoshop教程:像素化細(xì)節(jié)設(shè)計(jì)技巧
- 用ps制作豎列導(dǎo)航
- 界面設(shè)計(jì),設(shè)計(jì)音樂播放器界面圖片
- Photoshop設(shè)計(jì)網(wǎng)站用的藍(lán)色導(dǎo)航圖框
- banner教程,用ps制作960*90的廣告圖片