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

          軟件下載吧

          當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          時間:2024-03-08 12:01作者:下載吧人氣:32

          教程講解十分詳細,主要分幾個部分完成,分別是設計底紋,然后通過圖層樣式制作金屬按鈕,最后加上圖案即可完成。

          最終效果:

          UI教程,設計金屬質感的UI圖標教程
          www.16xx8.com

          下面是教程詳細步驟,大家一起來學習。

          老規矩,先來分析一下。這里我們主要分為二個部分:底座、圖標,其它問題都不大,主要是底部框架部分、需要用到多個圖層來表現圖標的立體感,騷年分析完已經成功一半了,離成功還會遠么,噢耶?。。?/p>

          UI教程,設計金屬質感的UI圖標教程

          步驟一:

          首先新建畫布800px*800px畫布,命名為質感圖標,為背景添加圖層樣式。

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          步驟二:

          使用圓角矩形工具、繪制一個450px*540px圓角半徑為90px底座,并為它添加圖層樣式。

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          步驟三:

          高逼格的底座一下就出來了,有木有?。?!接下來繼續使用圓角矩形工具、繪制一個390px*390px圓角半徑為90px的形狀,命名為底座-2,并為它添加圖層樣式。

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          步驟四:

          為底座-2添加金屬拉絲效果,新建圖層填充#9f9f9f,添加雜色執行動感模糊命令,并創建剪貼蒙版,調整不透明度。

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          步驟五:

          復制金屬拉絲,ctrl+t旋轉90度,并依次創建剪貼蒙版。

          UI教程,設計金屬質感的UI圖標教程

          步驟六:

          現在我們繪制內框位置,繪制兩個圓角矩形,大小分別為450px,390px圓角半徑為90px,合并形狀選擇路徑選擇工具,選中內框減去頂層形狀,并添加圖層樣式。

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          步驟七:

          我們為內框添加金屬拉絲效果吧,復制內框圖層清除圖層樣式。獲取選區其它操作方式如上,并調整不透明度。

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          步驟八:

          現在繼續繪制一個頂部漸變,選擇圓角矩形工具繪制一個390px圓角半徑為90px的形狀,繪制完成后復制,命名為頂部漸變。

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          步驟九:

          將頂部漸變復制向下移動15px,并合并兩個形狀,選擇路徑選擇工具,選中內框減去頂層形狀,將底座漸變疊加圖層樣式復制,移動色標位置即可,并添加投影圖層樣式。

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          步驟十:

          現在我們來繪制最后一個圖標吧,用自定義形狀工具繪制一個172px的形狀,并旋轉45度,最后添加圖層樣式就完成這個案例了哦。

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          UI教程,設計金屬質感的UI圖標教程

          教程到此就結束了,大家可以用這個方法制作其它金屬紋理的圖案,有興趣的同學可以動手嘗試一下,歡迎投稿分享你的經驗。

          標簽全棧UI筆記,UI教程,ps網頁設計,金屬質感,UI圖標教程

          相關下載

          查看所有評論+

          網友評論

          網友
          您的評論需要經過審核才能顯示

          公眾號

          主站蜘蛛池模板: 精品久久国产一区二区三区香蕉| 国产一区二区草草影院| 一区二区三区精品高清视频免费在线播放| 无码AV动漫精品一区二区免费| 亚洲一区二区三区久久久久| 亚洲乱码国产一区三区| 精品无码综合一区| 四虎永久在线精品免费一区二区 | 内射白浆一区二区在线观看| 国产日韩一区二区三区在线播放| 台湾无码一区二区| 午夜福利一区二区三区高清视频| 国产午夜毛片一区二区三区| 国产精品无码不卡一区二区三区| 国产在线观看91精品一区| 精品国产一区二区三区久久影院| 欧美激情国产精品视频一区二区| 久久人做人爽一区二区三区| 蜜臀AV免费一区二区三区| 91精品国产一区| 男插女高潮一区二区| 精品久久久久久无码中文字幕一区| 无码国产精品一区二区免费 | 亚洲一区精彩视频| 亚洲一区二区三区播放在线| 亚洲日本久久一区二区va| 无码国产精品一区二区免费| 国产小仙女视频一区二区三区| 亚洲AV无码一区二区三区鸳鸯影院| 国产成人精品一区二三区熟女 | 亚洲一区二区精品视频| 成人精品视频一区二区三区不卡| 国产激情з∠视频一区二区 | 精品成人一区二区三区四区| 精品视频在线观看你懂的一区| 国产a∨精品一区二区三区不卡| 一区二区三区视频在线观看| 一区二区三区视频| 无码人妻精品一区二| 另类一区二区三区| 老熟妇高潮一区二区三区|