開關(guān)圖標(biāo),設(shè)計(jì)一個(gè)調(diào)節(jié)開關(guān)圖標(biāo)(5)
今天給大家?guī)淼氖且粋(gè)調(diào)節(jié)開關(guān)主題圖標(biāo),制作方法也是跟以往的差不多,主要是用路徑描繪形狀,然后用圖層樣式制作質(zhì)感,想學(xué)的跟著教程一起動(dòng)動(dòng)手吧。
教程源文件:http://www.tgudhdp.cn/photoshop/sucai/2016/h280529.html
我們的最終效果:
新建一個(gè)漸變調(diào)整層,做一個(gè)45度的從 #a1a5ae 到 #eef2f3 的線性漸變。
光是漸變背景,感覺差了點(diǎn)什么,添加點(diǎn)質(zhì)感吧。復(fù)制一層漸變圖層,轉(zhuǎn)智能對象,添加一個(gè)雜色。
執(zhí)行“濾鏡—風(fēng)格化—浮雕效果”,添加一個(gè)浮雕效果。
將這個(gè)圖層的圖層混合模式更改為“疊加”,我們的背景就完成了。
畫一個(gè)圓角矩形,并添加圖層樣式。
復(fù)制一層這個(gè)圓角矩形,移到下層,將圖層填充修改為0,添加一個(gè)投影圖層樣式,我們來增加陰影的層次感。
載入圓角矩形的選區(qū),在主體陰影下層新建一層,填充黑色,執(zhí)行一個(gè)動(dòng)感模糊,配合蒙版,我們做了一個(gè)長投影,更改圖層混合模式為“正片疊底”,圖層不透明度為33%。
接下來,我們來做那個(gè)中框,這里需要注意的是圓角矩形的圓度需要對齊一下,不然看上去很難看。將圖層的填充修改為0,添加一個(gè)圖層樣式。
用橢圓工具畫出旋紐的主體來,添加圖層樣式。
跟剛才給圓角矩形做陰影一樣,復(fù)制一層,移到下層,將圖層填充修改為0,添加一個(gè)投影圖層樣式。
同樣的,跟剛才一樣,利用動(dòng)感模糊做個(gè)長投影,適當(dāng)調(diào)整不透明度。
接下來,用橢圓工具畫出中間的小圓,添加圖層樣式。
添加我們的LOGO,同時(shí)添加一個(gè)圖層樣式,黑色內(nèi)陰影,白色投影。
下面,我們畫刻度。畫個(gè)矩形,利用Ctrl+Alt+Shift+T,得到一圈刻度。(我想這個(gè)不用解釋吧),依照我們的設(shè)定,刻度應(yīng)該位于旋紐的下層,因?yàn)槲覀兘o旋紐設(shè)置了投影,而陰影也應(yīng)該對刻度起作用,所以我將刻度置于旋紐投影的下層,刻度顏色為#cececf,添加一個(gè)跟剛才我們給LOGO設(shè)置的圖層樣式一樣的樣式,黑色的內(nèi)陰影,白色的投影,透明度自己把握下,我們的效果如下:
用橢圓工具畫一個(gè)小圓,做旋紐的指示位置的標(biāo)記。顏色隨大家喜歡了,我自己用的顏色是#77e4ff,同樣的添加一個(gè)黑色的內(nèi)陰影,白色的投影。
接下來,添加文字,這個(gè)沒什么好說的,我的建議是一個(gè)文字一層,因?yàn)槭苄~陰影的影響,在陰影位置的文字,它看起來,相應(yīng)的應(yīng)該深一些,比如圖中的MIN、0、1應(yīng)該比其它的深一些。
我們的最終效果:
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- 開關(guān)按鈕
- P大點(diǎn)S
- ps網(wǎng)頁設(shè)計(jì)
- 開關(guān)圖標(biāo)
- UI教程
學(xué)習(xí) · 提示
選擇一個(gè)按鈕選區(qū),復(fù)制圖層,填充為黑色,取消選區(qū),在點(diǎn)新的這個(gè)選區(qū),然后動(dòng)感模糊,在弄一個(gè)蒙版,把右上方的用選區(qū)填充為黑色,然后調(diào)節(jié)投影的透明度就好啦請問一下~~那個(gè)~長投影是怎么做出來的。??我不會(huì)用蒙版做 鍏斿瓙 的原帖:
相關(guān)教程
- UI圖標(biāo)教程,用PS繪制一個(gè)獨(dú)特的漸變風(fēng)格播放器圖標(biāo)
- UI圖標(biāo)教程,用PS制作一個(gè)音樂圖標(biāo)
- 圖標(biāo)設(shè)計(jì),用PS繪制索尼PSP圖標(biāo)
- UI圖標(biāo)教程,在PS中繪制一枚炫酷的鐘表圖標(biāo)
- UI圖標(biāo)教程,用ps制作浪漫的冰晶圖標(biāo)
- 圖標(biāo)制作,用PS繪制一款簡約風(fēng)格的解密游戲圖標(biāo)
- 插畫制作,用PS繪制簡約沙漏插畫效果圖片
- 圖案設(shè)計(jì),用PS快速制作一個(gè)心形圖案
- 手機(jī)圖標(biāo),用PS繪制華為手機(jī)圖標(biāo)
- 相機(jī)圖標(biāo),用UI制作簡單的彩虹相機(jī)圖標(biāo)
推薦教程
- ps短信風(fēng)格APP圖標(biāo)
- 手機(jī)圖標(biāo),設(shè)計(jì)錘子寫實(shí)主題UI圖標(biāo)
- 利用PS CS6的新功能保持icon細(xì)節(jié)飽滿完
- UI圖標(biāo)教程,在PS中繪制一枚炫酷的鐘表圖標(biāo)
- UI教程,ps設(shè)計(jì)擬物瀏覽器圖標(biāo)。
- UI教程,設(shè)計(jì)漱口用的杯子圖標(biāo)
- ps繪制夾著鋼筆的紅色記事本圖標(biāo)教程
- UI教程,ps設(shè)計(jì)上傳主題icon圖標(biāo)
- UI知識,圖標(biāo)設(shè)計(jì)初階要先型
- ps設(shè)計(jì)一個(gè)真實(shí)的App圖標(biāo)教程