日韩小视频-日韩久久一区二区三区-日韩久久一级毛片-日韩久久久精品中文字幕-国产精品亚洲精品影院-国产精品亚洲欧美云霸高清

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

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

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

本篇UI教程跟大家分享如何設計一枚旋轉風格的開關按鈕,主體由灰白色組成,簡單漂亮,想學UI設計的同學就跟著練習一下吧。

我們來看看最終效果:

UI圖標,設計旋轉開關UI圖標教程
www.16xx8.com

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

UI圖標,設計旋轉開關UI圖標教程

步驟一:

首先新建畫布1000px*1000px畫布,命名為播放圖標,為其添加漸變疊加圖層樣式。

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

步驟二:

我們最先來繪制底座吧,使用圓角矩形工具、繪制一個500px*500px圓角半徑90px的底座,并為它添加圖層樣式。

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

步驟三:

高逼格的底座一下就出來了,有木有!!!現在來繪制下裝飾部分,繪制兩個360px的正圓,將填充數值都設置為0。

UI圖標,設計旋轉開關UI圖標教程

步驟四:

現在為裝飾圓添加不同的描邊效果,并將多余的線條利用選區框選出來,在圖層蒙版遮中填充黑色。

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

步驟五:

現在選擇直線段工具,長度20px,粗細4px,并復制為加號移動到合適位置,添加OFF文字Adobe 黑體 Std R,字體大小20點顏色#a0a0a0。

UI圖標,設計旋轉開關UI圖標教程

步驟六:

現在我們來繪制內部圓,繼續使用橢圓工具、繪制一個290px*290px的正圓,并為它添加圖層樣式。

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

步驟七:

現在我們來繪制圓環,繪制兩個正圓大小分別為200x,180px的正圓,將倆個合并為一個形狀層,選擇路徑選擇工具選擇內圓,減去頂層形狀,并添加圖層樣式。

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

步驟八:

繼續使用橢圓工具,繪制一個180px*180px的正圓,并添加圖層樣式。

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

步驟九:

現在我們來繪制一下最后的小圓吧,繪制一個20px*20px的正圓,并添加圖層樣式。

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

步驟十:

就剩高光部分了哦,繪制一個大小為180px的正圓,將填充設置為0,添加圖層樣式吧。

UI圖標,設計旋轉開關UI圖標教程

UI圖標,設計旋轉開關UI圖標教程

本篇UI圖標設計教程到這里就完整結束了,大家跟著做,應該能做出來。

標簽全棧UI筆記,UI圖標,ps網頁設計,開關圖標,開關UI圖標

相關下載

查看所有評論+

網友評論

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

公眾號

主站蜘蛛池模板: 12至16末成年毛片视频 | 亚洲午夜国产精品 | 亚洲在线播放 | 欧美一级在线 | 中国做爰国产精品视频 | 亚洲视频在线免费看 | 久草视频在线资源站 | 国产在线观看高清精品 | 亚色网址 | 无内丝袜透明在线播放 | 一级毛片在线视频 | 色视频在线观看免费 | 在线看免费观看韩国特黄一级 | 欧美精品99| 国产三级做爰高清视频a | 一色屋色费精品视频在线看 | 成人毛片免费在线观看 | 亚洲一级黄色毛片 | 国产亚洲精品一区二区在线观看 | 国产一区亚洲二区三区毛片 | 91久热 | 久久亚洲精品国产精品777777 | 久久久久久久久久久96av | 国产精品9 | 国产网站免费在线观看 | 国产一级小视频 | 三级黄色在线播放 | 久久精品国产一区二区 | 久久道| 一级特黄aa大片欧美网站 | 国产日本三级欧美三级妇三级四 | 黄影院 | 欧美一区二区三区久久久人妖 | 国产精品免费大片 | 久久精品视频16 | 免费成年人视频网站 | 国产成人一区二区三区精品久久 | 午夜无遮挡怕怕怕免费视频 | 国产一区二区在线播放 | 黄色免费在线观看视频 | 成人毛片免费 |