下載吧 - 綠色安全的游戲和軟件下載中心

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > UI教程,頹廢機械風格UI圖標教程

UI教程,頹廢機械風格UI圖標教程

時間:2024-03-07 18:01作者:下載吧人氣:20

繼續(xù)帶來一大波圖標制作教程,這次帶來的風格是頹廢機械風格跟不規(guī)則形狀風格,本教程依舊提供源文件psd下載,網(wǎng)盤鏈接下載:http://vdisk.weibo.com/s/cQKtf42BUtif ,希望大家多多支持!另外歡迎上傳交作業(yè)啦~

先看效果:
UI教程,頹廢機械風格UI圖標教程

UI教程,頹廢機械風格UI圖標教程

Step01:點擊 — 【文件】— 【新建】(快捷鍵Ctrl+N)新建一個新的圖像,命名好并把寬度設(shè)置為800px,高度為600px,分辨率為72dpi,然后點擊確定,記得順手保存文件(快捷鍵Ctrl+S)。

UI教程,頹廢機械風格UI圖標教程

Step02:選擇【圓角矩形工具】(快捷鍵U,可按Shift+U切換),在畫布點擊【創(chuàng)建圓角矩形】彈出層,設(shè)置寬度為180px,高度為180px,半徑20px,并勾選【從中心】,然后點擊確定;

UI教程,頹廢機械風格UI圖標教程

Step03:重命名圖層為di,右鍵設(shè)置圖層樣式:

【斜面和浮雕】:樣式:內(nèi)斜面、方式:平滑、深度100%、方向:上、大小3、軟化1、陰影角度90°、勾選【使用全局光】、高度30°、高光模式顏色#dedede、陰影模式顏色#262626、

【漸變疊加】:線性漸變,色值從上到下為 #333333 — #c6c6c6,角度為90°;

復制di圖層重命名為di_bian,選擇右鍵清除圖層樣式,填充顏色改為# 616161;按住Ctrl鍵點擊圖層載入選區(qū),向上移動兩像素,再反向選區(qū)(快捷鍵Shift+Ctrl+I),再點擊【圖層】窗口的【添加圖層蒙版】;

UI教程,頹廢機械風格UI圖標教程

Step04:制作殘舊金屬紋理部分,這一步采用的是素材圖片嵌入和筆刷繪制,可在網(wǎng)上搜索關(guān)鍵字:殘舊、頹廢、噴濺、金屬等字眼下載相關(guān)素材,ps:本教程所用到的圖片跟筆刷連同圖標源文件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)試疊加,以實際效果為主;

UI教程,頹廢機械風格UI圖標教程

Step05:制作金屬破損處,選擇【鋼筆工具】(快捷鍵P,可按Shift+P切換),繪制幾個不規(guī)則多邊形,形狀自由發(fā)揮自定,配置金屬紋理背景,顏色深點即可,此處舉例:填充顏色#777777,設(shè)置圖層樣式:

【內(nèi)陰影】:正片疊底,填充顏色#464646,角度90°,距離1px,阻塞0,大小1px;

再復制圖層載入選區(qū),填充顏色為#FFFFFF,向上移動一像素,反向選區(qū)(快捷鍵Shift+Ctrl+I),再點擊【圖層】窗口的【添加圖層蒙版】。其他破損處也是使用這種操作方法;

UI教程,頹廢機械風格UI圖標教程

Step06:復制圖層di重命名為nei_di,點擊【編輯】—【自由變換路徑】(快捷鍵Ctrl+T),縮小90%(記得點擊【保持長寬比】),右鍵清除圖層樣式,選擇【混合選項】設(shè)置:

【漸變疊加】:線性漸變,色值從上到下為 #4b4b4b — #98988d,角度為90°;

【投影】:正片疊底,顏色#202020,角度90°,距離5px,擴展0,大小8px;

UI教程,頹廢機械風格UI圖標教程

Step07:繪制備份圖標,選擇【橢圓工具】(快捷鍵U,可按Shift+U切換),在畫布上按住Shift鍵畫一個正圓,再選擇【橢圓工具】,并選擇路徑【減去頂層形狀】,畫一個圓環(huán),選擇【鋼筆工具】(快捷鍵P,可按Shift+P切換),并選擇路徑【合并形狀】,在圓環(huán)右邊處畫一個三角形,最后再選【鋼筆工具】,并選擇路徑【減去頂層形狀】,畫一個缺口,完成備份圖標,重命名為backup,填充顏色#202020,設(shè)置圖層樣式:

【描邊】:大小3px,外部,線性漸變,色值從上到下為 #787878 — #484848,角度為90°;

【內(nèi)陰影】:正片疊底,顏色#474747,角度90°,距離3px,阻塞0,大小3px;

再復制圖層backup重命名為backup_bian,載入選區(qū),向上移動一像素,反向選區(qū)(快捷鍵Shift+Ctrl+I),再點擊【圖層】窗口的【添加圖層蒙版】,設(shè)置圖層樣式:

【漸變疊加】:線性漸變,色值從上到下為 #282828 — #aeaeae,角度為90°;

UI教程,頹廢機械風格UI圖標教程

Step08:繪制螺絲孔:選擇【橢圓工具】,在畫布上按住Shift鍵畫一個小正圓,大小自定適合即可,設(shè)置圖層樣式:

【描邊】:大小2px,外部,線性漸變,色值從上到下為 #929292 — #3b3b3b,角度為90°;

【漸變疊加】:線性漸變,色值從上到下為 #353535 — #0c0c0c,角度為90°;

復制圖層(快捷鍵Ctrl+J或者選擇【移動工具】按住alt鍵拖動),復制四個小圓分別放在四個角;

繪制插槽:選擇【矩形工具】(快捷鍵U,可按Shift+U切換),畫一個長方形,大小自定適合即可,設(shè)置圖層樣式:

【描邊】:大小1px,內(nèi)部,顏色#606060;

【內(nèi)陰影】:正片疊底,顏色#2c1d02,角度90°,距離1px,阻塞0,大小5px;

【漸變疊加】:線性漸變,色值從上到下為 #e5c511 — #644200,角度為90°;

最后復制六個圖層,并排放在底部且居中排列;

UI教程,頹廢機械風格UI圖標教程

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)試疊加,以實際效果為主,完成圖標繪制;

END:根據(jù)自己喜愛跟感覺調(diào)試破舊金屬紋理,完成其他圖標。

標簽yu0910,UI教程,ps網(wǎng)頁設(shè)計,style,圖標,制作

相關(guān)下載

查看所有評論+

網(wǎng)友評論

網(wǎng)友
您的評論需要經(jīng)過審核才能顯示

公眾號

主站蜘蛛池模板: 日本护士激情波多野结衣| 韩国毛片在线观看| 99久久精品这里只有精品| 美女尿口免费影视app| 欧美性a欧美在线| 国产高清一级毛片| 亚洲欧美日韩精品高清| 99久久er这里只有精品18| 波多野结衣视频全集| 夜来香免费观看视频在线| 四虎免费影院ww4164h| 丰满少妇人妻久久久久久| 车上做好紧我太爽了再快点| 日本最大色倩网站www| 国产丰满麻豆videossexhd| 久久99精品久久久久久水蜜桃| 91精品一区二区| 精品无人乱码一区二区三区 | 亚洲日韩第一页| 2一8一teesex| 欧洲mv日韩mv国产mv| 国产色在线视频| 亚洲欧洲精品成人久久曰| 女人18毛片水真多国产| 最近中文字幕在线mv视频在线 | 免费人成在线观看网站| avav片在线看| 欧美精品久久天天躁| 国产福利小视频在线| 么公的好大好深视频好爽想要| 91精品国产色综合久久不| 欧美日韩一区二区在线视频| 国产精品18久久久久久麻辣 | 欧美高清精品一区二区| 国产精品久久久久久久| 久久精品国产久精国产| 色一情一乱一伦色一情一乱一伦| 怡红院在线观看视频| 亚洲熟妇中文字幕五十中出| 亚洲制服欧美自拍另类| 日本xxxxx高清视频|