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

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

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > 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圖標

相關下載

查看所有評論+

網友評論

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

公眾號

主站蜘蛛池模板: 一区二区三区免费视频网站 | 在线视频一区二区三区 | 一级一级毛片免费播放 | 日韩一区二区三区不卡视频 | 欧美精品国产一区二区三区 | 久久免费手机视频 | 国产农村乱子伦精品视频 | 国产精品久久久久久网站 | 亚洲欧美一区二区三区不卡 | 日韩精品视频免费在线观看 | 男女男精品视频免费观看 | 欧美精品专区免费观看 | 国产成人福利美女观看视频 | 久草久草久草 | 成人三级做爰在线观看男女 | 草草影院国产第一页 | 亚洲欧美激情在线 | 中文成人在线视频 | 欧美视频精品在线观看 | 国内精品视频九九九九 | 久久久久网站 | 秘书高跟黑色丝袜国产91在线 | 国产一区二区三区日韩欧美 | 欧美成人做性视频在线播放 | 在线观看成年人免费视频 | 中文字幕亚洲精品 | 欧美精品网址 | 国产一区成人 | 国产成人a一在线观看 | 97国产大学生情侣11在线视频 | 免费看a级毛片 | 亚洲国产精品成人综合久久久 | 成人午夜两性视频免费看 | 手机看片1024精品国产 | 性欧美巨大 | 亚洲精品综合久久中文字幕 | 国产成人久久精品激情91 | 国产美女高清一级a毛片 | 成人亚洲在线 | 亚洲成人高清在线 | a毛片全部播放免费视频完整18 |