扣丁學(xué)堂UI培訓(xùn)之設(shè)計炫酷鐘表圖標(biāo)詳解
2018-05-14 10:09:15
1481瀏覽
今天扣丁學(xué)堂UI設(shè)計視頻教程通過PS制作一款炫酷的機械圖標(biāo),圖標(biāo)教程我們做了很多很多,用到的依舊是我們的圖層樣式,萬變不離其宗,風(fēng)格各有各的樣式,但是效果呈現(xiàn)的不一樣,同學(xué)一起來學(xué)習(xí)一下吧。
效果圖:
操作步驟:
Step01
點擊—【文件】—【新建】(快捷鍵Ctrl+N)新建一個新的圖像,命名好并把寬度設(shè)置為800px,高度為600px,分辨率為72dpi,然后點擊確定,記得順手保存文件(快捷鍵Ctrl+S)。
Step02
選擇【圓角矩形工具】(快捷鍵U,可按Shift+U切換),在畫布點擊【創(chuàng)建圓角矩形】彈出層,設(shè)置寬度為180px,高度為180px,半徑20px,并勾選【從中心】,然后點擊確定;
Step03
重命名圖層為di,右鍵設(shè)置圖層樣式:
【斜面和浮雕】:樣式:內(nèi)斜面、方式:平滑、深度100%、方向:上、大小3、軟化1、陰影角度90°、勾選【使用全局光】、高度30°、高光模式顏色#dedede、陰影模式顏色#262626、
【漸變疊加】:線性漸變,色值從上到下為#333333—#c6c6c6,角度為90°;
復(fù)制di圖層重命名為di_bian,選擇右鍵清除圖層樣式,填充顏色改為#616161;按住Ctrl鍵點擊圖層載入選區(qū),向上移動兩像素,再反向選區(qū)(快捷鍵Shift+Ctrl+I),再點擊【圖層】窗口的【添加圖層蒙版】;
Step04
制作殘舊金屬紋理部分,這一步采用的是素材圖片嵌入和筆刷繪制,可在網(wǎng)上搜索關(guān)鍵字:殘舊、頹廢、噴濺、金屬等字眼下載相關(guān)素材,ps:本教程所用到的圖片跟筆刷連同圖標(biāo)源文件psd均有提供(見附件下載或者網(wǎng)盤鏈接),筆刷如何載入請自行百度,謝謝!
金屬紋理主要是不斷通過設(shè)置圖層的混合模式和不透明度的參數(shù)值疊加調(diào)試而成的,本教程調(diào)試后的參數(shù)如下:
01采用素材圖片Rust_5.JPG,混合模式:正片疊底,不透明度70%;
02使用筆刷,顏色#8c8c8c,不透明度30%;
03采用素材圖片紋理.png,混合模式:變暗,不透明度30%;
這一步可自由發(fā)揮,自己覺得金屬圖片哪塊可以作為紋理即用就可,參數(shù)也可自己調(diào)試疊加,以實際效果為主;
Step05
制作金屬破損處,選擇【鋼筆工具】(快捷鍵P,可按Shift+P切換),繪制幾個不規(guī)則多邊形,形狀自由發(fā)揮自定,配置金屬紋理背景,顏色深點即可,此處舉例:填充顏色#777777,設(shè)置圖層樣式:
【內(nèi)陰影】:正片疊底,填充顏色#464646,角度90°,距離1px,阻塞0,大小1px;
再復(fù)制圖層載入選區(qū),填充顏色為#FFFFFF,向上移動一像素,反向選區(qū)(快捷鍵Shift+Ctrl+I),再點擊【圖層】窗口的【添加圖層蒙版】。其他破損處也是使用這種操作方法;
Step06
復(fù)制圖層di重命名為nei_di,點擊【編輯】—【自由變換路徑】(快捷鍵Ctrl+T),縮小90%(記得點擊【保持長寬比】),右鍵清除圖層樣式,選擇【混合選項】設(shè)置:
【漸變疊加】:線性漸變,色值從上到下為#4b4b4b—#98988d,角度為90°;
【投影】:正片疊底,顏色#202020,角度90°,距離5px,擴展0,大小8px;
Step07
繪制備份圖標(biāo),選擇【橢圓工具】(快捷鍵U,可按Shift+U切換),在畫布上按住Shift鍵畫一個正圓,再選擇【橢圓工具】,并選擇路徑【減去頂層形狀】,畫一個圓環(huán),選擇【鋼筆工具】(快捷鍵P,可按Shift+P切換),并選擇路徑【合并形狀】,在圓環(huán)右邊處畫一個三角形,最后再選【鋼筆工具】,并選擇路徑【減去頂層形狀】,畫一個缺口,完成備份圖標(biāo),重命名為backup,填充顏色#202020,設(shè)置圖層樣式:
【描邊】:大小3px,外部,線性漸變,色值從上到下為#787878—#484848,角度為90°;
【內(nèi)陰影】:正片疊底,顏色#474747,角度90°,距離3px,阻塞0,大小3px;
再復(fù)制圖層backup重命名為backup_bian,載入選區(qū),向上移動一像素,反向選區(qū)(快捷鍵Shift+Ctrl+I),再點擊【圖層】窗口的【添加圖層蒙版】,設(shè)置圖層樣式:
【漸變疊加】:線性漸變,色值從上到下為#282828—#aeaeae,角度為90°;
Step08
繪制螺絲孔:選擇【橢圓工具】,在畫布上按住Shift鍵畫一個小正圓,大小自定適合即可,設(shè)置圖層樣式:
【描邊】:大小2px,外部,線性漸變,色值從上到下為#929292—#3b3b3b,角度為90°;
【漸變疊加】:線性漸變,色值從上到下為#353535—#0c0c0c,角度為90°;
復(fù)制圖層(快捷鍵Ctrl+J或者選擇【移動工具】按住alt鍵拖動),復(fù)制四個小圓分別放在四個角;
繪制插槽:選擇【矩形工具】(快捷鍵U,可按Shift+U切換),畫一個長方形,大小自定適合即可,設(shè)置圖層樣式:
【描邊】:大小1px,內(nèi)部,顏色#606060;
【內(nèi)陰影】:正片疊底,顏色#2c1d02,角度90°,距離1px,阻塞0,大小5px;
【漸變疊加】:線性漸變,色值從上到下為#e5c511—#644200,角度為90°;
最后復(fù)制六個圖層,并排放在底部且居中排列;
Step09
制作內(nèi)部框殘舊金屬紋理部分,一樣是采用素材圖片嵌入和筆刷繪制;
金屬紋理主要是不斷通過設(shè)置圖層的混合模式和不透明度的參數(shù)值疊加調(diào)試而成的,本教程調(diào)試后的參數(shù)如下:
01采用素材圖片Rust_4.JPG,混合模式:強光,不透明度15%;
02使用筆刷,顏色#181818,混合模式:疊加,不透明度40%;
03使用筆刷,顏色#3f311d,混合模式:疊加,不透明度50%;
這一步可自由發(fā)揮,自己覺得金屬圖片哪塊可以作為紋理即用就可,參數(shù)也可自己調(diào)試疊加,以實際效果為主,完成圖標(biāo)繪制;
以上就是關(guān)于扣丁學(xué)堂UI培訓(xùn)之設(shè)計炫酷鐘表圖標(biāo)的全部內(nèi)容,希望大家喜歡,最后想要了解更多請關(guān)注扣丁學(xué)堂UI培訓(xùn)官網(wǎng)、微信等平臺,扣丁學(xué)堂IT職業(yè)在線學(xué)習(xí)教育平臺為您提供權(quán)威的UI設(shè)計視頻教程系統(tǒng),通過千鋒扣丁學(xué)堂金牌講師在線錄制UI視頻教程內(nèi)容,讓你快速掌握UI從入門到精通UI設(shè)計實戰(zhàn)技能。需要PS軟件伙伴們,免費發(fā)給你,扣丁學(xué)堂UI交互設(shè)計交流群:568096113。
【關(guān)注微信公眾號獲取更多學(xué)習(xí)資料】
查看更多關(guān)于“ui設(shè)計資訊”的相關(guān)文章>>
標(biāo)簽:
UI設(shè)計視頻
UI培訓(xùn)UI設(shè)計師
UI視頻教程
UI在線教程
Photoshop
ps
UI設(shè)計培訓(xùn)