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

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

軟件下載吧

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

相關下載

查看所有評論+

網友評論

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

公眾號

主站蜘蛛池模板: 亚洲一区日韩一区欧美一区a | 性8sex亚洲区入口 | 国产精品成人aaaaa网站 | 成人精品国产亚洲 | 色噜噜亚洲男人的天堂 | 最新日韩欧美不卡一二三区 | 欧美色v| 寡妇野外啪啪一区二区 | 三级com | www.欧美在线观看 | 18在线网站 | 国产成人免费午夜性视频 | 加勒比日本 | 久久精品免费播放 | 九九精品在线视频 | 国产精品系列在线一区 | 日本特黄特色免费大片 | 成人精品亚洲 | 免费一级成人毛片 | 欧美午夜精品久久久久免费视 | 美女一级毛片毛片在线播放 | 日本www在线视频 | 老鸭窝 国产 精品 91 | 成人免费精品视频 | 亚洲成人在线视频网站 | 又黄又免费的网站 | 最新欧美一级视频 | 最新亚洲人成网站在线影院 | 武松大战潘金莲三级在线 | 日韩欧美精品综合一区二区三区 | 超薄肉色丝袜精品足j福利 超级乱淫视频aⅴ播放视频 | 怡红院在线观看在线视频 | 日韩毛片欧美一级a网站 | 日韩美一区二区三区 | 精品国产成人a区在线观看 精品国产成人a在线观看 | 国产成人免费片在线视频观看 | 日韩精品视频美在线精品视频 | 91香蕉成人免费高清网站 | 在线成人免费 | 永久天堂 | 一级特级欧美aaaaa毛片 |