開關(guān)按鈕，設(shè)計一個滑動的控件開關(guān)圖標(biāo)(4)

設(shè)計一個滑動開關(guān)按鈕，主要利用AI和PS制作，AI負(fù)責(zé)設(shè)計外形，PS負(fù)責(zé)按鈕的質(zhì)感，有興趣的可以一起跟著教程練習(xí)一下。

先看看效果圖

在AI建1200px*800px畫板

繪制一個400px*70px矩形

邊角設(shè)置35px ,好像只有cc版本可以直接設(shè)置圓角

偏移一個矩形出來，在向里偏移3px的矩形(向里設(shè)置負(fù)數(shù))

最后繪制出這樣的圖形

然后釋放圖層導(dǎo)出psd格式(不釋放會都在一個圖層)

<點圖片看大圖>www.theoat.com.cn

背景拉個漸變e7e3dc到f7f5f3

<點圖片看大圖>

小圓拉個c2c0be到d6d6d6

<點圖片看大圖>

按鈕做描邊漸變疊加投影的處理

<點圖片看大圖>

描邊

<點圖片看大圖>

漸變疊加

投影

里面的樣式

<點圖片看大圖>

漸變疊加f28b00，e75300，db7500

內(nèi)發(fā)光

里面的一圈a4a4a4到e8d7be

<點圖片看大圖>

最外層的漸變d0d0d0到ffffff

<點圖片看大圖>

方法都差不多 細(xì)節(jié)要處理好

最好完成圖

教程到這里結(jié)束，本篇教程主要學(xué)習(xí)點是圖層樣式的的運用，大家可以利用這個方法，制作更多按鈕樣式。