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

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

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > 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白沙发在线 | 亚洲大片免费观看 | 亚洲国产资源 | 日本二区免费一片黄2019 | 国产精品激情丝袜美女 | 久久精品亚瑟全部免费观看 | 精品国产自 | 久久99爰这里有精品国产 | 三级毛片基地 | 99久久香蕉国产线看观香 | 欧美日韩亚洲国产 | 日本免费一区二区三区看片 | 欧美成人免费在线 | 亚洲视频免费在线观看 | 91久久国产口精品久久久久 | 厕拍精品| 色樱桃影院亚洲精品影院 | 在线亚洲精品国产波多野结衣 | 国产一区视频在线 | 未成人做爰视频www 窝窝午夜精品一区二区 | 国产成人91高清精品免费 | 国产三级三级三级 | 欧美一级毛片久久精品 | 久久国产一区二区 | 中文字幕欧美在线观看 | 免费国产成人高清无线看软件 | 国产专区在线 | 久久天天躁综合夜夜黑人鲁色 | 色偷偷成人网免费视频男人的天堂 | 日本一区二区三区在线 视频观看免费 | 精品亚洲一区二区三区 | 色屁屁一区二区三区视频国产 | 黑人巨大交牲老太 | 丰满寡妇一级毛片 | 特级a级毛片 | 在线国产毛片 | 成人毛片在线视频 | 欧美一区二区三区久久综合 | 成人小视频免费 | 久久成人国产精品免费 |