當(dāng)前位置：首頁>ps實例教程>ps網(wǎng)頁設(shè)計>按鈕圖標(biāo)>教程內(nèi)容

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

來源：UI中國 作者：yao66298 學(xué)習(xí)：6959人次

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

先看看效果圖

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

在AI建1200px*800px畫板

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

繪制一個400px*70px矩形

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

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

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

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

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

最后繪制出這樣的圖形

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

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

開關(guān)按鈕，設(shè)計一個滑動的控件開關(guān)圖標(biāo)_m.theoat.com.cn
<點圖片看大圖>m.theoat.com.cn

學(xué)習(xí) · 提示

  • 一定要打開PS，跟著教程做一遍，做完的圖到這交作業(yè)：提交作業(yè)
  • 建議練習(xí)時，大家自己找素材，盡量不要用教程提供的素材。
  • 教程有看不懂的地方，可以到論壇發(fā)帖提問：新手求助
  • 加官方微信，隨時隨地，想學(xué)就能學(xué)：ps_bbs，或掃右側(cè)二維碼！
  • 關(guān)注我們學(xué)更多，每天都有新教程：新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論，交個作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助，請回答！