開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)(5)

來源:PdadianS 作者:P大點(diǎn)S 學(xué)習(xí):25935人次

今天給大家?guī)淼氖且粋(gè)調(diào)節(jié)開關(guān)主題圖標(biāo),制作方法也是跟以往的差不多,主要是用路徑描繪形狀,然后用圖層樣式制作質(zhì)感,想學(xué)的跟著教程一起動(dòng)動(dòng)手吧。

教程源文件:http://www.tgudhdp.cn/photoshop/sucai/2016/h280529.html

我們的最終效果:

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn
<點(diǎn)圖片看大圖>www.tgudhdp.cn

 

新建一個(gè)漸變調(diào)整層,做一個(gè)45度的從 #a1a5ae 到 #eef2f3 的線性漸變。

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn
<點(diǎn)圖片看大圖>

 

光是漸變背景,感覺差了點(diǎn)什么,添加點(diǎn)質(zhì)感吧。復(fù)制一層漸變圖層,轉(zhuǎn)智能對象,添加一個(gè)雜色。

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn
<點(diǎn)圖片看大圖>

 

執(zhí)行“濾鏡—風(fēng)格化—浮雕效果”,添加一個(gè)浮雕效果。

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn
<點(diǎn)圖片看大圖>

 

將這個(gè)圖層的圖層混合模式更改為“疊加”,我們的背景就完成了。

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn
<點(diǎn)圖片看大圖>

 

畫一個(gè)圓角矩形,并添加圖層樣式。

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn
<點(diǎn)圖片看大圖>

 

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn

 

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn

 

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn

 

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn

 

復(fù)制一層這個(gè)圓角矩形,移到下層,將圖層填充修改為0,添加一個(gè)投影圖層樣式,我們來增加陰影的層次感。

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn
<點(diǎn)圖片看大圖>

 

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn

 

載入圓角矩形的選區(qū),在主體陰影下層新建一層,填充黑色,執(zhí)行一個(gè)動(dòng)感模糊,配合蒙版,我們做了一個(gè)長投影,更改圖層混合模式為“正片疊底”,圖層不透明度為33%。

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn
<點(diǎn)圖片看大圖>

 

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn

 

接下來,我們來做那個(gè)中框,這里需要注意的是圓角矩形的圓度需要對齊一下,不然看上去很難看。將圖層的填充修改為0,添加一個(gè)圖層樣式。

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn
<點(diǎn)圖片看大圖>

 

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn

 

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn

 

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn

 

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn

 

用橢圓工具畫出旋紐的主體來,添加圖層樣式。

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn
<點(diǎn)圖片看大圖>

 

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn

 

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn

 

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn

 

跟剛才給圓角矩形做陰影一樣,復(fù)制一層,移到下層,將圖層填充修改為0,添加一個(gè)投影圖層樣式。

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn
<點(diǎn)圖片看大圖>

 

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn

 

同樣的,跟剛才一樣,利用動(dòng)感模糊做個(gè)長投影,適當(dāng)調(diào)整不透明度。

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn
<點(diǎn)圖片看大圖>

 

接下來,用橢圓工具畫出中間的小圓,添加圖層樣式。

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn
<點(diǎn)圖片看大圖>

 

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn

 

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn

 

添加我們的LOGO,同時(shí)添加一個(gè)圖層樣式,黑色內(nèi)陰影,白色投影。

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn
<點(diǎn)圖片看大圖>

 

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn

 

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn

 

下面,我們畫刻度。畫個(gè)矩形,利用Ctrl+Alt+Shift+T,得到一圈刻度。(我想這個(gè)不用解釋吧),依照我們的設(shè)定,刻度應(yīng)該位于旋紐的下層,因?yàn)槲覀兘o旋紐設(shè)置了投影,而陰影也應(yīng)該對刻度起作用,所以我將刻度置于旋紐投影的下層,刻度顏色為#cececf,添加一個(gè)跟剛才我們給LOGO設(shè)置的圖層樣式一樣的樣式,黑色的內(nèi)陰影,白色的投影,透明度自己把握下,我們的效果如下:

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn
<點(diǎn)圖片看大圖>

 

用橢圓工具畫一個(gè)小圓,做旋紐的指示位置的標(biāo)記。顏色隨大家喜歡了,我自己用的顏色是#77e4ff,同樣的添加一個(gè)黑色的內(nèi)陰影,白色的投影。

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn
<點(diǎn)圖片看大圖>

 

接下來,添加文字,這個(gè)沒什么好說的,我的建議是一個(gè)文字一層,因?yàn)槭苄~陰影的影響,在陰影位置的文字,它看起來,相應(yīng)的應(yīng)該深一些,比如圖中的MIN、0、1應(yīng)該比其它的深一些。

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn
<點(diǎn)圖片看大圖>

 

我們的最終效果:

 

開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)_www.tgudhdp.cn
<點(diǎn)圖片看大圖>

 

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

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
杰尼安2017-07-30 01:56
作業(yè)。!我的作業(yè):
荊州才子2017-04-05 05:42
交作業(yè)
荊州才子2017-04-05 05:04
交作業(yè)
photoshop2017-01-20 02:36
這個(gè)做的好呀
photoshop2017-01-20 02:01
我要成為高級UI設(shè)計(jì)師!。鑲栫惔 的原帖:這個(gè)做的好呀
肖琴2017-01-19 04:51
我的那個(gè)點(diǎn)原來做的太小了
肖琴2017-01-19 04:50
我要成為高級UI設(shè)計(jì)師。!
肖琴2017-01-19 03:42
圖片是怎么上傳上去的呢
肖琴2017-01-19 04:01
我要成為高級UI設(shè)計(jì)師!。鑲栫惔 的原帖:我的那個(gè)點(diǎn)原來做的太小了
肖琴2017-01-19 04:01
我要成為高級UI設(shè)計(jì)師。!
肖琴2017-01-19 03:01
圖片是怎么上傳上去的呢
何夜秋來2016-10-23 05:14
不錯(cuò)不錯(cuò),我是小白,啥都不會(huì),第一次做這個(gè)
何夜秋來2016-10-23 04:16
選擇一個(gè)按鈕選區(qū),復(fù)制圖層,填充為黑色,取消選區(qū),在點(diǎn)新的這個(gè)選區(qū),然后動(dòng)感模糊,在弄一個(gè)蒙版,把右上方的用選區(qū)填充為黑色,然后調(diào)節(jié)投影的透明度就好啦
何夜秋來2016-10-23 05:10
不錯(cuò)不錯(cuò),我是小白,啥都不會(huì),第一次做這個(gè)
何夜秋來2016-10-23 04:10
請問一下~~那個(gè)~長投影是怎么做出來的。??我不會(huì)用蒙版做 鍏斿瓙 的原帖:選擇一個(gè)按鈕選區(qū),復(fù)制圖層,填充為黑色,取消選區(qū),在點(diǎn)新的這個(gè)選區(qū),然后動(dòng)感模糊,在弄一個(gè)蒙版,把右上方的用選區(qū)填充為黑色,然后調(diào)節(jié)投影的透明度就好啦

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

網(wǎng)友求助,請回答!